Webデザインと紙のデザインの違いについて

Webデザインと紙のデザインの違い

最近、知り合いの紙のデザイナーが「Webデザインは難しい。紙と全然違う。」と言い、また別の知り合いのWebデザイナーが「紙のデザインは難しい。Webと全然違う。」と言っていたのを聞き、この記事を書こうと思いました。

私はもともと大学で印刷物のデザインを学んでいました。
Webデザインは社会人になってから独学で勉強し、作れるようにしました。
なので、紙→Webに転校した組で、どちらのデザインにも対応できます。

両方のデザインをやってきた身として、紙のデザインとWebデザインの違いを書いていきたいと思います。
(※ここでいう「紙」は主に「ポスター・フライヤー」等の一枚物を想定しています。)

これで「紙のデザインもWebデザインも、やることは一緒でしょ。だから両方をパッと作ってよ。」と言う人がいなくなることを祈ります。(笑)

Web・紙の主な違い早見表

Web
売り方 プロダクト型 プロジェクト型
情報の取扱方 インタラクション必須 配置・余白・ジャンプ率…で構成
レイアウト 制約が多い 自由
タイポグラフィ 制約が(まだ)多い 制限なし
その他 SNSで拡散できる
アニメーションをつけられる
メンテナンスが必要
様々なデバイスへの対応が必要
一度、印刷すれば終わり
特殊印刷や加工などもある

かなりざっくりしていますが、主要な違いをまとめてみました。
以下、解説〜。

違い1:売り方

売り方の違い。要は「顧客に対してどのような形で価値を売っているか」で、その違いですね。

Webはプロダクト型。紙はプロジェクト型です。

Webはプロダクト型です。プロダクト型は、基本的に終わりがありません。
プロダクトを作ってからはメンテンナンス・サービス改良など、プロダクトが使われなくなるまで、価値を提供し続けます。
一般的なスマホアプリを想像していただければ、イメージがつくのはないでしょうか。

一方、紙はプロジェクト型です。プロジェクト型は終わりがあります。
プロジェクトが終われば、その仕事の全てが終わります。
紙は最終的に印刷して配布します。印刷物を顧客に納品した時点で仕事が終了します。

デザインと直接関係はありませんが、これはかなり重要な違いです。
この意識がないと「紙のデザインと同じ感覚で、今後のスケールアップを考えずにWebデザインを組んでしまった。…」等の面倒なことが起こります。

心に留めておくと良いでしょう。

違い2:情報の取扱方

紙のポスターでは、1画面の中に見る人にとっての必要な情報がすべて入っています。
対して、Webでは1画面の中で必要な情報をすべて得るのは不可能です。
必ずスクロールやリンクをたどるなどのインタラクションが必要です。

この違いは大切です。まとめると…
紙のポスターは一見で、情報の全体像の把握が可能。
Webは一見での情報の全体像の把握は不可能。インタラクションが必須。

ということです。

紙のデザインとWebのデザインでは、情報の取扱方が根本的に異なります。

紙では配置・大きさ・ジャンプ率などを駆使して、情報をまとめます。
レイアウトやデザインが情報設計に直結するのです。

Webでは情報を見せるための情報(パンくず・ナビゲーション…)を用意して、情報をまとめます。
これらの情報を見せるための情報は、「メタ情報」と呼ばれています。

Webデザインにおいて「必要な情報はWeb上に書いておいたし、見つけられるでしょ。」ではいけません。
きちんと「どこに。どんな情報があって。どうやったらたどり着けるのか。」という適切なナビゲーションを配置しなければなりません。

自分で書いていて、耳が痛い…

違い3:レイアウト

紙のデザインのレイアウトは自由です。
豪華絢爛な効果をつけても、最近の印刷技術ならだいたい再現できます。
まぁ、その分の費用はかさみますが。

また、紙は最終的に印刷してしまえばもう”動かない”ので、レイアウトを作った後の事は気にしなくて良いです。

一方、Webデザインのレイアウトはかなりの数の制約が存在し、レイアウトを作った後からが本番とも言えます。
魔のデバイス対応・検証作業ですね。

よく「Webってやろうと思えば、いろんなレイアウトが作れる。自由でいいよね!」という言葉を聞きます。
これは半分正解で半分不正解です。

WebではiPhoneで正しく表示できても、Androidでは崩れて表示されてしまう。なんてことがザラにあります。
最近だいぶマシになりましたが…

なので、Webデザインを作った後は、必ず各デバイスでの検証作業が必要です。
パソコンからスマホ・タブレットまで全てテストします。加えてOS別・ブラウザ別でのテスト作業もあります。
このテストを経て、Webサイトは世に出ていくのです。
このことから、Webデザインはより多くのデバイスで統一されたレイアウトを再現するために、最大公約数的なデザイン・レイアウトを構築するのが主流です。

要はWebデザインは「やろうと思えば攻めたレイアウトを作れるが、それがちゃんと表示されるかは別問題」ということです。

デザンナーとプログラマーが「このデザイン・動きを作れるか。作れないか。」で揉めているのはこのためです。

違い4:タイポグラフィ

紙のタイポグラフィは、Webのデザインよりも自由です。
豊かな色彩・効果・書体を自由に使うことができます。先程も述べましたが、一度印刷してしまえばも動かないからです。

しかし、webデザインにおいて文字の表現は、各OSやブラウザの環境に依存します。
一方ではちゃんと表示できても、もう一方では崩れてしまうという現象がおきてしまいます。

ただやろうと思えば文字を画像にして、紙でのタイポグラフィのようなデザインをつくることはできますが、不必要な画像の多用は望ましくありません。

Webデザインではタイポグラフィでどこまで表現できるのか、を確認しておくべきでしょう。

まとめ

紙のデザインとWebデザインは、「情報を伝える」という本質は全く一緒ですが、それぞれアプローチの方法が異なります。

各メディアのメリット・デメリットを理解して、うまくデザインすることが大切ですね。