デザインはゲシュタルトの法則でグループ化が有効!綺麗な演出は「コントラスト」と「揃える」で決まる!

デザインはゲシュタルトの法則でグループ化が有効!コントラストと揃えるで綺麗な演出方法とは?画像

デザインの見た目を良くするにはゲシュタルトの法則を利用したグループ化やコントラストを意識した内容の強弱が必要です。

その中で揃えるという細かな作業は、人が持っている本能や本質的な部分を利用する方法です。だからこそ「揃える」ということが見た目を左右するのです。この記事では「グループ化」「コントラスト」「揃える」をどのように使っていくと良いのかを掘り下げて書いています。

初心者やデザイナーを目指す方に役立つ情報であれば幸いです。

ゲシュタルトの法則を使ったグループ化接近効果を使おう!

ゲシュタルトの法則?それは情報のグループ化!

ゲシュタルトの法則とは「同じ形をしたものや近くにあるもの同士を1つのまとまりとして人は認識する。」ことを言います。

個人差はありますが、人は無意識にのうちにこれらを1つのまとまりとして認識しています。これは人間がもっている本能や本質的なところの1つです。反面、まとまりがない配置や効果である場合、人はグループとして認識しにくい状態になります。活用の仕方としては、同一グループや、類似要素同士を1つのまとまりとして配置して、余白をおいて別の情報や要素を離して配置すると良いです。

デザインを行う上でゲシュタルトの法則を上手に利用すると読み手にとって情報がわかりやすく、正確に伝えられるようになります。全体から目立つようにしたい箇所がある場合には、まとまっている箇所より切り離して配置することで効果的になります。

入れる情報により近づけて1つのグループとさせたり、見出しやキャッチコピーのように単体で独立した配置にすると良いでしょう。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-1

上図の悪い例では、文字情報と写真情報がそれぞれ独立している状態になります。これでは、読み手にとって目線の行き来が多くなりグループ化しているとは言えません。良い例では、写真と文字情報が近い位置にあり読み手にとって情報が読み取りやすいグループとして成立しています。

デザイン制作の中でグループを成立させると、紙面全体のまとまりがでてきます。

紙面全体のまとまりが発生することで、その内容がわかりやすく直感的に理解できるようになります。ゲシュタルトの法則を利用しない場合は、情報がグループ化されておらず、見た目も悪くなれば、読み手にとってわかりにくい紙面になります。

レイアウト前に制作内容を良く理解しグループを考える!

闇雲にいきなりに制作に着手してはいけません。まずはレイアウト、デザインを行う前に内容を理解したうえで、どのように入れていくか決めていきましょう。

入れる情報を理解して優先順位を決めることが効果的なグループ化方法です。人が本能や本質的にもっている性質をデザイン要素のひとつとして取り入れる際には、それをグループとして成立させ、それを活かすことができるデザインになるようにしましょう。人の脳は優秀ですから性質から外れてしまうと違和感が発生してしまいます。

グループ化のポイントをわかりやすく簡単に説明すると3つのポイントがあります。

  • ポイント1
    似たような意味合い、役割を持つ情報をひとまとめにする。
    似たような情報同士を近くに配置することで、グループ化とします。読み手にとって視覚的に情報を入りやすく認識しやすくなります。
  • ポイント2
    1つのグループに関係性が結びつかない情報を入れない。
    1つのグループを成立させるには、そのグループに関係ない情報はグループに入れるべきではありません。読み手にとって誤解を招く、もしくは伝えたいことがよくわからないグループとなってしまいます。
  • ポイント3
    グループとグループの余白を適度にとること。グループとグループの塊が近い位置に存在すると、グループの切り分けを行った意味がなくなり、読み手にとって見にくい、あまり読みたくならない塊となってしまいます。余白は意識的にとり読みやすくなるようにグループの存在をキープします。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-2

例えば名刺を作成する場合には「会社名情報」、「名前に関係する情報」、「住所や電話等の連絡先情報」の3グループが存在します。1つ1つのグループは、各情報として1つの紙面で主張しなくてはなりません。

上図の悪い例では、「会社名情報」、「名前に関係する情報」、「住所や電話等の連絡先情報」の3グループがそれぞれ独立していないため、異なる要素同士が近いと見た目が悪くなります。また情報の認識がしづらい状態になります。

