⭐️

【Polaris和訳】Components/Image and icons

2021/10/29に公開約39,700字

この記事について

この記事は、Polaris/Components/Image and iconsの記事を和訳したものです。

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

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

Avatar

アバターは、個人や企業のサムネイルをインターフェイスに表示するためのものです。

Web

Image from Gyazo

Props

accessibilityLabel
string
アバター画像のアクセス可能なラベル


customer
boolean
アバターがお客様のものかどうか


initials
string
表示する人のイニシャル


name
string
人物の名前


size

Type
small
type: "small"


Or
medium
type: "medium"


Or
large
type: "large"

"small" | "medium" | "large"
アバターのサイズ


source
string
アバター画像の URL。画像の読み込みに失敗した場合は、初期値に戻ります。


onError
() => void
画像の読み込みに失敗したときに発生するコールバック


Android

Android

デフォルトのアバター

マーチャント、カスタマー、ビジネス用のアバターを表示する場合に使用します。

Image from Gyazo

アクセシビリティ

Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。

IOS

IOS

デフォルトのアバター

マーチャント、カスタマー、ビジネス用のアバターを表示する場合に使用します。

Image from Gyazo

アクセシビリティ

iOS のアクセシビリティについては、Apple のヒューマンインターフェイスガイドラインと API ドキュメントを参照してください。

ベストプラクティス

アバターのサイズは 3 種類あります。

  • 小(32 × 32 px):中サイズではレイアウトが大きすぎる場合や、アバターの重要度が低い場合に使用します。
  • 中(40 × 40 px):デフォルトのサイズとして使用します。
  • Large (60 × 60 px): 1 枚の顧客カードなど、アバターが重要なポイントとなる場合に使用します。

コンテンツガイドライン

Shopify でコンセプトを伝えるために画像を使用する場合は、説明的な alt text を使用することが重要です。これは、画像を見ることができない人でも、スクリーンリーダーで画像の内容を説明することができるため、アクセシビリティ上重要です。

アバターの場合は、画像に表示される内容を説明するフォーマットを使用することをお勧めします。

  • アバターが人を表す場合、alt="Person's name"
  • alt="企業名" 企業を表すアバターの場合。
  • alt="" アバターの横に人物/企業の名前がテキストで表示される場合

関連コンポーネント

Badge

Badge は、マーチャントにオブジェクトのステータスやアクションを知らせるために使用されます。

Web

Default badge

情報や行動の一部について、重要ではない状況を伝えるために使用します。

Image from Gyazo

React
<Badge>Fulfilled</Badge>
HTML
<div>
  <span class="Polaris-Badge">Fulfilled</span>
  <div id="PolarisPortalsContainer"></div>
</div>

Informational badge

重要な属性を持つオブジェクトやアクションを呼び出すために使用します。例えば、オプションを「推奨」とマークしたり、テーマを「公開」とマークしたりします。

Image from Gyazo

React
<Badge status="info">Published</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusInfo"
    ><span class="Polaris-VisuallyHidden">Info </span>Published</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Success badge

成功、完了、または望ましい状態を示すために使用し、マーチャントに肯定的な強化を提供することが重要です。例えば、マーチャントがチャージバックの異議申し立てに成功すると、「Funds recovered」という成功バッジが表示されます。

Image from Gyazo

React
<Badge status="success">Funds recovered</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusSuccess">
    <span class="Polaris-VisuallyHidden">Success </span>Funds recovered
  </span>
  <div id="PolarisPortalsContainer"></div>
</div>

Attention badge

マーチャントの注意が必要だが、重要ではない問題の場合に使用します。例えば、このバッジは、マーチャントが確認する必要のある注文の横に表示されます。

Image from Gyazo

React
<Badge status="attention">Unfulfilled</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusAttention"
    ><span class="Polaris-VisuallyHidden">Attention </span>Unfulfilled</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Warning badge

マーチャントの注意と潜在的な行動を必要とする、重要で一刻を争う問題に使用します。警告イベントは多くの場合、元に戻ります。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用してください。

Image from Gyazo

React
<Badge status="warning">SSL unavailable</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusWarning"
    ><span class="Polaris-VisuallyHidden">Warning </span>SSL unavailable</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Critical badge

このバッジは、マーチャントが注意を払い、行動を起こす必要のある、重大かつ不可逆的な問題に使用します。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用してください。

Image from Gyazo

React
<Badge status="critical">Not approved</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusCritical"
    ><span class="Polaris-VisuallyHidden">Critical </span>Not approved</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Incomplete badge

与えられたタスクがまだ完了していないことを示すために使用します。例えば、マーチャントが注文を完了していない場合などです。

Image from Gyazo

React
<Badge progress="incomplete">Unfulfilled</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--progressIncomplete"
    ><span class="Polaris-Badge__Pip"><span class="Polaris-VisuallyHidden"> Incomplete</span></span
    >Unfulfilled</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Partially complete badge

与えられたタスクが部分的に完了したことを示すために使用します。例えば、マーチャントが注文を部分的に履行した場合などです。

Image from Gyazo

React
<Badge progress="partiallyComplete">Partially fulfilled</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--progressPartiallyComplete"
    ><span class="Polaris-Badge__Pip"
      ><span class="Polaris-VisuallyHidden"> Partially complete</span></span
    >Partially fulfilled</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Complete badge

与えられたタスクが完了したことを示すために使用します。例えば、マーチャントが注文を完了した場合などです。

Image from Gyazo

React
<Badge progress="complete">Fulfilled</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--progressComplete"
    ><span class="Polaris-Badge__Pip"><span class="Polaris-VisuallyHidden"> Complete</span></span
    >Fulfilled</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Vadge with statusAndProgressLabelOverrid

ステータスやプログレスのアクセシビリティラベルが特定のコンテキストに適切でない場合に使用します。

Image from Gyazo

React
<Badge
  status="success"
  progress="complete"
  statusAndProgressLabelOverride="Status: Published. Your online store is visible."
>
  Published
</Badge>
HTML
<div>
  <span class="Polaris-Badge Polaris-Badge--statusSuccess Polaris-Badge--progressComplete"
    ><span class="Polaris-Badge__Pip"
      ><span class="Polaris-VisuallyHidden"
        >Status: Published. Your online store is visible.</span
      ></span
    >Published</span
  >
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
string
バッジの内側に表示するコンテンツ。


proguress

incomplete
型: "incomplete"

Or

partiallyComplete
型: "partiallyComplete"

Or

complete
型: "complete"

"incomplete" | "partiallyComplete" | "complete"
与えられたタスクの進捗状況を示すピップをレンダリングします。


size

small
型: "small"

Or

medium
型: "medium"

"small" | "medium"
中型または小型のサイズです。アプリフレームのメインナビゲーションでのみ、smallを使用します。


status

success
型: "success"

Or

info
型: "info"

Or

attention
型: "attention"

Or

critical
型: "critical"

Or

warning
型: "warning"

Or

new
型: "new"

"success" | "info" | "attention" | "critical" | "warning" | "new"
与えられたステータスのバッジの色を設定します。


statusAndProgressLabelOverride
string
カスタム accessibilityLabel を渡す

アクセシビリティ

アイコンや色で情報を伝えるバッジには、視覚的に隠されたコンポーネントが提供するテキストが含まれています。このテキストは、スクリーンリーダーなどの支援技術によって読み上げられるため、視覚に問題のあるマーチャントでもバッジの意味を理解することができます。

Android

デフォルト バッジ

情報や行動について、重要ではない状況を伝えるために使用します。

Image from Gyazo

情報バッジ

オブジェクトやアクションに重要な属性があることを示すために使用します。例えば、オプションを「推奨」と表示したり、テーマを「公開」と表示したりします。

Image from Gyazo

成功バッジ

マーチャントにポジティブな印象を与えることが重要な場合に、成功、完了、または望ましい状態を示すために使用します。例えば、マーチャントがチャージバックの異議申し立てに成功した場合、「Funds recovered」という成功バッジが表示されます。

Image from Gyazo

注意バッジ

マーチャントの注意が必要だが、問題が重大ではない場合に使用します。例えば、マーチャントがレビューする必要のある注文の横にこのバッジが表示されます。

Image from Gyazo

警告バッジ

マーチャントの注意と潜在的な行動を必要とする、重要で一刻を争う問題に使用します。警告イベントは多くの場合、元に戻すことができます。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用してください。

Image from Gyazo

クリティカルバッジ

マーチャントの注意と行動が必要な、重大で不可逆的な問題に使用します。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用するようにしてください。

Image from Gyazo

インコンプリートバッジ

あるタスクがまだ完了していないことを示します。例えば、マーチャントが注文を完了していない場合などに使用します。

Image from Gyazo

一部完了バッジ

タスクが部分的に完了したことを示すために使用します。例えば、マーチャントが注文を部分的に完了させた場合など。

Image from Gyazo

完了バッジ

タスクが完了したことを示すために使用します。例えば、マーチャントが注文を完了した場合などに使用します。

statusAndProgressLabelOverride を持つバッジ

ステータスとプログレスのアクセシビリティ・ラベルが特定のコンテキストに適していない場合に使用します。

Image from Gyazo

アクセシビリティ

Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。

iOS

デフォルト バッジ

情報や行動について、重要ではない状況を伝えるために使用します。

Image from Gyazo

情報バッジ

オブジェクトやアクションに重要な属性があることを示すために使用します。例えば、オプションを「推奨」と表示したり、テーマを「公開」と表示したりします。

Image from Gyazo

成功バッジ

マーチャントにポジティブな印象を与えることが重要な場合に、成功、完了、または望ましい状態を示すために使用します。例えば、マーチャントがチャージバックの異議申し立てに成功した場合、「Funds recovered」という成功バッジが表示されます。

Image from Gyazo

注意バッジ

マーチャントの注意が必要だが、問題が重大ではない場合に使用します。例えば、マーチャントがレビューする必要のある注文の横にこのバッジが表示されます。

Image from Gyazo

警告バッジ

マーチャントの注意と潜在的な行動を必要とする、重要で一刻を争う問題に使用します。警告イベントは多くの場合、元に戻すことができます。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用してください。

Image from Gyazo

クリティカルバッジ

マーチャントの注意と行動が必要な、重大で不可逆的な問題に使用します。

このバッジを見ることは、マーチャントにとってストレスになりますので、絶対に必要な場合にのみ使用するようにしてください。

Image from Gyazo

インコンプリートバッジ

あるタスクがまだ完了していないことを示します。例えば、マーチャントが注文を完了していない場合などに使用します。

Image from Gyazo

一部完了バッジ

タスクが部分的に完了したことを示すために使用します。例えば、マーチャントが注文を部分的に完了させた場合など。

Image from Gyazo

完了バッジ

タスクが完了したことを示すために使用します。例えば、マーチャントが注文を完了した場合などに使用します。

statusAndProgressLabelOverride を持つバッジ

ステータスとプログレスのアクセシビリティ・ラベルが特定のコンテキストに適していない場合に使用します。

Image from Gyazo

アクセシビリティ

iOS のアクセシビリティについては、Apple のヒューマン・インターフェース・ガイドラインや API ドキュメントをご覧ください。

ベストプラクティス

バッジは次のような点でマーチャントにメリットをもたらします。

  • 確立されたカラーパターンを使用し、マーチャントがステータスや重要度をすぐに識別できる。
  • 短くてスキャン可能なテキストで明確にラベル付けされていること
  • 対象物を明確に識別できるように配置されていること

コンテンツガイドライン

バッジラベル

バッジのラベルは

  • 対象物の状態を表すのに 1 つの単語を使用する。
  • 複雑な状態を表現する必要がある場合のみ、2 つの単語を使用してください。例えば、「Partially refunded(一部返金)」と「Partially fulfilled(一部履行)」のように。
  • 状態は常に過去時制で表現します。例えば、「refunded」は「refund」ではなく「refunded」です。

財務状況に使用できるバッジは次のとおりです。

  • 承認済み
  • 保留
  • 支払い済み
  • 未払い
  • 保留
  • ボイド
  • 一部支払い
  • 一部払戻し
  • 返金済み

フルフィルメントステータスに使用できるバッジは以下のとおりです。

  • フルフィルド
  • 完了
  • 部分的
  • フルフィルメントなし
  • 再入荷

Image from Gyazo

関連コンポーネント
マーチャントが提供するカテゴリーのインタラクティブなリストを表現するには、タグを使用します

Icon

Icons は、製品の主要部分や利用可能なアクションを視覚的に伝えるために使用されます。このアイコンは、マーチャントが製品のどこにいるのか、利用可能な共通のインタラクションパターンをより簡単に理解するための案内ツールとして機能します。

Default icon

製品の主要部分や利用可能なアクションを視覚的に伝えるために使用します。

Image from Gyazo

React
<Icon source={CirclePlusMinor} />
HTML
<div>
  <span class="Polaris-Icon"
    ><span class="Polaris-VisuallyHidden"></span
    ><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
      <path
        d="M15 10a1 1 0 0 1-1 1h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 2 0v3h3a1 1 0 0 1 1 1zm-5-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16z"
      ></path></svg
  ></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Colored icon

製品の主要部分や利用可能なアクションを視覚的に伝えるために使用します。

Image from Gyazo

React
<Icon source={CirclePlusMinor} />
HTMl
<div>
  <span class="Polaris-Icon"
    ><span class="Polaris-VisuallyHidden"></span
    ><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
      <path
        d="M15 10a1 1 0 0 1-1 1h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 2 0v3h3a1 1 0 0 1 1 1zm-5-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16z"
      ></path></svg
  ></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Icon with backdrop

製品の主要部分や利用可能なアクションを視覚的に伝えるために使用します。

Image from Gyazo

React
<Icon source={CirclePlusMinor} />
HTMl
<div>
  <span class="Polaris-Icon"
    ><span class="Polaris-VisuallyHidden"></span
    ><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
      <path
        d="M15 10a1 1 0 0 1-1 1h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 2 0v3h3a1 1 0 0 1 1 1zm-5-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16z"
      ></path></svg
  ></span>
  <div id="PolarisPortalsContainer"></div>
</div>

User provider icon

SVG を文字列で指定すると、スクリプトインジェクションを防ぐためにインライン SVG ではなく、image タグでレンダリングされます。

Image from Gyazo

React
<Icon source="<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M10.707 17.707l5-5a.999.999 0 1 0-1.414-1.414L11 14.586V3a1 1 0 1 0-2 0v11.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414l5 5a.999.999 0 0 0 1.414 0' /></svg>" />
HTML
<div>
  <span class="Polaris-Icon"
    ><span class="Polaris-VisuallyHidden"></span
    ><img
      class="Polaris-Icon__Img"
      src="data:image/svg+xml;utf8,<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M10.707 17.707l5-5a.999.999 0 1 0-1.414-1.414L11 14.586V3a1 1 0 1 0-2 0v11.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414l5 5a.999.999 0 0 0 1.414 0' /></svg>"
      alt=""
      aria-hidden="true"
  /></span>
  <div id="PolarisPortalsContainer"></div>
</div>

User provided icon with color and currentColor

svg の色変更で currentColor を使用している場合、白を適用する。

Image from Gyazo

React
function IconWithReactChild() {
  const iconContent = () => {
    return (
      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="10" fill="rebeccapurple" />
        <circle cx="10" cy="10" r="6" fill="currentColor" />
        <circle cx="10" cy="10" r="3" />
      </svg>
    )
  }

  return <Icon source={iconContent} color="warning" />
}
HTML
<div>
  <span class="Polaris-Icon Polaris-Icon--colorWarning Polaris-Icon--applyColor"
    ><span class="Polaris-VisuallyHidden"></span
    ><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <circle cx="10" cy="10" r="10" fill="rebeccapurple"></circle>
      <circle cx="10" cy="10" r="6" fill="currentColor"></circle>
      <circle cx="10" cy="10" r="3"></circle></svg
  ></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

