デザイナーなら誰もが真似すべき印刷デザインの原則

印刷デザイナーは、あなたが画面上で苦労しているほとんどすべてのことを既に解決していました。あなたが生まれる前から、より少ない予算、より劣悪なツール、そして午前3時に印刷機から出てくるような厳しい締め切りという制約の中で、彼らはそれを成し遂げていたのです。

デジタルデザインの波が押し寄せるたびに、私たちは彼らの功績をゆっくりと、そして不十分な形で再発見します。5年ごとに新しいグリッドシステムを考案し、階層構造を「視覚的重み」と呼び換え、あたかもそれが新しいものであるかのように振る舞います。まるでスタートアップのプレゼンテーションのように、ホワイトスペースについて議論を交わします。

しかし、印刷の分野は既にこれらの問題のほとんどを解決済みです。その成果は、1995年のWired誌の製本版や1947年のペンギンブックスのペーパーバックの中にあり、あなたが実際に目を通すのを待っています。印刷は美術館ではありません。自由に出入りし、必要なものを取り、そして出て行くことができる、機能的な図書館なのです。

なぜ印刷が先にこの問題を解決したのに、私たちはそれを忘れ続けているのか

印刷には、デジタルが未だに免れているかのように振る舞う制約がありました。ページは固定されたキャンバスです。雑誌の見開きページは、印刷と配送に実際の費用がかかります。

あらゆる決断にはコストが伴い、そのコストが編集上の制約を強いた。印刷デザイナーは、TikTokではなく、次のページと読者の注意を奪い合う必要があった。競争は正々堂々としたものだった。使えるツールは、文字、画像、色、紙、そしてグリッドに限られていた。

マッシモ・ヴィネッリは、この5つの要素でアメリカン航空のユニマーク・アイデンティティを構築した。ポーラ・シェールはペンタグラムの最も象徴的なポスターを制作した。ウィム・クロウウェルはステデリック美術館のビジュアル言語を確立した。たった5つのツール、数十年にわたる規範。

デジタルデザイナーは千ものツールを持っているにもかかわらず、読者を尊重するランディングページを作れる人はほとんどいない。制約はツールにあるのではなく、誰も私たちに規範を学ぶことを義務付けなかったことにある。

印刷が確立した7つの原則

ロマンチックな要素を取り除けば、印刷が確立し、デジタルが未だにつまずいている7つの原則が見えてくる。

1. 階層構造 リードとなる要素が1つある。その他すべてはリードに奉仕する。

2. グリッド グリッドは読者との契約であり、デザイナーを縛る檻ではない。

3. リズム ページをめくるたびに、まるで音楽のように流れるような感覚を味わえるべきであり、スロットマシンのように単調であってはならない。

4. スケール 大きなものは、それだけの価値があるからこそ大きく、小さなものは、それだけの価値があるからこそ小さくある。

5. コントラスト フォントの太さ、色、密度、スケール。コントラストは視線の動きを左右する。

6. 抑制 ほとんどの決定は、何かを加えるのではなく、何かを取り除くという決定である。

7. 読者への敬意 読者の時間、注意、そして知性は、あなたが費やす予算である。

これら7つの原則は、あらゆる優れた印刷物の根底にある。チヒョルト時代のペンギン・ペーパーバックにも、リチャード・ターリー時代のブルームバーグ・ビジネスウィークの表紙にも、ヴィニェッリの地下鉄路線図にも、ニューヨーク・タイムズ・マガジンの特集記事の冒頭にも、同じように表れている。名前は変わっても、原則は変わらない。

階層構造とグリッド：リードを選定し、契約に結びつける

リチャード・ターリーが編集長を務めていた2010年から2014年頃のブルームバーグ・ビジネスウィーク誌を開いてみてください。どの見開きページにもリードが1つだけあります。リードは巨大で、それを補完するテキストは小さく、画像は力強く主張するか、あるいは控えめに表現するかのどちらかで、どこから読み始めればよいか迷うことはありません。

これを2026年の典型的なSaaSマーケティングページと比較してみましょう。ヒーローヘッドライン、眉毛、サブヘッド、3つの機能箇条書き、顧客の声、グラデーションの塊など、すべてがリードになろうとしています。しかし、どれもリードではありません。読者はページを離れてしまいます。

印刷版の解決策は、かなり強引です。画面を見て、どの要素がリードなのかを自問自答し、他のすべての要素を視覚的に小さく、薄く、あるいは目立たなくします。2つの要素が競合している場合、階層構造は存在しません。階層構造の装いをまとったノイズです。

リードはどこかに着地しなければなりません。その「どこか」こそがグリッドです。ヤン・チヒョルトは1940年代後半、ペンギン・ペーパーバックのラインを、極めて規律のとれたグリッドを用いて再構築しました。その結果、書籍は今なお現代的な印象を与えます。

