1. HOME
  2. タメになる
  3. いまさらながら、Webと紙の違いとは? その2

いまさらながら、Webと紙の違いとは? その2

35を超えたあたりから、風邪がほんとに治らなくなりました。
20代のころは、一度熱を出したら翌日には治っていたのに、平気で2日間ほど熱に悩まされます。
というわけで、OS-1のおいしさを知ってしまったあびーんです。
前回、Webと紙の違いを、その使用用途などにフォーカスして解説しました。

いまさらながら、Webと紙の違いとは?

今回は、もっとディティール寄りの部分、デザインなどの違いについて書いてみようと思っています。
少し解説っぽい文章になってしまうのですが、最後まで読んでいただけると嬉しいです。

Webの世界は日進月歩

Webと紙、そのデザインという点において、もっとも異なるものが流行の変化ではないでしょうか。
もちろん、紙媒体のデザインも日々進歩しています。
たとえば、一時はデザインといえばフラットデザインというほど、世の中にあふれていました。
現在もフラットデザインは人気があるし、なんなら僕も余分なものを排除した感じが好きだったりします。
ただ、一周まわって巡ってくるのか、トレンドとしては3Dを駆使したり金属っぽい質感だったりするものを大胆に使ったものが増えてきています。

Google画像検索で「フラットデザイン」と検索した結果
一世を風靡したというより、定番になった「余計な効果」を取っ払ったデザインタイポグラフィなんかも移り変わりが激しいんじゃないでしょうか。
今までは余白をこれでもかというほどに確保したうえで、かっちょいい文字を置くというものが主流だったと思います。
現在は、ページから見切れるほどに大きく置いたりしますね。
太さも、一時に比べると存在感のあるものが好まれている気がします。
フォントを組み合わせたりすることも多いですが、すごく個人的には、やはりひとつのフォントで統一したほうが好みだったりします。
やっぱり、フォントって美しく見えるように計算されてつくっているものですから。

Google画像検索で「タイポグラフィ」と検索した結果
文字組でみせるという、デザインの中でもあびーんが好きな分野
このように、単純にデザインというだけでも毎年のようにトレンドが変わります。
そこへWebときたら、機能面が加わってしまうんですよ…。

たとえば、すごく流行ったのは少し前になりますが、「パララックスデザイン」。
スクロールすると、背景と手前のオブジェクトが別々の速度で動いて演出してくれるというアレです。
初めて見たときは、「画面酔いしちまうぜ!」なんて思ったものです。
これなんか、数年前まではなかったのですが、今では当たり前の手法になっています。
あとは、デザインとも少し違いますが、Flash。
10年くらい前なら、Flashを使ったサイトがそこら中にありましたよね。
それこそFlashを使わなければ人ではないくらいに。
しかし、HTML5の登場によって、徐々にFlashを使ったサイトはなくなっていきます。
すごかったんですよ、Flash全盛期は。
フリーのフラッシャーなんかはものすごく儲かったんじゃないでしょうか。
他にもすご~~くいろいろあるのですが、挙げていくとキリがないので割愛します。
しかし、結局は見た目上の美しさなのか、ユーザビリティなのか、はたまたその両方か。
さまざまな理由から新しい技術が台頭し、古い技術は駆逐されてしまうんです。
たぶんこれが、あまりWebが好きになれない理由なのかもしれません。
デザインというより技術による競争みたいな(いや、実際はそんなことないのでしょうけれど)。
ディレクターとしてあるまじきことなのですが、どうしても数字とかシステマチックなこととかが苦手なんですよね。

F型とZ型という見せ方の違い

デザインに関わる部分で、かなり大きな要因が、Webと紙では読む順番が異なるということです。
F型とZ型、これはちょっと覚えていてもいいかもしれません。

紙とWebでは、読者が見る順番が異なる

紙の場合は、限られたスペースをとりあえず全部見て把握する。
対してWebは縦に長いので、ひとつ読んでは下へ進むという動きになるわけです。
したがって、Webではファーストビューに押させたいボタンを必ず入れたりしなければならない。
でないと、大事な部分を見てもらう前に、ページから離脱してしまう可能性があるんです。
昔はよく、紙出身のデザイナーはWebに移行したとき苦労するといわれていましたが、それは「要素の見せ方が違う」という要因が大きかったのではないでしょうか。

制約の中で表現するのがWebの醍醐味

ここからは、もっと細かい部分、デザインのディティールについてです。
ここでも、Webと紙で特性が異なるということが関わってきます。
それは、紙が読ませたり見せたりするものであることに対し、Webは機能的なものを求められる使う媒体だということ。
これだけというわけでもありませんが、この特性によって下記の点が異なってきます。

感覚的な効果
紙→手触りといった質感や発色、それを活かす加工までこだわることでさらなる効果が望める。エンボス加工や箔押しなど、ちょっと豪華に見せる工夫が多々ある
Web→動きでユーザーを楽しませることができる。ただし、機能面が求められることが多く、ユーザビリティを重視したレイアウトがほとんど

テキスト
紙→紙のデザインで肝となるのが、字詰め。英語で言うとカーニング。一文字一文字の間隔を調整することで、コピーを美しく見せる
Web→そもそもフォントはデヴァイスに依存するので、あまりフォント選びは重要視されない。もちろん画像化されているテキストに関しては、字詰めもできる

修正
紙→入稿してしまうと(もしくは印刷してしまうと)取り返しがつかないのが紙媒体。印刷後にミスが発覚すると、謝るだけでは済まないことも
Web→公開後も修正ができてしまうのがWeb。もちろんミスがあっていいわけではないが、リカバリーが可能。そのぶん、案件がひたすら終わらないということも

レイアウト
紙→基本的に決められた領域の中であれば自由。もちろん、セオリーとか決まりごとはあったりするが、それを破ったからといって印刷できないということはまずない
Web→基本的に(いろいろ表現があるので一概にはいえないが)、ブロックの組み合わせのようなものなので、曲線や円形のデザインは表現しづらい。またスマホの対応(レスポンシブデザイン)を考えると、余計に制約が多くなる

数値入力
紙→まあ、本当はよくないが、基本的に目分量でデザインしたところでそんなに問題はない。データのキレイさなどを考えると、色指定なんかも数値入力したほうがいいが
Web→ページを言語で表すという関係上、色や大きさ、位置などは、キレイな数字であることが好まれる。汚いデータを渡すと、こっそりコーダーさんが直してくれることも

とまあ、ざっくりとこんなことが挙げられます。
他にも、Webではレイアウトに決まりごとが多々あって、Webデザイナーは少なからずコーディングの知識が必要になりますよね。
過去にCSSという初歩の初歩で挫折したあびーんとしては、んまぁ制約が多すぎてつらいのですが。
でも、この制約の中で新しい表現をしたり、よりよいユーザビリティを追及したりと、Webにも面白さはあるのだろうとも思います。
時代に取り残されないように、勉強しなきゃなとふんわり考える今日この頃。

関連記事