この記事は CAMPHOR- Advent Calendar 2014 の10日目の記事です。
こんにちは、みかさ（@To_Mikasa）です。
今日はデザイン初心者である僕が、Photoshopを使ってWebサイトのデザインをしていく上で、「それっぽく」していくためにやったことをざっくり書きたいと思います。ざっくりです。
はじめに
デザインの知識を付けたり、流行をキャッチアップするために、コリスやPhotoshop Vipは
普段から見ています。とても参考になる記事ばかりです。
参考にするサイトを探す
ノンデザイナーにとって０からデザインを考えるのはツラかったので、
デザインの参考にするためにイケてるサイトを３個選びました。
自分が作りたいイメージに似たものを選ぶといいかもしれません。
１つだけを参考にするとあれなので、それぞれのいい所や好きな所をそれっぽく組み合わせました。
ワイヤーフレームを作る
頭の中で考えていたデザインのイメージを、紙に書いていきました。ワイヤーを作る際は、Cacoo等のツールを使ってもいいと思います。紙かツールかは好みで分かれそうです。
出来上がったワイヤーをもとにPhotoshopでデザインしていくので、
ざっくりとした骨組みだけでいいと思います。
Photoshopを使う準備
ここまできたら、デザインするぞー！となるところですが、
Photoshopそのものの使い方が分からないと先に進めませんよね。
僕は対外向け資料を作るために初めてPhotoshopを使って、ある程度必要な使い方を覚えました。
まずは模写でも何でもいいので、何か作ってみるのが良いと思います！
その際参考にした書籍は「神速 Photoshop[Webデザイン編]」です。Photoshopの環境設定から便利なテクニックまで網羅されています。常に机の上にあるくらいには重宝してます！
いよいよデザイン
実際に作っていくとはいっても分からないことだらけでした。
「どんな配色にしたら・・・」
「フォントは何を使えば・・・文字サイズもどうしたら・・・」
「背景に使える綺麗な画像とか持ってない・・・」
「余白は何pxとったらいいの・・・」
上記の様な問題が出てきました。
そこで、解決に役立ったものを紹介していきたいと思います！
配色どうする問題
参考になりました！
こういう本も読みたい。
フォントどうする問題
フォント選びはどうしたら良いのか難しい・・・。とりあえず参考にするサイトから・・・
ヒラギノ角ゴ Proなんかはスタンダードな文字でよく見かけました。英語なんかはGoogle FontsなどのWebフォントでそれっぽいものを使うといい感じ。
PhotoshopでWebフォントを表示させたい時にはweb-font-plug-in
というプラグインが便利です！
フォントサイズに関してはこのサービスが便利でした！
pxと比を指定するとem単位でフォントサイズを算出してくれます。
自分が適当なサイズでデザインしていくのと、こちらで算出したサイズとでは
けっこう違いが見えてすごかったです！フォントサイズ大事なんだなぁ。
Photoshopでpxを使うときは（自分で計算するのが面倒なので）このサイトでemからpxに変換しました。便利！
写真素材ない問題
僕はPexelsというサイトから背景に使えそうな画像を見つけてきました！
こちらのサイトは基本ライセンスフリーで綺麗な写真がいっぱいあって助かります。
また、Flickrにある画像をライセンス毎に探せるPicturaというPhotoshopプラグインが便利です！
ライセンスフリーの写真素材に関しては先ほど紹介したPhotoshop Vipでも
多く紹介されています。助かります。
余白どうする問題
実際にデザインしていく時に、各要素の間隔、余白をどうしたらいいのか
さっぱり分かりませんでした。
そんな時にかなり参考になった記事がこちら。
http://ameblo.jp/ca-1pixel/entry-11837685575.html
「デザインは8の倍数でできている」という考えのもと、
Webサイトの余白や横幅の最適な値の決め方が紹介されています。
この記事のおかげで、サイトの横幅や各要素のサイズや余白にも迷うことなく、
自分のデザインに集中できました！すばらしい！
おわりに
以上、デザイン初心者ノンデザイナーの僕でも（個人的に）それっぽいと思うWebデザインを完成させることができました
最後になりますが、現在CAMPHOR-ではデザイナーを大募集中です！
CAMPHOR-のエンジニアと一緒に何か作ってみたいというデザイナーの方はお気軽にご連絡ください！！
CAMPHOR- Advent Calendar 2014、明日はryota-kaの担当です。
お楽しみに。
2 thoughts to “ノンデザイナーがそれっぽいWebデザインを作る話”