デザイン内のコンテンツを効果的に整理して、理解しやすく、消費しやすいようにすることは、 デザイナーの 最も重要な仕事。また、デザイナーが扱うコンテンツの多くはテキストベースであるため、効果的な活版印刷の階層を作成することは、デザイナーが学ぶことができる最も重要なことの1つです。

効果的な階層を作成する練習と実験は、スキルを実際に習得するための最良の方法ですが、設計者が自分で始める前に、最初に学ぶべきガイドラインがいくつかあります。結局のところ、最初にルールが何であるかを知らなければ、ルールを効果的に破ることは不可能です。

活版印刷の階層とは何ですか？

初心者のデザイナーは、タイポグラフィの階層を使用する必要性を過小評価することがあります。しかし、この例を見てください：

同じ情報が両側で伝えられていますが、左側では、ヘッダー、サブヘッダー、および本文があることを知ることはできません。右側では、提供されている情報に階層があることがすぐにわかります。

製造勘定科目表のサンプル

活版印刷の階層は、どの情報に焦点を当てるべきかを読者に示します。これは最も重要であり、単に要点をサポートしているだけです。

Web上の活版印刷の階層を構成するものはさまざまです。これらには以下が含まれます：

サイズ。 サイズは一般的に、新しいデザイナーが活版印刷の階層を作成しようとするときに最初に目を向けます。そして正当な理由：それは読者によって即座に、簡単に識別できます。大きい=重要性が高い、小さい=重要性が低い。しかし、階層を作成するための他のオプションが非常に多い場合、サイズは松葉杖になる可能性があります。

重量。 書体を太字または細くすることは、設計者でなくても簡単に識別できる階層を作成するためのもう1つの簡単に認識できる方法です。

色。 色は階層を作成する方法として見過ごされがちですが、それは素晴らしいオプションです。特定の色の明るい色合いと暗い色合いを使用する場合でも、より明確な階層を作成できます。タイプとその背景のコントラストを高めることで、活版印刷の階層を増やすこともできます。

コントラスト。 対照的な色だけでなく、異なるタイプのサイズ、重み、スタイル間のコントラストも、活版印刷の階層を作成するための鍵となります。タイプサイズの違いが1つか2つしかない場合、ほとんどのユーザーに階層を表示するのに十分なコントラストは作成されません。代わりに、デザイナーは簡単に区別できるサイズ、太さ、スタイルを使用して、ヘッダーや本文などのコントラストを簡単に作成する必要があります。

場合。 本文を大文字にすることは一般的に良い考えではありませんが 読みやすさ パースペクティブでは、見出しまたは小見出しに大文字を使用すると、さまざまな見出しやその他のタイプを区別するのに役立ちます。

位置と配置。 見出しと小見出しの配置は、デザイナーが目立たせたい他のタイプとともに、タイプが階層内のどこにあるかに大きな影響を与える可能性があります。たとえば、センタリングタイプは目立つ傾向があります。ページの通常の余白の外側にタイプを設定すると、そのタイプをページの階層内で目立たせることもできます。

活版印刷の階層を作成する方法（およびデザインを視覚的に整理する方法）

デザイナー 活版印刷の階層を作成することになると、多くのオプションがあります。ただし、階層の作成に何が含まれるかを知っているだけでは、設計者が効果的な階層を作成するのに必ずしも役立つとは限りません。

最初に考慮すべきことの1つは、設計に必要な階層のレベル数です。原則として、すべてのデザインには、見出し、小見出し、本文の3つの階層レベルを含める必要があります。そこから、必要になる可能性のある追加のレベルを検討するのは設計者の責任です。これらには、キャプション、追加の小見出し、引用符、メタ情報（著者や記事の日付など）が含まれる場合があります。

