【Polaris和訳】Components/Navigation
この記事について
この記事は、Polaris/Components/Navigationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Footer ヘルプ
フッターヘルプは、マーチャントが使用している製品や機能に関連する詳細情報を参照するために使用されます。
例
React
<FooterHelp>
Learn more about{" "}
<Link external url="https://help.shopify.com/manual/orders/fulfill-orders">
fulfilling orders
</Link>
</FooterHelp>
HTML
<div>
<div class="Polaris-FooterHelp">
<div class="Polaris-FooterHelp__Content">
<div class="Polaris-FooterHelp__Icon">
<span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-9 3a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0v2zm0-6a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"
></path></svg
></span>
</div>
<div class="Polaris-FooterHelp__Text">
Learn more about
<a
target="_blank"
class="Polaris-Link"
href="https://help.shopify.com/manual/orders/fulfill-orders"
rel="noopener noreferrer"
data-polaris-unstyled="true"
>fulfilling orders<span class="Polaris-Link__IconLockup"
><span class="Polaris-Link__IconLayout"
><span class="Polaris-Icon" aria-label="(opens a new window)"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="M14 13v1a1 1 0 0 1-1 1H6c-.575 0-1-.484-1-1V7a1 1 0 0 1 1-1h1c1.037 0 1.04 1.5 0 1.5-.178.005-.353 0-.5 0v6h6V13c0-1 1.5-1 1.5 0zm-3.75-7.25A.75.75 0 0 1 11 5h4v4a.75.75 0 0 1-1.5 0V7.56l-3.22 3.22a.75.75 0 1 1-1.06-1.06l3.22-3.22H11a.75.75 0 0 1-.75-.75z"
></path></svg></span></span></span
></a>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックスでの編集
Props
children
React.ReactNode
レイアウト内に表示するコンテンツ
ベストプラクティス
フッターヘルプは
- インターフェイスの最下部に配置する
- 画面上の体験に関連したヘルプへのリンクを提供する。
- 機能の宣伝や仕組みの説明には使用しない。
- マーチャントへのアップセルを目的とした情報にはリンクしない。
- まれに、ヘルプドキュメントがない場合は、ブログ記事にリンクして、マーチャントがワークフローの中で最も論理的な次のステップに進めるようにします。
Shopify アプリの開発者であれば、フッターのヘルプは以下のようにもなります。
- 連絡先情報やサポートチケットシステムへのリンクを提供する
フッターヘルプコンポーネントをヘルプドキュメントにリンクすることをお勧めします。連絡先情報に直接リンクすると、メールや電話の受信数が多くなる可能性があります。
コンテンツガイドライン
フッターヘルプ
デフォルトでは、フッターヘルプは Shopify ヘルプセンターの情報にリンクし、以下のコンテンツパターンに従うべきです。
- Learn more about {X}.
リンクは次のようにします
明確にラベル付けされています。マーチャントは、アクションリンクをクリックしたときに、どこにたどり着くかを推測する必要はありません。リンクに「ここをクリックしてください」を使用してはいけません。なぜならば、次に何が起こるのか期待できないからです。
Shopify アプリ開発者が連絡先情報にリンクする場合、フッターヘルプはこのコンテンツパターンに従うべきです。
- Option 1: {Contact us} about [X].
- Option 2: Reach out to us at {contact info}.
関連コンポーネントとドキュメント
- テキストの一部にリンクを埋め込む方法を学ぶには、リンクコンポーネントを使用します。
- アプリやテーマのドキュメントの書き方については、「製品ドキュメントの書き方ガイド」を参照してください。
- アプリのサポートを提供する方法については、「アプリのサポートに関するガイド」を参照してください。
Link
リンクは、ユーザーを別の場所に連れて行くもので、通常、文の中か直後に表示されます。
ナビゲーションとは関係のないアクションには、ボタンコンポーネントを使用します。
Default links
大きな文字列の中のテキストリンクに使用します。
React
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
HTML
<div>
<a class="Polaris-Link" href="https://help.shopify.com/manual" data-polaris-unstyled="true"
>fulfilling orders</a
>
<div id="PolarisPortalsContainer"></div>
</div>
Monochrome link
周りのテキストと同じ色のテキストリンクに使用します。
React
<Link monochrome url="https://help.shopify.com/manual">
fulfilling orders
</Link>
HTML
<div>
<a
class="Polaris-Link Polaris-Link--monochrome"
href="https://help.shopify.com/manual"
data-polaris-unstyled="true"
>fulfilling orders</a
>
<div id="PolarisPortalsContainer"></div>
</div>
Monochrome link in a banner
モノクロスタイルは、バナー内のリンクに適用されます。
React
<Banner>
Learn more about <Link url="https://help.shopify.com/manual">fulfilling orders</Link>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--withinPage"
tabindex="0"
role="status"
aria-live="polite"
aria-describedby="PolarisBanner4Content"
>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"
><span class="Polaris-VisuallyHidden"></span
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Content" id="PolarisBanner4Content">
Learn more about
<a
class="Polaris-Link Polaris-Link--monochrome"
href="https://help.shopify.com/manual"
data-polaris-unstyled="true"
>fulfilling orders</a
>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
External link
新しいブラウザのタブ（マーチャントのブラウザ設定によってはウィンドウ）で開く必要のあるテキストリンクに使用します。同じタブでページを開くとマーチャントのワークフローが乱れる可能性がある場合にのみ使用してください。
React
<Link url="https://help.shopify.com/manual" external>
Shopify Help Center
</Link>
HTML
<div>
<a
target="_blank"
class="Polaris-Link"
href="https://help.shopify.com/manual"
rel="noopener noreferrer"
data-polaris-unstyled="true"
>Shopify Help Center<span class="Polaris-Link__IconLockup"
><span class="Polaris-Link__IconLayout"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden">(opens a new window)</span
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
d="M14 13v1a1 1 0 0 1-1 1H6c-.575 0-1-.484-1-1V7a1 1 0 0 1 1-1h1c1.037 0 1.04 1.5 0 1.5-.178.005-.353 0-.5 0v6h6V13c0-1 1.5-1 1.5 0zm-3.75-7.25A.75.75 0 0 1 11 5h4v4a.75.75 0 0 1-1.5 0V7.56l-3.22 3.22a.75.75 0 1 1-1.06-1.06l3.22-3.22H11a.75.75 0 0 1-.75-.75z"
></path></svg></span></span></span
></a>
<div id="PolarisPortalsContainer"></div>
</div>
Props
accessibilityLabel
string
スクリーンリーダーに読み上げられる説明用のテキスト
children
React.ReactNode
リンクの内側に表示するコンテンツ
external
boolean
リンクを新しいタブで開くようにします
id
string
リンクの ID
monochrome
boolean
リンクの色を現在のテキストカラーと同じにし、アンダーラインを追加します。
removeUnderline
boolean
リンクに表示されている文字装飾の下線を削除します。
url
string
リンク先の URL
onClick
() => void
リンクがクリックされたときのコールバック
アクセシビリティ
リンクコンポーネントに有効な href 値を与えるには、url prop を使用します。これにより、要素が支援技術へのリンクとして認識され、デフォルトのキーボードサポートが与えられます。
リンク・コンポーネントに下線を引き、インタラクティブな要素に形を与える。これにより、ユーザーが要素がインタラクティブであるかどうかを判断する唯一の方法を、リンクが色に頼らないようにすることができます。
データの送信
マーチャントは一般的に、リンクはナビゲーションのためのものであり、データを送信したりアクションを起こしたりするためのものではないと考えています。URL を持たないコンポーネントが必要な場合は、代わりにボタンコンポーネントを使用してください。
ラベリング
リンクにその目的を明確に説明するテキストを与えます。
accessibilityLabel プロップはリンクに aria-label 属性を追加し、スクリーンリーダーのような支援技術からアクセスできるようにします。通常、このラベルテキストは、支援技術を使用しているマーチャントのためにリンク上の可視テキストを置き換えます。
一貫性を持たせ、わかりやすくするために
- 同じコンテンツに移動するリンクには、同じテキストを使用する。
- 異なるコンテンツに移動するリンクには、異なるテキストを使用する。
外部リンク
外部プロップは、アイコンと、リンクが新しいタブを開くという通知を追加します。外部プロップを使って、リンクを新しいタブ（マーチャントのブラウザ設定によっては、ウィンドウ）で開くようにします。新しいタブでページを開くのは、同じタブでページを開くとマーチャントのワークフローが乱れる可能性がある場合のみです。
キーボード対応
リンクには、キーボード操作に関するブラウザのデフォルト設定が使用されています。
- キーでリンクにキーボードフォーカスを与える（後方にタブを移動する場合は + キー）。
- キーでリンクをアクティブにする
ベストプラクティス
ボタンとリンク
リンクは主にナビゲーションのために使用され、通常は文中または文の直後に表示されます。
ボタンは、「追加」、「閉じる」、「キャンセル」、「保存」など、主にアクションのために使用されます。リンクに似たプレーンなボタンは、「配送設定を見る」など、あまり重要ではない、あるいはあまり使われないアクションに使用されます。
ボタン」と「リンク」のコンポーネントで表示される HTML には意味があります。これらのコンポーネントを意図的かつ一貫して使用することで、以下のことが実現します。
- 支援技術ユーザーにとってより包括的な体験となる
- 目の見えるユーザーにとって、よりまとまりのあるビジュアルを提供する。
- スケールアップしてもメンテナンスが容易な製品
スタイルのないリンク
既存のリンクスタイルがプロジェクトのニーズを満たさない場合は、UnstyledLink コンポーネントを使用して、カスタムのリンクスタイルを作成します。
コンテンツガイドライン
リンクコンポーネントは、リンクのコンテンツガイドラインに従う必要があります。
関連コンポーネント
- 文章の中や直後に表示されないアクションには、ボタンコンポーネントを使用します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion