紙のレイアウトとwebのレイアウトの違い

私は現在 Web制作の仕事をして15年以上になりますが、それ以前は印刷業界で働いていたことがあります。 昔のWebは紙のデザインと見た目はさほど変わらないところもあり、紙のデザインの延長として捉えられていましたが、今では明らかにWebと紙のレイアウトは明らかに異なっています。
紙のデザインをそのままWEBに持ってきても大丈夫ということは無く、 何らかの問題が生じることが多いです。私もグラフィックデザインの方からウェブサイトの構築を依頼され、紙ベースのデザインカンプを見ますが、何となくWebのレイアウトとして違和感があるのですが、うまくを説明できずもどかしい思いをしたことが何度もあります。

そんな過去の反省もあり、紙のレイアウトとwebのレイアウトの違いについて改めて検証してみたところ、5つの点において大きく異なることが分かりましたので、紹介させていただきます。

紙のレイアウトとwebのレイアウトの違いは5つ

紙のレイアウトとwebのレイアウトの主な違いは、以下の5つです。

次に、個々の点についての解説していきます。

1.紙はじっくり見るが、webは紙ほどじっくり見ない？！

紙のレイアウトとwebのレイアウトの大きな違いの１つとして、文字の読みやすさが違います。

紙のレイアウトは細かいところまでじっくり見る感じですが、webのレイアウトは紙ほどじっくり見ない傾向があります。私自身もそのように感じますし、何度も読みたい重要な文章に関しては、必ず紙にプリントアウトして読むようにしています。

ユーザビリティの 研究の第一任者である、ヤコブニールセン博士の記事を参考にすると、webには下記の傾向があります。

• ユーザーは紙と比べるとWebの文章を読むのが苦手で 読むスピードもWebより紙の方が早い
• Web ユーザーの79%が 流し読みするので、Web の文章をじっくり読んでいません
• ユーザーは月並みなページの場合、テキストの全体の20%ぐらいしか見ません
• ユーザーの視線は、Fの字の軌跡を描きます

参考：「ニールセン博士のAlertbox」U-site

2.紙のレイアウトは静的で、webのレイアウトは動きがある

紙のレイアウトに動きはありませんが、Webサイトはいろんな形で動きをつけることができます。
例えば 画像のスライダー、タブ切り替え、モーダルウィンドウなどがあり、動きをつけることでユーザーにその部分を注目してもらうことができます。

3.紙のレイアウトは自由、webのレイアウトは制約が多い

紙のレイアウトは、紙面サイズの制約はあるものの、レイアウトはほとんど自由です。
対してWeb のレイアウトは制約が多く、webの特性を理解していないと自由なレイアウトは 難しく、いろんなデバイスに対応したレスポンシブデザインが主流となってからは、より制約が増えてきています。レイアウトの主要なパーツであるボタン、スライダー、タブ、ページネーション、フォームの要素などのカタチはだいたい決まっています。

また、CMSやプログラムを使ってサイトを作成する場合、プログラムで制御する部分に制約が加わります。特異なレイアウトにしようとすると、何とかカタチにすることは出来ても、いざ実装してみると機能的に問題が生じることが多いので、特に注意が必要です。

4.紙のレイアウトは見た目が全て、webのレイアウトはユーザビリティも大事

紙のレイアウトは見た目が全てです。Webのレイアウトは見た目だけでなく、ユーザビリティを考慮しなければいけません。ユーザビリティというと難しく聞こえますが、簡潔に言うと「使いやすさ」のことです 。Web サイトに訪れたユーザーがストレスなく使いやすいサイトであるかということです。
webの制作者なら感覚的に身についているのですが、webの初学者や紙のレイアウトをしている人は多少なりとも戸惑うと思うので、ユーザビリティが向上する基本的な例をいくつか挙げておきます。

• コンテンツ間に適度な余白を入れ見やすくする。
• クリックできるボタンやリンクを分かりやすくする。
• スマホでは要素を大きくし、距離を離します。
• 選択肢を多くしすぎない。
• 最適な文字サイズを使う。文字サイズは最低でも12px、標準16pxです。

5.紙のレイアウトは変化しないが、webのレイアウトは変化する

紙のレイアウトは納品したら終わりです。その後レイアウトが変化するということはありません。
一方 Web のレイアウトは 、サイトを公開後にコンテンツを追加したり、修正変更して行くので終わりがありません。 サイトが無くなるまでずっと更新やメンテナンスをしていく必要があります。

特にトップページは、新たにコンテンツを追加したり、バナーをどんどんが増えたりして、最初のレイアウトから大きくことなる事があるので、ある程度拡張性をもたせたレイアウト構成にしておくと良いでしょう。

まとめ

レスポンシブデザインが普及する前、PC用に固定のレイアウトをしていた時は、紙ベースのカンプを1pxの狂いもなく忠実に再現することが正しい時もありました。しかしレスポンシブデザインが主流となった現在は、PCだけ完璧に見えるのではなく、いろんなデバイスで最適に表示されることを目指すことになっています。

手法が変わってしまったので、紙ベースの固定レイアウトで考えていると問題が起きてしまいます。グラフィックのデザイナーの方が、何となくやってくれるだろうという推測のもとでwebサイトの制作が進んでいたら要注意です。グラフィックのデザイナーの方はサイトのデザインカンプが出来た時点で、webの制作者と打ち合わせをし、現状の問題点をクリアにしないとサイトの制作を進めてはいけません。