デザインにおけるタイポグラフィ

第一印象は重要です。これはすべてのブランドプロが知っていることです。コンテンツが明確で魅力的でない場合、大多数のユーザーはすぐにウェブページを離れます。あなたのクリエイティブチームは、ブランドメッセージを魅力的でアクセスしやすい言葉で伝えるために努力しています。彼らは今、あなたが読みやすさとブランドの魅力を高めるために、良いタイポグラフィとデザインの決定を下すことを期待しています。

詳細については以下を参照してください。

• タイポグラフィとは何か、その重要性について
• 最も人気のある5種類の書体とタイポグラフィの6つの重要要素
• Figmaで書体やフォントを見つけて探索する方法

タイポグラフィとは何ですか?

デザインにおけるタイポグラフィは、書かれた言葉を表現するための書体とフォントのシステムを作成または選択することを含みます。この創造的な芸術形式は、視覚的に魅力的な文字を使って強い感情を呼び起こし、タイポグラフィを配置してブランドの個性を表現することができます。巧みに作られたタイポグラフィは、簡単に読めて理解できるようにすることで明確なコミュニケーションを向上させることができます。

なぜタイポグラフィが重要なのか?

タイポグラフィは、質の高いウェブサイト、アプリ、メール、eBookなどを作成する上で重要な役割を果たします。良いタイポグラフィは次のことに役立ちます:

• ユーザーを惹きつける: 読む前から注意を引きつける書体とタイポグラフィ要素でユーザーを惹きつけます。
• 視覚的な階層を、一貫した文字サイズやウェイト、セリフ体／サンセリフ体の使い分け、フォントペアリングや書体の組み合わせによって設定し、ユーザーの理解を導き、可読性を高めます。
• ブランドの認知を構築する。一貫して使用することで、優れたタイポグラフィーは、ブランドコンテンツに使用される書体やフォントスタイルを通じて、ユーザーがブランドを識別するのに役立ちます。
• コンテンツの目標をサポートします。一貫した文字間隔、行の長さ、大文字と小文字、および他のタイポグラフィ要素は可読性を高め、グラフィックデザイン要素として使用されるフォントはトーンと意味を増強します。

タイポグラフィの簡単な歴史

Johannes Gutenbergは1400年代に最初の金属活字印刷機を発明し、ヨーロッパの書体の進化を促進しました。Gutenbergは古いスタイルのブラックレター書法字形(別名ゴシック)を使用して、写本や宗教書のために長い行の文字組みを行いました。イタリアの印刷業者たちは、やがてよりシンプルでコンパクトな書体を作り出しました。これには当初Antiquaという名前が付けられましたが、現在ではRomanとして知られています。ヨーロッパの印刷業者たちはその後、イタリック書体を導入し、1ページにより多くの語を組むようになりました。

1700年代後半から1800年代初頭にかけて、最初のモダンなセリフ書体が市場に登場しました。それに続いてサンセリフ書体が登場し、20世紀までヨーロッパの印刷世界を支配しました。その後、Times New Roman、Futura、Helvetica、Arialのような、よりクリーンで読みやすい書体が台頭しました。現在、世界中のグラフィックおよびWebデザイナーが、多くの書体やフォントのライブラリにアクセスできるようになっています。

最も人気のある5つのフォント

現代のデザイナーは通常、セリフ、サンセリフ、スクリプト、モノスペース、ディスプレイの5つの人気のある字体から選びます。各字体にはフォントのファミリーが含まれており、その字体のさまざまなスタイルをカバーしています。例えば、Helveticaは字体であり、Helvetica LightとHelvetica Regularはフォントです。

• セリフ体フォント: このフォーマルでより伝統的な書体は、文字の上下の端から短い線やストロークが延びています。New York Times、Sony、J.P. Morganといった定評のあるブランドは、セリフ体フォントを選びます。例としては、Times New RomanやGaramondなどがあります。
• サンセリフフォント: このシンプルでモダンな書体は、セリフ書体に見られる飾りを含みません。これは、若々しいブランドやテックスタートアップに人気の選択肢です(例: Target、Airbnb、DoorDash)。サンセリフ書体の例としては、Helvetica、Arial、Calibriがあります。
• スクリプトフォント: この流れるような筆記体の書体は、優雅なカリグラフィーから遊び心のある手書きスタイルまで幅が広いです。ボディテキストには理想的ではありませんが、スクリプトフォントは引用、署名、短いヘッダーに最適です。例としては、Snell Roundhand、Pacifico、Scriptinaがあります。
• モノスペースフォント: このレトロなタイプライタースタイルの書体は、固定幅の文字とスペーシングで表示され、各単語の文字が同じ幅を占めます。ソースコードでは読みやすさのために使用され、多くのウェブサイトやグラフィックデザインでも見られます。例としては、Courier、Bergen Mono、Source Code Proがあります。
• ディスプレイフォント: 装飾的とも呼ばれるこの目を引く書体は、ロゴ、バナー、見出しに独自性と華やかさを加えることができます。ディスプレイ書体の例には、Clearview、Johnston、Skywalkerがあります。

