Skip to main content

ノンデザイナーがそれっぽいWebデザインを作る話

camera-desk-earphone-915

この記事は CAMPHOR- Advent Calendar 2014 の10日目の記事です。

こんにちは、みかさ(@To_Mikasa)です。
今日はデザイン初心者である僕が、Photoshopを使ってWebサイトのデザインをしていく上で、「それっぽく」していくためにやったことをざっくり書きたいと思います。ざっくりです。

 

はじめに

デザインの知識を付けたり、流行をキャッチアップするために、コリスPhotoshop Vip
普段から見ています。とても参考になる記事ばかりです。

 

参考にするサイトを探す

ノンデザイナーにとって0からデザインを考えるのはツラかったので、
デザインの参考にするためにイケてるサイトを3個選びました。
自分が作りたいイメージに似たものを選ぶといいかもしれません。
1つだけを参考にするとあれなので、それぞれのいい所や好きな所をそれっぽく組み合わせました。

 

ワイヤーフレームを作る

頭の中で考えていたデザインのイメージを、紙に書いていきました。ワイヤーを作る際は、Cacoo等のツールを使ってもいいと思います。紙かツールかは好みで分かれそうです。

出来上がったワイヤーをもとにPhotoshopでデザインしていくので、
ざっくりとした骨組みだけでいいと思います。

2013051405-03

 

Photoshopを使う準備

ここまできたら、デザインするぞー!となるところですが、
Photoshopそのものの使い方が分からないと先に進めませんよね。
僕は対外向け資料を作るために初めてPhotoshopを使って、ある程度必要な使い方を覚えました。
まずは模写でも何でもいいので、何か作ってみるのが良いと思います!

その際参考にした書籍は「神速 Photoshop[Webデザイン編]」です。Photoshopの環境設定から便利なテクニックまで網羅されています。常に机の上にあるくらいには重宝してます!

 

いよいよデザイン

実際に作っていくとはいっても分からないことだらけでした。

「どんな配色にしたら・・・」
「フォントは何を使えば・・・文字サイズもどうしたら・・・」
「背景に使える綺麗な画像とか持ってない・・・」
「余白は何pxとったらいいの・・・」

上記の様な問題が出てきました。
そこで、解決に役立ったものを紹介していきたいと思います!

 

配色どうする問題

参考になりました!

こういう本も読みたい。

 

フォントどうする問題

フォント選びはどうしたら良いのか難しい・・・。とりあえず参考にするサイトから・・・bow
ヒラギノ角ゴ Proなんかはスタンダードな文字でよく見かけました。英語なんかはGoogle FontsなどのWebフォントでそれっぽいものを使うといい感じ。
PhotoshopでWebフォントを表示させたい時にはweb-font-plug-in
というプラグインが便利です!

フォントサイズに関してはこのサービスが便利でした!

http://type-scale.com/

pxと比を指定するとem単位でフォントサイズを算出してくれます。
自分が適当なサイズでデザインしていくのと、こちらで算出したサイズとでは
けっこう違いが見えてすごかったです!フォントサイズ大事なんだなぁ。

Photoshopでpxを使うときは(自分で計算するのが面倒なので)このサイトでemからpxに変換しました。便利!

http://pxtoem.com/

 

写真素材ない問題

僕はPexelsというサイトから背景に使えそうな画像を見つけてきました!
こちらのサイトは基本ライセンスフリーで綺麗な写真がいっぱいあって助かります。
また、Flickrにある画像をライセンス毎に探せるPicturaというPhotoshopプラグインが便利です!

ライセンスフリーの写真素材に関しては先ほど紹介したPhotoshop Vipでも
多く紹介されています。助かります。

 

余白どうする問題

実際にデザインしていく時に、各要素の間隔、余白をどうしたらいいのか
さっぱり分かりませんでした。
そんな時にかなり参考になった記事がこちら。

http://ameblo.jp/ca-1pixel/entry-11837685575.html

「デザインは8の倍数でできている」という考えのもと、
Webサイトの余白や横幅の最適な値の決め方が紹介されています。

この記事のおかげで、サイトの横幅や各要素のサイズや余白にも迷うことなく、
自分のデザインに集中できました!すばらしい!

 

 おわりに

以上、デザイン初心者ノンデザイナーの僕でも(個人的に)それっぽいと思うWebデザインを完成させることができましたclap

最後になりますが、現在CAMPHOR-ではデザイナーを大募集中です!
CAMPHOR-のエンジニアと一緒に何か作ってみたいというデザイナーの方はお気軽にご連絡ください!!

CAMPHOR- Advent Calendar 2014、明日はryota-kaの担当です。

お楽しみに。

ノンデザイナーがそれっぽいWebデザインを作る話” への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です