【Polaris和訳】Design/Typography
この記事について
この記事は、Polaris/Design/Typographyの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
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 は、空の状態やモーダルなど、さまざまなインターフェース要素にタイトルを付けるためのものです。
見出し | Heading
画面のトップレベルのセクションのタイトルには、常に Heading を使用する必要があります。画面のセクションがカードで表現されている場合、各カードのタイトルは Heading スタイルを使用する必要があります。
小見出し | Subheading
画面のトップレベルのセクションにサブセクションがある場合、それらのサブセクションのタイトルには Subheading スタイルを使用します。
小見出しは、カードの最初の要素として表示されるべきではありません。
タイトルにのみ使用してください（コンテンツのセクションには使用しないでください）。
キャプション | Caption
キャプションは、データビジュアライゼーションのように、コンテンツがコンパクトでスペースが限られている場所で詳細を示すためのものです。
フォントスタック | Font stack
macOS、iOS、Windows、Android、Linux の各ディストリビューションなど、動作する OS に合わせたフォントスタックを使用しています。
- 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
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion