Webデザイナー(私)によるDTPデザイン注意書き:Webと紙の違い

Posted under - Web Design

35

Webデザイナーのみなさん、DTP デザインってどうですか?私は DTP デザインが苦手なんですけど、Webデザイナーをしていると、たまに印刷物のデザインを頼まれることがあります ...。そんな時のことを考えながら書いた覚え書きです。

DTP Design

私は Webデザイナーですが、よくフライヤーや名刺、たまにポスターなんかの紙媒体のデザインを頼まれます。私は DTP について勉強した訳ではないし、教わったこともないので紙媒体は苦手です。私の周りの Webデザイナーさんたちは、「Web も紙も一緒だよー」という人もいますが、私はちょっと違う部分もあるかなと思っています。

今日は苦手を克服するために、私なりの Web と紙の違い、DTP での注意点を整理しておこうと思います。ここで言う紙、紙面は私の仕事の範疇である名刺やフライヤー、ポスターなどに限ります。また、In Design とか、Illustrator などのソフトウェアについてでもありません。

1. Webブラウザと紙面の違い

まずはディスプレイで見る Webブラウザと、印刷物である紙面の違いから。CMYK とか、 RGB とかのことじゃありません。

1.1. Web はスクロールすることが前提だけど、紙面はひと目で全体像が見れる

Web の場合はスクロールすることができて、縦の長さに対する制約はありません。いくらでも縦に長いページを作ることができる代わりに、全体像を俯瞰的に見ることが難しいです。スクロールしないで、ブラウザのファーストビューの範囲内でページを作成することもたくさんありますが、ひと目でヘッダーからフッターまでが見渡せないのが普通ですよね。

でも、誌面はひと目で全体を見渡せます

OLYMPUS DIGITAL CAMERA

誌面デザインは手に取って見ることができるので、全体がひと目で見渡せますね!
via Reynolda Village Branding, Print & Web

それに対して、印刷物 … 紙面では、ひと目で全体像を把握することができます。手に取ってみることができるので、当たり前なんですけど …。ですから紙面の場合、全体像、レイアウト、特にバランスが大事になってきます。

1.2. レイアウト

Webデザイナーが Webサイトのレイアウトをデザインする時、どんな風に考えるでしょう?ヘッダーは?メインカラムは?サイドバーは?フッターは?と、大体こんな感じで考えてしまいます。

でも紙面の場合、このようなレイアウトは全く意味がありません。Web の場合はその仕様上難しいレイアウトでも、紙の場合は自由に何でも思いのまま。紙面の大きさという制約はありますが、全て自由に配置できますよね!

レイアウトは自由に!

Flickr User Model, v0.3

一枚の誌面の中で、自由にレイアウトできますね!via Flickr User Model, v0.3

2. 紙ならではの特徴

Web にはない … というか、Web では軽視されがちなデザインの部分 と言いますか …。誌面デザインでは、もっといろいろシビアだなーって思います。

2.1. 文書もデザイン、レイアウトの一部

Web サイトを作成する時に、クライアントさんから「読みやすくレイアウトしてください」って言われて、改行位置まで指定されることはありませんか?これって紙的発想ですよね。Webサイトの場合は、ユーザーの使用しているブラウザやフォントなどによって、改行される位置まで固定させるのは難しいです。

でも紙媒体の場合はそれができるわけで、長い文章ををレイアウトに合わせて短く表現するとか、カーニング(字詰め)するとか、タイポグラフィー自体もレイアウトの一部になってきます。改行で調整するのではなく、文章量で調整するということも大切になってきますね!

段落をきれいにレイアウト

Print Design

右のページは、段落だけでグリッドに沿ってきれいにレイアウトを作ってますよねー。きっちり両端揃えできるのも、誌面ならではですね!via Marc Tanner – Online Portfolio

カーニングや、ときには文書量なども変えて、段落を綺麗にレイアウトできるのも紙の特徴ですね!

イラストに沿ってレイアウト

Z fold Brochure

イラストの形に沿って、文章をレイアウトできるのも紙ならではですね! via Call-to-Action Brochure Designing

Webだと難しいこんなレイアウトだって自由自在です!

放射状のレイアウト

Creative Résumés

こんなふうな放射状のレイアウトだって、思いのままですね! via 30 Artistic and Creative Résumés

タイポグラフィーだけで、こんな素敵なデザインだって実現可能なのも紙ならでは。Webデザインだけを見てるだけでは、なかなか出てこない発想です…もっと柔軟にならなくちゃ…ですねー。

2.2. 紙媒体は位置情報に強い

位置情報というのは、地図という意味ではありません。情報検索についての位置情報という意味です。Web の場合、情報を検索するのに検索フォームを使ったりしますが、紙にはそれがありません。

その代わりに紙面の場合は情報を位置、前後関係で記憶できるという強みがあります。具体的に言うと … あの雑誌のあの記事は、あの見出しのところにあったなーとか、あのイラストの近くに載ってたなーとか。

