紙とWebの違いについて

2023年 3月16日　Posted　藤野(デザイナー)

紙とWebでは、デザインの基本的なところで共通する部分はありますが、やはり違う部分も多々あります。今回は、紙とWebの違いについて、特に大きな違いをまとめてみたいと思います。

紙とWebの違いと共通点

紙とWebでもっとも違ってくるものは、当たり前ではありますが、紙は実際に存在し、手に取ることができます。対してWebサイトは実物がなく、モニター（デジタル）に映し出されます。そのため紙媒体のデザインでは、印刷方法や紙の種類・加工方法も考えて成果物にします。

Webの場合は、それらを考える必要がない代わりに、ブラウザーなどへ完成したサイトを表示させるためのコーディング（プログラミング言語を使ってソースコードを作成すること）を意識しなくてはいけません。また、ユーザーが行う、「ボタンを押すなどのアクションが手間ではないか？」「押せると認識できるのか？」「飛び先にエラーはないか」など、利便性（アクセシビリティ）を強く考慮する必要があります。その他にも、簡単に別のWebサイトへ移動できるため、ユーザーにとって必要な情報を、どういった順番で、どの程度掲載するのかが、とても重要になります。

紙媒体でも、紙のサイズに制限がある中で、どの情報を印象的に見せるか、どのように情報を整理するのかが大切です。紙とWebの共通点として、情報が効果的にユーザーへ届くように考えることが重要です。

ここからは少し細かく紙とWebの違いについて記載していきたいと思います。

Webサイトの更新

紙媒体は基本的に印刷後に修正ができないため、紙へ刷る前の段階で何重にもチェックするなど、とても慎重に印刷作業までの工程を行います。また、印刷という工程が必ず発生するため、情報発信、ユーザーへの到達までには時間がかかります。

その点、Web上ではすぐに情報の修正が可能なだけでなく、コンテンツの追加や差し替えを比較的簡単に行うことができます。初段階から更新や追加が想定される場合は、その点を考慮して制作することで、より追加作業を行いやすくなりますし、未完成の状態でも一部のコンテンツだけをユーザーに届けることができます。

レイアウトの違い

紙の場合は用紙サイズが決まっており、その範囲内ではさまざまな要素を自由に組み立てることができます。決められた紙に印刷しているため、できあがった制作物は誰が見ても同じレイアウトのものになります。

Webの場合は、画面を下にスクロールすることが可能なため、情報や余白を入れることに制限がありません。文章だけでは分かりにくい情報に対して、写真やグラフをふんだんに取り入れることもできますし、動画の再生もできます。ですが、デスクトップPCやノートPCでモニターのサイズ、解像度、縦横比の違いによって見え方が変わってしまいます。ユーザーが見る環境によってレイアウトが崩れないかを確認して実装する必要があります。また、スマートフォン用のサイトでは、デバイスの画面幅がPCと比べて小さくなり、逆に縦は長くなるため、横に並べていたものを縦に組み直すなどの対応を行います。

そして、基本的なレイアウト方法も異なります。紙の場合は、読む人の視線を考えたZ型のレイアウトがよく用いられます。対してWebの場合は、基本的に縦にスクロールすることが多く、視線移動に沿ったF型のレイアウトが推奨されます。

Webは文字や画像などに動きをつけることができますので、意図してユーザーの目線を動かすことも可能です。

紙は印刷して成果物とするため、複雑なレイアウトも特に問題ありませんが、Webの場合は基本的にソースコードによりレイアウトの表現を行うことが多いですので、あまりにも複雑なレイアウトは、読み込み速度の低下やレイアウト崩れなどのエラーが発生しやすくなります。

色の違い

紙とWebの大きな違いとして、色の表現方法に違いがあります。紙はCMYKで、WebはRGBで色を表現します。紙媒体は、光が物体（紙）に反射してから目に届き、色を認識しますが、RGBを用いるWebでは、モニターから発光する光が直接目に届いて色を認識します。

CMYKとは、「色の三原色」といわれるC（シアン）M（マゼンタ）Y（イエロー）に、K（ブラック）が加わったものです。CMYは混ぜ合わせると色が暗くなっていき、黒に近づいていきます。理論上は黒に近づきますが、インクは完全な色を作り出すことができないため、補色としてK（ブラック）が追加されています。対して、RGBは、「光の三原色」といわれるR（レッド）G（グリーン）B（ブルー）の三つで、混ぜ合わせると段々と色が明るくなり、白に近づいていきます。

紙のものをPCで制作する際は、モニター上と印刷された物とで色が異なることを考慮しなければいけません。使用する紙や印刷機などによっても色が変わってくるため、色校正をし、細かな調整を行います。Webの制作では、画面で見えている色そのままに作ることができますが、ユーザー側のモニター設定や見ている環境（例えば、屋外と屋内）などで、見え方が異なる場合があり、環境による色の違いをある程度配慮・許容しなければなりません。また、RGBによる表現は、CMYKよりも再現できる色が多く、紙に比べて鮮やかな表現をすることができます。

また、よく取り入れられる配色の基本があります。

このような配色について、紙もWebも基本的な配色バランスは共通しています。

情熱的な赤、安心感のある緑……。感じ方は人それぞれですが、色が人に与えるイメージ自体は媒体による違いはなく、共通しているかと思われます。しかし、レイアウトの話にも通じますが、例えば手に取れるサイズのチラシと、縦に長くスクロールするページとでは、見えている範囲が大きく変わってきます。色の面積や余白の使い方などについて、特にバランスの取り方に違いがあるのではないでしょうか。

フォントの違い

紙媒体では、どのフォントを使うか自由に選ぶことができますが、Webの場合は自分で指定したフォントのまま表示されるとは限りません。

Web上でよく使われるテキスト表示方法は、

上記の2種類に大別されます。

元々パソコンなどのデバイスにあるデバイスフォントは表示速度が速く、フォントのライセンスも気にする必要がありません。しかし、デフォルトの状態では種類が少なく、選択肢も限られます。OSやバージョンによっても入っているフォントが違うため、指定したフォントがユーザーの端末にない場合は、別のフォントで表示されてしまいます。

Webフォントは、ライセンス料がかかるものもありますが、選択肢が多く、デザイン性の高いフォントを選択できます。どのデバイスでも指定したフォントで表示することができますが、データを読み込む必要がありますので、表示速度が遅くなります。特に日本語は文字の数が多く、複雑な形の漢字もあり、フォントファイルの容量が大きくなってしまいます。そのため、文字の集団ごとにファイルを分けて用意し、必要な文字のみを読み込むサブセット化という仕組みで、軽量化する場合が多くあります。

最後に

今回まとめたことは基本的なことばかりですが、それぞれの特性を生かして、効果的に情報を届けられるデザイン制作ができるように参考になれば幸いです。

今回は以上になります。最後までお読みいただき、ありがとうございました。