その他制作実績はこちら >

  1.  >
  2.  >
  3.  >
  4. 転職してわかった紙とWebのデザインの違いと注意するポイント?

DTMクリエイティブチームの村尾です。
このブログではデザインのことやCRMの構築や考え方、
活用した結果など、日々感じたことを綴っていきます。

デザイン

2015.10.09

転職してわかった紙とWebのデザインの違いと注意するポイント?

はじめまして、クリエイティブチームの村尾です。
業務では主にECサイトやLPなどWebデザイン制作、パンフレットなど紙ツールの制作といったデザイン全般のディレクションに携わっております。このブログではデザインとCRMの構築や施策の結果をメインに感じたことや考えをお伝えできればと思います。

はじめに簡単ではありますが、私の自己紹介をさせてください。
私は前職でグラフィックデザイナーとしてパンフレットやチラシ、DM、大判ポスター等、DTPのデザイン業務に5年ほど携わっておりました。それから、Webについて何も知識が無い状態で現在の会社に飛び込みました。Webデザイナーに転職して8年目を迎えますが、入社当時は専門用語が多すぎて、社内で何を話しているのか理解ができませんでした。今考えると恐ろしい話です… 

前置きが長くなりましたが、第一回目となる今回は紙からWebデザインへ転職した際に感じたことを当時のメモなどを振り返りながら「紙とWebのデザインの違いと注意するポイント」について以下の項目に分けご紹介いたします。

1. サイズ、デザイン範囲
2. 色の表現
3. 解像度、単位
4. デザイン上の制限
5. 紙のデザインの特徴
6. Webデザインの特徴

1.サイズ、デザイン範囲

当たり前のことですが、紙はサイズに制限があります。基本的にはA判、B判など規定のサイズがあり、定められたサイズの中で情報を整理し、デザインしなければなりません。
二つ折りや冊子などは見開きが右か左かによって文字組(縦組み、横組み)にも影響するので読む方向も考慮する必要があります。

逆にWeb上ではサイズに制限はありません。横幅は最近では画面サイズがあるので900?1300pixが平均ですが、縦は制限なく長くすることもできます。サイズでWeb特有なのはレスポンシブデザインですよね。画面の横幅によって見せ方を変更することができるのでPC、タブレット、スマートフォンに合わせて最適に表示されます。表現の方法にも幅を持たせることができます。

紙とWEBで見え方の違いで重要な点は「紙は全体が見える」、Webは画面によって「全体がみえない」ところだと思っています。なので、紙では「全体が見える」ことを前提として見える全ての範囲をひとつのまとまりとしてデザインする必要があり、Webでは「全体が見えない」ことを前提として、見える範囲内でどう効果的に見せ、スクロールしてもらい全体を見せるかがポイントかなと思います。

2. 色の表現

紙はCMYKでWebはRGBで色を表現しています。知ってらっしゃる方も多いと思いますが色の表現の仕方が根本的に違います。CMYKは1,000万色でRGBは約1,677万色で色数としてはRGBのほうが多いです。カメラで撮影した画像などはRGBなのですが、印刷物に使おうとCMYKに変換した際に色がくすんだように見えますが、これは表現できる色数の違いで起こる現象です。

色の再現については紙は出力し、色を調整することができるので誰が見ても同じ見せ方ができますが、Webはモニター環境などに依存するのでユーザーごとに見え方が若干違ってきます。モニター環境を統一することはできないので、しょうがないことですが紙と違い若干、デザイナーが見せたいと思った色と違うのでデザインの与える印象が変わります。

紙は黒でも、K100%ベタ塗りのブラックやリッチブラック、4色100%のブラックなど表現に種類がありますね。雑誌や新聞、印刷会社に入稿する際はデータの規定があることが多く、リッチブラックや4色100%のブラックは印面が滲んだりする可能性があるので、データの調整を行う必要があります。色を詳細にコントロールできるのが紙の特徴ですが、印刷する紙や加工を施すと若干色味が変わるので調整が難しいのも紙です。

ちょっと長くなってきたので次回は
3. 解像度、単位
4. デザイン上の制限
について書かせていただきます。
 

twitter
facebook
google+

次の記事へ >

関連記事