タイポグラフィの重要な要素

単語、テキストの行、製品の外観、可読性、ムードを微調整するには、1つまたは複数のタイポグラフィ要素を調整することができます。

配置

ページのバランスを整え、ユーザーが簡単にスクロールできるようにするために、ロゴ、画像、ヘッダー、本文などのデザイン要素を揃えます。各デザイン要素の間隔を均等にし、余白とパディングを一貫して使用します。プロジェクトのニーズに基づいて、テキストを左揃え、右揃え、完全揃え、または中央揃えにします。例えば、デザイナーは見出しや短い引用を中央揃えにすることがありますが、長文のコピーは左揃えにするかもしれません。

色

ブランドに一致し、メッセージを明確に伝えるカラーパレットを選択してください。テキストの不透明度を調整し、コントラストの良い補色を使用して読みやすさとアクセシビリティを確保してください。バランスの取れたカラーパレットを作成するには、カラーホイールジェネレーターを使用できます。プロのヒント: 理想的なコントラスト比についてはウェブコンテンツアクセシビリティガイドラインを参照してください。見出しや小見出しにはより太く、より明るい色が適しており、大きなテキストブロックには中立的な色が適しています。

階層

タイポグラフィにおいて階層を発展させることで、キーワード情報を優先し、簡単にスキャンして理解しやすくします。見出しをサブ見出しより大きく、サブ見出しを本文よりも大きくします。例えば、ウェブサイトの本文は通常16pxで、H1ヘッダーは48pxに設定されています。ホワイトスペース、テキストの整列、色、および異なる書体を使って視覚的な階層を強調しましょう。

カーニング

個々の文字の間隔を調整して、距離が一貫しているように見えるようにします。適切なカーニングは、テキストの視覚的な魅力を高め、読みやすさを向上させます。

リーディング

リーディングとは、1つのテキスト行のベースラインと、その上のテキスト行のベースラインとの距離を指します。一般的に、フォントサイズの1.125倍から1.200倍の行の高さ(112.5%–120.0%)はより良い可読性をもたらします。とはいえ、どの書体にも微調整は必要であり、行間の丁寧な調整もその一部です。

トラッキング

トラッキング(文字間隔)を活用することで、読みやすさを向上させることができます。これは単語やテキストの行における文字間の全体的なスペースをカバーします。スペースを増やすためにはトラッキングを増やし、スペースを減らすためにはトラッキングを減らします。すべての文字が大文字で表示される単語やフレーズは、トラッキングを増やすことで読みやすくなることがあります。

適切な書体の選び方

フォントを選ぶプロセスは以下の主要なステップに分かれます：

• プロジェクトの範囲、要件、および目標を考慮してください。チームに重要なコンテンツの質問をしてください：コンテンツをどのように配信していますか(アプリ、ウェブサイト、メール、または印刷物)?誰が私たちのオーディエンスで、彼らのニーズは何ですか?競合他社はどのような書体とフォントを使用していますか?いくつかの書体は、ヘッダーにより適しているが、メニューテキストにはあまり適していないことを覚えておいてください。他には、国際的なスクリプト、字形、その他の特殊文字を備えた大きなフォントファミリを持つものがあります。
• ムードボードを作成して、ユーザーと競争分析に基づいた視覚的なトーンを開発します。始めるには、FigJamのムードボードテンプレートを使用してください。プロのヒント: 類似したソリューションを見ることで、便利なパターンや規範を特定する手助けになります。
• コンピューター上やGoogle Fontsなどのサイトで書体のオプションを探してみてください。視覚的な手がかりが、あなたの製品やブランドが伝えたいものを反映しているような書体を探してください。例えば、ブランドのトーンが軽いタッチではなくプロフェッショナルである場合、装飾が少ない真面目な書体を選びましょう。これらのFigma Design例のうち、どちらがよりプロフェッショナルに見えますか?左のモジュールを選んだ場合、あなたは正しい道を進んでいます。そのモジュールでは、Robotoというクリーンで読みやすいサンセリフ書体が使われています。右のモジュールでは、子供の本によく使われる、カリグラフィーをベースにしたAlmendraという書体が使用されています。

