良いデザインとは?初心者が勉強した4つのデザイン原則の基本

スポンサーリンク
スポンサーリンク
ランドゥ
ランドゥ

これをデザインしてくれませんか?

 下図のような文字列を渡され、突然このように頼まれたあなた。

※ 実在するレポートではありません

あなたがデザインの素人である場合、このレポートの表紙に一体何を加えればデザインとなるのかが分からず、戸惑ってしまいますよね。

 

本記事では、そんなときに役立つデザインの4原則をご紹介します。

 

あなた
あなた

原則!?なんだか難しそう。。

 

僕もデザイン初心者ですので、そのお気持ちはわかります。

しかし、この原則を使うだけで初心者でも見違えるようなデザインが出来るといったら、興味が湧いてきませんか。

 

本記事では僕の忘備録も兼ねて、デザインの4原則の内容を図版を用いながら分かりやすくご紹介していきますね。

 

より詳しくお知りになりたい方は下記の書籍をお読みください。

・ノンデザイナーズ・デザインブック [第4版] (クリックで商品のページへ移ります。)

 

 

それでは、『デザインの4原則』の一覧を先にご紹介します。

 

 

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

 

 

この記事を読み終える頃には、これら4つの原則具体的にイメージし、かつ日常の中で見つけることまでできるようになっているでしょう。

スポンサーリンク

分けるために近づける -『近接』

分けるために近づける -『近接』
近接を適用

まず、1つ目の原則『近接』を適用したデザインをご覧いただきました。

元の画像と比較してどのような違いがあるでしょうか。

どこへ手を加えたか?

元の情報を整理すると、『How to use WordPress』がタイトル、『The blog Introductory course for beginners』がサブタイトル。そして、『Land Do』が著者名、『August 6』が日付ですね。

 

ここで、タイトルとサブタイトルという題名を表す要素を1グループと捉え近接します。(太字にしたのは後述の原則です。)

同様に、著者名と日付も1グループとして近接させ、その間にスぺースを設けることで上記のようなデザインのようになります。

 

完成したデザインを見て、あなたの視線はどう動きましたか?

おそらくタイトルを読み終えた後に1度止まったはずです。近接とは、視線が止まる回数をデザインすることでもあるのです。

改めて『近接』とは

近接の目的は、知覚的・視覚的に組織化すること。

すなわち、関連している情報をグループ化し、関連していない者は遠ざけなくてはなりません。近接は他の原則とあわせて用いる場合が多いですが、1番最初に適用する原則です。

 

また、近接には具体的にこんなメリットもあります。

下記のイベントのポスターを見ると、いくつのプログラムが行われるかがすぐに分かりませんか。

 

 

3つですね。

近接する『~HEADLINE』と書かれている部分が、それに該当する項目だと一目瞭然です。このように内容を読まなくても、項目の数が分かるように同じグループの要素を近づけて配置しましょう。

 

近接とは、情報を分けるために近づけることでした。なんだか哲学的(?)ですね。

中央ぞろえは素人? -『整列』

中央ぞろえは素人? -『整列』
整列を適用

次に、2つ目の原則『整列』を適用したデザインをご覧いただきました。

元の画像と比較してどのような違いがあるでしょうか。

どこへ手を加えたか?

まずパッと見て、中央ぞろえとなっていたデザインが右端へ寄せられたのが分かりますね。これが、『整列』です。

 

整列では上記の右端に見えるようなまっすぐで強い線が求められます。あなたの視線も、この線をなぞるように移動しませんでしたか。

改めて『整列』とは

整列の目的は、視覚的なつながりによって一体性をもたせることです。

先ほどの近接は近づけることで情報を組織化しましたが、整列では力強い線を要素の中に見い出し利用します。

 

初心者の場合は中央ぞろえをやめてみることが整列を実現する第一歩です。

実際、参考書では考えなしに中央ぞろえすることがしきりに否定されていました。

弱い線で、退屈で、洗練されておらず、失敗も少ないため素人がやりがち…などと、ここまで言われるのか、と思わず笑ってしまいました。

それだけ右や左にそろえる勇気が初心者にはない、ということなのでしょう。

 

ただ、フォーマルな感じにしたい、などの意図があって中央ぞろえするのは結構だそうです。これから文字を揃えるときには一旦、目的を考えて整列させるといいですね。

 

フォーマルな中央ぞろえの例
フォーマルな中央ぞろえの例

 

最後に整列の注意点を述べると、同じページでは1種類の揃え方だけを選んでデザインしなくてはなりません。

訓練を積むまでは、右揃えと左揃えを同時に用いるのは難しいことのようですね。

自然を超えさせる -『反復』

本気が必要 -『コントラスト』
『反復』を適用

その次に、3つ目の原則『反復』を適用したデザインをご覧いただきました。

元の画像と比較してどのような違いがあるでしょうか。

どこへ手を加えたか?

『how to use WordPress』『Land do』において、同じフォント、色が繰りかえされているのがお分かりでしょうか。これが、『反復』です。

 

タイトル、サブタイトル…、と上から順に読んでいき、『Land do』まで読んだ後に、再びタイトルへ視線がいきませんでしたか。

このように、タイトルと著者名という切り離された要素をまとめる効果があります。

改めて『反復』とは

反復の目的は、一貫性のあるデザインをつくることです。

具体的には、デザイン上の何か、上記でいえばフォントと色の特徴を作品全体を通して繰り返すことですね。

 

例えば1冊の本を全体を通して眺めると、実現方法が見えてくると思います。

見出しや罫線には全体を通して同じものが用いられていませんか。

こうした反復によって、別々のページを見ても、同じ本の一部だということが分かるというのは効果の一つですね。

 

さらに一歩進んだ反復として、すでにある一貫性を意識的なグラフィックデザインの一部に変えるというものがあります。

例がないと分かりにくい話ですが、例えば下図のパンフレットは、三角の山の図版から着想を得て、全体的に三角の要素反復させたグラフィックデザインとなっています。

 

一歩進んだ反復の例
一歩進んだ反復の例

 

なんとなくデザインしても自然に一貫性が出来ることもありますが、意識的に繰り返せるものならなんでも繰り返し、その自然な状態を超えさせるのが反復なのです。

本気が必要 -『コントラスト』

本気が必要 -『コントラスト』
『コントラスト』を適用

最後に、4つ目の原則『コントラスト』を適用したデザインをご覧いただきました。

元の画像と比較してどのような違いがあるでしょうか。

どこへ手を加えたか?

黒い長方形を加えただけです。この操作だけでタイトルとサブタイトル、著者名と日付が見事に対比されましたね。これが、『コントラスト』です。

 

これまでの原則の中で最も目を引いたのではないでしょうか。先ほどの反復もあわせて用いておりますが、その効果がより強調されていますね。

改めて『コントラスト』とは

コントラストの目的は、ページを面白くすることと、論理の流れをわかりやすくすることです。

ページの中で一番面白いものを見つけて焦点が定めることで、読者を迷わせないデザインとなります。

 

最も簡単な実現方法は書体を使って強調することですが、罫線、色、要素の空き、テクスチャーなど、コントラストを付ける方法は多岐にわたります。

身近なデザインを観察してみると、アイデアは簡単に見つけられると思います。

たとえば下記のポスターは、『夏まつり』がフォントの大きさや色によってそれ以外の要素とコントラストされていますね。

 

身近なコントラストの例

 

さらに、コントラストで大切なことは本気になる事だといいます。

色やサイズに遠慮がちに差を設けるのではなく、同じでないものは本気になって異ならせることが必要ということですね。

デザインと人生の指針

意識の高そうなタイトルですが、参考書には本当にこんな表現がありました。

デザインと人生における指針は『臆病になるな』ということです。

 

整列でとりあえずの中央ぞろえが否定されたり、コントラストで本気の対比が必要といわれたことが思い出されます。

本記事でご紹介した原則大胆に適用してこそ、その効果を発揮するということです。

 

 

最初に提示された文字列がどこか退屈に見えたのは、きっとデザインの勇敢さが足りていなかったから。

この記事を読んでデザインの4原則を具体的にイメージできるようになったあなたは、さっそく、大胆なくらいに歩み始めてみませんか。

 

ランドゥ
ランドゥ

最後までお読みいただき、ありがとうございました。

(文責・ランドゥ)

Webデザインの勉強法の紹介

本記事の図版はAdobeのテンプレートです

 

 

Adobe CCを活用すると、このようなテンプレート無料で用いることが可能です。おトクに使う方法はこの記事でご紹介。

 

コメント