accessibilityLabel
string
スクリーンリーダーに読み上げられる説明用のテキスト


backdrop
boolean
アイコンの後ろに背景を表示する


color

base
型: "base"

Or

subdued
型: "subdued"

Or

critical
型: "critical"

Or

interactive
型: "interactive"

Or

warning
型: "warning"

Or

highlight
型: "highlight"

Or

success
型: "success"

Or

primary
型: "primary"
"base" | "subdued" | "critical" | "interactive" | "warnign" | "highlight" | "success" | "primary"

SVG の塗りつぶしの色を設定


source `Required`

FunctionComponent
型: FunctionComponent

Or

placeholder
型: "placeholder"

Or

string
型: string

FunctionComponent | "placeholder" | string
アイコンに表示する SVG コンテンツ(アイコンは 20 × 20 ピクセルの viewBox に収まるようにしてください)。

アクセシビリティ

アイコンを使用することは、読み取り、言語、注意、および弱視が困難な商人にとって大きな助けとなります。

アイコンがテキストなしで表示される場合は、accessibilityLabel プロップを使用して、アイコンにテキストの代替を与えます。これにより、スクリーン・リーダーのユーザーに伝えられるアリア・ラベルが追加されます。

Image from Gyazo

関連ガイドライン

Keyboard key

キーボードキーは、マーチャントにキーボードショートカットを教えるために使用されます。

List of keyboard shortcuts

関連するキーボードショートカットの一覧表示に使用します。

Image from Gyazo

React
<KeyboardKey>Ctrl</KeyboardKey>
HTML
<div>
  <kbd class="Polaris-KeyboardKey">ctrl</kbd>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
string
キーの内側に表示する内容

アクセシビリティ

キーボード・キー・コンポーネントのテキストはスクリーン・リーダーで読めますが、視覚的なフォーマットは伝わりません。コンポーネントの視覚的なスタイルに頼ることなく、マーチャントがキーボード・ショートカットに関する情報を理解できるようにします。

Image from Gyazo

ベストプラクティス

キーボードのキーコンポーネントは

  • 複数のショートカットが記載されている場合は、そのショートカットを紹介・説明する見出しをつける。
  • マーチャントがそのキーの組み合わせを使用した場合に何が起こるかを説明するアクションラベルを含める。

コンテンツのガイドライン

見出し

キーボードキーの上にある見出しは以下の通りです。

  • 表示されているキーボードショートカットの種類を表示する。
  • 見出しおよび小見出しのコンテンツガイドラインに従う。

ショートカットの説明

ショートカットの説明では、マーチャントが特定のキーをタップしたときにどのような動作が行われるかを説明する必要があります。ホットキーの組み合わせによってマーチャントがインターフェイス内のある場所に移動する場合、そのフォーマットは次のようになります。

プロパティ タイプ 説明
children string キーの内側に表示するコンテンツ

関連コンポーネント

キーボード・ショートカットが関連付けられているボタンにツールチップを追加するには、ツールチップ・コンポーネントを使用します

Thumbnail

サムネールは、オブジェクトの視覚的なアンカーと識別子として使用します。サムネイルは、コンテキストを提供するためにテキストと一緒に使用する必要があります。

Web

Default thumnail

デフォルトのサイズとして使用します。

Image from Gyazo

React
<Thumbnail
  source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
  alt="Black choker necklace"
/>
HTML
<div>
  <span class="Polaris-Thumbnail Polaris-Thumbnail--sizeMedium"
    ><img
      src="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      alt="Black choker necklace"
  /></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Small thumbnail

デフォルトのサイズではレイアウト上大きすぎる場合や、サムネイルの重要性が低い場合に使用します。

Image from Gyazo

React
<Thumbnail
  source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
  size="small"
  alt="Black choker necklace"
/>
HTML
<div>
  <span class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall"
    ><img
      src="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      alt="Black choker necklace"
  /></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Large thumbnail

サムネイルが主要な焦点となる場合に使用します。同種のアイテムのリストでは、このサイズは避けてください。