そこから、階層のさまざまな部分を区別する方法を理解することが重要です。言うまでもありませんが、見出しは小見出しよりも目立つ必要があり、小見出しは本文のコピーよりも目立つ必要があります。キャプションは通常、本文のコピーよりも目立たないようにする必要があり、引用符は本文のコピーと小見出しの間のどこかに配置する必要があります。

タイプサイズ

伝統的 活版印刷のスケール デザイナーが始めるのを助けるために存在します。ただし、これらは出発点にすぎません。設計者は、これらの従来のスケールから逸脱しながら、さまざまなウェイトやスタイルを自由に試してみる必要があります。ほとんどの場合、本文のサイズに基づいてスケールを設定し、そこから拡大します。

からの古典的な活版印刷のスケール 活字スタイルの要素 フォントサイズを選択するときにほとんどのワードプロセッシングプログラムが提供するデフォルトである傾向があるため、ほとんどの設計者にはなじみがあります。スケールは次のとおりです。

6、7、8、9、10、11、12、14、16、18、21、24、30、36、48、60、および72。

増加するサイズを計算するためのさまざまな数式に従う追加の活版印刷スケールの例があります。

デザイナーはデフォルトで12ポイントの本文テキストサイズを使用する傾向がありますが、それを14または16（または24まで）に増やすと、使用している書体によっては読みやすさが向上する可能性があります。たとえば、ジェフリーゼルドマンの個人ウェブサイトでは、本文のコピーに24ピクセルのフォントサイズを使用していますが、Vogue.comでは19ピクセルの本文テキストサイズを使用しています。

ただし、実際の縮尺を確定する前に、設計者は設計で使用されている書体が確定されていることを確認する必要があります。技術的に「同じ」サイズであっても、異なる書体は大幅に大きくなったり小さくなったりすることがあります。

調整書体の選択

よりアマチュア的な取り組みとは別に「プロフェッショナル」なデザインを設定することが多いのは、書体の組み合わせです。書体を効果的に組み合わせるのは、本能と科学の一部ですが、異なるファミリの書体を組み合わせるために設計者が従うことができるガイドラインがいくつかあります。

まず、セリフとサンセリフの混合は、2つのセリフまたは2つのサンセリフを組み合わせるよりもはるかに簡単です。しかし、セリフとサンセリフをつかんで、それらをデザインにまとめるほど簡単ではありません。

書体が使用されるコンテキストを考慮してください。たとえば、デザインが軽くて楽しいと思われる場合は、書体がそのムードに合っていることを確認してください。デザインがより深刻な場合は、書体にそれを反映させる必要があります。言い換えれば、どの書体を組み合わせても、その雰囲気は一致するはずです。

設計者も、自分たちの利点とは対照的に使用する必要があります。薄い書体と厚い書体を組み合わせると、重量が非常に似ている2つの書体を組み合わせるよりもうまくいくことがよくあります。

類似の書体を探す エックスハイト （ベースラインと書体の小文字の平均線の間の距離）。これにより、書体間の競合を防ぐことができます。衝突を防ぐのに役立つ他のものには、同様のカーニングとキャラクターの形が含まれます。非常に丸い書体の書体は、より正方形の書体と組み合わせないでください。

ガイドラインは書体の組み合わせを作成するのに役立ちますが、実験と実践に取って代わるものはありません。デザイナーは、書体の実験に時間を費やし、できるだけ頻繁に書体を組み合わせる練習をする必要があります。さまざまな状況で機能するフォールバック書体の組み合わせをいくつか見つけることは、利用可能な予算とリソースが大量の試行錯誤を許さないプロジェクトにも役立ちます。

これらのガイドラインが手元にあれば、設計者はWebタイポグラフィソースが提供する4つのステップのプロセスに従うことができます。 より良いWebタイプ 効果的な組み合わせの作成に着手します。

1. 本文のアンカーフォントを探す
2. 可能な組み合わせのセカンダリフォントをいくつか見つけます
3. 組み合わせを評価する
4. フォントの組み合わせを削除/選択する

