レイアウトの基礎知識-01

前回の私の記事「読みやすい文章にするには」では、フォントやカラーについて少し触れましたが、今回も読みやすいドキュメント作りには欠かせない【レイアウト】について解説したいと思います。

レイアウトとは

まず、レイアウトって何ぞや?という所からご説明しますと、レイアウトとは「配置」して「並べる」ことを言います。写真や図、文字といった要素を正しく配置して並べることで、単純に並べただけのドキュメントよりも情報をすばやく、正確に伝えることができます。レイアウトによって伝わり方は大きく変わりますので、この後の解説を理解していただき、自身のドキュメントがどうあるべきか考えてみてください。

1.視線の動きを考慮する

人の目はある1点を見つめていたとしても、無意識にその周りの情報も見ています。なので、視線の移動距離が長くなるほど疲労感も増していきます。ですので、閲覧者がどのように視線を動かすのかを考慮し、上手に誘導してあげる必要があるのです。

雑誌やちらし、WEBサイトを見るとき、人の視線は基本的には上から下、左から右に流れていきます。大タイトルが一番上にあって、中(小)タイトル、文章や写真と順番に並んでいるのが通常かと思います。その中で、次に進む方向が下なのか右なのかを、はっきりわかるように作る必要がありますね。順序立てて読んでもらえれば理解度も上がります。

02_051216_115824_AM

 

2.近接の原則を知る

近接の原則とは、情報の性質や意味が近い要素を近づけ、関連性の低い要素を離す、という原則です。類似要素はグループ化し、関連の深いグループは近づけ、関係のないグループは離します。グループ間の距離はその情報の関連性を判断する重要な手がかりになります。グループ間を分ける手法としては、距離を離す以外にも、形状を変えたり、色を変えたり、仕切り線を入れるなどの方法もあります。まずはグループ分けがはっきりできているのか確認してください。

下にグループ分けの例を作ってみました。「バナナ」と「くだもの」は同列ではないことが分かりますね。「くだもの」はグループとして使い、下の階層に「ばなな」を入れてみました。その他の要素も同様にします。

スクリーンショット_051216_114135_AM

 

イメージは伝わるでしょうか?ただ羅列するよりもぐっと伝わりやすくなったかと思います。これで何を伝えたいのかはただの例なので不明ですが・・。

個人的にはスイカは果たして野菜で正解なのかが気になるところです。メロンは果物なのに?たしかにスイカを食べると最後の方(皮に近くなっていくと)は野菜っぽい味がしますよね。それはメロンも一緒か。


はいっ、今回はここまで!
続きはまた後日書こうかと思うので、ご興味があればぜひチェックしてください。

« »

コメントは受け付けていません。