自分はグラフィックデザインあがりのデザイナーですので、専門はこの間まで紙媒体、チラシやパンフレット、ポスター、冊子などいろいろとやっておりました。WEBにまで足を延ばしたところ、だいぶこの「紙媒体」と「デジタル媒体」の違いが身に染みてきたので、覚書までにちょっとご紹介。紙媒体における基本の法則として、人の視線は左上から右上、左下、右下といったようにZ型に流れます。ヨコ型のチラシや雑誌における基本中の基本レイアウトで、これをベースに紙面を組んでいきます。日本人特有のレイアウトで、縦文字を使う場合は右から左へと視線が流れます。Zを倒したような視線の動きがでてきます。日本語というものは縦にも流れるという世界でもまれな特性を持っているので、実は日本人は「縦に流れる構図」にも親しんでいます。いい例が電車の中吊りですね。女性誌の見出しとかがずらっとならんでいるアレです。視線は基本的に「大きいもの」から「小さいもの」へ移動します。このサイズの大幅な変化を「ジャンプ率」といい、写真のサイズ、フォントのサイズ、あるいはその他紙面にある素材すべてに当てはめることができます。一般的にジャンプ率が高いと躍動感が出て、低いと落ち着きを表すといわれています。写真の中に移っている被写体にもジャンプ率は存在し、よりジャンプ率が高い写真はやっぱり躍動感があると感じられる場合が多いですね。ちなみに「大きい」×「大きい」のジャンプ率はゼロです。「小さい」×「小さい」のジャンプ率もゼロです。躍動感が出たり、めだったりするのはあくまでジャンプ率が大きいことがあってこそ。なんでもかんでも大きくすればとりあえず目立つ、ということはまずありません。逆にパーツが大きすぎて読まれない、ということも十分にあります。小さくしとけばおしゃれだろ、ということもまずありません。小さすぎる文字は文字としての役割を果たさず、読まれないだけとなってしまいます。近接の法則ジャンプ率がゼロ、というのは悪い事ばかりではありません。「同じ大きさ」「同じような色」「同じようなレイアウト」は、並べられると自然と次のものへと視線を流してくれる役割を持っています。グリッドなどが使われたデザインがすっきりとしていて見やすいのは、この性質を利用しています。以上タテ型レイアウト4つの要素を無視してレイアウトをすると、すっごいダッサイパンフレットが仕上がります。逆にこの4つをしっかり押さえておけば、見栄えのするものを作ることができます。一友ビルドテックさんのチラシのレイアウト情熱的かつ職人魂溢れる一友ビルドテックさんのご紹介はこちら>まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。WEBにおけるレイアウトの法則Fの法則WEBには大概ヘッダー部分(一番上)のところにメニューがあります。サイトの目次となる部分ですが、これがないサイトとかブログサイトでもない限りまず論外です。人はまずこのメニューを見ます。左上スタート、右上、つまりメニューで一番よくみられるのは左端、ということになります。多くの企業やショップのロゴが左上にあるのはこのためなんですね。法則ではなく鉄則と書きましたが、これはWEBというものが基本的には縦型スクロールだということが根本にあります。ヨコ型もありますが、現在のウェブサイトは九割九分縦型スクロールですね。視線は上から下に流れます。レイアウトの基本は上から下へ、左から右へ「見る」ことには変わりないので、WEBも紙も基本は一緒ですが、WEBの場合は表示する媒体が一定でないことが、レイアウトの難しい部分になります。媒体が違えば当然文字の大きさを変えなければならないし、見やすいように再レイアウトしなおさなければならないし、媒体の限界サイズも視野にいれなければなりません。レスポンシブデザインにおカネがかかってしまうのは、この可変レイアウトを考えて構築しなければならないからだと言えます。最近はスマートフォンが主体ですが、そのサイズはまちまち。タブレットだっていろいろです。言ってしまえばPCのデスクトップだって、今ご覧になっている一種類というわけではございません。すべての人がWEBサイトを閲覧するときにストレスがないよう、必要な情報が整理してある状態、また、WEB管理者が伝えたい情報が効率よく整理されている状態、この二つが合わさって「良いサイト」といえます。ヒートマップを使うとユーザーの視線の誘導がわかりやすく!ヒートマップで「よくクリックされる場所」や「よく閲覧される場所」などをチェックしていくと、そのサイトに来たユーザーがどこに視線を置いて、どんなコンテンツをクリックしているのかわかるようになります。コンテンツ内容によっては、「ここにバナーがあるのは適切なのかな?」と検討する材料にもなりますので、ヒートマップ、おすすめですよぉ。私そろそろミニリュウちゃんに会いたいんですけどどこにいったら会えますかね。都会に出ないとあのハイカラな子には会えないんですかね。この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。インクループ株式会社デザイナー。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。株式会社imacocoe様のWEBサイトを作成させていただきました。Nature様のHPを制作させていただきました!2014-12-5塗装で新築のように!一友ビルドテック様のチラシを制作させていただきました。相模原小・中学生プログラミングコンテスト開催致しました!2016-7-26まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。