第二回では、Webサイトを具体的にイメージできる設計図として、「サイトマップ」「ワイヤーフレーム」「ディレクトリマップ」について説明しました。これらがしっかり準備できれば、今回はいよいよWebのデザインについて考えていきます。ここでよく比較されるのが印刷物（いわゆるDTP）のデザインとの違いです。印刷物とWebサイト、具体的にどれだけ異なるか、比較しながら1つずつ解説していきます。

フィジカルとデジタルで異なるデザイン

　"フィジカル"な印刷物と"デジタル"なWebサイトにおいて、まず目的や成果が異なります。カタログやチラシなどの印刷物は、印刷物そのものの仕上がりや全体的な見た目における伝わりやすさが求められます。一方、モニターやスマートフォンで見るWebサイトは、上から下へ読み込んでいく読みやすさや順番、それに加えて操作性やスピード（もたつかない）なども求められます。情報の多いものであればあるほど、印刷物では制限のあるサイズ内に情報が詰め込まれますが、Webサイトではページにおける長さの制限が無い代わりに、より文字の大きさや余白、必要なところに必要な情報だけを見せるシンプルさが工夫として必要です。
　印刷物とWebサイトにおける使い勝手、いわゆるユーザビリティにおいても求められる要望が異なります。印刷物の紙媒体においては、求められたデザインやイメージにどれだけ近づけるかが優先されます。一方、Webサイトのようなデジタルツールは、デザインだけでなくユーザビリティも重視されるため、よりエンドユーザーがどのような使い方、見方、行動をとるかまで意識する必要があります。情報をエンドユーザーに伝える上では同じ役割に思われますが、必要とされるタイミング、シナリオやステージ、最終的に求める成果は違っているということをデザインでも考慮したうえで取り組む必要がありそうです。

Webデザインにおけるデザインの要素

　印刷物もWebサイトも、デザインの要素としては同じなのですが、その要素ごとには少しずつ違いがありますので具体的に確認していきます。
　まずはサイズですが、サイズの単位が違います。印刷物ではmm（ミリメートル）が基本的ですが、Webサイトではpx（ピクセル）です。印刷物は縦横ともに制限がありますが、Webサイトの場合は幅のみの制限となります。またアートボードの幅、コンテンツを見せる幅も考慮する必要があり、そのトレンドにもちょっとずつ変化が見られます。どういう設定にするかは、実際にどういったスクリーン（画面）がよく使われているかをStatCounter（https://gs.statcounter.com/）などで統計的に把握しておくとよいでしょう。
　次にコンテンツのレイアウトですが、視線が異なります。印刷物ではいわゆるZ視線といわれる"斜め読み"をされやすいです。印刷物の長所でもあるのですが、一目で全体像を見られるため、デザイン全体のレイアウトそのものが重視されます。一方、WebサイトではF視線といわれる"順番読み"となります。上から下にスクロールさせて要所を見て、必要に応じて具体的に読むといった視線になります。全体像よりはどうしてもファーストビューを重視されます。このような視線であることから、印刷物ではメリハリや強弱をつけた、自由度の高い練り上げられたデザインレイアウトを表現できますが、Webサイトのデザインとしては、視線的には特殊で複雑なレイアウトは避けられる傾向にあります。
　その次に、色についてですが、印刷物とWebサイトとでは仕組みそのものが異なります。印刷物はCMYKを組み合わせて色を表現する減法混色の方法です。色を重ねるごとに暗くなり、全てを混ぜると黒あるいは黒に近い色となります。一方、WebサイトなどのデジタルではRGBを組み合わせて色を表現する加法混色の方法です。減法混色とは逆で、加法混色は色を重ねるごとに明るくなり全てが重なると白くなります。発色方式が根本的に仕組みが異なることと、特にデジタルの場合はその画面（モニター等）の性能により左右されることがありますので注意が必要です。 　その他にも画像やフォントにも違いがあります。画像においては、どうしてもデジタル表示は大きく粗く見える傾向となります。どちらも点（ドット）で構成されていますが、その細やかさは印刷のほうがはるかに微細です。また、フォントにおいても、デジタル表示では環境に依存されることと、こまかな改行、こまかなカーニング（文字ごとの字間）調整などはできません。これらのような制約があるので、Webデザインのさまざまな特性を把握しておかなければなりません。

Webデザイン特有のチェックポイント

　印刷物と大きく異なる点として、Webサイトは動的なコンテンツであるということです。動的であるがゆえ、知っておきたいチェックポイントがいくつかあります。
　まず、Webサイトはエンドユーザーからアクションできるため、そのアクションに対する反応を加えることができます。例えば、矢印をボタンのうえに置く（マウスオーバーさせる）ことで、デザインを異なるものにして表示を置き換えたり、あるいは入力フォームに条件と異なる入力をしてしまったことでエラー表示を分かりやすく示したりすることができます。
　あと、Webサイトに表示されるテキストによる文字表示においては、ブラウザの表示設定や操作により如何様にも変更されます。ブラウザの種類によっても異なるし、PCやスマートフォンによっても変わります。その際、表示枠に応じたテキスト表示が想定通りにされているかどうかを確認します。基本的には表示枠からはみ出さない設定とし、はみ出した際には回り込むような設定になっているかどうかです。これは、様々なデバイスを想定して動作確認することが、一番確実なチェック方法になります。
　その他にも、例えば画像を多用しすぎていないか、テキストと画像とのバランスが保てているか、Webサイトでは重要となるSEOを考慮したキーワード配置が適切に行われているか、適切なタグでコーディングされているか等、単純にデザイン以外のところでも注意しなければならない点が多いです。

---

　このように、一言でデザインといえど、Webデザインは機能的な役割をしっかり意識されたものでないといけません。Webサイトにおける成果は、デジタルがゆえ全てデータとなって収集しやすくなっています。Webデザインと求めるべき成果が直結してこそ、はじめて本来求められるべきWebサイトとなるのです。

（株式会社フジプラス）

Webサイト制作の基礎知識④へつづく