紙とweb、デザイン時の「違い」 その2

31/05/16

DS部のHです。

 前回、単位や解像度といった基本的な部分の違いについて記事を書きました。今回もその続きです。

 紙媒体はA4ならA4の決まったサイズ内でレイアウトをすることになりますが、webは画面をスクロールすることができるため縦の長さはいくらでも伸ばせます。その代わりに全体を見ることが難しいです。また、「文字と画像を重ねる」、「文字を斜めにする」、「画像を重ねる」等といった、紙では簡単にできることがwebでは大変だったり、できなかったりします。ソースコードも複雑になりページの読み込みも遅くなり、、、webでは複雑なレイアウトにして良いことは少ないように思います。
 webの場合はその仕様上難しいレイアウトでも、紙媒体なら大きさの制約こそありますが自由にレイアウトで
きます。
 レイアウトに拘って作成できるのは紙媒体のデザインかなあと思います(あくまで私見ですが…)

◆視線移動の違い
 紙媒体はZ型、WEBはF型に視線移動すると言われています。ZとFの違いは縦の視線移動です。

undefined


 Z型…斜め読みのこと。視線が左上から始まり、右上に水平移動、その後左下に斜めに移動し、最後に右下へ。紙媒体などレイアウト領域が決められている場合、全体を把握をするためにZ型の視線移動になります。

 F型…左上から右に目線が移動するのは同じですが、その後最初に見た左上の場所から少し下に移動し、また右に移動する、という「F」の動きになります。前述したように、webは情報が縦(下)に増えていきます。無意識に画面の下へ視線が移動します。

 webの場合はスペースが余ったからといって情報を右や左に詰め込んでレイアウトしてしまうと、縦に誘導された視線のせいで、軽く流し見されてしまったり、視界に入ってくれない場合もあります。
 見ている人に「なんだか読みにくいなあ」と思われないように、紙とwebの特性に合わせ、視線移動を使い分けたレイアウトをすることが大切かなと思います。