良い例では、近い要素同士を近づけることを行っています。社名を1グループ、役職名と名前を1グループ、住所や電話等の連絡先を1グループとしそれぞれのグループを離すことで独立した情報となり見た目が良くなります。見た目が良くなるとその分、伝わりやすい情報となるのです。

良くない例としては、言い方は悪いかもしれませんが文字の強弱だけで情報が羅列されているだけでは、デザインもよくありませんし、伝える情報がグループ化されていないため「なんだ?この名刺は?」と疑問をもつことでしょう。

グループ化には他にも方法がありグループ同士を近づけたり、離したりすることは前述で説明していますが、色や形でも類似するものをグループ化することも可能です。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-3

接近効果

上図の左は、近いオブジェクト同士は見た目に同じグループと認識されやすいです。この例では、文字の大小のみでは1グループとしては認識しづらいですが文字と文字を接近させることで1グループとして認識できます。これを「接近効果」と言います。

類似効果

上図の右は、同系色や、同じ形をしたオブジェクトは同じグループとして認識されやすいです。この例では縦に数字の順番が続きますが、横のラインで色分けを行うことでパッと見た瞬間に横のグループとして認識できます。これを「類似効果」と言います。

デザインはゲシュタルトの法則でグループ化が有効!コントラストと揃えるで綺麗な演出方法とは?画像-4

上図の左では、細かなところですが商品写真とそれに付随する文字の間が統一されていないため、1つ1つの商品を見る際にバラバラになっている感じを受けます。この紙面の特性上、グループ化が行われていないと情報が伝わりにくくなります。購買意欲を誘うような見た目とは離れてしまっていることがわかります。

上図の右では、商品写真と文字が統一された感覚を保ちながら1つ1つがグループとして成立しています。整然と並ぶとそこには情報の見やすさや綺麗さを演出でき、尚且つ気持ちを高揚させるような購買意欲を感じさせます。

上図例では、商品が並んで掲載されている紙面ですが複数の写真や文字が混在する場合でも基本は同じです。同系列のオブジェクトや文字を近づけて1グループとして認識できるようにします。

グループにすることで見た目に良いまとまりとなります。反面、グループ化していない例では、写真と文字が離れており何の情報なのか、瞬時に判断がつきません。グループ化する、しないで見た目はとても変わってきます。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-5

上図の左では、メニューという特性から種類というカテゴリがありますが文字の接近効果が使われていないことと、タイトル部分のジャンル表記が小さいため何を表現したいのかよくわからない状態になっています。

上図の右では、タイトル部分のジャンル表記がしっかりとされており何が掲載されているのか明確にわかります。そのうえで各カテゴリが接近効果によってグループ化されているため明確にどのようなメニューか瞬時にわかります。

文字のみでデザインするメニュー表は同じカテゴリでグループ化するとカテゴリの切り分けとして強調されます。これはグループ化することで関連性が増すためそのように見えるのです。

これが全て同じ文字の大きさでグループ化されていないと、どこからどこまでがどのようなメニューなのか瞬時に判断できず、読み手にとって不便なものでしかありません。文字のみのデザインでも情報を読み取り文字の強弱とグループ化でシンプルでありながらとても見やすい仕上がりになります。

シンプルな方法ですが、印刷デザインを行ううえでは雑誌や広告などのタイトル、キャッチにも使われる手法ですので利用頻度も多いです。

ゲシュタルトの法則を利用した具体例を見よう!

例えば商品の写真が幾つか載っているが途中でジャンルが分かれるような紙面もあります。カタログ等がそれにあたります。

カタログでは商品写真に商品説明と金額が1つのグループと考えます。これで1商品のグループはできあがりますので、同じカテゴリになる商品も同様に作業することができます。次のカテゴリに進む場合は、カテゴリとカテゴリの余白をとることでカテゴリを切り分けることができます。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-6

また商品が1ページ内に2列や3列表示するときには、商品の高さを揃える、文字部分の高さを揃えるといった細かいところまで調整すると良いです。全体的に見たときに整然と綺麗に商品が並ぶ紙面ができます。

揃えるとデザインは整然とした美しさを出せる!

ずれると見た目のデザインは悪くなる。

一言に揃えるとは何なのかと言いますと、文章を左に揃えるや画像を縦に揃えることを指しますが、グループ化した複数を揃えて配置することも挙げられます。

揃えるはデザインをするうえで日々使うものですが、揃える量が多いと面倒に感じてしまうこともあります。面倒に感じると揃える箇所がそろっていないなど思わぬ所で粗がでてしまいますので注意しましょう。

細かいことになりますがグループを構成する作業でも揃えると言う操作は付きものです。揃えると見た目に綺麗な仕上がりになります。揃えるは揃えるでもカテゴリが違うものまで同一な揃え方をしてしまうと情報としてのグループ化が崩れてしまいますので、適度な余白を入れてから揃えるなどの工夫が必要です。

前述のゲシュタルトの法則を利用した具体例の図を見て頂くとわかるように、揃えると言うことはそれだけ「見た目を左右する」ことなのです。

人は整然と規則正しく揃っていると綺麗だと本能的に感じます。

似た要素を揃えることを基本として文字や写真等を揃えていくと良いでしょう。揃えるということは、読み手が「まとまり」があると自然に認識できます。まずは揃えると言うことを基本としてデザイン要素であえて揃えずに動きがあるように表現することもできますが、基本の揃えることを理解したうえで行いましょう。少しのズレでも人は気になるものです。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-7

上図の左では、文字情報の位置がずれてしまっていることと写真スペースが文字のボックスより大きくなっていることで見た目が整っていないように見えてしまっています。少しのずれが見た目を悪くしています。上図の右では、碁盤の目のように綺麗にそろっているため整然とした綺麗な見た目になり、可読性も上がっています。

例えば車運転される方であれば、駐車場の白線内に他の車が駐車されていても斜めになっていたり、白線内のどちらかに寄っていたりすると「もう少し中央に駐車して欲しいな」と思うことと一緒で紙面でも「揃っていたらいいのに」と思います。

このように思うということは紙面に違和感が発生していると言うことです。揃えるというのは基本ではありますが、徹底することで整然とした綺麗な仕上がりになります。

揃えるってどこを揃えると良いの?

揃える箇所は紙面の中にはいくつも存在します。例えば文章や写真、画像類を左揃え、右揃え、中央揃え等ありますが、各グループ間の余白を揃えることも揃えるのひとつです。

揃える方法としては補助線を使った制作を行うと良いでしょう。

文字や写真等を揃える方法の1つとして「基準線を引く」というやり方があります。これは制作ソフトウェアのイラストレーターであればガイドに相当します。

私はイラストレーターを使用していますが、私の場合はガイドの機能は使わずにレイヤーに「補助線」というレイヤー名称をつけて必要に応じて補助線の色を黒にしたり赤にしたりして画面上で見やすくしています。実際の印刷では印刷しない線を使って揃えることをしています。

作成方法は以下の手順です。

  1. 基準になるオブジェクト(文字や写真)の上下左右と中央に揃えるための補助線を引きます。
  2. 補助線に沿って文字や写真を配置します。
  3. 配置した文字を基準に新たな補助線を作成します。
  4. 文字に作成した補助線に合わせて、他の文字を配置します。このとき写真下から文字までの余白と文字から次の文字までの余白を揃えます。
  5. 補助線を基準に文字や写真を配置してくと綺麗に揃うため、読み手にとっては見えない線で揃えられているように見え整然とした綺麗な仕上がりになります。

デザインはゲシュタルトの法則でグループ化が有効!コントラストと揃えるで綺麗な演出方法とは?画像-8

補助線は必ずしも縦横だけではなく斜めの補助線を使用することもあります。縦横の補助線同様に斜めにも補助線を使用すると揃えやすくなりデザインの安定感がでてきます。斜めを使うことで動きのある紙面を演出できます。

揃える方法としてグリッドを使うことも有効ですが、グリッドは1つ1つのレイアウト・デザイン要素を紙面全体の作りに合わせていくために使用しますので、グループ化した塊を揃えて並べていくと捉えましょう。グリッドを使うことも「揃える」ということのひとつです。

グリッドについては以下のページも参照してみてください。

「紙面デザインのバランスはレイアウト基本にあり!そのポイントとは!?」

揃えるということは、表面上だけみると文字や写真だけと思ってしまいますが、余白や紙面の基本レイアウトに沿わせることも揃えることなのです。

揃えるための実際のテクニックとは?

揃える要素は必ずしも四角のように揃えやすいものばかりではありません。

印刷デザインを行う上で写真の切り抜きや画像切り抜き、何かの形をしたイラスト等形状はさまざまあります。形状が異なるものを揃えるのは印刷デザインでは比較的多いです。このことなる形状を揃えるには、写真や図柄の面積が左右でどれくらい差があるのか見て見ましょう。

異なる形状を揃えるには面積の比率によって手動で揃える方法が一番です。

これを判断する例えですが「やじろべえ」というものをご存じでしょうか。やじろべえは均衡を保って立つには重心の中心点があり均衡点が存在しないと立つことはできません。これと同じような考え方で、写真やイラストも目で見たときに面積の中心点をどこらへんなのかを探し均衡点と言われる左右の重量や面積が同一になる点を探しましょう。

デザインはゲシュタルトの法則でグループ化が有効!コントラストと揃えるで綺麗な演出方法とは?画像-14

上図の左は、中心点のままでも均衡点になりそうですが、上図の右は、やや右下がバランスが良いと感じます。

デザインはゲシュタルトの法則でグループ化が有効!コントラストと揃えるで綺麗な演出方法とは?画像-15

上図では縦のラインで並べています。上図の左は、中心点で中央揃えにしています。見た目も悪くはありません。しかし、上図の右は、均衡点を使って中央揃えにしています。中心点で中央揃えにするよりも見た目の安定感が増しています。均衡点を使用した並べ方はソフトウェアの機能で実現できるわけではありません。人の目で見て手動で調整します。

上図例では縦並びの均衡点で並べるとバランスが良くなりますが、縦並びや横並び、使用する形状によって中心点が良いか、もしくは均衡点が良いか判断することが望ましいです。

異なる形状以外にも写真であれば被写体の大きさを揃えることや画像類や図柄の大きさを揃えることも大切です。細かなことを言えば、見出しなどで四角囲みの中に文字を入れる場合等も左右や上下の中央に揃えることも忘れないようにしましょう。

デザインではたくさん揃える箇所があります、たくさんあると言うことはそれだけ基本であると言うことです。反面、揃える箇所が揃っていないと「手を抜いた」と思われてしまいます。

デザインにはコントラストを使うと魅力的にできる!

紙面デザインのコントラストとは対比させる手法!

コントラストと言う言葉はよく風景を見たときにいいなと思った時、「コントラストがいいね」という言葉を使うことがあります。また、画像処理を行う際にコントラスト調整という効果でも使う言葉ですが、ここで使う意味合いとしては「紙面の中に強弱をつける」ということです。

紙面でコントラストを上手に使うと魅力的に仕上がるデザインになります。「紙面の中に強弱をつける」ということは入れる情報に強調したい箇所とそうではない箇所があり区別するということです。一言で言うと「対比させる」と言うことです。コントラスト(対比)をする方法には以下の方法があります。

  1. 文字の大小の対比
  2. 写真や画像と文字の対比
  3. 色への対比
  4. 情報が集中する箇所と余白の対比

情報の目的に応じて対比させると役割がはっきりとするためメリハリのついた紙面になります。メリハリがあると読み手に情報が伝わりやすくなります。情報が伝わりやすい紙面ということは、見た目の出来映えも良いことだと思います。

コントラストの設定方法とは!?

コントラストの設定方法は、メリハリをつけるということです。例えば紙面上に微妙な差の円を2つ書いたとします。それを第三者が見て「こっちより、あっちが大きいかな?」「あっちより、こっちが大きいかな?」と言うような間違い探し程度の差ではコントラストとは言えません。はっきりと「こちら大きい」とわかるくらいの差が必要です。

明確な差をつけることで紙面にメリハリをつけることで情報が伝わりやすくなります。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-9

コントラストはグラフィカルに飾り付けるデザインだけに使用するのもではなく、文字だけの書類でも使うことができます。

普段何気なく作成している文章書類であっても上図例のようにタイトルや見出しに違いを付けていくことで、読み手は情報を理解しやすくなります。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-10

上図の左は、決して悪い作りではないです。タイトルは大きくしているポイントが少し見た目をよくしているが、下部の文章に強弱がないため可読性が下がっています。

上図の右は、タイトルは図の左と同じように大きくしていますが、白抜きを使いタイトルを引き立たせています。その分、内容文章の見出しも少し大きくし文章との差別化をすることでメリハリが出てきます。可能であれば例のように色付けもできると可読性があがり、魅力的な紙面になります。

強調したい箇所とそうではない箇所を切り分けると見た目にわかりやすくなります。また見栄えの良い紙面になります。

コントラストの強弱についてデザイン上ではジャンプ率という言い方をしています。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-11

上図の左側2つは紙面全体を見たときのジャンプ率になります。紙面全体にどれくらいの面積で文字や写真、画像類が使用されているかを表しています。左側の「ジャンプ率が小さい」紙面は文字や写真の面積が少ないです。右側の「ジャンプ率が大きい」紙面は文字や写真の面積が多いです。紙面のジャンプ率が大きい程、訴求効果が高いです。小さいと落ち着いたイメージやブランドなどの高級感の紙面になります。

次に上図右側の上側と下側2つは、印刷デザインで多く利用される「文字のジャンプ率」になります。

チラシや雑誌の見出しなどデザインするうえで文字の大小は必ず生まれるものです。入れる情報の「基本となる本分の大きさ」に対する「タイトルや見出し、キャッチ」の大きさの比率を「文字のジャンプ率」といいます。

上図の右に文字だけのレイアウトが上下にあります。2つとも同じ内容ですが、上部ではタイトルとキャッチ、内容文章の文字の強弱があまりないため、見た目に寂しい印象になっています。「文字のジャンプ率が小さい」です。

下部では、タイトルを1番大きくし他要素との差を大きくしたことで見た目のインパクトがあります。「文字のジャンプ率が大きい」ということです。

紙面の入る情報量や役割によって適切な「差をつける」ことでコントラストをつけていきます。コントラストがあると読み手は自然に大きな部分から小さな部分に読み進めることが可能になります。

紙面の演出を強くしたい場合にはタイトルや見出し、キャッチを大きく設定することで文字のジャンプ率を大きくすると良いでしょう。ジャンプ率が大きいと読み手は、その紙面をパッと見るだけで情報が伝わりやすくなります。

紙面を落ち着いて見て欲しい場合は、ジャンプ率を小さくしていくと良いでしょう。その際、入れる情報に対して文字が読みやすい書体を選ぶことも大切です。もうひとつは、書体の違いによるコントラストの差を付けていくことも良いでしょう。

コントラストを意識したデザイン例を見よう!

コントラストが大きい紙面では、視線が自然と誘導される作りになります。

紙面全体のイメージで何を伝えたいのかメリハリがあるデザインになります。主にチラシや雑誌の表紙、POPで利用すると良いでしょう。ひとことで言うと「インパクト」がある作りになります。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-12

コントラストが小さい紙面では高級感や上品、知的といった信頼感が感じ取れる作りになります。比較的内容を読んでもらいたいカタログやDM、メニューなどに使うと良いでしょう。

デザインにはゲシュタルトの法則を利用したグループ化!コントラストを意識しながら揃える方法とは!画像-13

文字のジャンプ率の視覚効果は、人が発声する声の大きさだと思って良いでしょう。

気持ちや想いを伝えるには声の力強さや大きさ等の抑揚をつけて話すように文字にも大きさや太さ、色や書体など変更しながらデザインをすると良いです。

書体も同じシリーズで太さが違うファミリー書体がある場合は太い書体と細い書体を使用して構成すると見た目に綺麗なデザインを演出できると思います。

ゲシュタルトの法則とグループ化、コントラストを調整しながらデザインを揃えるまとめ

  • ゲシュタルトの法則を理解し同一情報をグループ化していく。
  • コントラストは入れる情報の対比で見た目を調整する。
  • デザインではあらゆるところを揃えることで見た目を綺麗にする。

初心者やこれからデザイナーを目指す方は、入れる情報の整理をグループ化という手法をとって行くことが良いです。

まずは入れる情報のカテゴリはなにか?入れる情報量はどれくらいなのか?整理していくと次にコントラストはどこで付けていくと良いのかもわかるようになってきます。紙面のコンセプトに沿ってジャンプ率を設定していくと仕上がりも美しいものとなります。

私は初心者の頃、このようなことは意識せず「とにかくデザイン制作する」ということでデザインを進めてきましたが、当然このような行動だけでは上手くいかないことが多く発生していました。

そこには人が本来備わっている本能や本質的な部分を良く理解していないため、お客様とのミスマッチが発生していたことに気が付きました。人は本能や本質的な部分は大きく変わることはないため、ゲシュタルトの法則を利用したグループ化やコントラスト、揃えるというデザインの基本ルールを利用することがデザインの良い仕上がりにつながります。

自分の知識として意識的に取り入れると普段のデザインに活かすことが可能になります。このように感性だけで行うことがデザインというわけではなく、ルールに沿ったデザインが世の中には多いのではないかと思います。

シェアする

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

フォローする