Webデザイナー（私）によるDTPデザイン注意書き：Webと紙の違い
Webデザイナーのみなさん、DTPデザインってどうですか？Webデザイナーをしていると、たまに印刷物のデザインも手がけることがあると思います。私はDTPデザインが苦手です。この記事を読んで「もっとこうした方がいいよ！」とかアドバイスいただけたら嬉しいです。
8/20 追記：Twitterでグレースケールから始めた方がいいよというコメントを頂きました。
Webでも白黒の段階でよくないなーと思うデザインは、色を着けてもよくないことが多いです。
貴重なアドバイスありがとうございました！
私はWebデザイナーですが、よくフライヤーや名刺、たまにポスターなんかの紙媒体のデザインを頼まれます。私はDTPについて勉強した訳ではないし、教わったこともないので紙媒体は苦手です。私の周りのWebデザイナーさんたちは、Webも紙も一緒だよという人もいますが、私はちょっと違うかなと思っています。
今日は苦手を克服するために、私なりのWebと紙の違い、DTPでの注意点を整理しておこうと思います。（ここで言う紙、紙面は私の仕事の範疇である名刺やフライヤー、ポスターなどに限ります。）
1. Webブラウザと紙面の違い
まずはWebブラウザと印刷物である紙面の違いから。
1.1. Webはスクロールすることが前提だけど、紙面はひと目で全体像が見れる
Webの場合はスクロールすることができて、縦の長さに対する制約はありません。いくらでも縦に長いページを作ることができる代わりに、全体像を俯瞰的に見ることが難しいです。（スクロールしないで、ブラウザのファーストビューの範囲内でページを作成することもたくさんありますが）
逆に紙面ではひと目で全体像を把握することができます。ですから紙面の場合、全体像、レイアウトなどが特に大事になってきます。
1.2. レイアウト
WedデザイナーがWebサイトをレイアウトする時、どんな風に考えるでしょう？ヘッダーは？メインは？サイドバーは？フッターは？と大体こんな感じで考えてしまいます。
でも紙面の場合、このようなレイアウトは全く意味がありません。Webの場合はその仕様上難しいレイアウトも、紙の場合は自由に何でも思いのまま。紙面の大きさという制約はありますが、全て自由に配置できます。
2. 紙ならではの特徴
Webにはない紙ならではの特徴について。
2.1. 文書もデザイン、レイアウトの一部
Webサイトを作成する時に、クライアントから「読み易くレイアウトしてください」と言われ、改行位置まで指定されることはありませんか？これって紙的発想ですよね。Webの場合はユーザーのブラウザやフォントなどによって、改行される位置まで固定させるのは難しいです。
でも紙媒体の場合はそれができるわけで、長い文章ををレイアウトに合わせて短く表現するとか、キャッチコピーとか、タイポグラフィー自体もデザインの一部になってきます。改行で調整するのではなく、文章量で調整するということも大切になってきます。
改行、文書量で段落だけで綺麗にレイアウトできるのも紙の特徴です。
Webだと難しいこんなレイアウトだって自由自在です！
テキストだけでこんな素敵なデザインだって実現可能なのも紙ならでは。Webデザインではなかなか出てこない発想です…もっと柔軟にならなくちゃ…
2.2. 紙媒体は位置情報に強い
位置情報というのは、地図という意味ではありません。情報検索についての位置情報という意味です。Webの場合、情報を検索するのに検索窓を使いますが、紙にはそれがありません。
その代わりに紙面の場合は情報を位置、前後関係で記憶できるという強みがあります。具体的に言うと、あの雑誌のあの記事は、あの見出しのところにあったなーとか、あのイラストの近くに載ってたなーとか。
人間の脳はWebのようにメタインデックスを使って検索するよりも、物理的な場所であったり、あの時あそこで買った本といった具合に、時間や場所に関連づけて思い出す方が得意です。
そんな人間の脳に対してどこまで自由にレイアウトしていいのかいつも悩みます。自由にレイアウトできる紙面ですが、もともと人がもっている位置情報に逆らってレイアウトを組むのには注意が必要です。
はがきの郵便番号欄を探す時は、紙面の四隅のどこかを探しますし、雑誌の目次だったら先頭か最後のページを探しますよね。
現代では横書きの文章の場合、普通左から読みますし、縦書きの場合は右側から読みます。視線は上から下へ流れていきます。
もしこんな風にレイアウトされていたら、あなただったらどう読みますか？順番に読まないと意味が通じない文章なら、ちょっと困ったことになります。私、新聞読んでていつも段落が分からなくなっちゃうんです…
ちょっとオフセットするだけで見る人の視線を誘導できます。これなら意図した通りの順番できっと読んでもらえるはずです。私がいつも困った時に使ってるちょっとしたコツみたいなものです w
2.3. フォント
小さいサイズの明朝体は、パソコンのディスプレイでは視認性が悪く、Webの場合は基本ゴシックとされています。しかし紙媒体の場合は明朝体も取り入れることができます。
どこにどのフォントを使うか？といのも悩みの種ですが、長文には明朝系・細ゴシックも使うようにしています。でも背景色の明度が暗い場合や、やっぱりサイズが小さい場合はゴシックを使っています。
文字のサイズが小さくなるとゴシックの方が読み易いです。
2.4. 見出し、文字の装飾
Webの場合、見出しやタイトルは装飾することが多いです。見出しであることをハッキリ区別することで読み易くなるからですよね。
ちょっと左に太めのボーダーを入れるだけでグッと視認性がよくなりますね。
でも紙の場合はあまり見出しに装飾をしません。その辺の雑誌を手にとってぱらぱらめくってみてください。文字自体を装飾するよりも、文字のコントラストはっきりさせて、余白を大きくとったりした見出しが多いと思います。
紙の場合は文章のフォントサイズから大げさなくらい大きくして、余白をとって見出しをデザインした方がスッキリしていいかもしれません。余計な装飾は、ひと目で全体像をみることができる紙媒体では、くどいデザインの原因となってしまうこともあります。
2.5. 無駄なシャドウやグラデーション
Webデザインではテキストやボックスにシャドウを付けたり、グラデーションを付けることが多いと思います。私もシャドウやグラデーションは大好きです。例えばこのブログのロゴにも、シャドウとグラデーションを使っています。
追記
現在のピンクのデザインでは使っていません。
少し立体的に見えるし何よりお洒落！（ごめんなさい。自己満足です。）
でも紙媒体の場合は、ちょっとしつこくなってしまう傾向があるようです。シャドウやグラデーションを使わずに、フォントのデザインをスッキリと見せた方が全体的に「うき」もなくて違和感がありません。（上手く表現できませんが…）
同じロゴですが、シャドウとグラデーションを消してみました。Webではいまいちですが、紙面ではこの方がいいと思います。
また、Webデザインでは、背景にもよくグラデーションを使います。このブログもコンテンツ部分やヘッダー、フッターの背景にグラデーションを多用（笑）しています。
追記
現在のピンクのデザインでは使っていません。
でも紙媒体では使いどころが難しい。もちろんデザインによりますが、私はちょっと苦手です。
グラデーションで表現したいものがあるなら、こんな風に使うこともできます。
背景ではなく、タイポグラフィーのトーンを変えてグラデーションを表現。カッコいいです。
2.6. ボーダーを使ってみる
Webデザインではあまり使わないボーダー。（あくまでも私は、です！）CSS で borderプロパティはたくさん使ってますが、ボックスの陰影を付けるための 1px程度のものばかりで、「線」としてあまりボーダーを使っていないWebデザイナーさんも多い？と思います。強いてあげれば、リストをセパレートするときとか、リンクのアンダーラインくらいでしょうか …
でも紙媒体ではボーダーがいい仕事をしてくれます（笑）ただの線ですが、線はあなどれません！テキストと線だけで綺麗にデザインされた紙面はたくさんありますねー。
2.7. 文字のカーニング（字詰め）
文字には基本的に、字詰めをしましょう。特に日本語の場合、ひらがな、カタカナの部分は隙間が大きくなりがちです。字詰めをすればスッキリとした並びになって、読み易さもアップします。
一番下のカタカナは、小さい「ェ」のところがスカスカなので、もうちょっと字詰めしてもいい感じがしますねー。下手っぴーです X(
2.8. 縦方向、横方向の段落、段
Webでのリーダービリティーを考えた時に、縦方向への程度な段落はとても大切です。誰だって長文は嫌いですよね。適度な長さで段落を入れるのは、Webでも紙でも同じですが、紙の場合は双方向に気を配る場面も出てきます。雑誌などではよく使われているレイアウトですね。
上は縦にも横にも、一切段を入れていないレイアウトです。見ただけで圧倒されて読む気も失せます…
長文では横方向の段落だけでなく、縦方向へも段をつけるとグッと読み易くなります。これも紙面ならではの工夫ですね。
紙面の大きさや文章量にもよりますが、大体20文字くらいに収めた方がいい感じで、可読性も向上します。雑誌や新聞でいつも見ているレイアウトですが、ブログばっかり読んでると、なかなか出てこない発想かも。
- 関連記事：
ブログの読み易さを改善する10の方法
2.8. 紙は四角いとは限らない
Webデザインは基本的に横幅が決まっているデザイン（もちろん可変もあります）ですが、紙面はそうとは限りません。丸だったり三角だったりとその形は様々ですし、表面の質感だって様々です。「四角」にとらわれずに柔軟な発想で、クリエイティブなデザインを作りたいですね！
3. あなたのインスピレーションを刺激する素敵なデザイン
紙面デザインのインスピレーションを刺激するブログのリンク集です。
- どうせ名刺を作るならこんなクリエイティブなのがいい110+
- クリエイティブなポスターデザイン 30+
30+ Creative and Inspiring Poster Designs - ビンテージなチョコレートの広告
Splendid Vintage Chocolate Ads - 素敵で楽しい30の結婚式の招待状 30
30 Fun and Fantastic Wedding Invitations - キレイでクリエイティブなパッケージデザイン
Beautiful Innovative Packaging Designs - 25のクリエイティブな履歴書
25 Examples of Super Creative Resume Design - 30の素敵なインフォグラフィック
30 Beautiful Infographics for your Inspiration
Webデザイナーのみなさん、DTPデザイナーのみなさん、こんな私にアドバイスを頂けたらとっても嬉しいです！そりゃ違うよーとか、こうした方がいいぞーとかあったらよろしくお願いします。