UX デザイナーのためのタイポグラフィー ガイド

タイポグラフィ サイトやアプリの成功を左右する可能性があります。 その の礎石 UXデザイン;オンライン情報の 90% 以上はテキスト形式です。しかし、タイポグラフィーのデザイン分野は、Web サイトやアプリに魅力的なフォントを選択するだけではありません。タイポグラフィを練習する際には、考慮すべき要素が数多くあります。ここでは、ユーザーフレンドリーなデザインを作成できるように、この分野に習熟するのに役立つ用語のリストと一連のタイポグラフィの原則を示します。

まず、タイポグラフィーとは一体何でしょうか?

タイポグラフィーは、読みやすく、使いやすく、理想的にはユーザーフレンドリーなインターフェイスやエクスペリエンスを作成するための、書体の使用とそれらの書体の構成を含むデザイン分野です。効果的なタイポグラフィは UX を向上させ、最適化します 使いやすさ、ユーザーの注目を集め、増加する可能性があります コンバージョン率。

活版印刷の用語に関しては混乱があるため、明確にするために次の用語のリストを作成しました。これは完全なリストではありませんが、この特定の用語のコレクションは、UX デザイナーとして特に重要です。

タイポグラフィ用語

書体: フォント ファミリーとしても知られる「書体」という言葉は、物理的な印刷に由来し、物理的な文字ブロックの面を指します。アルバムがトラックで構成されたり、本が章で構成されたりするのと同じように、書体はフォントで構成されます。書体には複数のフォントの太さが含まれており、そのスタイルはすべての文字、数字、記号で共有されます。 Arial、Times New Roman、そしてもちろん Comic Sans さえもすべて書体です。

Helvetica、Futura、Garamond、Bodoni、Univers、Gotham、Century、Caslon、Source Sans、Optima、Baskerville、Minion の書体。

©ダニエル・スクロック、 インタラクションデザイン 財団、CC BY-SA 3.0

フォント: フォントは、書体内の特定のウェイトです。書体を選択します。フォントを使用します。書体として Georgia を選択した場合、Georgia ボールド、イタリック、およびレギュラーがフォントになります。言い換えれば、フォントとは、書体内に見られる明確で様式化された特徴です。プロジェクトごとに 2 ～ 3 個のフォントを使用することが多く、それらはタイポグラフィの基礎となり、デザイン全体の重要な要素となります。

キャラクター: 個々の要素。最も一般的には 1 つの文字、数字、または句読点。

ベースライン: すべての文字が置かれる目に見えない線。選択したタイプのベースラインを使用してグリッドを作成し、調和のとれたレイアウトを作成できます。詳しくはこちら グリッドシステム ここ。

X高さ: ベースラインと小文字「x」の高さの間の距離。 X 高さが異常に大きい (または小さい) フォントを使用している場合、インターフェイス全体に影響を与える可能性があり、場合によってはレイアウトが崩れることもあります。

脳卒中: 文字の主要部分を作成する直線または曲線。

セリフ: 一部の書体のメイン ストロークの最後に接続されるストローク、または足のような要素。セリフ フォントは、小さな「足」が読者の目を次の文字に導くため、読みやすくなります。ただし、サイズが小さいため、画面上で常に適切に表示されるとは限りません。

サンセリフ: 文字の下部にストロークや余分な要素がない書体。画面の解像度が低いため、デジタル インターフェイスではサンセリフが好まれることがよくあります。テクノロジーが進歩し、画面の解像度が向上するにつれて、これはフォントを選択する際の決定要素ではなくなる可能性があります。

セリフ書体とサンセリフ書体の比較。

© Daniel Skrok およびインタラクション デザイン財団、CC BY-SA 3.0

体重、身長、サイズ: 書体の太さ、長さ、全体のサイズを指します。さまざまな重みとサイズを試し、インターフェイス上でそのバリエーションを賢明に使用して、長いテキストの単調さを打破したり、特定の要素に注意を向けたりすることができます。

上昇と下降: それぞれ、x 高さを超えて上向きに伸びる垂直ストローク、およびベースラインを超えて下向きに伸びる垂直ストローク。

文字間隔 (または追跡): 各文字の最も幅の広い点の間の距離。トラッキングとは、具体的には、文字間の水平方向のスペースが均一に増加または減少することを指します。

空白: としても知られています ネガティブスペース、デザイン構成内の要素間の領域です。余白のバランスが悪いと、コピーが読みにくくなります。

位置合わせ: テキストの配置方法を指します。主な配置には、左揃え、右揃え、中央揃え、両端揃えの 4 つがあります。配置は、デザイナーが一貫した構成を作成するのに役立ちます。

階層: 重要性に応じて要素を配置する原則。ユーザーが最初にどこを見るべきかを特定できるようにするには、強力な階層を作成することが最も重要です。画面サイズに関係なく、インターフェイスに複数の要素がある場合は、画面の最も重要な要素にユーザーを誘導することが重要です。フォントの選択、その太さ、サイズ、文字間隔、配置、周囲の空白など ビジュアルデザイン 要素が連携してこの階層を作成します。

タイポグラフィーにおける階層。

© Daniel Skrok およびインタラクション デザイン財団、CC BY-SA 3.0

タイポグラフィの原則

最適なユーザーフレンドリーを実現するために Web サイトやアプリをデザインする際に留意すべき、タイポグラフィのガイドラインをいくつか紹介します。これは決して完全なリストではありませんが、急成長するタイポグラフィの実践における良い出発点となります。

1. 書体が多すぎると優れたユーザー エクスペリエンスが妨げられます

シンプルにしてください。書体が多すぎると雑に見え、混乱を招く可能性があります。デザインでは 2 ～ 3 つの書体を使用するのが最善です。複数の書体を使用すると、アプリケーションのサイズと読み込み時間も増加します。エクスペリエンスを最適化するには、ユーザー側で利用可能/インストールされる可能性が高いフォントを使用してください。

2. 互いに補完し、対照的な書体を選択します

書体が似すぎてはいけません。そうしないと、ニュアンスが失われます。セリフ フォントとサンセリフ フォントを 1 つずつ選択して、コントラストを作成します。

タイポグラフィにおける悪い組み合わせと良い組み合わせの例。

© Daniel Skrok およびインタラクション デザイン財団、CC BY-SA 3.0

3. 読みやすさ、可読性、アクセシビリティを常に念頭に置いてください

タイポグラフィーによって作成されるテキストは、理解できるものである必要があります。そうしないと、テキストを通じて情報を伝達するという目的が果たせなくなります。ユーザー、ユーザーの環境、ユーザーが製品に関わっている媒体を考慮してください。 色 コントラストが勝敗を分ける アクセシビリティ;オレンジ色の背景に淡黄色のテキストを配置すると、紺色の背景に同じ黄色のテキストを配置するよりも読みにくくなります。

「」の蔓延ダークモード」は、アクセシビリティの重要性を説明する良い例です。これにより、明るい画面を見る不快感が軽減され、全体的な可読性が向上します (テキストの文字や単語が認識可能で理解しやすくなります)。 可読性 (テキストは理解しやすく、過度に複雑な単語や複雑な文構造は避けられています)。いくつかの研究では、特に失読症のユーザーにとって、セリフはサンセリフほどアクセスしにくいことが示唆されています。しかし、この研究は決定的なものではありません。デザインがアクセス可能であることを確認するには、常に実際のユーザーでテストしてください。

4. 優れたビジュアル階層により UX が向上

アプリ/サイトのタイプ階層は、ユーザーが情報をすばやく確認できるようにするために非常に重要です。優先順位に従ってコンテンツを整理します。最も重要なものは最も目立つようにし、最も重要でないものは小さく目立たないものにする必要があります。サイズ、重さ、色は効果的な作成方法です。 視覚的な階層。

ページをデザインするときは、から始める必要があり、その後に続く各文字スタイルは、その下、上、その上にある必要があります。追加のボーナスとして、効果的な階層も改善されます。 SEO。

タイポグラフィーを通じて視覚的な階層を作成します。 © Chaosamran_Studio、フェアユース

5. タイポグラフィを拡張可能にする

デザイン作業では、デスクトップとモバイルの両方で動作する Web サイトまたはアプリを作成するように求められます。したがって、両方のプラットフォームでのユーザー エクスペリエンスを考慮した方法でタイポグラフィをデザインすることが重要です。画面サイズに関係なく、タイポグラフィを適切に拡大縮小したいと考えています。デザイン プロセスの開始時に、フォントと書体のスケールを定義します。スケールのガイドラインには、さまざまなプラットフォームだけでなく、さまざまなオペレーティング システムも含める必要があることに注意してください。

6. タイポグラフィーでUXを豊かにする

タイポグラフィは、ユーザーとのコミュニケーションに使用する全体的な視覚言語の一部です。色、形、パターンの視覚要素と同じように、タイポグラフィーは気分を決め、トーンを設定し、製品を思い通りに表現できます。 認識された。

ニューヨーク・タイムズ ロゴにはカリグラフィーを使用し、見出しにはセリフ フォントを使用し、古典的なハードコピーの新聞を思い出させます。© New York Times

Khruangbin は、クラシック ロック、ファンク、ソウル、サイケデリアのジャンルを横断するユニークなバンドです。彼らのウェブサイトのデザイン、色、タイポグラフィー、 イラスト すべてが彼らのレトロでファンキーでユニークなスタイルをさらに高めます。 © クルアンビン

タイポグラフィーを成功させると、ステートメントを表現し、雰囲気を作り出すことができます。 © Netflix、フェアユース

7. テストして学ぶ

設計プロセスのどの段階でも同様に、テストして学習することが重要です。さまざまな書体やフォントを試し、それらが相互にどのように機能するかを確認し、プラットフォーム間で拡張してください。書体をテストするための気の利いたトリックは、「」というフレーズを使用することです。素早い茶色のキツネが怠惰な犬を飛び越える「」には、英語のアルファベットのすべての文字が含まれているためです。アプリや Web サイトが別の言語に翻訳される可能性があるため、その結果をテストすることが重要です。タイポグラフィ デザインが、発音区別符号 (特定の発音や強調を示す文字の上、下、または横にあるアクセントや記号) やさまざまなスクリプトでも機能することを確認したいと考えています。テストと学習を通じて、すべての人にとってシームレスなエクスペリエンスを実現できます。

テイクアウェイ

タイポグラフィーはデザインの中で目立たない部分のように思えるかもしれませんが、デザインを作成する上では基本的なものです。 ポジティブなユーザーエクスペリエンス。タイポグラフィの基本的な用語と原則を理解することで、デザインの成功を変えることができます。 シンプルさ あなたの友達です。文字を使いすぎて、自分の生活 (またはデザイン) を複雑にしすぎないでください。最終的には、タイポグラフィを読みやすく、アクセスしやすく、理解しやすいものにする必要があります。言葉も大切ですが、見た目も大切です。したがって、タイポグラフィーが優れているほど、ユーザーエクスペリエンスも向上します。

参考文献と詳細情報の入手先

コースからタイポグラフィーやビジュアル デザインのその他の要素について詳しく学びましょう ビジュアル デザイン: 究極のガイド。

タイポグラフィの用語をさらに詳しく知り、以下について学びましょう タイプの構造。

以下の無料オンライン リソースを使用して、UI デザインにおけるタイポグラフィーをさらに深く掘り下げてください。 アドビXD、 ショッピファイ、 そして プロトタイプ。

タイポグラフィのベスト プラクティスをさらに詳しく調べる モックプラス。

ヒーロー画像

© ミカ・バウマイスター、UnSplash、フェアユース