• ブランドイメージに合う、人目を引く書体を選び、プロジェクトの目標をサポートしましょう。文字の全体的な構造(例: x-ハイト、キャップハイト、カウンター、アセンダー、ディセンダー)、スケーリングのしやすさ、可読性、個性、装飾を考慮してください。これらの要素は、書体の全体的な外観や雰囲気に影響を与えます。
• 実際の関連するコンテンツでフォントを試してみましょう。ユーザーを引き付けるフォントを選ぶための最良の方法です。大きいテキストや小さいテキストの両方で機能することを確認するために、いくつかの異なるサイズでフォントを試してください。
• ブランドの色をフォントに試してください。はじめに、黒文字を白い背景に、白文字を黒い背景に配置します。次に、テキストにブランドのメインカラーを適用し、フォントが白黒背景でどのように見えるか確認します。色を逆にして、メインカラーの背景で白黒のテキストがどのように見えるか確認します。

ウェイトとスタイル

たとえば、Julieta UlanovskyとスタジオによるMontserratのような書体には、通常体、太字、斜体、細、黒など、さまざまなスタイルとウェイトがあり、それぞれにフォントがあります。フォントとは、特定のフォントウェイトとテキストスタイルで、文字のセットをインストールして使用するためのファイルです。複数のウェイトを持つ書体には、各ウェイトに対応するフォントがあり、それらを総称してフォントファミリーと呼びます。

書体Montserratには、18種類のフォントファミリーがあります: Thing、Thin Italic、Extra-Light、Extra-Light Italic、Light、Light Italic、Regular、Regular Italic、Medium、Medium Italic、Semi-Bold、Semi-Bold Italic、Bold、Bold Italic、Extra-Bold、Extra-Bold Italic、Black、Black Italic。

ウェイトとは、文字の線の太さを指します。書体は、ヘアラインからウルトラ黒まで、つまり非常に細いものから非常に太いものまでのウェイトを持つことができ、その間に多くのフォントが存在しますが、ある書体は1つのウェイトでしか提供されない場合もあります。これらのウェイトには数字の対応があり、プログラミングや開発者との協力の際に理解するのに役立ちます。ウェイトは一般的に、100から900のスケールの数字に対応し、100刻みで設定されています: レギュラー 400、ミディアム 500、セミボールド 600、ボールド 700、など。

フォントスタイルとは、イタリックやオールキャップスなど、文字やケースの調整のことです。いくつかの書体にはスタイルオプションがなく、レギュラーの重さしか提供されないこともあります。

文字の大小、単に「ケース」とも呼ばれることがありますが、小文字のように小さな文字と、大文字またはキャピタルレターのように大きな文字との区別です。ほとんどの書体セットには、両方の文字が含まれていますが、Bangersのようなフォントは大文字にのみ設定されています。文字が大文字のみ、または小文字のみで設定されている書体は、はるかに一般的ではありません。

英語では、さまざまなケーススタイルが状況に応じて異なって使用されます:

• タイトルケースとは、文中のすべての語が大文字になるスタイルのことで、冠詞、短い前置詞、および接続詞は例外となります。これらの例外は、ある程度主観的です。
• センテンスケースは、私たちが普段見慣れている形式のテキストで、この文章もその一例です。
• オールキャップスはすべてのテキストが大文字で構成されており、通常は見出し、ワードマーク、ボタンテキスト、または他の種類のラベルに使用されます。それを強調のために使用し、上部や下部の突起がないために読みにくくなる長文では使用しないでください。オールキャップスはまた、オンラインで叫んでいることを暗示するため、チャットや会話ベースのインターフェースでは使用を避けてください。
• スモールキャップは、形状は大文字に似ていますが、書体のxハイトと同じ高さです。スモールキャップは本文テキストや見出しテキストと区別するために使用されますが、多くの書体では提供されていません。
• すべての小文字は、いくつかの製品やワードマークで美的目的のために使用されるスタイリスティックな選択です。

サイズ

