⭐️

【Polaris和訳】Design/Typography

2021/10/29に公開約6,000字

この記事について

この記事は、Polaris/Design/Typographyの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Typography

Shopify の管理画面には、目的に応じたタイポグラフィースタイルが用意されています。これらのスタイルは機能的な役割に対応しており、いつ何を使用すべきかがわかります。

タイポグラフィースタイルをインターフェイスの特定の機能に結びつけることで、マーチャントが製品を使用する際に従うべき明確なビジュアルパターンを作成します。

原則 | Principles

目的のあるスタイル | Style with purpose

タイポグラフィのサイズやスタイルに規律ある一貫性を持たせることで、管理画面全体をより直感的に使用できるようになります。ひとつの操作方法を覚えたマーチャントは、同じ知識を新しい操作方法にも応用できます。

柔軟性を保つ | Stay flexible

視力やブラウザ、モバイルデバイスが異なるユーザーでも利用できるように、マーチャントがどのようなフォントサイズを選択しても機能するようにデザインしてください。

フォントサイズ | Font sizes

タイポグラフィ・スケールを使って、テキストの視覚的な階層を伝えます。

大きい画面 | Large screen

小さい画面 | Small screen

フォーマット | Formatting

タイポグラフィのスケールに加えて、小さなスケールの関係を区別するために、追加のフォーマットが必要な場合があります。

テキストスタイルコンポーネントを使用して、さまざまなフォーマットスタイルを実装できます。

左揃えのテキストを表示するダイアグラム

左揃え | Left aligned

デフォルトでは、テキストは左揃えになります。このルールの例外として、テーブル内のテキストや、空の状態で使用される中央揃えのテキストがあります。

太字で強調されたテキストを表示するダイアグラム

強調 | Strong

このスタイルは、強い強調が必要な場合にのみ、控えめに使用します。インターフェイスでは、視覚的なヒエラルキーを強調するために Strong を使用することはほとんどありません。

下線が引かれたテキストを表示するダイアグラム

下線 | Underline

下線スタイルは、テキストリンク専用です。ボディコピー内のテキストを強調するような場合には下線を使用しないでください。

薄いグレーで落ち着いたテキストを表示する図

淡い色 | Subdued

控えめなスタイルは、コンテンツを強調しないようにするもので、すべてのフォントサイズで使用できます。

このスタイルは、単独で使用するのではなく、他の控えめなテキストと対比して使用するのが一般的です。

しかし、行動を起こさない、または重要性の低い独立したテキストには Subdued を使用することができます。

表示スタイル | Display styles

ページの内容の前にタイトルを表示するインターフェース

ページの見出し | PageHeading

PageHeading は、画面のタイトルのために用意されています。
空の状態と、大きな表示見出しを持つモーダル

ディスプレイ | Display

Display は、空の状態やモーダルなど、さまざまなインターフェース要素にタイトルを付けるためのものです。
見出しを持つ2つのインターフェースカード

見出し | Heading

画面のトップレベルのセクションのタイトルには、常に Heading を使用する必要があります。画面のセクションがカードで表現されている場合、各カードのタイトルは Heading スタイルを使用する必要があります。

大きな見出しのテキストサイズとそれに続く小さな小見出しでタイトルが付けられたインターフェースカード

小見出し | Subheading

画面のトップレベルのセクションにサブセクションがある場合、それらのサブセクションのタイトルには Subheading スタイルを使用します。

小見出しは、カードの最初の要素として表示されるべきではありません。

タイトルにのみ使用してください(コンテンツのセクションには使用しないでください)。

キャプションサイズの小さなラベルを持つ折れ線グラフ

キャプション | Caption

キャプションは、データビジュアライゼーションのように、コンテンツがコンパクトでスペースが限られている場所で詳細を示すためのものです。

フォントスタック | Font stack

macOS、iOS、Windows、Android、Linux の各ディストリビューションなど、動作する OS に合わせたフォントスタックを使用しています。

iOS、Mac、Windows、Android、Linuxのデフォルトフォントの選択を示した図

  • Apple 端末ではサンフランシスコを表示
  • Android 端末ではRobotoと表示されます。
  • Windows の場合、Segoe UIが表示されます。
  • Linux を実行しているマシンには、実行中のディストリビューションのデフォルトの sans-serif フォントが表示されます。

この font-stack は、すべてのブラウザがプラットフォーム固有のフォントをロードできるようにします。

-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif

これを CSS に追加することで、システムフォントをプリロードし、ブラウザに読みやすさを設定します。

html {
  /* Load system fonts */
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;

  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Deactivate auto-enlargement of small text in Safari */
  text-size-adjust: 100%;

  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;
}

/**
 * Form elements render using OS defaults,
 * so font-family inheritance must be specifically declared
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

モバイルへの配慮 | Mobile considerations

モバイルのタイプスケール | Mobile type scale

iOS と Android の両ネイティブアプリは、ウェブやモバイルウェブとは異なるタイプスケールを使用しています。

このネイティブのタイプスケールはアプリに読み込まれ、これらのプラットフォームで若干異なります。

スモールスクリーンスケールを出発点として、各プラットフォームの仕様をサポートするために追加のスタイルを使用しています。

モバイルネイティブのデザインにネイティブタイプスケールを使用すると、画面のアスペクト比に合わせてエクスペリエンスとその UI コンポーネントが作成されるため、よりアクセシブルなエクスペリエンスが保証されます。

モバイルの可変フォントサイズ | Mobile variable font sizes

可変フォントサイズは、モバイルで有効な最も一般的なアクセシビリティ機能の 1 つです。

視聴者は、モバイルデバイス上でテキストのサイズを大きくしたり小さくしたりすることができます。

一度設定すると、インストールされたすべてのアプリが新しい値を使用し、それに応じてフォントサイズが調整されます。

フォントサイズを変更すると、コンテンツの幅と高さが最大で 20%変化するため、通常は UI コンポーネントに大きな影響を与えます。

これは、画面の折り返し付近に位置する情報にとって特に重要です。詳しくは、モバイルデザインの基本原則をご覧ください。

次 | Next

Illustrations

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます