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

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

りゅーそう


こんにちは。

りゅーそうです。

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

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

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

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

4つの基本原則

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

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

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


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

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

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

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


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

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


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


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

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

1 Universal Business Solutions さん

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

画像1


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

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

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

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

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


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

まとめ

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

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

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

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




この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
りゅーそう

サポートくださると励みになるので、よろしくお願い致します!サポートは全てプログラミングの勉強に使わせていただきます。またアウトプットして還元します^_^

ありがとうございます!また読んでください^_^
りゅーそう
現在は以下のサイトにて情報発信を行なっています。 当ページのnoteをみて気になった方はぜひ覗いていただけるとありがたいです https://ryusou.dev/