人間の脳は Web のように、メタインデックスを使って検索するよりも、物理的な場所だったり、あの時あそこで買った本 … といった具合に、時間や場所に関連づけて思い出す方が得意です。

そんな人間の脳に対して、どこまで自由にレイアウトしていいのかいつも悩みます。自由にレイアウトできる紙面ですが、もともと人が持っている位置情報に逆らってレイアウトを組むのには、注意が必要ですね。

たとえばはがきの郵便番号欄を探す時は、紙面の四隅のどこかを探しますし、雑誌の目次だったら先頭か最後のページを探しますよね。横書きの文章の場合、ふつう左から読みますし、縦書きの場合は右側から読みます。そして視線は上から下へ流れていきます。

2.3. レイアウトってなんだろう?

さっき「はがきの郵便番号欄を探す時は、紙面の四隅のどこか」って書きました。そんな風にもともと人が持っている、レイアウトにたいする暗黙の了解みたいなものって大切ですよね。でも、レイアウトってデザイナーさんの数だけあって、デザイナーさんの考えで配置していきます。そしてレイアウトってとっても不思議で、配置をちょっと変えただけで、受ける印象とか、読む順番とか、そういったものを変える力があるんですよねー。

ちょっと下の画像を見てください。

均等な距離で配置したレイアウト

均等に配置されたレイアウト

横も縦も等間隔で、段落を4つ配置してみました。

もしこんな風にレイアウトされていたら、あなただったらどう読みますか?人によっては、23、どっちを先に読んでいいのか、迷う人もいるかもしれませんね!順番に読まないと意味が通じない文章なら、ちょっと困ったことになります。私、新聞読んでていつも段落が分からなくなっちゃうんです…。

均等な距離で配置したレイアウト

配置を工夫したレイアウト

少しオフセットして、距離も調節してみました。

今度はどうでしょう?これなら自然と流れができて、1234という順番通りに読んでくれる人の方が、多いんじゃないかな?レイアウトって不思議なもので、ちょっと配置を変更するだけで、見る人の視線を誘導できたりもしますね!

2.4. フォント

小さいサイズの明朝体は、パソコンのディスプレイでは視認性が悪く、Web の場合は小さい文字はゴシック(サンセリフ)の方がいいって言われてたりします。でも紙媒体の場合は、小さい文字でもくっきり印刷できますから、明朝体(セリフ)も取り入れることができますね!

ゴシック体(サンセリフ)

明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。

明朝体(セリフ)

明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。
明朝体とゴシックの比較。

明朝体とゴシック体では、フォントから受ける印象もだいぶ変わってしまいますから、フォント選びも慎重に行いたいですね!でも Web では、文字のサイズが小さくなると、やっぱりゴシックの方が読み易いですよね …。

2.5. 見出し、文字の装飾

Web の場合、見出しやタイトルは装飾することが多いです。見出しであることをハッキリ区別することで、文章が読みやすくなるから、見出しのコントラストはとっても大切です。たとえば下のように、ちょっとアクセントでアイキャッチするだけで全然違いますよね!

見出しを装飾することが多い気がします …

ちょっと左に太めのボーダーを入れるだけで、グッと見出しっぽさが出ます。本文とのコントラスト(対比)は、日本の Web サイトの場合、こんな風に装飾したデザインが多い気がします。

でも紙の場合は、あまり見出しに装飾をしないかも。その辺の雑誌を手にとって、ぱらぱらめくってみてください。文字自体を装飾するよりも、文字のコントラストはっきりさせるために、余白を大きくとったりしたデザインの見出しが多いと思います。もちろんデザインが与える印象によって、いろいろ使い分けが必要だけど、あんまり装飾した見出しは見たことがないかもです。

ホワイトスペースやタイポグラフィーでのコントラストにひと工夫

MVM Brochure Profission

こんなに小さくても、どれが見出しなのかわかりますよね!via – MVM Fund Brochure

紙の場合は見出しをあんまり装飾しないで、余白をとったり、ジャンプ率を工夫したりして、スッキリしたシンプルなデザインの方がいいかもしれませんね!余計な装飾のデザインは、ひと目で全体像をみることができる紙媒体の場合、くどいビジュアルの原因となってしまうこともありますね。

2.6. 無駄なシャドウやグラデーション

Web デザインでは、テキストやボックスにシャドウを付けたり、グラデーションを付けることが多いと思います。私もシャドウやグラデーションは大好きです。

Webデザインて、擬似的な質感を出すことが多いかも

I love design

テクスチャの質感を出すだめに、タイポグラフィーにグラデーションやドロップシャドウを使っています。

何ていうか、少し質感を出して、光と影を意識するっていうか … 流行もあると思うんですけど …。

でも紙媒体の場合は、ちょっとしつこくなってしまう傾向があるみたい。シャドウやグラデーションを使わずに、タイポグラフィーのデザインを、そのままスッキリと見せた方が全体的に「うき」もなくて違和感がありません(上手く表現できませんが…)。