Image from Gyazo

React
<Thumbnail
  source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
  size="large"
  alt="Black choker necklace"
/>
HTML
<div>
  <span class="Polaris-Thumbnail Polaris-Thumbnail--sizeLarge"
    ><img
      src="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
      alt="Black choker necklace"
  /></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Thumbnail with component source

サムネイルの中にアイコンを表示する場合に使用します。

Image from Gyazo

React
<Thumbnail source={NoteMinor} size="large" alt="Small document" />
HTML
<div>
  <span class="Polaris-Thumbnail Polaris-Thumbnail--sizeLarge"
    ><span class="Polaris-Icon"
      ><span class="Polaris-VisuallyHidden">Small document</span
      ><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
        <path
          fill-rule="evenodd"
          d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z"
        ></path></svg></span
  ></span>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

alt Required
string
サムネイル画像の Alt テキスト

size
"small" | "medium" | "large"
サムネイル画像のサイズ

source Required
string | React.SFC
画像の URL

Android

デフォルトのサムネイル

デフォルトのサイズとして使用します。
Image from Gyazo

大きなサムネイル

サムネイルが主要な焦点となる場合に使用します。同種のアイテムのリストでは、このサイズは避けてください。

コンポーネントソース付きサムネイル

サムネイルの中にアイコンを表示する場合に使用します。
Image from Gyazo

iOS

デフォルトのサイズとして使用します。
Image from Gyazo

大きなサムネイル

サムネイルが主要な焦点となる場合に使用します。同種のアイテムのリストでは、このサイズは避けてください。

コンポーネントソース付きサムネイル

サムネイルの中にアイコンを表示する場合に使用します。
Image from Gyazo

ベストプラクティス

ウェブ上では、サムネイルは

  • 3 つのサイズのうちの 1 つです。
    • 小(40 × 40 px):中サイズではレイアウト上大きすぎる場合や、サムネイルの重要度が低い場合に使用します。
    • 中(60 × 60 px):デフォルトのサイズとして使用します。
    • 大(80 × 80 px):サムネイルが重要なポイントとなる場合に使用します。同種のアイテムのリストではこのサイズは避けてください。

Android および iOS では、サムネイルのサイズは以下のとおりです。

  • 2 つのサイズのうちの 1 つです。
    • デフォルト(40 × 40):デフォルトのサイズとして使用します。
    • Large (72 × 72): サムネイルが主な焦点となる場合に使用します。同種のアイテムのリストでは、このサイズは避けてください。

コンテンツのガイドライン

Shopify でコンセプトを伝えるために画像を使用する場合は、説明的な alt テキストを使用することが重要です。これは、画像を見ることができない人でも、スクリーンリーダーで画像の内容を説明することができるため、アクセシビリティ上重要です。

サムネイルの場合は、画像に表示される内容を説明するフォーマットを使用することをお勧めします。

  • ウェブ上では、alt="Photo of {product}"とします。例えば、"Photo of black t-shirt with cartoon tiger "のようにします。
  • Web では、空の alt=""属性は、スクリーンリーダーなどの支援技術で画像を無視しますが、装飾的なサムネイルに使用されることもあります。
  • iOS では、imageView.accessibilityLabel = "Photo of {product}"となります。例えば、"Photo of black t-shirt with cartoon tiger "のようになります。
  • Android では、android:contentDescription="Photo of {product}"となります。例えば、"Photo of black t-shirt with cartoon tiger "のようになります。

関連コンポーネント

Video thumbnail

動画のサムネイルは、クリックできるプレースホルダー画像です。クリックすると、モーダルまたはフルスクリーンでビデオプレーヤーが開きます。

Basic video thumbnail

メディアカード内のビデオプレーヤーの再生ボタンとして使用します。

Image from Gyazo

React
<MediaCard
  title="Turn your side-project into a business"
  primaryAction={{
    content: "Learn more",
    onAction: () => {},
  }}
  description={`In this course, you’ll learn how the Kular family turned their mom’s recipe book into a global business.`}
  popoverActions={[{ content: "Dismiss", onAction: () => {} }]}
>
  <VideoThumbnail
    videoLength={80}
    thumbnailUrl="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
  />
</MediaCard>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-MediaCard">
      <div class="Polaris-MediaCard__MediaContainer">
        <div
          class="Polaris-VideoThumbnail__Thumbnail"
          style='background-image: url("https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850");'
        >
          <button
            type="button"
            class="Polaris-VideoThumbnail__PlayButton"
            aria-label="Play video of length 1 minute and 20 seconds"
          >
            <img
              class="Polaris-VideoThumbnail__PlayIcon"
              src="data:image/svg+xml,%3csvg viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='white'/%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='none' stroke='%23b5b5b5'/%3e%3cpath d='M15 11.723c0-.605.7-.942 1.173-.564l10.93 7.215a.72.72 0 010 1.128l-10.93 7.216A.723.723 0 0115 26.153v-14.43z' fill-opacity='.557'/%3e%3c/svg%3e"
              alt=""
            />
          </button>
          <p class="Polaris-VideoThumbnail__Timestamp">1:20</p>
        </div>
      </div>
      <div class="Polaris-MediaCard__InfoContainer">
        <div class="Polaris-Card__Section">
          <div class="Polaris-MediaCard__Popover">
            <div>
              <button
                class="Polaris-Button Polaris-Button--plain Polaris-Button--sizeSlim Polaris-Button--iconOnly"
                aria-label="Actions"
                type="button"
                tabindex="0"
                aria-controls="Polarispopover2"
                aria-owns="Polarispopover2"
                aria-expanded="false"
              >
                <span class="Polaris-Button__Content"
                  ><span class="Polaris-Button__Icon"
                    ><span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z"
                        ></path></svg></span></span
                ></span>
              </button>
            </div>
          </div>
          <div class="Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight">
            <div class="Polaris-Stack__Item">
              <div class="Polaris-MediaCard__Heading">
                <h2 class="Polaris-Heading">Turn your side-project into a business</h2>
              </div>
            </div>
            <div class="Polaris-Stack__Item">
              <p>
                In this course, you’ll learn how the Kular family turned their mom’s recipe book
                into a global business.
              </p>
            </div>
            <div class="Polaris-Stack__Item">
              <div class="Polaris-MediaCard__ActionContainer">
                <div class="Polaris-ButtonGroup">
                  <div class="Polaris-ButtonGroup__Item">
                    <div class="Polaris-MediaCard__PrimaryAction">
                      <button class="Polaris-Button" type="button">
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">Learn more</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal1"></div>
  </div>
</div>

Video thumbnail with progress

動画の再生時間に対する進捗状況を示すために使用します。

Image from Gyazo

React
<MediaCard
  title="Turn your side-project into a business"
  primaryAction={{
    content: "Learn more",
    onAction: () => {},
  }}
  description={`In this course, you’ll learn how the Kular family turned their mom’s recipe book into a global business.`}
  popoverActions={[{ content: "Dismiss", onAction: () => {} }]}
>
  <VideoThumbnail
    videoLength={80}
    videoProgress={45}
    showVideoProgress
    thumbnailUrl="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
  />