追加の考慮事項

最終的な書体を選択した後、さまざまなスタイルと重みを試してみると、超大型のメイン見出しを作成しなくても、階層のレベルを追加できます。書体をほぼ同じサイズに保ちながら、重要度の高い見出しを太字にし、重要度の低い見出しを斜体にすると、明確な視覚的階層が作成されます。

同じことが色でもできます。アクセントカラーの小見出しは、本文と同じ色の小見出しよりも目立ちます。デザイナーは、タイプサイズだけに依存することなく、より重要なテキストを区別するために、小見出しの色で遊ぶ必要があります。

間隔を使用して、重要な見出しと小見出しを区別することもできます。見出しの周囲にスペースを作成して、付随する本文から目立つようにすると、見出しがさらに目立つようになります。対照的に、本文と同じ間隔の小見出しは重要性が低くなります。

宇宙のデザインにアピールする要素には、次のうちどれが含まれますか

文字間の間隔さえも使用して階層を作成できます。文字の間隔を空けると、特定の行をより目立たせることができます。これは、これらの文字を大文字にすることと組み合わせると特に効果的です。ただし、使いすぎると素人っぽく見える可能性があるため、デザイナーはこれをやりすぎないように注意する必要があります。

結論

実験と練習は活版印刷の階層をマスターするための最良の方法ですが、これらのガイドラインを学ぶことは助けになります デザイナー 右足から始めます。サイズ、色、間隔、重量、およびその他の要因が効果的な階層にどのように寄与するかを学ぶことが最初のステップです。

これらの基本がデザイナーの心（および実践）で確立されると、ユーザーにインスピレーションを与えて楽しいユニークなデザインを作成するために、必要に応じて「ルール」に従うまたは破る視覚的な階層をより直感的に作成できます。

•••

ApeeScapeデザインブログの詳細：

• 読みやすさのための設計– Webタイポグラフィのガイド（インフォグラフィック付き）
• 書体分類のニュアンスを理解する
• デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）
• Webおよび印刷デザインの書体スタイ​​ル
• 明確な視覚的階層でUXを後押し

基本を理解する

タイポグラフィデザインとは何ですか？

タイポグラフィデザインは、書体を組み合わせてテキストベースのコンテンツの意味をサポートし、読者が使いやすくするための芸術と科学です。タイポグラフィの階層はこのプロセスで重要な役割を果たし、ページ上で最も重要なコンテンツを読者に知らせます。

タイポグラフィのポイントは何ですか？

優れたタイポグラフィは、ページのコンテンツに価値を付加します。適切なフォントを選択し、強力なタイポグラフィ階層を作成すると、テキストの消費と理解が容易になります。一方、タイポグラフィが悪いと、最高の情報でさえも読んだり理解したりすることが不可能になる可能性があります。

タイポグラフィとは何ですか？それはデザインと何の関係がありますか？

簡単に言えば、タイポグラフィはページ内にタイプを配置するプロセスです。デザインでは、これにはタイプの配置だけでなく、最適なフォントの選択、タイポグラフィ階層の作成、テキストベースの情報を表示するための最適な方法の決定も含まれます。

Webデザインでタイポグラフィが重要なのはなぜですか？

タイポグラフィは、間違いなく優れたWebデザインの最も重要な側面の1つです。タイポグラフィが悪いと、Webページを読んだり理解したりできなくなる可能性があります。一方、優れたタイポグラフィは、ページのコンテンツに付加価値を与え、訪問者が提示されている情報を理解しやすくします。

良いタイポグラフィとは何ですか？

優れたタイポグラフィは、提示するコンテンツに付加価値をもたらします。実際には、これは、タイポグラフィの原則が適切に実行され、コンテンツを消費する人々が簡単に実行できるようにすることを意味します。最高のタイポグラフィは、通常、ほとんどの読者の背景にフェードインし、全体的なエクスペリエンスを向上させるだけです。