2015年06月27日

Webデザインメモ

デザインを自分のものにする方法。~サイトデザインのストックのススメ~

今週は、よかもん市場・よかとこ旅行券のサイト公開への準備に追われいました。
寝不足がつづく一週間でしたが、よかもん市場、よかとこ旅行券のサイトは6月26日に公開されました!

さて、デザイナーがサイトデザインを制作する際、まずワイヤー(骨組み)から描きはじめると思います。
その際、構成を1から作り出そうとしていませんか?
特に新人のころは、構成を最初から自分で考えようとしてしまいがち。
ですが、それだと時間がいくらあっても足りなくなります!それよりも、世の中にある良いサイトをたくさん見て、「このデザインがいい」「このデザインは使える」というポイントをストックしたほうが、仕事もはかどる上、デザインのスキルアップにつながりますよ。

では、どのようにサイトをストックすればよいでしょうか。
今回は、私が行っている方法を紹介しようと思います。

1)「サイトまとめ」のサイトをブックマーク!
まずは、世の中にあふれている良いサイト・きれいなサイトをかき集めます。
しかし、片っ端から集めようとすると、時間がかかってしまいます。
そんなときは、「サイトまとめ」を多いに活用しましょう。
webデザインまとめサイトで有名なのは、
「muuuuu」ですね。
この他にもまとめサイトはいろいろ転がっているで、検索してみてください。

2)キャプチャをして、データをまとめる
まとめサイトからや、自分で見つけてきたいいサイトは、キャプチャでとってまとめましょう。
Chromeユーザなら、拡張機能の「Awesome Screenshot App」がおすすめ。
ブラウザの画面キャプチャを撮影することができます。

3)サイトを模写し、なぜいいと思ったかメモする。
サイトをまとめたら、自分のものにするために手を使いましょう。
A.ノートに手描きする。
手描きの場合は、ワイヤーのようにざっくりと。どこにどんな要素があるか分かる程度でOK。
このときに、サイト名、どの部分が良いと思ったかをメモをしましょう。あとで見返したときに便利です。
B.パソコンで模写する。
キャプチャしておいたサイトは、PhotoshopかFireworksを使って上からなぞるように模写します。
要素の振り分け方、色の使い方、テクスチャの乗せ方、ボタンの大きさ、文字間・文字サイズまで学べることがたくさん発見できます。

以上です。
サイトを見つけたときに、漠然と見るのではなく、
「なぜ、いいと思ったのか」を考える癖がつくようになりました。
ただなんとなくかっこいいサイトをつくるのではなく、ユーザがつかやすいものを作っていきましょう!