Blogこれからの働き方をマーケティングで最適化するブログ

【紙とWeb】知っておくべきデザインの違いとは?


デザインには紙媒体でのグラフィックデザインとWebデザインとがあります。この2つのデザインは同じように見えて、実はその制作作法は大きく異なるもの。
紙媒体出身のデザイナーがWebデザインをする場合、紙と同じ感覚で制作を行うと大きなミスを犯してしまう可能性がありますし、逆もまた然りです。
この記事では、紙媒体とWebでのデザイン作法の違いについて解説していきます。

 

視線移動について

紙媒体とWebでは、人の視線移動の仕方が違います。そのため、重要な情報を効率的に見せるためには、情報を載せる位置も変えることが大切です。

 

紙の場合

紙の場合、人の目線は「Z」型に動くと言われています。
したがって、もっとも伝えたい重要な情報は左上に配置するのが基本です。
「Z」型というのは要するに「ななめ読み」ということになります。
2番目に重要な情報は右下に配置するとよいでしょう。

 

Webの場合

Webの場合、人の目線は「F」型に動くと言われています。
Webは縦方向に情報が積みあがって構成されているため、人がWebを閲覧する時には、無意識に「情報は下へ下へ進んでいく」と考えるからです。
したがって、伝えたい情報は縦方向に並べていくのが基本です。
スペースが開いているからといって大切な情報を右側へ配置してしまうと、見逃されてしまう恐れがあります。

 

色の構成について

紙は印刷されて世の中に出回り、人の目に入ります。
一方、Webはモニターを通して人の目に入ることになります。
この違いこそが、紙とWebの色の校正や考え方の違いに大きな影響を与えているのです。

 

紙の場合

印刷するものは、そのほとんどが「シアン・マゼンタ・イエロー・ブラック」の4色を使って表現されます。
特色を除いて、印刷物のほとんどがこの4色の組み合わせによって色を構成しているのです。

 

Webの場合

Webは発光するモニターによってその色を表しています。
構成するのは「レッド・グリーン・ブルー」の3色。
すべてが合わさると白になる、いわゆる「光の三原色」です。

Webは制作者がいくら色にこだわったとしても、表示するモニターによって色が変わってしまいます
そのため印刷にある「色校正」というものはありません。
世の中のすべてのモニターの色を同じにすることは不可能ですので、Webの場合は紙のように1~5%単位で色を調節することは無意味となります。

 

文字について

紙とWebではフォントにも違いがあります。
フォントに関して自由度の高い紙媒体に比べ、Webではその環境ゆえの制限があるのです。

 

紙の場合

紙の場合、デザインの最終的な形は「印刷物」となり、その紙面の上では画像もオブジェクトも文字もすべて同列のものとして扱うことができます。
どんな書体を使おうと、それらを刷版もしくはオンデマンドで印刷してしまうことで、成果物として正しく表現されるのです。

 

Webの場合

Webの場合、データ形式が「ベクター」か「ビットマップ」かで扱いが異なります。
さらに文字が「画像に埋め込まれたもの」か「デバイスフォント」かの違いもあります。
Webには、基本的にデバイスフォントにある書体を使用しなければ、正しく表示されないという制限があります。
したがって、Webで使われるフォントは「ゴシック」が多く見られ、自由度は低いと言えます。

 

納品後について

それぞれの製作過程を経て納品することができたとします。
その後のことについても、紙とWebでは大きな違いがあります。

 

紙の場合

紙の最終形態は「印刷物」です。
製品となった印刷物は、基本的に納品したらひとまず終了ということになります。
そこから世の中に出ていくわけですが、クレームがない限りはここで「完了」です。

 

Webの場合

Webの場合は、デザインが終了したら完了とはなりません。
次の作業として、「コーディング」が待っています。
コーディングというのは、作成したデザインを仕様書通りにプログラミング言語に置き換えることです。
さらにWebの場合、「一度制作したら終わり」というわけではなく、定期的な更新作業も必要になってきます。

 

デザインの違いはあるが、紙もWebも「情報を伝える手段」

紙媒体とWebでは構成や色・フォントなど、さまざまな違いがあることが分かりました。
しかし、それらがすべて「情報を伝える手段」であることは変わりありません。
紙媒体出身デザイナーもWeb出身デザイナーもそのことを忘れることなく、ユーザーに分かりやすく心に残るデザイン制作を心がけることが大切なのです。


お問い合わせ

本記事内容や「デザイン」についての
お問い合わせはこちらからお気軽にお問い合わせください

お問い合わせはこちら