ウィム・クロウエルもオランダの公共デザインにおいて同様の手法を用いました。マッシモ・ヴィニェッリは、アメリカ合衆国の国立公園局のすべてのパンフレットにユニグリッドシステムを採用しました。そして、それらのパンフレットは50年経った今でも印刷され続け、読みやすく、美しいままです。

グリッドとは、フロントエンドフレームワークに標準搭載されている12段組のレイアウトのことではありません。グリッドとは、見出しが常に同じ位置から始まり、キャプションが一定の段に配置され、余白がずれることなく、読者の視線がページ全体を信頼できるという約束です。読者はグリッドを意識的に見るのではなく、その存在を感覚的に感じ取るのです。

ほとんどのデジタル製品にはグリッドがありません。それらは、前回のデザインレビューを通過したレイアウトを採用しているだけです。それはグリッドとは全く異なるものです。

リズムとスケール：2ページ目をデザインし、サイズ感を掴む

印刷デザイナーはページ単位ではなく、見開き単位で考えます。雑誌のアートディレクターは、映画編集者がシーンをカットするように、特集記事の始まり方、展開、加速、そして結末を綿密に計画します。カーソンとプランケットの時代におけるWired誌は、まさにこの点で有名でした。各特集記事は、単なる音符ではなく、一つの楽曲のように構成されていました。

一方、デジタルデザインは圧倒的に単一画面単位で考えられています。メインページは100時間、2ページ目は15分、3ページ目は全く注目されません。そして、マーケティングページが折り目より下に埋もれてしまうのは当然のことです。

この手法を真似てみましょう。ページ全体をビートの連続としてスケッチしてみてください。リズムを声に出して説明できないなら、そのページにはリズムがありません。

スケールはリズムの力強い従兄弟のようなものです。ポーラ・シェアのパブリック・シアターのポスターは、スケールの好例です。文字はポスターいっぱいに広がり、端は切り取られ、単一の太さで全てを表現しています。

サイズこそがメッセージです。文字を読むのは、文字そのものが空間だからです。

デジタルデザインでは、大きな文字を主張の手段としてではなく、雰囲気作りのために使う傾向があります。「チームを力づけるプラットフォームへようこそ」という48ピクセルの見出しは、その文字がそれだけの価値があるから大きいのではありません。デザインシステムがdisplay-xlトークンを配布し、誰かがそれを使ったから大きいのです。

印刷のルールはシンプルです。文字が大きい場合、その中の言葉はそのスペースに見合うだけの価値がある必要があります。言葉がそのサイズに見合うか、そうでなければサイズを小さくするしかありません。第三の選択肢はありません。

デジタルデザインの5つの罪と印刷原則による解決

ほとんどの悪いデジタルデザインは、5つの繰り返される間違いのいずれかです。それぞれに、印刷原則を適用することで即座に解決できます。

| 印刷原則 | よくあるデジタルデザインの罪 | 解決策 |

|---|---|---|

| 階層構造 | 全てが同じサイズで、リードがない | リードを1つ選び、残りは目に見える形で縮小する |

| グリッド | 装飾的なレイアウトで、基盤となる構造がない |適切なグリッドを設定し、すべての要素を例外なくグリッドに揃える |

| 抑制 | フォントが多すぎる、装飾が多すぎる | フォントは2種類までに制限し、効果のない境界線、影、グラデーションは削除する |

| スケール | 文字が大きすぎるのに、単語が弱い | 単語に見合ったサイズにするか、文字サイズを小さくする |

| コントラスト | アンカーのない、グレー地にグレーの単調なUI | 適切な太さのコントラスト、適切な色のアンカー、適切な密度の変化を加える |

この表を一度読んでから、自分の製品を見てください。今月出荷した画面には、少なくとも3つの問題点が見つかるはずです。それは問題ありません。ほとんどの人が抱えている問題です。重要なのは、問題点を特定し、修正することです。

抑制と尊重：学ぶのが難しい2つの原則

ヴィニェッリの生涯の仕事は、装飾との戦いでした。彼はある時期以降、キャリアを通してたった5種類の書体しか使用しませんでした。彼は、デザイン上の問題のほとんどは、削除すべきものを追加したことから生じると信じていました。そして、彼の考えはほぼ全て正しかったのです。

抑制は、デザインにおいて目に見える作業とは追加するものであるため、最も理解しにくい原則です。グラデーションを削除したり、アイコンをカットしたり、3つ目のフォントを読み込みを拒否したりしても、誰も拍手喝采を送ってくれません。読者は、ページを最後まで読み切ることで、静かに拍手を送ってくれるのです。

