記事の詳細

この間コンビニの前にギャロップがいてリアルに悲鳴を上げて周囲に変な視線を向けられました。ジムのシャワーズちゃんたちの強さにおののきながらよく歩く日々です。こんにちは。健康っていいですね。

 

自分はグラフィックデザインあがりのデザイナーですので、専門はこの間まで紙媒体、チラシやパンフレット、ポスター、冊子などいろいろとやっておりました。

WEBにまで足を延ばしたところ、だいぶこの「紙媒体」と「デジタル媒体」の違いが身に染みてきたので、覚書までにちょっとご紹介。

 

チラシやパンフレットにおけるレイアウトの法則

Zの法則

レイアウトについて

紙媒体における基本の法則として、人の視線は左上から右上、左下、右下といったようにZ型に流れます。ヨコ型のチラシや雑誌における基本中の基本レイアウトで、これをベースに紙面を組んでいきます。

タテ型レイアウトの法則

レイアウトについて

日本人特有のレイアウトで、縦文字を使う場合は右から左へと視線が流れます。このときは右上から右下、左上、左下、と、Zを倒したような視線の動きがでてきます。

日本語というものは縦にも流れるという世界でもまれな特性を持っているので、実は日本人は「縦に流れる構図」にも親しんでいます。

いい例が電車の中吊りですね。女性誌の見出しとかがずらっとならんでいるアレです。

ジャンプ率の法則

レイアウトについて

視線は基本的に「大きいもの」から「小さいもの」へ移動します。このサイズの大幅な変化を「ジャンプ率」といい、写真のサイズ、フォントのサイズ、あるいはその他紙面にある素材すべてに当てはめることができます。

一般的にジャンプ率が高いと躍動感が出て、低いと落ち着きを表すといわれています。

写真の中に移っている被写体にもジャンプ率は存在し、よりジャンプ率が高い写真はやっぱり躍動感があると感じられる場合が多いですね。

 

ちなみに「大きい」×「大きい」のジャンプ率はゼロです。当然、「小さい」×「小さい」のジャンプ率もゼロです。

躍動感が出たり、めだったりするのはあくまでジャンプ率が大きいことがあってこそ。なんでもかんでも大きくすればとりあえず目立つ、ということはまずありません。逆にパーツが大きすぎて読まれない、ということも十分にあります。

まあ小さくしとけばおしゃれだろ、ということもまずありません。小さすぎる文字は文字としての役割を果たさず、読まれないだけとなってしまいます。

 

近接の法則

レイアウトについて

ジャンプ率がゼロ、というのは悪い事ばかりではありません。「同じ大きさ」「同じような色」「同じようなレイアウト」は、並べられると自然と次のものへと視線を流してくれる役割を持っています。グリッドなどが使われたデザインがすっきりとしていて見やすいのは、この性質を利用しています。

以上タテ型レイアウト4つの要素を無視してレイアウトをすると、すっごいダッサイパンフレットが仕上がります。逆にこの4つをしっかり押さえておけば、見栄えのするものを作ることができます。

一友ビルドテックさんのチラシのレイアウト

レイアウトについて

レイアウトについて

レイアウトについて

情熱的かつ職人魂溢れる一友ビルドテックさんのご紹介はこちら

まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。

 

 

WEBにおけるレイアウトの法則

Fの法則

レイアウトについて

WEBには大概ヘッダー部分(一番上)のところにメニューがあります。サイトの目次となる部分ですが、これがないサイトとかブログサイトでもない限りまず論外です。

なので、人はまずこのメニューを見ます。左上スタート、右上、つまりメニューで一番よくみられるのは左端、ということになります。

多くの企業やショップのロゴが左上にあるのはこのためなんですね。

タテ型レイアウトの鉄則

レイアウトについて

法則ではなく鉄則と書きましたが、これはWEBというものが基本的には縦型スクロールだということが根本にあります。ヨコ型もありますが、現在のウェブサイトは九割九分縦型スクロールですね。なので、必ず視線は上から下に流れます。

 

レイアウトの基本は上から下へ、左から右へ

「見る」ことには変わりないので、WEBも紙も基本は一緒ですが、WEBの場合は表示する媒体が一定でないことが、レイアウトの難しい部分になります。媒体が違えば当然文字の大きさを変えなければならないし、見やすいように再レイアウトしなおさなければならないし、媒体の限界サイズも視野にいれなければなりません。

レスポンシブデザインにおカネがかかってしまうのは、この可変レイアウトを考えて構築しなければならないからだと言えます。

 

最近はスマートフォンが主体ですが、そのサイズはまちまち。タブレットだっていろいろです。言ってしまえばPCのデスクトップだって、今ご覧になっている一種類というわけではございません。すべての人がWEBサイトを閲覧するときにストレスがないよう、必要な情報が整理してある状態、また、WEB管理者が伝えたい情報が効率よく整理されている状態、この二つが合わさって「良いサイト」といえます。

 

ヒートマップを使うとユーザーの視線の誘導がわかりやすく!

ヒートマップで「よくクリックされる場所」や「よく閲覧される場所」などをチェックしていくと、そのサイトに来たユーザーがどこに視線を置いて、どんなコンテンツをクリックしているのかわかるようになります。

コンテンツ内容によっては、「ここにバナーがあるのは適切なのかな?」と検討する材料にもなりますので、ヒートマップ、おすすめですよぉ。

 

3分でカラーミーにヒートマップ導入

ユーザーの動きが一目瞭然!無料で使えるヒートマップ「UserHeat」

 

 

私そろそろミニリュウちゃんに会いたいんですけどどこにいったら会えますかね。

やはり都会に出ないとあのハイカラな子には会えないんですかね。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る