『ノンデザイナーズ・デザインブック』で論理的なデザインを

アイキャッチ画像(design-non-designers-design-book)

今回はデザインがテーマです。デザインと言ってもシステム界隈で使われる「設計」という意味ではなく、いわゆる色や形など見た目のデザインのお話です。

世の中にはおしゃれなセンスを持っている方が沢山いらっしゃいますが、私はそういう人たちが羨ましくてしょうがないです。創作活動は好きなので自分で色々と試してはみるのですが、しっくり来るものができたためしがありません笑

ただ普段全く創作活動をしない・好きではないという方でも、デザインすることを強いられる場面があります。資料作成などが良い例でしょう。学生時代に、やたら見やすいパワーポイントのスライドを作っている方が1人は身近にいませんでしたか。

この記事でご紹介する『ノンデザイナーズ・デザインブック』を読めば、センスがなくともそういった分かりやすい資料を作ることができるようになります。私はこの本を在学中、学会発表のポスター作成に備えて購入しましたが、お陰様で学生ポスター賞を受賞することができました。足を向けて寝られない恩本(?)の1つです。


デザインは優しさ

資料のデザインについて触れると「中身がしっかりしていれば、見た目はどうでもよい。」という方がたまにいらっしゃいます。私はこの考えは好きではありません。

もちろん中身が本当にスカスカなのであればそれは問題ですが、中身・見た目(デザイン)の問題は本来別個に考えられるべきだと私は思います。

人が何かを発信するとき、それを受け取る側は大なり小なり時間や体力を消耗します。

仮にあなたの発信する情報が世界的な発見で誰もが喉から手が出るほど欲しており、しかも価値が分かる人にだけ伝わればよいと信じているのであれば、デザインは不要でしょう。文字ベタ打ち、段落がたがたでも全く問題ありません。

しかしあなたがもし、「自分の発信する内容に興味がない人にも伝えたい」「少しでも相手に分かりやすく伝えたい」という気持ちを持っているのであれば、デザインは素晴らしい武器となります。なぜならデザインは情報にメリハリを与え、受け取る側の負担を軽減してくれるからです。

つまり「自分がデザインする手間」でもって「情報を受け取る側の負担」を軽減するという仕組みです。こう考えると「デザインは優しさ」と見ることもできますね。もちろんWin-Winが前提の打算的な"優しさ"ではありますが笑

伝えるためのデザインを学ぶ

大事な点なので確認しておきますが、目的は「おしゃれな作品を作ること」ではなく「受け取り手がなるべくストレスを感じずに理解できる作品を作ること」です。

デザインには芸術としての側面と機能としての側面がありますが、『ノンデザイナーズ・デザインブック』で学ぶことができるのは「機能としてのデザイン」だけです。残念ながら芸術性を高める方法については記載がありませんし、もし何か方法があるのならば私も知りたいのでどなたかぜひ教えてください。

この本では「近接」・「整列」・「反復」・「コントラスト」という4つの原則が紹介されています。たったの4点を押さえただけで見るに堪えなかった資料が一転、すっきりとした資料に大変身する様を豊富な画像と共に堪能することができます。

本当は本を購入して具体例を自分の目で見ていただくのががベストなのですが、重要なコンセプトだけでも知りたいという方のために、簡単な例と共に4原則をご紹介していきます。以下に用意した「レストランの残念過ぎるメニュー」を4原則に従って加工していきましょう。

あまりにもひどいメニューのサンプル

もちろんこのメニューは架空のものです。何料理のお店なのかさっぱりですが……まぁ中身はあまり気にせずご覧ください笑

(1)近接: まとめられる項目は近くに置く

「近接」を適用したメニュー

「近接」は関連のある要素を物理的に近くに置くことです。ただ実際の作業としては、関係のない要素の間に距離を空けるというイメージで行います。上の画像では料理の種類ごとに改行を入れています。これだけで料理のまとまりがパッと見て分かるようになりましたね。

(2)整列: 要素を関連付ける

「整列」を適用したメニュー

「整列」は"見えない線"を意識して、要素を並べることを指します。人間は物を見るとき無意識のうちに"見えない線"を引いており、それに沿って要素が並んでいると関連性を感じるのだそうです。そこで右揃えや左揃えを駆使し、あたかも両脇の線に要素が張り付いているように見せています。

(3)反復: 作品全体を通して一貫した特徴を用意する

「反復」を適用したメニュー

「反復」は作品全体を通して統一感のある装飾を施すことです。1枚のメニューでは表現することが難しいのですが、例えばページによって色味・フォント・要素の並べ方などが変わっていてはいけないということです。また同じレベルの要素は同じ様に装飾するということも「反復」に含まれます。上の例では「サラダ」と「メイン」が同じレベルの要素ですので、装飾のための記号を統一しました。

(4)コントラスト: 異なるものを明確に区別する

「コントラスト」を適用したメニュー

「コントラスト」は関係のないもの同士が似たような装飾にならないようにすることです。上の画像では料理の小分類(肉料理、魚料理など)と料理名が全く同じ装飾(というより無装飾?)となっており、紛らわしいです。そこで小分類を太字にすることで、料理名との違いを明確にしています。


情報の構造を明確化するデザインを心掛ける

『ノンデザイナーズ・デザインブック』では以上の4原則の他にも色やフォントの選び方などが紹介されています。せっかくなので先ほどのメニューに色付けもしてみました。

その他の原則も適用したメニュー

いかがでしょうか。おしゃれかどうかは別として、ストレスなく読めるメニューにはなっていると思います。どこに何が記載されているのかが一目で分かるので、目的の料理を探すのも、値段を確認するのもスムーズにできますね。

すでにお気づきの方もいらっしゃるかとは思いますが、「伝わるデザイン」の肝は情報を上手く構造化することです。今回のメニューのオリジナル版はなかなかにひどいものでしたが、評価できる点もあります。それは情報が構造化されていたということです。極端な例ですがサラダ、メイン、ドリンク、デザートなどがごちゃまぜに記載されていたら、今回の手法は全く通用しません。

逆に言うと構造化さえ適切にできていれば、あとは機械的に4原則にのっとって装飾するだけで、それらしいものを作ることは誰にでもできるのです。

HTML・CSSとの関連

実は今回お話した内容は、Webデザインに関して重要な気付きを与えてくれます。WebデザインといえばCSSというイメージを持たれている方もいるかもしれませんが、「伝わるデザイン」をするためにはHTMLも同じくらい重要なものだということです。

HTMLはよくプログラミング言語と間違えられますが、正確にはマークアップ言語、つまり情報を明示的に構造化するための言語です。HTMLが適当に記述されているWebサイトを小手先のCSSでそれらしくデザインすることも不可能ではありませんが、恐ろしく手間がかかります。

「伝わるデザイン」は「適切に構造化された情報」を前提としている、ということはぜひ心に留めておいてください。

※自由にブログをデザインするための「ブランクテーマ」に関して以前記事を書いたので、興味のある方はぜひご覧ください。

まとめ

情報が構造化されていればデザインの4原則「近接」・「整列」・「反復」・「コントラスト」により、機械的にそれらしいデザインが可能になるというイメージを持っていただけたでしょうか。

『ノンデザイナーズ・デザインブック』では豊富な例とともに詳細な説明がされているので、是非一度ご覧になってみてくださいね