デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインを行なう上で、非常重要なアイコン。全て一から制作という方も中にはいらっしゃると思いますが、フリーで使い勝手が良いアイコン集を探しているWEBデザイナーの方は多いのではないでしょうか？そんなWEBデザイナーの為に重宝しそうなのが、今回紹介するpsdでもAiでもPNGでも！WEBデザイナーのための1000のフリーミニアイコン集「Free Mini Icons Pack」です。
1000種類ものアイコンが収録され、対応している形式はなんと、PSD / AI / EPS / PNG / SVG となっており、制作に必要なフォーマットで全てが揃っての配布となっています。
詳しくは以下
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。
CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。
詳しくは以下
2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。
7 Useful Parallax jQuery Plugins
手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から気になったものをピックアップして紹介したいと思います。
シンプルなデザインは簡素と感じられてしまうリスクもありますが、「視認性が高い」「コンテンツの魅力を伝えやすい」などのメリットもあり、最近ではそんなUIを採用したサイト、アプリが増えてきていて、一般化しつつあるように感じます。そこで今回は、シンプルなデザインの食べ物、飲み物のアイコンセット「Food Icons: Free Icon Set」を紹介したいと思います。
一目で分かるアイコンというのは実はとても難しく、特徴を上手く取り入れないと説明的になりすぎてしまったりしますが、このアイコンセットはそのあたり上手く表現し、まとめられていると思います。
Webサイトを制作する上で、ナビゲーションの設計はユーザーが最も触る部分だけに非常に重要な要素の一つであるといえます。同じWebサイトであっても、ナビゲーションの設計が上手く出来ているかどうかでユーザビリティはかなり変わってくるのではないでしょうか。そこで今回は、ナビゲーションのトレンドを多方面から分析した「Up and Coming Navigation Trends」を紹介します。
Lack of navigation – Socket Studios 2013
ナビゲーションを取り払ってしまった例や、コンテンツを見せるために最小限に抑えたもの、全体的な閲覧の流れを作るなど、さまざまに工夫されたナビゲーションの事例が紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
日本のWebサイトでランディングページは訴求ありきで、広告的な表現が強いものが多いのですが、今回紹介するのはシンプルで洗練されたランディングページテンプレート集「40 Beautiful Landing Page Templates」です。
Marketing – SNIPPER Landing page Powered with Rich Snippets | ThemeForest
プロモーションや、コーポレートサイトに活用出来そうなレイアウトなど、さまざまなシーンを想定したものが紹介されています。中でも気になったものをピックアップしましたので下記よりご覧ください。
カメラと一口に言っても様々なものがあり、撮影する手法や構図でできあがる写真は全く違うものになります。その普段とは違う写真を撮影する、又は違うものに見せるためのチュートリアルや、テクニック集をまとめているのが今回紹介する「25 Great Photography Tutorials and Links From Around the Web」です。
ただのレタッチとかではなく、写真の構図的なものから、カメラを自転車に付けて走りながら撮影するなどのアイデアものまで、実に様々なものが集められています。今日はその中からいくつ書きになるものをピックアップして紹介したいと思います。
パワーポイントでデザインの提案やコンペなどで提案書を作る際は特に、デザインにもこだわりたいもの。そんな時に活躍してくれる、パワーポイントを使った資料作りをサポートしてくれるテンプレート「Elegant Presentation Template Pack」を紹介します。
Elegant Presentation Template Pack – Free Design Resources
エレガントな雰囲気が魅力的な全22ページにも及ぶデザイン性の高いpptテンプレートです。
詳しくは以下
(さらに…)
多くの情報をWEBで効率的に見せるのに参考になるのがWEBマガジン、メディア系のデザインどんなデザインがそれに当たるのかというのはなかなか定義が難しいところではありますが、なんとなくの特性の括りはある気がします。
今日紹介するのはWEBデザイン風のWEBサイトを集めたリソースエントリー「25 Outstanding Magazine Style Website Designs」です。様々なデザインが公開されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
詳しくは以下
制作の表現をより豊かにそして便利に使えるphotoshopブラシ。様々な表現のphotoshopブラシがリリースされており、使い方によっては高いクオリティを実現できます。今日紹介するのは様々な表現のphotoshopブラシをまとめたエントリー「34 Super Cool Photoshop Brushes」です。
爆発から、光、植物などなどさまざまな表現のphotoshopブラシが集められています。今日はその中から気になったブラシセットをいくつか紹介したいと思います。
詳しくは以下
イラストレーターを日々使っていても、難しいグラフィック表現を作り出すのはなかなか大変なもの。どんな機能を使ったらよいのか、分からず困ってしまった経験をしたことがあるという方も多いのでは？そんな中今回紹介するのは、本物のようにリアルな質感を表現できるイラストレーターチュートリアルまとめ「Illustrator Tutorials: 26 Amazing Tutorials to Learn Digital Illustration」です。
Video Tutorial: How To Create A Vintage Badge Using Adobe Illustrator | Solopress
イラストレーターのいろんな機能の使い方を覚えながら、クオリティの高い加工を施すことができるチュートリアルが紹介されています。
詳しくは以下
階層式のメニューは直感的に操作でき、どこに何があるか明確なため、ユーザーにとっても分かりやすくユーザビリティに優れたメニューだと思います。今回紹介する「Cross browser flyout menu」はシンプルでクールなCSS階層メニューのサンプルを公開しています。
上記は公開されているメニューの一つで画像を使用したタイプの階層メニューです。「CSS only fly-out menus」の下部からCSSのサンプルと使用画像をダウンロードできるようになっています。
更にもう一つのメニュー
クリエイティブの現場では欠かす事ができないツールの一つphotoshop。今回紹介するのはそんなphotoshopで描くイラストレーションのテクニックを集めたチュートリアル集「30 Advanced Photoshop Illustration Tutorials」です。
写真ベースの加工から、一から描き出したイラストレーションまで幅広いチュートリアルが全部で30個紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
前回WordPressの「WordPressの管理画面のUIを改善してくれるプラグイン「Admin Dropdown Menu」」で管理画面の表示を変更してくれるプラグインを紹介しましたが、今回はWordPressのログイン画面を変更する方法を紹介したいと思います。
変更と言ってもデザインが劇的に変わる物では無く、上記画像のようにカラーバリエーション程度ですが、少しは気分転換になるかと思います。
基本的には「Change Color of Your WordPress Login ~ Webmaster Heaven」からファイルをダウンロードしてWordpressをインストールしたディレクトリにある”wp-admin”フォルダの”images”フォルダへ”login-bkg-tile.gif”と”login-bkg-bottom.gif”をアップロード（ディフォルトのログイン画面をとっておきたい人はバックアップを取ろう。）するだけでWordpressのログイン画面の色を変える事ができます。
色は全部で6色ありますのでお好みで使ってみてください。ログイン画面を変えただけで何かが起きるとは言えませんが、もしかすると気分一新でブログに対する新しいモチベーションが湧いてくるかもしれません。
アイコンの中でも、ミニマルテイストなタイプは、いろいろなデザインに活用でき非常に便利な存在。種類豊富にそろえておけば、心強い味方となってくれます。今回はそんなミニマルデザインなフリーアイコンセット集「20 Free Icon Sets For Minimalistic Designs」を紹介したいと思います。
いろいろなテーマのアイコンが紹介されており、どれもダウンロードしておきたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザイン制作時によく利用される方も多いであろうアイコンは、たくさん素材として持っている程便利に活用できるもの。今回はそんなコレクションに是非加えておきたいフリーアイコンパック8種を紹介した「8 Free Icon Sets for Web Designers」を紹介したいと思います。
（Free download: 200 icons from Inventicons | Webdesigner Depot）
シンプルでフラットなタイプのアイコンが、比較的多数収録されたセットがまとめられています。気になったものをピックアップしてみましたので、以下よりご覧ください。
詳しくは以下