役立つ個人的なルールがあります。画面を出荷する前に、3つの要素を削除して、デザインがまだ機能するかどうかを確認してください。もし機能するようであれば、削除した要素はそのままにしておきましょう。

抑制の原則は、読者への敬意に基づいています。印刷媒体は読者を大人として扱います。ペンギン社は、スクロールインジケーターも、進捗バーも、推定読書時間も表示せずに、11ポイントのガラモン体で書かれた400ページの小説を読者が読めると想定していました。

デジタル媒体は、15年間、静かに読者を侮辱してきました。読書時間表示、進捗バー、記事の中にある要約版の「TLDR」セクションなど。読者は付き添いなしではテキストを理解できないという前提があるのです。

その前提を捨てましょう。読者は大人です。彼らは読んでくれることで、あなたに報いてくれるでしょう。

優れた編集記事の読み方

ニューヨーク・タイムズ・マガジンの古い号、あるいはターリー時代のブルームバーグ・ビジネスウィーク、もしくはペンタグラムの年次報告書を手に取ってみてください。特集記事のページを開いて、じっくりと見てみましょう。

リードに注目してください。リードは必ず一つだけです。見出し、画像、あるいは引用文のいずれかです。

リードの位置に注目してください。ほとんどの場合、グリッドの交点に配置されており、中央揃えのためだけに中央に配置されているわけではありません。補助的なテキストにも注目してください。リードよりも小さく、多くの場合、薄い色で、リードと競合することはありません。

余白にも注目してください。予想以上に多く、意図的に配置されています。偶然ではありません。キャプションにも注目してください。小さく、固定されたカラムに収まっています。ページ番号にも注目してください。決まった場所に配置され、動きません。

これこそがグリッドの働きです。階層構造の働きです。リズムの働きです。

これらの決定はすべて、読者のために、意図的に、人によってなされたものです。

きれいに翻訳できるタイポグラフィの教訓

印刷タイポグラフィは、スクリーンタイポグラフィに比べて、3つの点で数十年も先を行っています。

まず、スケール比率。印刷デザイナーは、タイポグラフィのスケールを決定し、それを厳守します。長三分法、完全四分法、黄金比など、何でも構いません。

一方、スクリーンデザイナーは「デザインシステムには8つのサイズがあるから、そのほとんどを使おう」といった具合です。これはスケールではなく、ビュッフェのようなものです。

次に、行の長さと行間。印刷の規範では、本文の行長は1行あたり約66文字、行間はフォントサイズの約140%と定められています。ウェブデザインでは、デザインシステムの規定に従って、120文字幅で行間を狭くした段落が日常的に使われています。

最後に、フォントの組み合わせ。印刷のルールでは、最大2つのフォントファミリーを使用し、それぞれ異なる役割を担わせる必要があります。例えば、ディスプレイフォントと本文フォント、あるいはセリフ体とサンセリフ体などです。

デジタルデザインのルールはいつの間にか「Interフォントを使い、マーケティングチームが気に入っているから他の4つのフォントを追加する」というものになってしまいました。フォントを2つに絞れば、階層構造が一気に明確になります。

ホワイトスペースとカバーデザインの教訓

ホワイトスペースはデザインのネガティブな要素ではありません。デザインそのものです。スイスのデザイナーたちは1950年代にこのことを教えていましたが、私たちはその後、どういうわけか二度もそれを忘れてしまいました。

ミュラー＝ブロックマンのポスターを見てください。ホワイトスペースは構造的な役割を果たしています。文字を枠付け、視線を誘導し、インパクトのある要素に落ち着く場所を与えています。

ホワイトスペースはコンテンツの欠如ではありません。コンテンツを読みやすくするページの一部です。デジタル製品は、空白のピクセルが無駄なスペースのように感じられるため、ホワイトスペースを恐れています。しかし、そうではありません。

ホワイトスペースは、読者がページを離れずにいられるためのゆとりです。ホワイトスペースを2倍にしたランディングページは、同じページでテキストを2倍にしたページよりもコンバージョン率が高いのです。自分の製品で試してみてください。何が起こるか観察してみましょう。

雑誌の表紙は、書店でたった2秒でその役割を果たさなければなりません。ブランドを印象づけ、メインストーリーを伝え、サムネイルサイズでも美しく見えるようにしなければなりません。編集デザイナーは100年もの間、この課題に取り組んできました。

ホームページのヒーロー画像、オンボーディング画面、アプリのアイコン、ソーシャルメディアのシェア画像。これらはすべて表紙です。2秒ルールは同じです。

成功の秘訣を盗みましょう。一つの支配的なアイデア、一つのタイポグラフィのアンカー、そして瞬きしない一枚の画像。ヒーロー画像の説明に3行も必要なら、それはヒーロー画像ではありません。

