Webデザイン再考ーー紙面デザインとの対比からみるWebデザイン|連載モジュールデザイン1

2016年4月21日

こんにちは、rdlabo.incの榊原です。
先日開催された「FRONTEND CONFERENCE 2016」で、『グロースハックを実現する「モジュールデザイン」とCSS設計』というタイトルで登壇しまして、そこで話したこと、話したらなかったことを連載形式で紹介します。

第一回目は「Webデザイン再考ーー紙面デザインとの対比からみるWebデザイン」と題しまして、「Webデザインってそもそも何だっけ」というところを見なおしていきます。

デザイン分野の境界線

「デザイン」という言葉が、近年大流行しています。
webの世界だけみても、グラフィックデザイン・UI,UXデザインからはじまり、アニメーションデザイン、プロセスデザイン。タスクフォース的なところをみたチームデザインなどなど。webの世界から飛び出してみると、まちづくりの世界では「コミュニティデザイン」という言葉が2014年あたりに流行りました。ヤマト出版さんから「幸運はデザインできる」という書籍もでていますし、何が何やら。
「デザイン」が指す世界はとても広くなりました。

ですので、「デザイン」と同じ言葉を使っていても、違うものを意味することは多々あります。

「チームをデザインしておいて」と「チラシをデザインしておいて」は、全く異なるので、前後の文脈で、デザインの意味を把握することは簡単です。職能・技能が全く異なります。
では、紙面デザインとアニメーションデザインはどうでしょうか。アニメーションもパラパラマンガの延長線上と捉えると同ジャンルのはずですが、全く別の技術体系として成立しており、紙面デザイナーが「アニメーションもできますよ」という人は稀ですし、その逆も然りなので、「紙面デザインできるから、アニメーションもできるよね」と誰も思いません。

難しいのはwebデザインと紙面デザインの関係です。webデザインも印刷してレイアウトチェックを行うことが多いですし、見栄えがいい1Pもののサイト(ペライチとか言われますよね)は紙面デザインの技術で対応できるので、「デザイナーだったら、webデザインお願いできない?」という人が多いです。また、当人も「できなくはないからやってみるよ」といいます。

けれど、webデザインをしっかりやっている人ほど「別物だよ」といいます。両方できる人も、異なる技術セットとして扱います。
厳しくいうと、「紙面デザインもwebデザインも一緒」といってる人は、どちらかの知見が圧倒的に不足している場合が多いです。

webデザインという職能自体が、ここ10年ほどで生まれたものです。現在、webデザイナーとして活躍している人の多くは、「紙面デザイナーが、webデザインの世界にも手を出した」という経歴が多いので、仕方ない部分もあるのですが、本稿では「webデザイン」を考えなおすということで、紙面デザインとwebデザインの差異をしっかりと見ていきたいと思います。
 

紙面デザインとwebデザインの比較

もちろん、この二者の共通項もあります。グラフィックデザインの基礎的な部分は共通していますね。
例えば、配色。アクセントで基調色と補色の関係にある色を選ぶとか、どの色はどういう印象を与えるか、という部分です。また、レイアウト的なところでいうと、グループ化であったり、余白の取り方、デザインの基本原則としての、近接、整列、反復、コントラスト、なのです。
そういった共通部分があるからこそ、同じ職能として見られることも多いのですが、以下で決定的に異なる4つの差異を確認していきます。
 

1. 情報の取捨選択方法が異なる

webサイトはスクロールできることが前提ですので、いい悪いを論じなければ、縦に情報を延々と詰め込むことができます。皆さんが最も身近なのは、楽天のショップページの構成ですね。(参考 楽天メソッドからwebデザインを考える)。一体どこまでスクロールするんだというぐらい、縦に長いページもつくることができます。
それに対して、紙面デザインは物理的に情報量の制約が生まれます。A4のチラシに書くことができる内容は、A4に収まる範囲に限られます。webが文章を1行増やすのにサイト構成が増えるということは(稀なシチュエーションを除き)ありませんが、紙面は1行どうしても増やそうと思ったらA4のチラシがB4になったりします。これはでかい。

ですので、webでは余計なことをだらだら書くことができるという見方もありますが、例えば商品紹介であったら、商品をいろいろな側面から紹介した上で、どういった内容であるかに留まらず、開封後であったり、使用後のシーンまでみせて購買意欲を訴求する、といったことが可能になります。

そもそも、webデザインと紙面デザインでは情報の取捨選択のやり方が異なるのです。

2. webの閲覧環境は多様

webでは、ユーザ毎に閲覧環境が異なります。一昔前なら、モニタの色ぐらいの話でしたが(横幅650px前提だった時代もあったものです)、モバイル・スマホ・タブレットと様々なデバイスが生まれ、同ジャンルのデバイスでも解像度はそれぞれ異なります。そのことに対応する形で「リキッドデザイン」(横幅が可変なレイアウト)が生まれました。ユーザの閲覧環境毎に横幅が異なり、その横幅に応じた表示をするために、改行場所であったり、フォントであったりが異なるのです。

でも、これは紙面デザインにはないものです。
そりゃ、そうですよね。A4のチラシを渡して、みる人毎にそれがB5になったり、名刺サイズになったりという魔法みたいなことは寡聞にして知りません。

紙面デザインをやってる人は「1pxにこだわる」人が多いです。私も紙面デザインやってた時は、1pxのずれにこだわってました。
けれど、webデザインにおいては、閲覧環境が多様なので、1pxのずれといったものはほぼ無意味です。ましては、文字の整列であったり、文字組であったりは、どれだけこだわったところで紙面デザインと異なりエンドユーザに届くことはないので、ただの自己満足で終わってしまいます。
 

3. Webデザインには出稿がない

紙面デザインの恐怖は「誤字脱字」です。出稿後、下手すると刷り上がり後にミスに気づいたら、もうどうしようもありません。昔、広告の電話番号が間違っていて、真っ青になりながら、広告主に頭を下げて、修正用のシールをつくって数千部にシールを貼りました。手作業、辛かった・・・。
まぁ、そういったミスは置いといて、紙面は刷り上がるまでが勝負であることに対して、Webは「リリース日」という区切りはあるものの、それ以降ももちろん修正可能です。むしろ、多くの人の目にふれたからこそ生まれる修正であったり、アクセス解析の結果から変更を加えることは多々あります。ブログなんて、リリース後の記事執筆こそが本番ですよね。
 

4. コンバージョンの連続性・即時性

情報を受け取ってから、コンバージョン(到達目標。例えば、購入するというアクション)するまでの連続性・即時性は、Webの大きな特徴です。
Webが生まれた時、HTML(ハイパーテキストマークアップランゲージ)は大きな特徴であると取り上げられましたが、即座に、連続して、1クリック2クリックで目的のページまで遷移できるということは、チラシなどの紙面では物理的に不可能であり、情報設計・デザインを考える時に無視できない要素です。
また、このことにより、成果の定量的観測方法も変わります。紙面デザインでは、配布数やクーポンの回収率、問い合わせ数などの最終成果を指標にすることに対し、Webでは、コンバージョンを目的地として、ページ滞在時間、離脱率・どこで離脱したか、といったプロセスまでも変数として扱い、成果を検証します。
 

5. その他

本論からは外れる差異は、その他としてまとめます。
1つ目は、ハイパーテキストによる情報の重層化。このことによって、情報の一覧性・類似情報の提供(詳しくはこちら的なもの)が可能になります。2つ目は、Googleをはじめとした検索エンジンの存在。有益な情報を提供することにより多くの人の目に触れる機会を得ることができますし、逆に多くの人の目に触れるためにデザインと同時にSEOと呼ばれる検索エンジン最適化を施すことが求められます。3つ目は、視線の動かし方。紙面デザインは、Z型が多いですが、WebデザインはF型が多いです。詳しくは「Zの法則、Fの法則」をご覧下さい。
他にも、動画の再生や、画像をクリックしたらモーダルウィンドウで拡大されるなどのユーザ操作が可能、などという差異があります。「Webデザイナー(私)によるDTPデザイン注意書き:Webと紙の違い」では、もっとデザイン寄りの差異について書かれておりますので、ぜひこちらもご一読下さい。

紙面デザインとの対比からみるWebデザイン

以上、参考リンクもつかいながら「これでもか!」という気持ちになりながら、Webデザインと紙面デザインのの差異についてみてきました。
本稿を読んでいただいた方に、「共通する部分も持っているが、別物である」とご理解いただけましたら幸いです。

この差異が、Webデザインの可変性・多様化を生み出します。

特徴 可変性の種類
1. 情報の取捨選択方法が異なる 情報量の可変性
2. webの閲覧環境は多様 環境の可変性
3. Webデザインには出稿がない 時系列の可変性
4. コンバージョンの連続性・即時性 成果指標の多様化

 
ですので、紙面デザインとWebデザインの決定的に異なるところは「可変性がある」ということができます。
また、Webデザインは、可変的である(冗長性がある)ことを前提であるべきで、可変性を持たないデザインは「ちゃんとWebデザインできていない」ということができると考えます。(プロジェクトに落としこむための「モジュールデザイン」の手法については、第三回目か四回目あたりに紹介します)
 
次回は、この可変性が生み出すプロジェクトへの影響と、それを律するためのUI、ペルソナ・UXとの関係性についてご紹介します。
それでは、また。