はじめまして、クリエイティブチームの村尾です。
業務では主にECサイトやLPなどWebデザイン制作、パンフレットなど紙ツールの制作といったデザイン全般のディレクションに携わっております。このブログではデザインとCRMの構築や施策の結果をメインに感じたことや考えをお伝えしたいと思います。
はじめに簡単ではありますが、私の自己紹介をさせてください。
私は前職でグラフィックデザイナーとしてパンフレットやチラシ、DM、大判ポスター等、DTPのデザイン業務に5年ほど携わっておりました。それから、Webについて何も知識が無い状態で現在の会社に飛び込みました。
Webデザイナーに転職して8年目を迎えますが、入社当時は専門用語が多すぎて、社内で何を話しているのか理解ができませんでした。今考えると恐ろしい話です…。
前置きが長くなりましたが、第一回目となる今回は紙からWebデザインへ転職した際に感じたことを当時のメモなどを振り返りながら「紙とWebのデザインの違いと注意するポイント」について以下の項目に分けご紹介いたします。
サイズ、デザイン範囲
当たり前のことですが、紙はサイズに制限があります。
基本的にはA判、B判など規定のサイズがあり、定められたサイズの中で情報を整理し、デザインしなければなりません。
二つ折りや冊子などは見開きが右か左かによって文字組(縦組み、横組み)にも影響するので読む方向も考慮する必要があります。
逆にWeb上ではサイズに制限はありません。
横幅は最近では画面サイズがあるので900～1300pixが平均ですが、縦は制限なく長くすることもできます。
サイズでWeb特有なのはレスポンシブデザインですよね。
画面の横幅によって見せ方を変更することができるのでPC、タブレット、スマートフォンに合わせて最適に表示されます。
表現の方法にも幅を持たせることができます。紙とWEBで見え方の違いで重要な点は「紙は全体が見える」、Webは画面によって「全体がみえない」ところだと思っています。
なので、紙では「全体が見える」ことを前提として見える全ての範囲をひとつのまとまりとしてデザインする必要があり、Webでは「全体が見えない」ことを前提として、見える範囲内でどう効果的に見せ、スクロールしてもらい全体を見せるかがポイントかなと思います。
色の表現
紙はCMYKでWebはRGBで色を表現しています。
知ってらっしゃる方も多いと思いますが色の表現の仕方が根本的に違います。
CMYKは1,000万色でRGBは約1,677万色で色数としてはRGBのほうが多いです。
カメラで撮影した画像などはRGBなのですが、印刷物に使おうとCMYKに変換した際に色がくすんだように見えますが、これは表現できる色数の違いで起こる現象です。
色の再現については紙は出力し、色を調整することができるので誰が見ても同じ見せ方ができますが、Webはモニター環境などに依存するのでユーザーごとに見え方が若干違ってきます。
モニター環境を統一することはできないので、仕方のないことですが紙と違い、若干、デザイナーが見せたいと思った色と違うのでデザインの与える印象が変わります。
紙は黒でも、K100％ベタ塗りのブラックやリッチブラック、4色100％のブラックなど表現に種類がありますね。
雑誌や新聞、印刷会社に入稿する際はデータの規定があることが多く、リッチブラックや4色100％のブラックは印面が滲んだりする可能性があるので、データの調整を行う必要があります。
色を詳細にコントロールできるのが紙の特徴ですが、印刷する紙や加工を施すと若干色味が変わるので調整が難しいのも紙です。
解像度、単位
基本的に解像度は紙が350dpi、Webが72dpiで作成されます。
紙はサイズがA1ポスターなど大きなものは200×300dpiで作成されることもあります。
紙は解像度が大きいほど画質が綺麗になりそうなものですが、印刷会社に務めていた際に、350dpi以上にしても画質は変わらないと教えていただいたような…
(現在は印刷機の進歩などで高画質で印刷できるのかもしれません)
Webはモニターの解像度が決まっているため72dpiで固定となります。
今は当たり前なので、なんとも思わないですが、新人Webデザイナーの頃は解像度が約5倍も違うので、違和感があったのを覚えています。
紙は解像度が大きいため、元の画像を若干大きくさせたぐらいでは粗さは目立ちませんが、Webでは異なり非常に荒く見えてしまいます。
「1ピクセルの重さ」とでも言いますか、非常に気を使って作っていたことを思い出します。
デザイン上の制限
紙は前回ご説明したように紙の範囲と色ぐらいで、その他はほぼ、制限なく自由にデザインすることができます。
Webのほうがユーザーの環境に左右されるので、デザインの制限については紙に比べ圧倒的に多いですね。
例えば、
・フォントはデバイスフォント以外は全て画像でしなければ再現されない。ユーザーのPCに指定したフォントが入っていなければ代替フォントになります。Web制作においてデザインだけではなくSEOなど非常に重要なので画像を多用するわけにもいきません。
・文字間、改行など制作者側が意図したように見せることができません。ある程度は調整できるのですが、ブラウザの違いやサイズによって見え方が変わってきます。
・文字組も縦書きはNGです。画像であれば問題無いですが、デバイスフォントでの表現は基本的には行えません。
まだまだあると思いますが、Webについては制作者側が意図した見せ方が100％できないのでその点を踏まえたうえで制作する必要があります。
紙デザインの特徴
紙の大きな特徴はWebのデジタルな環境と違い、印刷物など現物が残るところだと思います。
紙は印刷物を目で見て、触れるなど五感で感じる印象も含めてデザインだと考えています。
紙自体が持つ印象に加え、加工を行うことでデザインのパターンは無限に広がってくることが非常に面白いところです。
用紙の種類・加工について用紙は厚い、薄い、光沢感、透明、エンボス、触り心地が違うなど多種多様な特性があります。
加工についても3つ折り、観音折などの折加工、箔押し加工、耐水加工、チケットなどのミシン目、シール加工など組み合わせることで用途に合った印刷物の制作を行うことができます。
紙のデザインはこの「目的に合った印刷物」を作れるかがポイントで、どういった場所で、誰が、どのタイミングで見るのかを想定してデザインを行わないと効果的なデザインとは言えません。
Webデザインも同じですが、デザインの前に要件をどれだけ把握できるかが重要です。
印刷についてパッケージや梱包用の箱、店舗外装、看板など様々な印刷を行ってきたことで、印刷の知識についても身に付き、デザインするうえで非常に役立っています。
機械で可能な折加工・印刷手法、手作業で行わないと難しい加工など印刷費用に直結してくるので、クライアントに提案を行う前に費用対効果を考えたデザインの提案ができるようになりました。
実際に印刷会社さんにお願いして工場を見学させていただいたり、印刷の立ち合いで色の調整を何度も行い、印刷に関する専門知識をご説明いただいた経験が活きていると思います。
私は運よく業務の中で経験できましたが、なかなかデザインを行っているだけでは身に付かないものが多いです。
どうしても経験や知識がないと出来上がりの印刷物のイメージはわかり辛いものです。言葉だけでは伝えることが難しいのでクライアントに説明する際は様々な印刷物のサンプルを用意し、加工や紙の性質、特長などメリット・デメリットをできるだけわかりやすく伝え、少しでもイメージを共有できるよう気をつけています。
Webデザインの特徴
転職して分かったことですが、WEBデザインはデザインの知識があるだけでは行うことができません。
デザイン以外での知識の量で品質が変わるといっても過言ではありません。例えば、サイトを制作する場合、必要な知識として以下が挙げられます。
・マーケティング
・Googleアナリティクスなどを使用した数値の分析
・HTML、CSS、JavaScriptなどコーディング
・UI/UX・SNS・システム/仕様
・サイト設計、構成・スマートフォン、タブレットなどのデバイス
・SEO・専門用語(CPO、CTA、LTV等)
・個人情報の取り扱いや著作権
・セキュリティ
などなど詳細に書くとあまりにも多すぎるので、ざ～っくりまとめるとこんな感じです。
新しい仕組みやサービスが日々、生み出されているので動向を注視することも重要ですね。
膨大すぎて、自ら情報を取りにいかないとすぐに追いつかなくなります…複数の専門スタッフと要件やスケジュールを確認しながら制作を進めていくのでコミュニケーション能力も必要になってきます。
いくつもの案件をまたぐので管理ツールを導入し、誰が、何を、どのタイミングで行っているのか把握できる環境を整えています。
ホームページなどWeb上にあるコンテンツは誰でもアクセスすることができますし、世界中に情報を発信することができるのがメリットかなと思います。
ですが、たくさんのユーザーに快適に閲覧してもらうために必要になることの大半は、デザイン以外の知識が占めると思っています。(デザインは全体の1割強ぐらい？)転職したての頃は覚えることが多すぎて苦労しました…。
まとめ
弊社では、お客様のお困りごとや目的に合わせて、デジタルマーケティングを軸にWEBや紙媒体・パッケージなど幅広く制作、ご提案を行っております。
お気軽にお問い合わせください。
