【2020.11月更新！】デザイン初心者必須！参考にしたい役立つおすすめ情報9選

『デザインをしているけど、本当に成長しているかわからない』
『うぅ〜どうすればいいの〜ドラえもん〜』

『はい、劇薬タッチペン〜これを飲めば何でもデザインできちゃうよ！』
『すご〜い！ただの壁が方眼紙に見える！すぐにデザインが浮かぶよ！
これさえあれば、デザイン楽勝じゃないか？でもお高いんでしょう？』

いえ、お高くはないです。なぜなら、そんなのは売っていません。

・・・・・

こんにちは、トレンドにはすぐに便乗します。
最近はWEBデザインを考える機会が多くなりました。
今回はデザイン右も左も分からないままデザイン会社に入ったのですが、プロの現場を見るだけでなく、最初の期間に何を参考にして学習したか、をお伝えします。

・・・・・

1.審美眼について

デザイン会社では"審美眼" という言葉を教わりました。

「審美眼」とは、「美を識別する能力」のことを意味する言葉なのですが、外見的な見た目の美しさだけを指して使われるだけでなく、その言葉が指しているものや事象の「本当の真の価値を見極めて正しく評価することができる目」という解釈ができます。

デザインは見た目だけではないです。
これは良く耳にすること言葉だと思います。
例えば、Saas系サービスによく見るイラストやHPサイトの色使いなど、いつの時代も読者にとって見やすいサイトが好まれます。

ただ、今回お話することは、ただデザインをするということが、いかに危ないかというお話です。

2.デザインについて

WEBデザインを考えた時にあなたが思い浮かべるデザインは何でしょう？
白の背景に黒のテキストカラーでシンプルに、トップに動画を配置し興味をそそりスクロールをしてもらうなどでしょうか？

それももちろん大事です！

ただ、枠組みや見せ方は後からでも考えることができますし、お客様の要望によっては後日修正をすることは往々にしてよくあることだと思います。

なにせ私自身がまず手をつけ出したのは、見た目をどうするかでした。
ここが落とし穴だったとも知らず・・・

その後はというと、お察しの通りです。
訪れた人が最初に見るポイントで興味を引いたとしても、その後に残るものが何一つない。
改善を求めようと第三者に意見を求めるが、『特に問題はないんじゃない？』という、サイトに特徴がないという問題点。
そして極めつけは、サイトを改善しようにも何から手をつければ良いか分からないというジレンマ。

・・・・・

何がダメだったのか、トレンドっぽいイラストは受け入れられないのか、そんなことばかり気にしていました。

そんなある日、机を買うために、久しぶりに楽天市場を開きました。
その時です。

『うわー何これ、なんか見にくなったな。頭疲れるな』

『自社サイトの値段も見とくか』
『え！！自社サイト良い感じ、必要な情報もシンプルに書いてる』

・・・・・

なぜ、自社サイトが良いと思ったのか。
理由は、情報がシンプルで商品を主役にした作りであったからです。
裏側では徹底したヒアリングから生まれたデザインであるということがわかりました。
その会社、商品に対してのイメージを崩さない色使い、配色、文体、さらにイメージを増幅させるような波長の合うデザインをしていました。


そういった構成のデザインだからこそ、文章にも目がいき届き、どれをとってももっと見たいと思ました。

・・・・・

そのデザインを見た人がどう思うか？
どう行動をうつすのか？
なぜ、この色にしたのか？
なぜ、このフォントを選んだのか？
なぜ、その配置にしたのか？
なぜ、綺麗に見えるのか？

また、web分析の観点も含めると
なぜ、そのボタンにしたのか？
なぜ、そのボタンの色にしたのか？

お客様とヒアリングを重ね、上手にプランニングにまで落とし込む。

実際にデザイン本をいくら読んでも、
ここは実務でしか磨けないので、成長を感じれないのかもしれません。

例えば、アートの見方を考えれば "花を見て根っこを見ず"ということが往々にあります。
ピカソの絵を見て、私でも描けるわと思う人は花しか見ていません。
ピカソの絵を見て、多方面から描いた前代アートのストーリーが見える人は根っこを見ています。

時代背景を見て、感情を読み取って考えることで
よりデザインが洗練されたものになります。

しかし、私はデザインをしたことがなかったため、もちろん「なるほどデザイン」や「webデザイン良質見本帳」と参考書も読みました。

ただその時はへぇーと思うんですけど、それ以上の進展はなかったです。

そこで思ったことは
デザインの知識は本で、
デザインのセンスは実践で、
と分けて考える方が良いなと思いました。

3.デザインサイトのご紹介

ここでは、デザインの知識の部分をご紹介します。

①とにかくwebサイトを見る
②とにかくランディングページを見る
③デザインを見て自分の感想を言う練習をする
④色やフォントの勉強をする
⑤練習

①『とにかくwebサイトを見る』
↓参考サイト集
● Pinterest（必須）
● イケサイWEBデザインデータベース
● 81-web.com
● I/O 3000

王道となりますが、このへんでしょうか。
何個も並列しているので、パッと見たときの印象を感じやすいのと
検索もできるので、気になるワードはすぐに検索できます。
随時更新もされているので、トレンドも確認ができる
これで一石三鳥ですね。

②『とにかくランディングページを見る』
↓参考ランディングページ集
● ランディングページ集めました。
● LPアーカイブ

どこが訴求点なのか、ファーストビューポイントが絞られているランディングページを見るのは有効と思います。
構成を重視するなら、コーポレートサイトなどを見た方が良いですが
ユーザー視点を感じたいならランディングページと思います。

③『デザインを見て自分の感想を言う練習をする』
そして、何より少ないページにたくさんの情報があり、綺麗な被写体やイラストが散りばめられているサイトやLPを見た時に、
楽しい雰囲気を感じるのか？
ごちゃごちゃして見にくさを感じるのか？
海外っぽさを感じるのか？

色々感想があると思うので
自分の意見を持っておきましょう。

④『色やフォントの勉強をする』
色の統一やフォントは言うまでもなく、超重要なところですよね！
企業ブランドのカラーに合わせたら企業様と親密度が増したり、
フォントでオシャレ感が出たり、この演出を出すには必要な要素です。

↓色とフォント参考
● WEB色見本 原色大辞典 - HTMLカラーコード
● adobe color
● ためしがき
● Font Awesome
● イラストサイト （Saas系サービスに使えるイラスト）

全てを覚えたりするのは難しいですが、
この時はこれ、この時はこれ、と言うように
ある程度、決めてた方が良いですね。


⑤『練習』
全ての勉強はやってみないとわからないです。
コードが書けるなら、しょうもなくてもwebサイトを1つ作ってみる。
コードが書けないなら、wixとかSTUDIOとかを使ってみる。

やり方は何通りもありますので、挑戦したもん勝ちです。

作り終われば、客観的に見る。
ブランドを崩していないか、商品を主役にできているか、ユーザーにとってストレスフリーな設計か、強弱をつけた文章かなど俯瞰的に見ることが大事だと思います。

徐々に、なんで？って思う事が増えてきたら、
おそらくそれは、本では感じなかった成長だと思います。