印刷物からデジタルへ移行できないもの

印刷物ですべてが解決できたわけではありません。従来の手法では得られないものを正直に認めましょう。

印刷物ではインタラクティブ性は解決できませんでした。ページはタップに反応しません。従来の手法では、状態、フィードバック、エラー処理、ユーザーが予期せぬ行動をとった瞬間などについて何も教えてくれません。

印刷物では動きは解決できませんでした。編集デザイナーは静止画を前提に考えます。動きはアニメーション、映画、ゲームから学ぶ技術であり、雑誌の見開きページから学ぶものではありません。

印刷物ではレスポンシブレイアウトは解決できませんでした。印刷グリッドは規律を教えてくれますが、レスポンシブグリッドはそれに加えて解決すべき課題です。

原則は残りますが、実装はそうではありません。原則を取り入れ、前提は捨てましょう。それが正しい盗用方法です。

印刷に影響を受けたデザインシステムの構築

これらすべてをデザインシステムに組み込んでも、誰からも「気取っている」と非難されることはありません。重要なのは、原則を装飾ではなく制約として組み込むことです。

フォントは2種類までに制限します。フォントサイズは実寸大で6種類までに制限します。カラートークンは実用的なセットに限定し、アクセントカラーは1色のみ、その存在感を際立たせる色にします。

スペーシングトークンは、ブレークポイント全体で一定のリズムを保つように制限します。シャドウとボーダートークンは、必要な最小限のセットに制限します。

次に、使用ルールを記述します。どのビューでも、リードは最大の要素です。グリッドは絶対であり、配置は譲れません。ホワイトスペースはトークンであり、余白ではありません。

装飾は、構造的な役割を果たす場合にのみ追加されます。これらのルールは、デザインシステムのドキュメントにコンポーネントのすぐ隣に記載されており、プルリクエストでコードがレビューされるのと同じように、デザインクリットでレビューされます。

原則のないデザインシステムは、単なるステッカーパックです。印刷の原則が組み込まれたデザインシステムは、出版物です。

バウハウスは1920年代にこのことを理解していました。チヒョルトは1928年に『新タイポグラフィ』でそれを体系化しました。スイス派は1950年代にそれを実践しました。

ペンタグラムは60年間、それを商業的に提供してきました。原則は不変であり、変化し続けるのは媒体です。

自社製品で実施できる短いワークショップ

現在使用している製品から画面を1つ選びます。ホームページのヒーローパネル、ダッシュボード、設定ページなど、何でも構いません。尊敬する印刷物、雑誌の見開きページ、年次報告書のページ、ペーパーバックの扉など、ペンタグラム、ヴィニェッリ、シェールなどの作品を用意してください。それらを並べて見てください。

5つの質問を自問自答してください。それぞれのリードは何ですか？視線は最初に、次に、そして三番目にどこに留まるのか？使用されているフォントの種類とサイズはいくつで、意図的な余白と偶然の余白はどれくらいあるのか？

次に、不要な要素を削りましょう。3つの要素を削除し、眉毛を小さくし、フォントの種類を2つに制限します。リードをグリッドの交点に移動させます。ページにゆとりが生まれるまで余白を増やします。

新しいバージョンを同じ5つの質問に照らし合わせて見直しましょう。改善点は明らかです。

これを1ヶ月間、週に1回繰り返してください。あなたの目は再調整され、画面はより静かで鮮明になり、チームメンバーもその変化に気づき始めるでしょう。

これこそが印刷教育の効果であり、たった半日で自分自身にその教育を施すことができるのです。

印刷の規範は、実践的なライブラリです。そのように扱いましょう。

この文書に挙げられている名前は、歴史上の人物ではありません。ヴィニェッリ、チヒョルト、クロウエル、シェール、ミュラー＝ブロックマン、カーソン、ターリー、ペンタグラム、ペンギン、ブルームバーグ・ビジネスウィーク、ニューヨーク・タイムズ・マガジン。これらは、あなたが今週すぐに活用できる実践的なライブラリなのです。

彼らの著書は今も出版され続けている。彼らの作品は今もオンラインで閲覧できる。彼らの理念は今もなお有効だ。

モノグラフを1冊購入しよう。印刷版の雑誌を1誌購読しよう。実際に仕事をするデスクにデザイン年鑑を1冊置いておこう。行き詰まった時に開いてみよう。

古典作品は、あなたのPinterestボードよりもはるかに多くのことを教えてくれるだろう。あなたが今悩んでいることのほとんどは、既にこの分野で解決されている。作品はそこにあり、あなたが目を向けるのを待っている。さあ、見てみよう。