なるほどデザイン勉強中②
第二弾です。（継続は力なり）
毎度述べますが、備忘録的なnoteですので悪しからず。
1．今回読んだ本
筒井美希さんの「なるほどデザイン」、引き続き読んでいます。
2．デザインを作る着眼点7つ
デザインの作り方って、決まったルールとかがないんです。
（だから「センスゲー」とか言われることが多いのかなぁ。）
そこで本書では、仕事経験や学びを通じて体系化されていった”気を付けるべきポイント”を、筒井さんなりに説明してくれています。
これを、私なりにまとめてみます。
2.1. 「真に伝えたいのはどっち？」
デザインは、「私が伝えたい量（want）」と「相手に伝わる量（can）」の戦いが常に起きています。
そこで、デザインで伝えたい情報の取捨選択、これが大切になります。
例えば、あるロングコートの紹介ページを作るとき。
この洋服は、以下のような情報を持っています。
・ブランド名は「My Style」
・飽きのこないシンプルなデザイン
・値段は19,800円
・生地の種類や質感
・ボタンやベルトなどのディテール
・着丈、フィット感、見た感じのフォルム
・作り手の想い
この要素たちをざっくり2つにカテゴライズすると、
【お手頃に手に入る】
・ブランド名は「My Style」
・飽きのこないシンプルなデザイン
・値段は19,800円
【品質へのこだわり】
・生地の種類や質感
・ボタンやベルトなどのディテール
・着丈、フィット感、見た感じのフォルム
・作り手の想い
こんな風に分けられます。
この【お手頃に手に入る】【品質へのこだわり】、どっちを伝えたいのかを決めることで、情報の強弱をつける事ができます。
【お手頃に手に入る】
こちらをより伝えたいのなら、価格を大きな文字で書いて、他の細かいディテールは右下に小さく紹介する程度に。
【品質へのこだわり】
こちらをより伝えたいのなら、コートの写真と並列関係で、ディテールの写真も載せることで、”コートの品質”をデザインからアピールすることが可能なのです。
「情報の優先度を整理して、デザインに強弱をつける」
これが1つ目のポイントです。
2.2. 「主役に光を当てる」
デザインの中にいる「主役」を目立たせたい。他の脇役たちに埋れないようにしたい。
そのためには、”光を当てる”必要があります。
”光を当てる”ことで、読み手の目線を主役へ誘導することができ、私たちが伝えたい内容を正確に理解してもらうことができるのです。
デザインを作っている側は、全体のコンテンツを知っているので、その「主役」に目が行くのは自然なこと。
それに対して、初めてコンテンツを見る人にとっては、「何が一番伝えたい内容なのか？」を見た目の情報から感じ取るわけです。
だからこそ、意識して”光を当ててあげる”ことで、読者の目線をきちんと誘導する必要があるのです。
光の当て方としては、
・ 色 → 主役だけ鮮やかな色を、それ以外はグレースケールで。
・サイズ → 主役だけ大きく。画面に占める面積≒重要度といえる。
などがあります。
（他の技もいくつか書かれていますが、続きはぜひ書籍で。）
視覚的に目立たせる技を使って、主役を引き立てる
2つ目のポイントでした。
2.3. 「明朝体は何キャラ？」
人は見た目が9割と言いますよね。
その真の意味、私が推測するに、「その人が身につけている服や持ち物、髪型などが一つ一つ要素となって、その人全体としての雰囲気を形作っている。だからこそ、”ぱっと見の印象＝その人の印象”になる」ってことなのかなと思います。
そしてきっと、デザインも同じなんだろうな〜と。
そう、この法則を利用してみるのです。
「このデザイン、なんかいいな〜」と思ったら、じっくり観察してみる。そして、これを人物に例えるなら誰？と擬人化してみます。
・丸文字で書かれた「おはようございます」という言葉は、小学生の女の子が話してそう
・一行が長くて行間も狭い、明朝体の文字がぎっしり書かれたコンテンツは、大学教授がだらだらと読み上げている文章みたいだな
他にも、具体例挙げるとしたら・・・
上は「一流丸の内OLが語る ”My Style”」
下は「中学生の読モがSeventeenで紹介する ”MyStyle”」
擬人化の違い、伝わりそうですか？（笑）
こんな風に、「こんなデザインはこんな人」というような、自分の中でのキャラクターの引き出しをたくさん作るのです。
そうすることで、デザイン全体が与える印象を上手に作ることができます。
出会ったデザイン達を擬人化して、キャラクターの引き出しを増やす
これが、3つ目のポイントです。
2.4. 「連想ゲーム」
デザインに必要な形、書体、色、質感などの要素は、伝えたいテーマから導かれるのが理想的です。
そのために、言葉の連想ゲームをしてみます。
まずはテーマをじっくり考えてみて、連想される言葉やモノをとにかく書いてみる。
「それはどんな形？雰囲気？匂い？手触り？どんな感情？」
こんな風に、まず考えられるだけの要素を並べてみた後、共通している要素をつなげてみると、デザインの方向性が見えてくるかもしれません。
イメージの世界に浸って、テーマの連想ゲームを繰り広げてみる
これが4つ目のポイントです。
2.5. 「”言葉”と”絵”を行き来する」
コミュニケーションの方法には大きく2種類があると言われています。
・会話や文章といった「言語」
・顔の表情、視線、声のトーンといった「非言語」
これらをデザインに置き換えるのであれば、前者は「文章」、後者は「写真や図」です。
この2つ、読者にはそれぞれどんな印象を与えることができるのか？をきちんと理解して、与えたい印象に添った表現方法を選ぶ必要があります。
デザインにおける「言語コミュニケーション」と「非言語コミュニケーション」が持つ性質を一部だけまとめると、こんなものがあります。
「言語コミュニケーション」
◎ 受け取り方の個人差が比較的少ない
◎ 細かいニュアンスも伝えやすい
△ 伝わるまでに時間がかかる
△ 見た目が窮屈になりがち
「非言語コミュニケーション」
◎ 伝達スピードが速い
◎ 違う言語を使う人にも通じる
△ 色や媒体の制約を受けやすい
△ 伝わる情報があいまい
これらを踏まえて、「このコンテンツは絵を使うべきか、文章で説明すべきか？」を正確に判断することが大切です。
言葉と絵、正確に翻訳できる”使い手”になる
5つ目のポイントでした。
2.6. 「拡大して”見る”」
ざっくり要約すると「細かいところまでこだわろう」ってことです。
注意しなきゃいけないのは、最初からこれをやってはいけない点。
あくまでも最初は、コンテンツの大きな構造や方向性を優先する。そのあと仕上げの段階で、デザインの見方を細かくして、ブラッシュアップを重ねるのです。
「拡大」のこだわり、着眼点を大きく3つに分ける事もできます。
①視覚の解像度を上げる
色、形、書体の種類・選択肢をもっと洗い出してみて、最適なモノを使う。
ex「色を少し明るめにした」「明朝体の太さを変えた」
「吹き出しマークの形を四角から丸に変えた」
②神は細部に宿る
気づかない人もいるかもしれない、ほんの少しの見た目の違いにもこだわる。その小さな調整が積み重なって最適な形が出来上がる。
ex「写真のトリミングを調整した」「見出しの句読点前後の隙間を詰めた」
③見た目で決める
ピクセル単位の調整によって、2つの要素を対称に配置しても、ぱっと見の見た目で左右対称に見えるとは限らない。最後は、データじゃなくて自分の”みた印象”を元に調整をする。
ex「文字列の左揃え、漢字とカタカナで微妙に揃ってない部分を調整した」
最後は、細かいところまで目を配る。見た印象を大切に。
これが、6つ目のポイントです。
2.7.「愛」
デザイナーが持っていたい大切な「愛」、それは2種類あります。
①「内容」への愛
②「届ける相手」への愛
①「内容」への愛
これは、コンテンツの良さを100％届けられるようなデザインを考えるために必要な「愛」です。
デザイナーが作りたい、やりたい表現からスタートすると、コンテンツの魅力が損なわれたデザインになりがち。
コンテンツそのものへの愛があれば、お決まりのパターンに内容を後からはめ込むのではなく、伝えたい内容そのものからデザインを見出すことができる。結果として、内容の良さを犠牲にしない、”良い”デザインが出来るわけです。
②「届ける相手」への愛
これは、デザインを受け取る人の視点を常に大切にするための「愛」です。
言葉にするとごく当たり前かもしれませんが、この気持ちがあってこそ、読者の心にきちんと響く表現をデザインできるのだと思います。
自分のデザインに関わる全ての人やモノを大切にする
これが、7つ目のポイントです。
ーーーーーーーーーー
以上、デザインを作り上げる上での大切なポイント7選でした。
（読んだ書籍はこちらです）