今：なんだか集中してるね！

 

過去：今Webサイトのデザインを勉強中なんだけど、どこから手をつけていいのかさっぱりなんだよね〜…
全然アイディアが出てこないや>_<

 

今：デザインは確かに最初はしんどかったな〜
トップページだけで何日もかかってた…w
今でもジャンルによってはかなり迷うし。

 

過去：そうなんだ！
そこから、具体的にどうやってスキルを身につけていったの？

 

今：じゃあその頃に意識してたことを自分なりにまとめてみるよ！

 

---

①既存のデザインをPhotoshopゼロから再現してみる
②サイズ・余白の徹底的な調整
③Photoshopのスキルの幅を広げる
④基本的なデザインの原則を覚える
⑤クライアントのゴールを常に意識する
⑥ビジュアルに対してなぜを繰り返す

---

 

①既存のデザインをPhotoshopゼロから再現してみる

 

過去：デザインを考える事がすごく難しいんだよね。誰かのデザインを再現する事が大切なの？

 

今：最初から、ゼロベースでデザインを考えるというのはなかなか難しいと思うんだ。
それはデザインの引き出しがまだ足りてなかったり、部分的に綺麗なパーツをつくってもそれの組み合わせ方がわからなかったりするからなんだ。色とかに関してもそれは言えるんだけどね。
だから、まずは既存の素晴らしいデザインをゼロからPhotoshop上で表現して、いろいろな表現の細部を知り、組み合わせ方を肌で感じていくのがファーストステップ！

 

 

②サイズ・余白の徹底的な調整

 

過去：綺麗に出来るかな・・・
でも、細かいところや組み合わせの勉強にはよさそう！
サイズ・余白の徹底的な調整も大切なの？どうやってやるの？

 

今：これは①をやれば自然と身についていくんだけど、余白や各パーツの調整は見た目以上に大切なんだ。

 

過去：パーツまで調整をしなくちゃならないの？どうして？

 

今：もちろん見た目がズレなく整理されてた方が、最高のデザインにはなるんだけど、
コーディングで実際にサイトを構築していくときにも重要になってくるんだ。
たとえば、もしパーツの幅や余白が1pxでもずれていた場合、floatが効かなかったりしてレイアウトが崩れる原因になってしまう。
自分でコーディングもやる場合は後からカバーできるけど、複数で進めている制作プロジェクトだったりするとコーダー・プログラマーに迷惑がかかっちゃうからね。

 

過去：そうか！パーツはなんとなくで配置をしてはダメんだね！ちゃんと、コーディングの事も考えてずれのないようにピクセル単位で配置していくのか！
最初は忘れそう…しっかり意識しないと！
次は、Photoshopそのもののスキルの話だね！

 

 

③Photoshopのスキルの幅を広げる

 

今：これも①をやりながら身についていくとは思うんだけど、頭の中にいいアイディアや表現したいデザインが豊富に浮かんでくるようになっても、実際にビジュアルで表現できないと、打ち合わせなどでうまく説明できない・伝わらないってことが起こっちゃう。
同時に作業時間もかかってしまうしね。なにより、せっかく頭の中がデザインの引き出しでいっぱいになってるのに、表現できないのは悔しいからね！

 

過去：今それでかなり悔しい思いをしている…w

 

今：同時に、いろいろな表現方法を学んでいくうちに、自分でアレンジができるようになって、デザインの引き出しが増えていくこともあるしね！

 

過去：だから、たくさんのサイトを真似するんだね！photoshopの練習もしつつ、デザインの引き出しも増やせるのか！一石二鳥だね！

 

今：そして最終的には、作業速度もあげていけるといいね！ショートカットをうまくつかったり、アクション機能や整列を覚えて使い慣れていくと、作業速度・生産性も上がっていくよ！ちなみに作業時間が短縮されるといいのは、自分の時間あたりの効率が上がるからなんだ！同じ1時間でも、作業速度が遅ければ60%の仕事しかできないけど、作業速度が速ければ90%の仕事ができるようになる！そうすると最終的には、時間をかけずに仕事量を増やすことができるようになるから、収入が増える！！！

 

