【Polaris和訳】Components/Titles and text
この記事について
この記事は、Polaris/Components/Titles and textの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Titles and text
Caption
キャプションの文字サイズは、一般的な読み物として推奨されるサイズよりも小さくなっています。Web では、グラフやリストアイテムのタイムスタンプとしてのみ使用してください。Android や iOS では、ヘルプテキストや、リストアイテムのその他の副テキストとしても使用できます。
Examples
コンテンツがコンパクトでスペースが狭い状況で詳細を提供するために使用します。
<List>
<List.Item>
Order #1001 <Caption>Received April 21, 2017</Caption>
</List.Item>
<List.Item>
Order #1002 <Caption>Received April 22, 2017</Caption>
</List.Item>
</List>
<div>
<ul class="Polaris-List">
<li class="Polaris-List__Item">Order #1001 <p class="Polaris-Caption">Received April 21, 2017</p>
</li>
<li class="Polaris-List__Item">Order #1002 <p class="Polaris-Caption">Received April 22, 2017</p>
</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
グラフのラベルまたはタイムスタンプとして使用するコンテンツ
Accessibility
データの視覚化のベストプラクティスに従って、データや複雑な情報の表示や理解に関連する問題を抱えているマーチャントを含め、すべてのマーチャントにキャプションの目的が明確であることを確認します。
Android
Default caption
コンテンツがコンパクトでスペースが狭い状況で詳細を提供するために使用します。
Accessibility
Android のアクセシビリティについては、マテリアルデザインと開発のドキュメントをご覧ください。
iOS
Default caption
コンテンツがコンパクトで、スペースが限られている状況で、詳細を示すために使用します。
Accessibility
iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントを参照してください。
Best practices
- グラフやチャートの副次的なラベルとして使用できます。
- コンテンツのリストのタイムスタンプに使用することができます。
- その他の場合は、このコンポーネントを使用しないでください。
- このコンポーネントは、数語以上のテキストには使用しないでください。
- 美観を損ねたり、標準的なテキストサイズから逸脱するような目的でこのコンポーネントを使用しないでください。
Content guidlines
Captions
キャプションは、主にデータのビジュアライゼーションに使用されます。完全な文章や長いコンテンツには使用しないでください。
Display text
ディスプレイスタイルは、大胆なビジュアル表現を可能にします。主な目的がビジュアルストーリーテリングである場合、インパクトを与えるために使用します。例えば、マーケティングコンテンツのようにマーチャントを納得させたり、安心させたりするために表示テキストを使用したり、オンボーディングで注意を引くために使用したりします。
Examples
Extra large
このサイズは慎重に使用し、同じページで複数回使用しないでください。
<DisplayText size="extraLarge">Good evening, Dominic.</DisplayText>
<div>
<p class="Polaris-DisplayText Polaris-DisplayText--sizeExtraLarge">Good evening, Dominic.</p>
<div id="PolarisPortalsContainer"></div>
</div>
Large
中サイズよりも重要であるが、特大サイズよりは重要ではないテキストを表示するために使用します。
<DisplayText size="large">Good evening, Dominic.</DisplayText>
<div>
<p class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Good evening, Dominic.</p>
<div id="PolarisPortalsContainer"></div>
</div>
Medium
小さいサイズよりも重要であるが、大きいサイズほど重要ではないテキストを表示するために使用します。
<DisplayText size="medium">Good evening, Dominic.</DisplayText>
<div>
<p class="Polaris-DisplayText Polaris-DisplayText--sizeMedium">Good evening, Dominic.</p>
<div id="PolarisPortalsContainer"></div>
</div>
Small
本文テキストを使用するテキストに使用しますが、他の表示テキストに合わせて拡大縮小する必要があります。
<DisplayText size="small">Good evening, Dominic.</DisplayText>
<div>
<p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Good evening, Dominic.</p>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
表示するコンテンツ
element
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" p (default)
テキストに使用する要素の名前
size
"small" | "medium" | "large" | "extraLarge" medium (default)
テキストのサイズ
Accessibility
表示用テキストは面白い視覚体験をもたらしますが、HTML の見出しが提供する意味的な構造を置き換えるものではありません。
デフォルトでは、表示用テキストコンポーネントは、HTML の段落（<p>）でテキストを出力します。表示用テキストに見出しタグが必要な場合は、要素 prop を使って見出しレベルを設定します。
Android
Extra large
このサイズは慎重に使用し、同じページで複数回使用しないでください。
Medium
小さいサイズよりも重要であるが、大きいサイズほど重要ではないテキストを表示するために使用します。
Accessibility
Android のアクセシビリティについては、マテリアルデザインと開発のドキュメントをご覧ください。
iOS
Extra large
このサイズは慎重に使用し、同じページで複数回使用しないでください。
Medium
小さいサイズよりも重要であるが、大きいサイズほど重要ではないテキストを表示するために使用します。
Accessibility
iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントを参照してください。
Best practices
ページの主な目的が対話ではなくコミュニケーションである場合に使用します。
1 つのメッセージを中心としたページでは、より大きな表示テキストサイズを使用します。このような場合には、イラストと組み合わせて使用することができます。
小さめの表示用テキストは、大きなテキストと組み合わせたり、ダッシュボードなどの複雑なデータ表示の一部として単独で使用する。
Content guidelines
Display text
表示テキストは次のようになります。
- ベネフィットを重視し、マーチャントにとって最も重要な情報に焦点を当てています。
- 簡潔でスキャンしやすい。
- 一見して読めるようなシンプルで明確な表現を使用する。
- 表示内容は、数語程度の短い文章にとどめる。
- ピリオド、カンマ、セミコロンなどの句読点の使用を避ける。
- 感嘆符の使用は避けてください。表示テキストは、感嘆符がなくても十分な表現をしています。
- 文語体で書く
Heading
見出しは、インターフェイスのページの各主要セクションのタイトルとして使用されます。例えば、カードコンポーネントでは、一般的に見出しがタイトルとして使用されます。
Examples
各トップレベルページセクションのタイトルに使用します。
<Heading>Online store dashboard</Heading>
<div>
<h2 class="Polaris-Heading">Online store dashboard</h2>
<div id="PolarisPortalsContainer"></div>
</div>
Props
Children
React.ReactNode
見出しの内側に表示する内容
element
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" h2(default)
見出しに使用する要素名
Accessibility
明確で一貫性のある見出し構造は、読書や言語に困難を抱えるマーチャンダイジングに役立ちます。また、スクリーンリーダーのユーザーが、自分のスクリーンリーダーに合わせたキーストロークを使ってページをナビゲートするのにも役立ちます。
見出しのために出力される特定の HTML 要素を決定するには、element prop を使用します。コンポーネントのデフォルトでは、レベル 2 の見出し（<h2>）が出力されます。別の見出しの方が文脈に合っている場合は、element prop に別の値を使用してください。
見出しや小見出しの書き方については、こちらをご覧ください。
Android
Typographic heading
各トップレベルページセクションのタイトルに使用します。
Accessibility
Android のアクセシビリティについては、マテリアルデザインと開発のドキュメントをご覧ください。
iOS
Typographic heading
各トップレベルページセクションのタイトルに使用します。
Accessibility
iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントを参照してください。
Best practices
見出しは以下のようにするべきです。
- 言及しているインターフェースのセクションを明確に説明する
- 顧客が知っておくべき最も重要なコンセプトや情報を強調する
- 参照しているインターフェイスのセクションの先頭に配置する
Content guidelines
見出しは、見出しと小見出しのコンテンツガイドラインに従ってください。
Related components
- 見出しのあるセクションを小セクションに分割するには、小見出しコンポーネントを使用します。
Subheading
小見出しは、トップレベルのページセクション内のサブセクションのタイトルに使用されます。
Examples
トップレベルのページセクション内のサブセクションのタイトルに使用されます。
<Subheading>Accounts</Subheading>
<div>
<h3 aria-label="Accounts" class="Polaris-Subheading">Accounts</h3>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
小見出しに表示するテキスト
element
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" h3 (default)
小見出しに使用する要素名
Accessibility
明確で一貫性のある見出し構造は、読解力や言語能力に問題のあるマーチャンダイジングに役立ちます。また、スクリーンリーダーのユーザーが、自分のスクリーンリーダーに合わせたキーストロークを使ってページをナビゲートするのにも役立ちます。
小見出しのために出力される特定の HTML 要素を決定するには、element prop を使用します。このコンポーネントのデフォルトは、レベル 3 の見出し（<h3>）です。別の小見出しの方が文脈に合っている場合は、element prop に別の値を使用してください。
便利な見出しや小見出しの書き方については、こちらをご覧ください。
Android
Typographic subheading
トップレベルのページセクションのサブセクションのタイトルに使用されます。
Android のアクセシビリティについては、マテリアルデザインと開発のドキュメントをご覧ください。
iOS
Typographic subheading
トップレベルのページセクションのサブセクションのタイトルに使用されます。
Accessibility
iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントを参照してください。
Best practices
小見出しは以下の通りに使用するべきです。
- ページ内の既存のセクションにおける論理的なグループを説明し、明確に表示するために使用する。
- 親見出しがない場合は使用しない。
- リソースリストの主要コンテンツなど、表やリストアイテムには使用しない。
Content guidelines
小見出しは、見出しと小見出しのコンテンツガイドラインに従ってください。
Related components
ページの主要なセクションをタイトルで分割するには、見出しコンポーネントを使用します。
Text container
テキストコンテナは、段落、見出し、リストなどのテキスト要素をラップして、縦方向のスペースを確保するために使用されます。
Examples
Default text container
このコンポーネントをデフォルトの垂直間隔に使用します。
<TextContainer>
<Heading>Install the Shopify POS App</Heading>
<p>
Shopify POS is the easiest way to sell your products in person. Available
for iPad, iPhone, and Android.
</p>
</TextContainer>
<div>
<div class="Polaris-TextContainer">
<h2 class="Polaris-Heading">Install the Shopify POS App</h2>
<p>Shopify POS is the easiest way to sell your products in person. Available for iPad, iPhone, and Android.</p>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Tight text container
狭い間隔のオプションを使用して、コンテンツトピックを相互に関連付けます。
<TextContainer spacing="tight">
<Heading>Install the Shopify POS App</Heading>
<p>
Shopify POS is the easiest way to sell your products in person. Available
for iPad, iPhone, and Android.
</p>
</TextContainer>
<div>
<div class="Polaris-TextContainer Polaris-TextContainer--spacingTight">
<h2 class="Polaris-Heading">Install the Shopify POS App</h2>
<p>Shopify POS is the easiest way to sell your products in person. Available for iPad, iPhone, and Android.</p>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Loose text container
お互いに独立したコンセプトを分離するには、ルース・スペーシング・オプションを使用します。
<TextContainer spacing="loose">
<p>
Manage your Shopify store on-the-go with real-time notifications, access to
your dashboard, and order management, all from your smartphone.
</p>
<p>
Shopify POS is the fastest and easiest way to start accepting Visa,
Mastercard, American Express, and Discover right from your smartphone or
tablet.
</p>
</TextContainer>
<div>
<div class="Polaris-TextContainer Polaris-TextContainer--spacingLoose">
<p>Manage your Shopify store on-the-go with real-time notifications, access to your dashboard, and order management, all from your smartphone.</p>
<p>Shopify POS is the fastest and easiest way to start accepting Visa, Mastercard, American Express, and Discover right from your smartphone or tablet.</p>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
テキストコンテナに表示されるコンテンツです。
spacing
"tight" | "loose" (default の場合は指定しない)
子要素がそれらの間に入る垂直方向の間隔の量
Android
Default text container
このコンポーネントをデフォルトの垂直間隔に使用します。
Tight text container
狭い間隔のオプションを使用して、コンテンツトピックを相互に関連付けます。
Loose text container
緩い間隔オプションを使用して、互いに独立している概念を分離します。
iOS
Default text container
このコンポーネントをデフォルトの垂直間隔に使用します。
Tight text container
狭い間隔のオプションを使用して、コンテンツトピックを相互に関連付けます。
Loose text container
緩い間隔オプションを使用して、互いに独立している概念を分離します。
Best practices
間隔が近いほど、コンテンツのトピック間の関係が密接であることを示しています。近さは、関係を視覚的に表します。
- コンテンツのトピックを互いに関連付けるには、間隔を狭くします。
- ゆるい間隔で、互いに独立した概念を分離します。
Related components
- レイアウトのバリエーションを増やしたい場合や、テキスト以外の部品を垂直方向に配置したい場合は、Stack を使用します。
Text style
テキストスタイルは、視覚的な意味を追加してテキストを強化します。たとえば、控えめなテキストを使用して、周囲のテキストから強調を解除します。
Examples
Subdued text style
マーチャントにとって他のテキストよりも重要性の低いテキストを強調しないために使用します。また、"No supplier listed "のように、通常のコンテンツがないことを示すためにも使用されます。美的効果のみを目的とした使用は避けてください。
<TextStyle variation="subdued">No supplier listed</TextStyle>
<div><span class="Polaris-TextStyle--variationSubdued">No supplier listed</span>
<div id="PolarisPortalsContainer"></div>
</div>
Strong text style
ユーザーの入力を表すテキストをマークしたり、価格表の合計行を強調したりするのに使用します。
<TextStyle variation="strong">Total</TextStyle>
<div><span class="Polaris-TextStyle--variationStrong">Total</span>
<div id="PolarisPortalsContainer"></div>
</div>
Positive text style
上昇傾向を示すために、増加値を示す記号と組み合わせて使用します。
<TextStyle variation="positive">Orders increased</TextStyle>
<div><span class="Polaris-TextStyle--variationPositive">Orders increased</span>
<div id="PolarisPortalsContainer"></div>
</div>
Negative text style
減少傾向を示すために減少値を示す記号と組み合わせて使用します。
<TextStyle variation="negative">Orders decreased</TextStyle>
<div><span class="Polaris-TextStyle--variationNegative">Orders decreased</span>
<div id="PolarisPortalsContainer"></div>
</div>
Code text style
インラインでコードやコード風のテキストを表示する場合に使用します。
<p>
New URL that visitors should be forwarded to. If you want your store’s
homepage, enter <TextStyle variation="code"> / </TextStyle> (a forward slash).
</p>
<div>
<p>New URL that visitors should be forwarded to. If you want your store’s homepage, enter <code class="Polaris-TextStyle--variationCode"> / </code> (a forward slash).</p>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
意図したスタイリングが必要なコンテンツ。
variation
"positive" | "negative" | "strong" | "subdued" | "code"
テキストに視覚的な意味を追加する。
Accessibility
マーチャントに情報を伝えるのに、テキストスタイルだけに頼ってはいけません。テキストスタイルは、テキストで提供される情報を強化するために使用されます。
Android
Subdued text style
マーチャントにとって他のテキストよりも重要性の低いテキストを強調しないために使用します。また、"No supplier listed "のように、通常のコンテンツがないことを示すためにも使用されます。美的効果のみを目的とした使用は避けてください。
Strong text style
ユーザー入力を表すテキストをマークするため、または価格表の合計行を強調するために使用します。
Positive text style
上昇傾向を示すために、増加する値を示す記号と組み合わせて使用します。
Negative text style
減少傾向を示すために減少値を示す記号と組み合わせて使用します。
Code text style
コードのインラインスニペットまたはコードのようなテキストを表示するために使用します。
Accessibility
Android のアクセシビリティについては、マテリアルデザインと開発のドキュメントをご覧ください。
iOS
Subdued text style
マーチャントにとって他のテキストよりも重要性の低いテキストを強調しないために使用します。また、"No supplier listed "のように、通常のコンテンツがないことを示すためにも使用されます。美的効果のみを目的とした使用は避けてください。
Strong text style
ユーザー入力を表すテキストをマークするため、または価格表の合計行を強調するために使用します。
Positive text style
上昇傾向を示すために、増加する値を示す記号と組み合わせて使用します。
Negative text style
減少傾向を示すために減少値を示す記号と組み合わせて使用します。
Code text style
コードのインラインスニペットまたはコードのようなテキストを表示するために使用します。
Accessibility
iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントを参照してください。
Best practices
テキストのスタイルは以下のようにすべきです。
- テキストの意味を理解してもらうために、テキストを強調する場合に使用します。
- テキストが周囲のテキストよりも重要でない場合は控えめに。
- 入力フィールドや価格表の行の合計などには強く。
- ポジティブまたはネガティブなスタイルを使用する場合は、矢印やドル記号などのシンボルと組み合わせてください。
Visually hidden
支援技術（スクリーンリーダーなど）では利用可能だが、そうでない場合には要素を隠す必要がある場合に使用します。
Examples
Visually hidden heading
カードなどの主要なページセクションには、必ず見出しをつけてください。まれに、見出しが視覚的に冗長で、文脈によって意味が伝わる場合があります。見出しを省略するのではなく、視覚的に隠れたコンポーネントで見出しを包み込みます。
<Card sectioned>
<VisuallyHidden>
<Heading>Title and description</Heading>
</VisuallyHidden>
<FormLayout>
<TextField
label="Title"
value="Artisanal Wooden Spoon"
onChange={() => {}}
/>
<TextField label="Description" multiline onChange={() => {}} />
</FormLayout>
</Card>
<div>
<div class="Polaris-Card">
<div class="Polaris-Card__Section"><span class="Polaris-VisuallyHidden">
<h2 class="Polaris-Heading">Title and description</h2>
</span>
<div class="Polaris-FormLayout">
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="PolarisTextField3Label" for="PolarisTextField3" class="Polaris-Label__Text">Title</label></div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField3" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField3Label" aria-invalid="false" value="Artisanal Wooden Spoon">
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" class="Polaris-Label__Text">Description</label></div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField Polaris-TextField--multiline"><textarea id="PolarisTextField4" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField4Label" aria-invalid="false" aria-multiline="true" style="height: 34px;"></textarea>
<div class="Polaris-TextField__Backdrop"></div>
<div aria-hidden="true" class="Polaris-TextField__Resizer">
<div class="Polaris-TextField__DummyInput"><br></div>
<div class="Polaris-TextField__DummyInput"><br></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Visualy hidden table headers
1 つ以上のテーブル列でヘッダーを表示する必要がない場合は、ヘッダーの内容を省略するのではなく、非表示にします。なお、ブラウザの特性上、視覚的に隠されたコンポーネントは各<th>の中に入れなければなりません。
<table>
<thead>
<tr>
<th scope="col">
<VisuallyHidden>Line item</VisuallyHidden>
</th>
<th scope="col">
<VisuallyHidden>Value</VisuallyHidden>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Subtotal</th>
<td>$184.13</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td>$0.00</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>$184.13</td>
</tr>
</tbody>
</table>
<div>
<table>
<thead>
<tr>
<th scope="col"><span class="Polaris-VisuallyHidden">Line item</span></th>
<th scope="col"><span class="Polaris-VisuallyHidden">Value</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Subtotal</th>
<td>$184.13</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td>$0.00</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>$184.13</td>
</tr>
</tbody>
</table>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
視覚的に非表示にするコンテンツ
Accessibility
視覚的に隠されたコンポーネントは、テキストが見えないようにスタイルを設定しますが、スクリーンリーダーやその他の音声合成プログラムなどの支援技術からは利用できます。
このコンポーネントは、インタラクティブなコンテンツを隠すためには使用しないでください。
Best practices
以下のものは視覚的に隠されるべきです。
- セマンティック・マークアップにより、支援技術を使用する人がコンテンツを理解できる場合は使用しない。
- セマンティック・マークアップだけでは不十分な場合、追加のコンテキストを提供するために使用する。
- 通常は存在するが省略されているコンテンツに使用する。
- スクリーン・リーダーで使用するときは、文脈の中で意味をなすこと
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion