HiGash.Net ホームページへ戻る

Home [Blog] » 紙デザインとWebデザインはココが違う

紙デザインとWebデザインはココが違う

紙とWebはココが違う

僕はもともと雑誌や書籍のエディトリアルデザインをメインに印刷物を制作するグラフィックデザイナーでした。
メイン業務をWebにシフトしてから実はまだ4年ぐらいです。今年僕は30歳なので、印刷物とWebの経験年数はほぼ同じぐらいかな。

そんな元グラフィックデザイナーの僕だからなのか、このブログを通じて「グラフィックデザイナーからWebデザイナーに転身したいんだけど、どう思いますか? やれるでしょうか?」という旨の相談を受けたこともあります。

僕個人の感覚から言えば、 紙だろうがWebだろうが「デザインはデザイン」。 紙を上手に作れる人はWebにチャレンジしても上手なデザインができると思ってます(その逆も然り)。正直言って、紙のデザイナーのほうが純粋なビジュアルの作り手としては優秀な人が多いように思います。紙は歴史がありますからね。巨匠も多いですし。
とはいえ、当然ながら最低限の経験は必要で、いきなり紙のデザイナーがWebを作って上手く作れるわけはないです。まずは2〜3、Webサイトのデザインをしてみて、少しずつWebデザインというのがどんなものなのか見えてくるんじゃないでしょうか。

さて前置きが長くなりましたが、今回のエントリーは前々から書きたいと思っていた紙デザインとWebデザインの違いについての私見をまとめてみることにします。

紙はCMYK、WebはRGB。色にシビアなのは紙

紙はCMY3色の減法混色にK(ブラック)を補った4色のデザイン。WebはRGB3色の加法混色だから、色の考え方が根本的に違う

基本の基本だけど、紙はCMYK4色で作りますが、WebはRGB3色で作ります。

色の再現性についてよりシビアに考えなければいけないのは紙 です。Webは色については紙ほどシビアではないと思います。
Webの場合、モニタやOSによって色が違って見えるのは仕方ない(もちろん、どんなモニタやOSでも見やすい色を選ぶ必要性はあります)っていうのが、なんとなく暗黙の了解となっているんですが、紙の場合には刷り上がりの色って一定ですからね。
あと、紙の場合はグラデーションやドロップシャドウのような表現は技術的にきれいに印刷できなかったりするので、あんまり使えないですね。紙には印刷による技術的な制約っていうのが生じます。

Webの場合は画面で見ている色がそのまま完成形ですけど、紙の場合は画面で見ている色(RGB)は実際の刷り上がりの色(CMYK)とはかなり違います。紙の特性なども踏まえて、画面と仕上がりのギャップを上手にコントロールして色を指定しなければいけないのが紙の難しさ。だから、紙の場合は本番の印刷をやる前に色校(色校正)っていうのをやるんですね。

逆に Webの人間から、紙の色がうらやましいなと思うのは特色の存在 です。
紙はCMYK4色以外に特色と呼ばれるインクを使うことができます。たとえば、金色とか銀色とかはWebではそれっぽい色を作ることはできますが、紙の特色みたいにほんとにキラキラ光るような金色や銀色は再現できません。

紙はベクター、Webはラスター

紙とWebは解像度が大きく違う。解像度が低いからこそ、粗が目立たないようにWebページの細かいパーツはドット単位で作りこむ必要あり

少し乱暴ですけど、おおまかに紙はベクターで、Webはラスターでデザインするというのが言えると思います。

紙の解像度は350dpiだから、Webと比べるとすごく高解像度。複雑なオブジェクトや写真でなければ、デザイン要素のほとんどは高解像度でも耐えられるようにベクターデータで作ります。印刷物も最終的にはドット(網点)で作られるわけですが、350dpiという肉眼では認識できないドットをデザイン過程で意識することはありません。

逆に Webはドット(ピクセル)を意識してデザインをする必要があります。 角丸だって、画面できれいに見せるためには、角丸部分を拡大表示して1ピクセルずつ色を塗ったり消したりして作ります。

Webはレイアウトの制約に縛られることが多い

どんなに美しくてもHTMLにできないデザインでは意味がない。コーディングのことも考えてデザインしなければいけないのがWebで、紙よりもレイアウトに縛りが多いのは間違いない

紙に比べればWebにはレイアウトの制約が多いですね。紙からWebにシフトした僕は確実にそう感じます。

文字を斜めにしたり、文字と画像を重ねたり、画像どうしを重ねたり、、、紙ではかなり簡単にできることがWebではなかなか簡単にはできません。
制作工数に見合った結果(デザインとしての効果)が伴わないから、Webではそうした特殊なレイアウトは避けられる傾向にあります。
ソースコードも無駄に増えるし、ページのレンダリングも遅くなるし、、、Webページを複雑なレイアウトにしてよいことは少ないです。

レイアウトをみっちり練って作れるのは紙 ですね。これは間違いない。

紙は動かないけど、Webは動く

どこを触ったらどう動いて、どのページに飛ぶのか。このページに飛ぶための導線はどこであるべきか・・・紙のデザイナーは最初、なかなかそういうところにまで頭がまわらないのではないだろうか

印刷物のデザイナーにとってもっとも難しいと感じたり、そのことを忘れがちだったりするのは、 Webは動くということじゃないでしょうか。紙面は動かせないですからね。

Webの場合、ナビゲーションのボタンひとつとっても、マウスオーバーしたときのデザインっていうのも考えなきゃいけません。
もちろん、スライダーだったり、タブだったり、アコーディオンだったり・・・いろんな動くUIというのがあります。限られたスペースを効率よく使い、かつユーザーにとってわかりやすく使いやすいデザインにするためにはこうしたUIに対する理解は不可欠になってきます。
どこをどうクリックしたらどう動き、どこへリンクするのか。Webデザイナーはそういった動きをしっかり考えてページをデザインをする必要があります。

また、Webはこうしたアプリケーション的な操作性というのも重要になってくるから、ユーザーの「暗黙知」を踏まえてデザインする必要があります。
セオリーから大きく外れたWebデザインは使いにくい というわけ。使い勝手よりもインパクト重視という思いきったコンセプトのサイトでない限りはナビゲーションの配置、リンクの色などはセオリーどおりに作ったほうがよいでしょう。

Webユーザインターフェースの "暗黙知" を意識していますか? – livedoor ディレクターブログ

紙のサイズは有限、Webのサイズは無限

紙の場合、誌面のスペースという制約がある。しかし、サイズがあらかじめ決まっていることでレイアウトは逆にやりやすくなる

印刷物というのは出力サイズが決まっています。なので、デザインできる要素も有限です。
写真点数や文字の数は出力サイズに合わせて削ったり増やしたりする必要があります。

一方、Webはサイズに制約がありません。横幅(縦スクロールの場合)は一般的なモニタのサイズを基準に決めるのが普通で、だいたい800~1000pxぐらいが現在の平均ですが、縦のスクロールはやろうと思えばいくらでも。
長すぎるページはもちろん嫌われますが、 Webの場合はコンテンツに応じてページの長さを自由に調整できます。 印刷物のように1行単位・1文字単位でコンテンツ量を調整する必要はありません。

また、 紙に比べればWebのページは簡単に増やせます。 綴じ方によっても変わってきますが、少なくとも印刷物は1ページだけ増やすってことはできません。紙を1枚増やすということは表・裏の2ページが増えるということです。
中央をホッチキスなどでとめる中綴じの場合はページ数は4の倍数でなければいけませんし、効率よい紙の面付けを考えればページ数は8または16の倍数で作るのが基本です。

また、Webデザイナー(私)によるDTPデザイン注意書き:Webと紙の違い という記事を読んで「なるほどな」と思ったのは、「紙面はひと目で全体像が見れる」という考え方。確かに、Webはスクロール前提のメディアだから、1ページの全体をひと目で見ることはなかなかできませんが、紙は全体像を眺めることができますね。
だから、紙は全体像を踏まえたデザインのバランスが重要、と。なるほど、確かにその通りだと思います。
Webの場合はページ全体のバランスというよりは ファーストビュー(1画面内に収まる部分の見え方) が重要って言いますね。デザインの善し悪しの印象って結局パッと見で決まるわけだから、Webの場合はヘッダーなどページ上部のデザインがすごく大事だと思います。

文字組みへのこだわりはある程度切り捨てなければいけないのがWeb

iPad、Kindle、スマートフォン・・・。Web上で文章を読むのが当たり前になればなるほど、Webページの文字組みだって重要視されるはず

デザインにおいて文字が果たす役割はとてつもなく重要ですが、 Webの場合は印刷物ほど文字組み(フォントや文字間の調整など)にはこだわれないのが現状 です。

もちろん、文字を画像化してしまえばデザイン的には意のままのものができあがるわけですが、アクセシビリティやSEOといったWebページとしての役割を考えると、すべての文字を画像化するわけにはいきません。
文字を画像化するということは画像を切り出して貼り付ける作業が必要なわけで、コーディングが大変になるということでもあります。作業効率も考えれば、できるだけ画像文字は使いたくない。

だから、画像化するべき文字は見出しや全ページ共通で使われる文言など、ある程度限られたものに特定する必要があります。デザインとしての見た目にこだわればこだわるほど画像文字を使いがちですが、できる限り画像文字は減らすようにすべきというのがセオリーです。

どこまで画像文字で作るべきか、という判断はいまだに僕も迷うことが多いです。
Webフォントがどんなブラウザでも利用できるようになり、文字組み関連のCSSも使えるようになってくれば、画像文字というのは使う必要がなくなってきて、状況はだいぶ変わってくるんでしょうけど。

そういえば、Web(画面)は長い文章を読むのには適さないとよく言われますが、これは結局のところ細かな文字組みを制御できないからなんじゃないかなぁ、と僕は思います。これからの時代、電子書籍も一般化してくるわけだから、みんな画面で文章を読むのは当たり前になってくるはず。
そうなってくると、Webデザイナーは文字組みの勉強っていうのをもっとしないといけないでしょうね。

Webデザイナーは紙よりカバーすべき領域が広い

いろいろな技術が複雑に組み合わさってできるのがWebサイト。デザイナーの仕事は一体どこからどこまでなのか、その線引きは紙以上に難しい

DTPが当たり前になった今となっては、印刷物のデザイナーの仕事はIllustratorやInDesignといったソフトを使って印刷所へ入稿できるデータを作るところまでです。
版下を指定紙で作っていた頃(さすがにDTP以前の時代は僕も知りません)はデザイナーとオペレーターの仕事はまったく別物だったと思うんですけど、今はデザイナーがオペレーターの仕事も兼ねられる時代です。もちろん、(DTP)オペレーターという職種は今でも存在しますけど。

そういう意味では、印刷物のデザイナーだってカバーすべき領域は広いと思いますが、 Webデザイナーが知っておかねばならないことは印刷物のデザイナーよりもずっと多いんじゃないかなぁ。
Webデザイナーはビジュアルデザインに加えて、HTMLやCSSに関する知識が最低限必要になってきます。これは印刷物のデザイナーが印刷に関する知識を持たなければいけないのと同等のものだと僕は思ってます。

他にもJavaScript、ActionScript、PHP、MySQL・・・それなりの規模のWebサイトを作り上げるためにはプログラムやデータベースというのが必要になってきます。フリーランスや小規模な制作会社のWebデザイナーはある程度プログラムやシステムに関する部分までこなしていく必要があるでしょう。

でも、これらすべてをひとりで完璧に理解するのは不可能です。いろんなことに手を出しすぎてひとつひとつのレベルが中途半端なものになってしまうよりは、餅は餅屋という考え方は当然必要です。クオリティの高いものを作るためにはデザインはデザイナーが、システムはエンジニアが作るという分業は必至。
Webデザイナーとしては本職であるデザインのクオリティを追究しつつ、 自分がどのぐらいデザイン周辺のことまでカバーしていくべきかというスタンスについてはきちんと考えなければいけない と思います。

あと、Webが大変だなぁ、と感じるのはとくにかく進化のスピードが早いこと。
紙のように歴史があるメディアではないから、デザインや技術のトレンドはほんの2〜3年で大きく変わります。そのスピードについていかなければならないのは、ほんとに大変。。。
でも言い換えれば、新しい技術にいち早く取り組んでいけば、新人も2〜3年でトップクラスに追いつく可能性を秘めてる世界だと思いますね。

刷り上がりを手に取る喜びはWebにはない

紙は後世までカタチとして残る。そのぶん、置き場所に困るというのもあるわけで・・・

刷り上がりを手に取る喜び というのは、印刷物を作ったことがある人にしかわからないかもしれません。
印刷物の場合、実際に印刷物としてできあがってくるまでは現物をチェックすることができません。制作過程では、プリンタでの出力や色校でページごとのデザインしか確認することができないですから。
だから、印刷所へデータ入稿してから、実際に刷り上がってくるまですごいドキドキなんだけど、できあがったものを見るとやっぱり感動しますね。

一方、Webの場合はあんまりそういう感動がないです。
作っている過程で見ているテストページは、最終的にURLを変えてそのまま本番サーバーにアップされるだけだから。

ただ、印刷までいってしまうと後戻りのきかない(一文字さえも直せない。刷り直しになってしまう)印刷物とは違って、 Webの場合はあとからいくらでもこっそり直せてしまう っていうのは少し気が楽ではあります。
もちろん、だからミスっていいっていう話ではないですけど。

あと、紙の場合は印刷物としてきちんとカタチになるわけだから、何年経ってもモノとして残ります。でも、Webの場合はリニューアルしてしまった古いページっていうのは基本的には消えてなくなります。。。ちょっと寂しいですね。

紙は作って終わり。Webは作ってからがはじまり

更新しやすいメディアでも実際に更新しなきゃ意味がない。更新・・・しなきゃなぁ

メディアとして大きく違うなぁ、と感じるのがココ。

極論を言えば、紙は作ったら終わりなんです。
更新という概念はない。情報を更新する場合は刷り直しです。もちろん、定期刊行物っていうのはありますよ。
でも、制作フローは極論を言えば「ゼロから作って印刷」の繰り返しです。ルーティーンな作業なので、効率化ははかれますけどね。

Webの場合は、印刷物と違って簡単にページを更新・拡張していくことができます。しかもリアルタイムに。
だから、その拡張性・更新性をふまえた設計だったり、企画だったりっていうのが重要になってきます。
Webは更新してなんぼのメディアです。

以上、もっとたくさん紙とWebの違いはありそうだけど、今僕がざっと思いつくのはこんなとこです。
紙もWebもデザインした経験がある人って、他にどんなこと思うんだろうなぁ。

個人的には 紙もWebも作れるに越したことはないと思いますし、両方経験することは確実にデザイナーとしてのレベルアップにつながる と思ってます。
ただ、本業がどちらなのかはハッキリさせておいたほうがいいかな。フリーランスはともかくとして、組織で働くデザイナーであれば作業効率っていうのは大事になってきますから。
紙とWeb、それぞれのデザインをするにはやっぱり頭の切り替えが必要です。アプリケーションの設定とかもいちいち変更しなきゃいけないし、50:50で紙もWebもっていうのは厳しいんじゃないかな。

ちなみに僕はしばらく紙のデザインからは遠ざかっているので、今、紙を作るとしたら勘を取り戻すのに少し時間がかかりそうです。。。
今でもたまに、紙のデザインやりたいなぁ、って思ったりするんですけどね。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

3 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. 杉本 より:

    初めて書き込みます。
    同じフロアの杉本と申します。(笑)

    「確かに!」「なるほど!」と気づきが多く勉強になりました。
    「紙は作って終わり。Webは作ってからがはじまり」
    「拡張性・更新性をふまえた設計」というwebならではの作り方は、新鮮でした。

    内容とは関係ないですが、とても読みやすい文章ですね。
    こんなに沢山の情報量をさらっと読めてしまいました。
    また拝見いたします!

  2. HiGash.Net より:

    > 杉本さん
    コメントありがとう!まさかの同じフロアから。。。w
    Webデザインも、やってみるとおもしろいよ、きっと。
    マニアックなネタが多いブログですが、今後もぜひ覗いていただければ。

  3. [...] 何となくもやっとしていたことが、今回登壇された東 孝之さんのブログ 「紙デザインとWebデザインはココが違う」を読んで、かなりスッキリしました。 次回のセッションでは、かなり以 [...]

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20100917/graphic_and_web.html/trackback/

Preview

トラックバック
http://higash.net/20100917/graphic_and_web.html/trackback/

Page Top