</MediaCard>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-MediaCard">
      <div class="Polaris-MediaCard__MediaContainer">
        <div
          class="Polaris-VideoThumbnail__Thumbnail"
          style='background-image: url("https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850");'
        >
          <button
            type="button"
            class="Polaris-VideoThumbnail__PlayButton"
            aria-label="Play video of length 1 minute and 20 seconds"
          >
            <img
              class="Polaris-VideoThumbnail__PlayIcon"
              src="data:image/svg+xml,%3csvg viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='white'/%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='none' stroke='%23b5b5b5'/%3e%3cpath d='M15 11.723c0-.605.7-.942 1.173-.564l10.93 7.215a.72.72 0 010 1.128l-10.93 7.216A.723.723 0 0115 26.153v-14.43z' fill-opacity='.557'/%3e%3c/svg%3e"
              alt=""
            />
          </button>
          <p class="Polaris-VideoThumbnail__Timestamp Polaris-VideoThumbnail--withProgress">1:20</p>
          <div class="Polaris-VideoThumbnail__Progress">
            <progress class="Polaris-VideoThumbnail__ProgressBar" value="56" max="100"></progress>
            <div class="Polaris-VideoThumbnail__Indicator" style="transform: scaleX(0.56);">
              <span class="Polaris-VideoThumbnail__Label">56%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-MediaCard__InfoContainer">
        <div class="Polaris-Card__Section">
          <div class="Polaris-MediaCard__Popover">
            <div>
              <button
                class="Polaris-Button Polaris-Button--plain Polaris-Button--sizeSlim Polaris-Button--iconOnly"
                aria-label="Actions"
                type="button"
                tabindex="0"
                aria-controls="Polarispopover4"
                aria-owns="Polarispopover4"
                aria-expanded="false"
              >
                <span class="Polaris-Button__Content"
                  ><span class="Polaris-Button__Icon"
                    ><span class="Polaris-Icon"
                      ><span class="Polaris-VisuallyHidden"></span
                      ><svg
                        viewBox="0 0 20 20"
                        class="Polaris-Icon__Svg"
                        focusable="false"
                        aria-hidden="true"
                      >
                        <path
                          d="M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z"
                        ></path></svg></span></span
                ></span>
              </button>
            </div>
          </div>
          <div class="Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight">
            <div class="Polaris-Stack__Item">
              <div class="Polaris-MediaCard__Heading">
                <h2 class="Polaris-Heading">Turn your side-project into a business</h2>
              </div>
            </div>
            <div class="Polaris-Stack__Item">
              <p>
                In this course, you’ll learn how the Kular family turned their mom’s recipe book
                into a global business.
              </p>
            </div>
            <div class="Polaris-Stack__Item">
              <div class="Polaris-MediaCard__ActionContainer">
                <div class="Polaris-ButtonGroup">
                  <div class="Polaris-ButtonGroup__Item">
                    <div class="Polaris-MediaCard__PrimaryAction">
                      <button class="Polaris-Button" type="button">
                        <span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">Learn more</span></span
                        >
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal2"></div>
  </div>
</div>

Props

accessibilityLabel
string
再生ボタンのカスタム ARIA ラベル。


showVideoProgress
boolean
ビデオの進行状況を表示するかどうかを指定します。


thumbnailUrl Required
string
サムネイル画像の URL ソースを指定します。


videoLength
number
動画の長さを秒単位で指定します。


videoProgress
number
ビデオの進行状況を秒単位で表示します。サムネイルの下部にプログレスバーを表示します。videoLength も設定されている場合にのみ表示されます。


onBeforeStartPlaying
() => void
サムネイルをマウスで入力、フォーカス、またはタッチしたときのコールバックです。動画のプリロードのトリガーとして使用します。


onClick Required
() => void
サムネイルがクリックされたり、キーが押されたりしたときのコールバックです。モーダルやフルスクリーンコンテナ内など、選択したフォーマットで動画プレイヤーのレンダリングをトリガーするために使用します。

アクセシビリティ

動画のサムネイルに含まれる画像は、装飾的な背景画像として実装されているため、スクリーン リーダーではスキップされます。

再生ボタンはキーボードからアクセス可能で、videoLength プロップが設定されている場合は、aria-label にタイムスタンプが含まれます。例えば、80 秒の動画の場合、「Play video of length 1 minute and 20 seconds」と表示されます。videoLength が設定されていない場合、デフォルトのラベルは「Play video」となります。

ベストプラクティス

動画のサムネイルは

  • メディアカードを使用する。
  • 動画の主題を伝える画像を使用する。
  • 動画のタイムスタンプを入れる。
  • 動画の内容がわかるように、動画から画像をキャプチャする。
  • アスペクト比が 16:9 になるようにトリミングする。
  • 被写体の中央に配置し、人物の頭部などの重要な部分が切り取られないようにすること

必要なコンポーネント

  • 動画サムネイルは、media card コンポーネントでラップする必要があります。

関連コンポーネント

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

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