手に取ることのできる印刷物では、擬似的な質感は必要ないですね!

I love Design

もともと手に取ることができる印刷では、擬似的な質感を出す必要は、あんまりありませんよね!

同じタイポグラフィーですが、シャドウとグラデーションを消してみました。もちろんテクスチャも。紙面ではこの方が断然スッキリしてていいかなーと思います。

また、Web デザインでは、背景にもよくグラデーションを使いますよね!

アップルでも背景にグラーデーションを使っていますね!

Apple

シンプルなデザイン … という印象のアップルでも、グラデーションは結構使われてますねー。via – アップル

でも紙媒体では、使いどころが難しい …。もちろんデザインによりますが、私はちょっと苦手です。グラデーションで表現したいものがあるなら、こんな風に使うこともできますね!

タイポグラフィーのトーンで階調をつける

Typography

タイポグラフィーのトーンを変えて、グラデーションぽく表現していますねー。
via – Amazing Typography in Print Design

背景ではなく、タイポグラフィーのトーンを変えてグラデーションを表現。カッコいいですね!

2.7. ボーダーに気を使う

これは Webと紙の違いっていうより、デザインの基本的な部分だと思うんですけど、ボーダーには色んな使い方がありますよね。要素同士を分けるためにボーダーを入れたり、逆に関連つけるためにボーダーで結ぶことだってあります。

分ける線とつなぐ線

border

そしてレイアウトを強調させるために、ボーダーを使うこともありますよね!四角い形を強調したり、センタリングを強調させたり …。

Web だけじゃないですけど、グリッドできれいにレイアウトしたデザインて、幅がきっちりしていて、とかく四角いシェイプが目につきます。

そこにさらに直線のボーダーを使えば、より四角いシェイプが強調されて、しっかり感、几帳面感がでてきますよね!コーポレートサイトなどでは、しっかりした信頼感を出すのが大事なので、たくさんボーダーが使われている傾向が多いような気がします。

ボーダーの使いどころがステキ!

Matrix for Regular Events 2010/11

ページのタイトル部分にボーダーがあるのは、中央揃えを強調するため。また、文中にもボーダーがあるけれど、ちょっと短いですよね!短くしたのには理由があるはずです!via – Matrix for Regular Events 2010/11

Web だと CSS で簡単に直線を引くことができますよねー。でも、ボーダーがある、なしで、時にはデザインの印象が変わってしまうので、少し慎重にボーダーを使いたいと思います!

2.8. 文字のカーニング(字詰め)

タイポグラフィーには、基本的に字詰めをしましょう。特に日本語の場合、ひらがな、カタカナの部分は隙間が大きくなりがちです。字詰めをすればスッキリとした並びになって、読み易さもアップします。

字詰め

欧文フォントの場合は、大文字と小文字が接する部分が気になりますねー。「W」と「e」の間はちょっと広いかも …

ひらがなやカタカナは、小さい「ェ」など、スカスカになりがちですもんね!

2.9. 縦方向、横方向の段落、段

Web でのリーダービリティーを考えた時に、縦方向への程度な段落はとても大切です。誰だって長文は嫌いですよね。適度な長さで段落を入れるのは、Webでも紙でも同じですが、紙の場合は双方向に気を配る場面も出てきます。雑誌などではよく使われているレイアウトですね。

適度な段や段落がある例とない例
段落が一切ない文章適度に段がある文章
<<Prev
Next>>

1は縦にも横にも、一切段を入れていないレイアウトです。見ただけで圧倒されて、読むのに勇気がいるかも …。は適度に段落、段をつけたレイアウトです。長文では横方向の段落だけでなく、縦方向へも段をつけるとグッと読み易くなりますねー!これも紙面ならではの工夫ですね。

紙面の大きさやなどにもよりますが、大体20文字くらいに収めた方がいい感じですね!長くなると、行頭に戻る時に、「あれ?どの行だったっけ?」ってなりがちです。雑誌や新聞でいつも見ているレイアウトですけど、Webデザインばっかり見ていると、見落としがちですね!

2.10. 紙は四角いとは限らない

Web デザインは、基本的に横幅が決まっているデザイン(もちろん可変もあります)ですが、紙面はそうとは限りません。丸だったり三角だったりとその形は様々ですし、表面の質感だっていろいろです。「四角」にとらわれずに柔軟な発想でクリエイティブなデザインを作りたいですね!

飛び出す絵本!

3. あなたのインスピレーションを刺激する素敵なデザイン

以下はキレイな紙面デザインのリンク集です。

8/20 追記:ツイッターでグレースケールから始めた方がいいよというコメントを頂きました。 Web でも白黒の段階でよくないなーと思うデザインは、色を着けてもよくないことが多いですもんね! 貴重なアドバイスありがとうございました!

Comments

Thank you for the comment.