熊本電子ビジネス専門学校

電ビブログ

 

Webデザインの基本原則 「近接、整列、対比、反復」

このエントリーをはてなブックマークに追加

デザインの4原則 - 「近接」「整列」「対比」「反復」

今日は、デザインの基本原則を紹介します。

ワープロやプレゼン資料を作る際にも、この4原則を意識しながら制作すると資料が見違えるように良くなりますので、デザイナー志望の人に限らず是非マスターしてください。

 

目次

 

■近接の原則


A ~ Fは画像です(あえて内容は表示していません)
そこで、左側の「タイトル1」や「タイトル2」は、A ~ Cのどの画像のタイトルか分かりますか?

画像の内容が見えれば判断できると思いますが、
これだけでは、ちょっと判断できませんよね?

近接の原則1


では、次に右側の「タイトル3」や「タイトル4」は、D ~ Fのどの画像のタイトルでしょうか?

こちらは、画像の内容が分からなくても判断できるのではないでしょうか?
これが良いデザインと悪いデザインの違いです。

近接の原則は、関係ある情報は近づけて配置し、関係ない情報は遠ざけて配置するというルールです。
画像と文字を近づけることで、人は直感的にグループ化し関係ある情報だと認識します。

近接の原則2


だから右側のデザインは、内容が分からなくても直感的に判断できますが、
左側のデザインは、内容が分からないと判断できないのです。

デザインについて学んだことがないと、つい余白を詰めてしまいがちになります。
「余白=ムダ」という意識が働くのだと思います。、

しかし、デザインの基本原則を知ってしまえば、「余白=ムダ」ではなくなります。
そして、これはワープロで作る文書やパワーポイントで作るスライドでも同じです。

ちょっとした余白のとり方で見た目だけでなく伝わり方も変わります!
近接の原則」ぜひ活用してください!

 

 

■整列の原則


今度は、整列の原則です。

名刺風に2パターン作ってみましたが、左右どちらが分かりやすいですか?

整列の原則の例

ここで左と言われると「・・・」ですが(汗)
右の方がスッキリして見やすくないですか?

 

 

整列の原則の例

左はあえてバラバラに配置しましたが、右は赤のラインに揃えて配置しました。
こうやって一本の線に揃えるだけでもスッキリと見えます。

また、配置する位置だけでなくフォントや色などについても揃えることで統一感が生まれます。

 

グリッドシステム実際は、グリッドシステムといって格子状の見えない線を活用してデザインします。 縦横に整列して配置できるため、統一感のあるデザインが作れます。

グリッドシステムとは
レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。

はてなキーワード

グラフィック系のソフトでは実際のデザインには反映されないラインを表示するガイド機能がありますので積極的に活用しましょう。ワープロなどでは整列機能がありますので、それらを使うと良いと思います。 

 

 

■対比の原則


整列の原則は「揃える」ことで意味が生まれましたが、対比の原則は揃えないことで意味が発生します。コントラストをはっきりさせるということです。

対比の原則

上の画像は、左右全く同じ内容ですが、右側は見出しの文字サイズやフォントを変更していますので、見出しの内容が一瞬で目に入ってきます。

この様にコントラストをハッキリさせる方が対比の効果が出やすくなります。

新聞は、見出しの文字がデカデカと大きくしてあったり反転表示などして目立つようにしてあるので、興味のある部分だけを拾って読むことができますが、もし新聞の文字サイズが全部本文の文字サイズだったらどうでしょう? 

この見出しと本文の文字サイズの比率のことをジャンプ率といいます。新聞は見出しの文字サイズが大きく本文の文字サイズが小さいのでジャンプ率は高いと言えます。逆にジャンプ率を低くすると落ち着いた感じが得られ、クールなデザインにしたい場合は、ジャンプ率を低くします。 

 

■反復の原則


反復の原則は、分かりやすくいえば「繰り返す」ということです。

近接の原則、整列の原則、対比の原則を使ってデザインのパターンを作成したら、そのパターンを繰り返します。

下の画像は、本校の学科のページですが学科ごとにイメージカラー違っているものの、デザインは同じパターンを繰り返しています。 この様に同じパターンを繰り返すことでリズムが生まれ視覚的に整った印象になります。

反復の原則

ブログの記事一覧やネットショップの商品一覧なども同じレイアウトの繰返しです。
Webサイトだけでなく、あらゆるところでデザインの4原則が使われています。 

デザイン現場だけでなく、ワープロで作る資料やパワーポイントで作るスライドでも効果を発揮しますので是非活用してください。

 

このエントリーをはてなブックマークに追加

 

今回は、デザインの4原則について簡単に説明しました。
ITビジネス科では、様々なサイトを作りながらデザインの4原則を学んでいきます。

ITビジネス科ネットショップ制作課題

学生たちのWeb制作

  • Web情報
  • Posted by 大西