「The Non-Designers Design Book」の「4つの原則」でWEBを見てみた

こんにちは。

りゅーそうです。

デザインの本ではあまりにも有名すぎる「ノンデザイナーズブック」を読んでみました。

結論から言うと、デザイナーを目指している人はもちろんですが、エンジニアの人たちもこれくらいのデザインの教養は知っておくべきだなあと言うのを強く感じました。

本書で語られているデザインの「4つの基本原則」を知るだけで、デザインに対する考え方が大きく変化します。

と言うことで、その内容から簡単にみていきましょう！

4つの基本原則

著者であるRobin Williamsさんはデザインにおける重要な4つの原則として、以下の4つをあげています。

近接・整列・反復・コントラスト

詳細は本書を読んでいただきたいのですが、

近接によって、要素を組織化し、魅力的な余白を生み出す。

整列によって、要素を組織化し、視覚的なつながりを持たせる。

反復によって、視覚的な要素を反復するとデザインが一体感を生み出す。

コントラストをはっきりさせることで、面白みがまし、情報を組織化させることができる。

と言うようにデザインを考える上で、重要な考え方を具体的なデザインをみながら、学ぶことができます。デザインの独創性もこのような基礎を知った上で生み出されていると言う記述がとても印象的でした。

この原則について詳しく知りたいと言う方は本を買って読んでみると良いかと思います。

4つの原則を意識しながらWEBをみてみる

本書の中でもおすすめされているのが、上記で述べた4つの原則を意識しながら、様々なデザインをみてみるということです。ぼくはWEBエンジニアを目指しているので、実際にWEBページをみてデザインの練習をしてみたいと思います！

サイトは割とテキトーに選んでます。

1　Universal Business Solutions さん

Universal Business Solutions

元のサイトはリンク先をご覧ください。

①「ノンデザイナーズブック」の中で「中央揃いはベターでとても退屈だ。」とあるが、このサイトはそれをうまく体現できていると感じた。左側にしっかりとした線が見える。左側によったアンバランスな設計に見えるが、左側に整列を感じることができるので、まとまった印象に見える。

また、左側によっていることによって右側にあるスライドが印象的に見える。

②「For Your Well-Being」というをはっきりと大きく表示させることによって、印象を強いものにさせている。また、このしっかりとしたフォントにより、サイトに凛としたイメージを与えている。下に薄いフォントで文字を添えることで、コントラストがよりはっきりと見える上に、要素が近接しているので、情報がはっきりと伝わりやすい。

③フォントが「For Your Wrll-Being」と一致している（反復）。おそらくユーザーはメインテーマと写真をみた後に、この1位という文字に目がいくような設計になっているように感じる。

また、スライドしていくと構成が反復しているのでサイトに一体感が生まれている。

メモ（気が向いたら、気に入ったサイトを追記する。

まとめ

「ノンデザイナーズブック」を読んだだけで、デザインにあまり詳しくない僕でもWEBサイトの見方が大きく変化しました。普段何気なくみていたWEBを見るという行為が「デザインの練習」に変わったような気がしています。

これからもデザインの練習を続けてみます。

皆さんもぜひ「ノンデザイナーズブック」を読んで、デザインに対する見方を鍛えてみてください！

ありがとうございました！

ノンデザイナーズ・デザインブック　［第4版］