【リテイクはもう嫌!!】紙とWEBではこんなにちがう? おさえておきたいデザインルール!

デザイナーとして生き残るために、紙媒体からWEB媒体にキャリアチェンジをしたけれど、ディレクターからのリテイクに悩んでしまう方が多いのではないでしょうか。その原因のひとつとして「紙媒体とWEB媒体のデザインのノウハウを区別できていない」ということがあるかもしれません。

今回は”紙”とWEB”のデザインにおける違いをそれぞれ比較し、実際現場ではどのような流れで開発に取り組むべきかご紹介します。

20160525_1

▼この記事はこんな人におすすめ!
・ディレクターからのリテイク指示が多く悩んでいるデザイナーの方
・WEBデザインをすすめるうえでの注意点を学びたい方

目次

  1.  1. なぜ”紙”と”WEB”のデザインは違いが発生してくるのか
  2.      流通するまでのプロセスが違う
  3.  2. ”紙”と”WEB”でおさえておきたい7つのポイント
  4.      1. アプローチの仕方
  5.      2. 色の違い
  6.      3. 視線の移動の違い
  7.      4. フォントの選び方
  8.      5. 字詰め
  9.      6. 素材の解像度
  10.      7. マーケティングの視点の違い
  11.  3. リテイクを減らすための打ち合わせ
  12.      ヒアリングシートを元にラフを書いて、コーダー・ディレクターと打ち合わせをする
  13.      データや写真素材の下処理を徹底し、フィードバックをもらう
  14.  4. それでもリテイクが減らないとき
  15.      一度、自分でコーディングを学んで作ってみる
  16.      ディレクションを意識したヒアリングを心がける
  17.  5. おわりに
  18.  

    なぜ”紙”と”WEB”のデザインは違いが発生してくるのか

    ■流通するまでのプロセスが違う

     
    紙媒体は印刷所、WEB媒体のデザインはコーダーへと、引き継ぐ環境に大きな違いが発生してきます。たとえば、「紙」であれば、印刷するインクに対する配慮や、断ち切りの配慮があります。「WEB」であれば、動的作業を組みこめるためのデザインの配慮などです。

    本来デザイナーは、ユーザーやクライアントのために「見やすく、インパクトのあるデザイン」を心がけますが、開発者として最初に商品に携わる意識も必要です。では、その意識をどう向ければ良いのかにフォーカスして、「紙」と「WEB」が具体的にどうちがうのか「7つのポイント」をあげて説明いたします。

    “紙”と”WEB”でおさえておきたい7つのポイント

    1.アプローチの仕方

    1.アプローチの仕方
    WEB
    紙は、あらかじめ、用紙サイズやページ数、文字数の制限があるのでクライアントの要望にそった内容で構成されていきます。
    どこを一番大きく目立たせるか、どこを小さくまとめるかなど、限られたサイズの中で「引き算方式」でレイアウト決めをしていきます。
    WEBは、展開の方法でさまざまなレイアウトが可能なので、目立たせたい部分のために何かを削る必要がありません。情報があるかぎり膨らませて見やすいレイアウトに整えていく「足し算方式」のレイアウトになります。

     

    2.色のちがい

    2.色のちがい
    WEB
    CMYK(減法混植)で色を表現する RGB(加法混植)で色を表現する
    減法混植ともいわれる色材の三原色はCMYKで表現されます。紙の反射を通して光を見るため、混ぜると光のエネルギーを吸収し、黒くなることからきています。 RGBは加法混植ともいわれ、色を直接光で表現するため、混ぜ合わせるほど光のエネルギーが強くまぶしくなり、白くなっていきます。
    三つの黒が存在する 色味の幅が広い
    CMYKの黒は「スミベタK100%」・「リッチブラック」・「4色ベタ」の3つの表現があり、用途によって使いわけます。 16進数のカラーコードで表現することができ、彩度の幅が広いことが特徴です。

     

    3.視線の移動の違い

    3.視線の移動の違い
    WEB
    紙は、見開きでユーザーの目線をつかむため、Z視点で誘導します。「横軸の捉え方」ともいわれています。 WEBは、基本的にスクロールで視線が移動するためF視点の捉え方でレイアウトを組んでいきます。「縦軸との捉え方」ともいわれています。

     

    4.フォントの選び方

    4.フォントの選び方
    WEB
    紙は、印刷をかけて形になるため、印刷所の規定にそって最小、最大のサイズが決められています。一般的には最小は7級が可読性のあるサイズといわれており、それを下回ると印刷の文字がつぶれるおそれが出てきます WEBは、デバイスを意識したフォントサイズの選び方が重要になってきます。基本的には10pxが最小となっており、レスポンシブデザインの場合は解像度はそのままでデバイスのサイズが半分になるため、フォントサイズを200%で設定する必要があります。

     

    5.字詰め

    5.字詰め
    WEB
    紙は、情報を凝縮するため字詰め長体をかけてスペースを確保できます。
     
    WEBは、CSSの装飾などで調整も可能ですが対応ブラウザの制限があるため、基本的には字詰めをしない状態でデザインをすることが好ましいと考えられています。

     

    6.素材の解像度

    6.素材の解像度
    WEB
    紙は、規格のサイズに対して300dpi〜350dpiが一般的な解像度です。それを下回るとぼやけた状態で印刷されてしまいます。
     
    WEBは、デバイスがピクセル(光の点の集まり)で表現されていますので、規格サイズにたいして72dpiでも鮮明に表現する事が可能です。

     

    7.マーケティングの視点の違い

    7.マーケティングの視点の違い
    WEB
    雑誌や広告は、流通するため掲載される場所を意識した目の引き方が重要です。雑誌に掲載されるのか、ビラ配りをするのか、公共機関に展開をするのかでも、メインキャッチの使い方に差がでてきます。
     
    ユーザーがサーチエンジンから検索することから、ワンスクロールでどれだけアイキャッチができるかが重要になってきます。また、どこのWEB媒体からユーザーが流れてくるかを常に分析し、SEO対策を意識した戦略を学ぶ必要もあります。

     
    他にも、紙媒体とWEB媒体ではそれぞれデザインする上で違う部分が出てきますが、以上のポイントを意識するだけでも、デザインのリテイクすることが大幅に少なくなります。

    次のページ:リテイクを減らすための打ち合わせ

     

この記事を書いた人:nomal

tadano

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。