レイアウトの基本4 ～「関係性」～｜特集

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

関係性とは

前回の特集で、レイアウトの基本3「近接」について説明しました。
今回は、近接の補足にもなりますが、関係性について説明したいと思います。デザインの面白い所は、感覚的に見ている人に伝える事が出来る点です。熟練したデザイナは感覚的に、近接を理解していますが、近接を意識する際には、関係性を汲み取ると簡単に進められます。近接を行う際には、下記の2点に気をつける事が大切です。

関係している物を近くに置く。
関係していない物は遠ざける。

この2点を注意していれば、ある程度は近接と言うルールに添えると思います。
ただ、作業をしていると「こっちの方が見栄えが良い！」とか「ここのスペースを埋めないと！」と言ったように、ぱっと見た雰囲気で作ってしまう場合も出てきてしまいます。
そんな時に、上記の2点を常に意識しておくと、近接が感覚的に理解出来る様になると思います。

左の画像は、関係しているので近くに置く。
右の画像は、関係していないので、遠くに置く。
近接の際に、この2点に注意してビジュアルや見出しとテキストを作っていくと、近接が感覚的に行えるようになります。
関係を分かりやすくするために、顔を書いて表現を作っています。
次は、顔を消したパターンで見てみましょう。

顔の表情が消えて、左側は意識をせずに見られます。
右の画像は、一つだけ距離があるので、見ている人は「何かがある」とか「何かが起きる」と言った、注意をしたり心構えを取れたり、整列をした物とは違ったニュアンスで受け取る事が出来ます。

具体例を見てみる

ビジュアルでは簡単でしたが、実際に関係性を意識した具体例を見て見ましょう。
フリー素材でサイトを作る～タイトル・見出し編～で使用している画像を見て見ましょう。

左に置かれているアイコンは、ぱっと見て目を引く為に置かれています。置かれているタイトルとは関係があるので、距離を近く置いています。これを遠くに置くとどうなるでしょうか。

何だか余白が多く空いてしまって、リズムが悪いように見えてしまいます。
パッと見た時に、どちらも見られますが、どちらか一つしか目に入りません。
さらに誘導用の文章の場合も同様に考える事が出来ます。

これでは、一つ一つを見ていくのに、ユーザは疲れてしまいます。
感覚的に伝える為には、まとまりを考え、関係を意識するとバランスもよくなってきます。

写真とテキストの具体例

見出しだけではなく、本文で使われる写真やテキストにも言えます。雑誌などをみていると、感覚的に見たいものを読み進める事が出来ます。これに習って、デザインする際には、関係を意識していくと良いと思います。

名刺から関係性を見る

名刺を見てみると、関係性がとても分かりやすく、近接に乗っ取って作られています。関係を意識した近接は、カテゴリー別にわけていけば良い、と言う風に見ても良いかも知れませんね。

まず名前と役職名を近づけているのでこの人はどういう役職なのかというのがすぐわかるようになっています。

次の例をみると英語表記の会社名と日本語表記の会社名を近づけているので「Designare Cafe inc.」と「株式会社デジナーレカフェ」の関係性がわかり、日本語表記にすると「株式会社デジナーレカフェ」だということがわかります。

関連性の強いもの同士を近づけ、カテゴリー別にわけることでより情報がわかりやすくなります。
またカテゴリーごとに見れるので一見してすぐに情報が入ってきます。

まとめ

レイアウトの基本1～整列～でも書いたとおり、まずは揃える事がとても大切です。
ただ揃えるだけではなく、距離を意識した近接。その近接には関係性がある事を意識するととても良くなります。
デザインの基本なので、応用が出来るともっともっと、様々な表現が出来る様になります。最初に表現を考えてしまうよりは、徹底して整列や近接、それらを繰り返す事で私生活での目線がとっても変わります。例えば、レストランに訪れた際のメニュー。ただ選ぶのではなく、整列や近接はどうかな？など、とても勉強になります。街を歩いているだけで、様々なデザインがありますので、色々見ながら歩いてみてください。

記事担当者のコメント

ものとものの関係性を考えながらデザインするだけでも情報が伝わりやすくなりますね。
見栄えだけでなく、関係性も気にしながらデザインしてみて下さい！

« 夏向けイラスト素材

レイアウトの基本 3～「近接」～ »

Designare cafe