フォントサイズの設定や変更は難しい決断です。それは、テキストが表示される媒体、例えば紙、携帯電話、ビルボードなどに大きく依存し、また、閲覧者のデバイスやデザインのレスポンシブ性によっても変わる可能性があります。

フォントの選択において階層を決定する際、サイズを強調要素の一つとして使用することが重要です。

ウェブ開発においては、見出し、サブ見出し、本文テキスト、メニューやフッターのテキストなど、いくつかの主要なサイズを定義する必要があります。多くのデザイナーは、H1として知られる見出しのサイズから始めますが、本文テキストのサイズから始めることは有用かもしれません。それがフロントエンド開発者が実装する方法だからです。開発者が拡大縮小に基づく単位であるemを使用すると、本文テキストのサイズは1emであり、その他のテキストのサイズはその倍率またはその分数です。

例えば、ウェブの共通の本文のサイズは16pxです。H1は、本文サイズの3倍に設定されることがあり、この場合は48pxです。ウェブページは複数のスクリーンサイズに合わせてデザインされるため、作成するデザインはお客様のデバイスによって異なるフォントサイズを要求することがあります。開発者は、顧客のブラウザの寸法に応じて本文のサイズを変更することができ、他のすべてのテキストもそれに応じてスケールされます。

詳細

タイポグラフィの多くは、小さな詳細とニュアンスです。

例えば、テキストをレイアウトする際に検討すべき点の一つがラグです。ラグは、左揃えや右揃えのテキストの不均一な端のことです。それは、テキストボックスの幅を増減させたり、テキスト全体の文字間隔を変更することで操作できます。

段落の終わりに一つか二つの単語が来る場合、それは通常「ウィドウ」と呼ばれます。または、次の列の先頭にある場合、それは「オーファン」と呼ばれます。

しかし、May-Li Khoeが指摘しているように、次のような見方もあります。

これからは「ぶら下がり」と呼びましょう。

テキストボックスを調整してぶら下がりを防ぐ際、行の長さも調整されます。英語の本文テキストの場合、行の長さを約40から60文字、スペースや句読点を含めて制限することが、アクセシビリティと可読性の向上に理想的です。行の長さが60文字を超える必要がある場合は、可読性向上のために行の高さを増やしてください。

ドキュメントやインターフェースをデザイン良く見せる最も簡単な方法の一つは、オブジェクトが空間にどのように配置されているかの一貫性です。

アプリの画面にタイトルがあり、それがフレームまたは画面の上から100ピクセルの位置にあるとします。他のすべてのアプリ画面でも、同様のタイトルが同じ位置にあることを望んでいます。

ガイドと寸法はここでの味方です。Figmaの定規からクリックしてドラッグするだけでガイドを作成でき、オブジェクトが選択されているときにはAltキーを押し続けると周囲のオブジェクトまでの距離が表示されます。

ウェブサイト、ポスター、アプリ画面、インフォグラフィックなどの左側または左垂直マージンを考慮し、そこにはロゴ、画像、ヘッダー、ボディテキストがあります。これらの要素を互いに揃えることで、目がページを下に移動しやすくなり、このコンテンツのレイアウトが考慮され、意図的であるように見せます。

ジャスティフィケーションは、特定のブロックまたはテキストの行の整列に関する概念です。

• 左寄せは、テキストの各行の始めが左のマージンに沿った同じx値で始まることを意味します。これは左揃えとも呼ばれ、右側に不揃いが生じます。
• 右揃えとは、各行の末端が右の余白と揃うことを指します。これは右側対称とも呼ばれ、左側に不規則な余白を作ります。
• 両端揃えは、テキストの各行の左端と右端がテキストボックスの両側に揃っている状態です。行の幅を均一にするために、文字間隔と単語間隔が調整されます。フルジャスティフィケーションには不規則な空白(ラグ)はありません。
• 中央揃えのテキストは、両端揃えの不在です。

Figmaでタイポグラフィの探求を始めましょう

Figmaは、Figmaのデザインツールや書体探索のサンプルなど、使い始めるためのプロフェッショナルなデザインリソースを提供しています。また、FigJamのムードボードメーカーを使用してブランドムードボードを作成することもできます。

さらなるプロのヒントについては、Figmaでのタイポグラフィシステムの構築と実装に関するFigmaの記事をご覧ください。

インスピレーションを必要としていますか?Figmaコミュニティが共有する充実したタイポグラフィテンプレート、例、スタイルガイドのライブラリをご覧ください。

ブランドを引き立てる書体を見つける準備はできましたか?