webデザイナーの平尾誠です。
新米webデザイナーが良いデザインを作るのに必要なポイントをまとめました。
結論は下記のツイートの通りです。
新米Webデザイナーが良いデザインを作る
・真似る
・目線は左から右へ
・読み飛ばされる覚悟と見出し強化
・立体的に見えるようにする
・モノクロにして見る
・7:2:1で色を使う
・#000は黒すぎてしんどい
・クライアントと雑談できるようになる
・アナリティクス見る階層を作るようにすればいいね
— 平尾誠@arutega (@Makopontass) 2019年2月26日
目次をみて”わかってるわ！”ってなったらもう読む必要もないかと思います。
知っている or 知らないだけで変わるので、もし知らないことがあれば注意してみてください。
初心者Webデザイナーが良いデザインをつくるために気をつけること9つ
真似る
真似ましょう。そしてただ真似るだけではなく、いいデザインが”なぜ”いいのかを考えましょう。
もっともっと言語化していきましょう。
デザインは閃いたり、降りてくるものでは有りません。
真似ていつでも簡単に引き出せるようにデザインパターンをライブラリとして貯めてください。
目線は左から右へ動く
人間には元来、無意識に心地良かったり、好きだと感じるものがあります。
これを”アーキタイプ”と呼びます。
この考え方に沿ってwebデザインでは人間の自然な目線の動きに沿って、コンテンツをレイアウトします。
物語で例えると、貧乏な少年がお姫様を救うタイプのサクセスストーリーなどがこれです。
みんな無意識的にこのパターンが好きです。
ディズニー映画はほとんどこれに当たります。
webではトリッキーなデザインは好まれません。
人間の動作の原則に合わせて作ります。
例えば、ロゴが一番左上にあるのは、無意識にこれが誰のサイトかがわかるようにするためです。
読み飛ばされる覚悟と見出し強化
スクロールで読み飛ばされることを前提にデザインしてください。
小説などとは違い、最初から全部読みません。
見出しだけ読んで内容がわかるようにしておきましょう。
このブログもそのつもりで書いています。
立体的に見えるようにする
立体的にドロップシャドウをかけろということでは有りません。
最初に目に飛び込んでくるべき情報と、手を伸ばしてからわかる情報を区別しましょうということです。
情報に階層を作れば、自ずとそうなりますが、やはり不慣れなうちはどうしても平面的になりがちです。
モノクロにして見る
一度デザインをモノクロにしてみましょう。
写真や背景の彩度が高すぎたりすると、黒の面積がとても多くなります。
その場合は周りの空間と合わせて可読性が担保されているか確かめてくださいね。
メリハリがつかない場合はこのパターンが多いです。
7:2:1で色を使う
あくまで目安です。
スーパーデザイナーはたくさんの色をうるさくしないようにレイアウトできます。
でも僕はスーパーデザイナーでは決してないので、3色か4色に忠実に守っています。
オシャレと同じで、たくさん色を使えば使うほど難しくなります。
上下の服が同じ色なら、面積の少ない帽子やスニーカーに差し色を入れますよね？
#000は黒すぎてしんどい
文字の色や背景色が#000ってあまりみないですよ。強すぎるんですよね。
経験上、濃い黒でも#111で、文字の色は#333を使うことが一番多いです。
クライアントと雑談できるようになる
クライアントの情報をヒアリングしていると、全てが大切な情報に思えてきます。
クライアントが何を一番不安に抱えているかをヒアリングできるかは、フトコロに飛び込んでしまうしかないのではないでしょうか。
アナリティクス見る
成果を気にしましょう。
ページビューが上がっているか、ヒートマップを見て全部読まれているかです。
もっと言えば売り上げは上がったのかです。
これはフリーランスならなおさら、あなたのデザインの価値を決めます。
あなたのデザイン料金が高くても、大きな価値を出せれば誰も文句は言いませんよ。
参考になる書籍
有名な二冊を置いておきます。
どちらも簡単に読める本。
たまーに読み返せるようにこういった本は手元に置いておきたい。
まとめ：新米Webデザイナーが良いデザインをつくるまでに必要なことは多くない
そこまで多くはないですよね。
気をつければ済むことがとても多いように思います。
知っているか or 知らないかだけで済むことが多いですね。
それでは４月から新卒のデザイナーの方たちを応援しています。
ほなね