過去：それ大事だ！作業速度も大切なんだね。やっぱりたくさん練習しなくちゃ！

 

 

④基本的なデザインの原則を覚える

 

今：ここでちょっと基本的なことに戻るんだけど、実はデザインには、昔から研究されている基本的な原則が幾つも存在するんだ！
例えば、色の使い方。原色を大きな面積で使わないってことや、色のトーン（彩度と明度）を揃えると一体感が出てバランスが整うってことがよく知られている。レイアウトなんかも同じだね、同じ階層の文字（タイトルや小見出し、本文）は、フォントや大きさを揃えるということや、余白を取り方、目立たせる部分とそうじゃない部分のメリハリなど。
こういう原則を覚えて取り入れるだけでも、実はかなりデザインが上達するんだ！

 

過去：へぇ〜！原則なんて何も知らなかったから、今までは自分の好きな色とかカッコイイと思うレイアウトで作ろうとしてたよ！
基本的なデザインの原則を覚える事が大切なんだね。

 

今；有名なところでいくと、『ノンデザイナーズ・デザインブック』がおすすめ！
デザイナーじゃない人に向けて書かれてるけど、それこそ初心者の人にもわかりやすく書かれているからわかりやすいし、
さっきの原則がきれいにまとめられてるんだ！
http://amzn.to/1CXsGKj
『ノンデザイナーズ・デザインブック』

 

過去：初心者の人にもわかりやすいってのが嬉しいね！
でも次のがいまいちわからない。。汗

 

 

⑤クライアントのゴールを常に意識する

 

今：これは、デザインのやり方というよりは、もっと深いところの説明になるんだ。
というのも、そもそもデザインって、既存の問題を解決する手段の一つなんだけど、問題が解決された後の一つのゴールに向かって、あらゆる手段をつかって最短かつ最良のアウトプットができるように目指していくのが大事だと思ってる！
だから、デザインを始まる前の段階で、どんな問題を解決できればいいのか？、アウトプットのゴールはなんなのか？を明確にしておくことが重要なんだ。もちろんデザインの最中も、常にゴールから外れてないか、方向性は合っているかを確認しながらやればベストだね！

 

過去：ゴール？デザインってクライアントの好みの色とか配置を聞いて作ったり、自分の好きなように作るのではないの？

 

今：わかった。じゃあわかりやすく説明するね！例えば、40代女性向けの高級バッグのショッピングサイトを作りたい人がいたら、その商品の歴史や特徴を調べてサイトに最適カラーを選定したり、40代女性がどんな風にサイトをみているのか、目の動きやインターネットの使用頻度も調べて最適なレイアウトを探したり。
そうして見えてきたものが、全てサイトを構築するときの軸になるから、デザインの最中にも軸を忘れずに、自分の主観に囚われていないかを細かくチェックするとこが大事なんだ！

 

過去：そうなんだ！！デザインって自分とかクライアントの好きなように作っているわけじゃなかったんだね！
「なぜ」を繰り返すっていうのはどうゆうこと？

 

 

⑥ビジュアルに対してなぜを繰り返す

 

今：最後だね！これは⑤の項目とも重なるんだけど、デザインをしていると、どうしても最初のころはいいサイトの模倣が多かったりするから、ついつい主観的なデザインになってしまいがちなんだ！だから、インスピレーションでいい感じにデザインが組めたとしても、なんでこのデザインがいいと感じるのかを、なぜを繰り返すことによってあぶり出すことが大事になってくるんだよ！
デザイン1つ1つにクライアントのゴールを達成するためのエッセンスがなければ、どんなビジュアルも意味がなくなってしまうからね！
ちなみに、クライアントのゴールからは外れていないかをチェックする意味でも、この方法は効果的！

 

過去：デザインって実は問題解決だったんだね。そんな風に考えていくなんて知らなかったよ！よし、もっともっと勉強をしてphotoshopもつかいこなすぞ！！！