⭐️

【Polaris和訳】Experiences/Admin/Page layouts

2021/10/29に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Experiences/Page layoutsの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

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

ページレイアウト

レイアウトパターンは、画面内のコンテンツを配置するための一般的な方法です。

画面の構造

画面は、ある時点でのアプリケーションのユーザーインターフェース(UI)全体です。

典型的な Polaris の画面は、いくつかのレイヤーで構成されています。アプリのフレームが外側の層を構成しています。その中には、ページコンポーネントとレイアウトコンポーネントがあります。

レイアウトコンポーネントは、カードやバナーのようなコンテナを、すべてのスクリーンサイズに対応するように配置します。

アプリフレーム

アプリフレームは、アプリケーションの外側の UI です。トップレベルのナビゲーションや検索などのグローバルな機能を保持しています。

ページコンポーネント:

各ページのコンテンツのコンテナとして機能する
コンテンツエリアの水平方向の余白を管理します。
ヘッダーには、ブレッドクラム、ページタイトル、ページレベルのアクションが表示されます。

ページコンポーネントのバリエーション

フルワイド。リストやテーブルなどの幅の広いコンテンツに使用します。
シングルカラム。フォームへの入力など、1 つの処理にページを集中させる場合に使用します。

レイアウトコンポーネント

ページ内では、レイアウトコンポーネントがコンテンツをセクションに分類します。セクションは、コンテンツがどのように列にフローするかを管理します。各セクションには次のパターンがある。

フルワイド
プライマリ（2/3 width)
セカンダリ（1/3 width)
注釈付き

コンテンツをレイアウトする

ページ単位のバナーを、ページ上部のフルワイドセクションに配置する。

カードをセクションごとに重ねて、画面のメインコンテンツを意味のあるグループに分けます。

商品や注文などの個々のリソースを表す画面では、ページアクションをページ下部のフルワイドセクションに配置します。

フッターアクションがないページでは、フッターのヘルプコンポーネントで、現在の画面に関するドキュメントへのリンクを提供することができます。

カードでのレイアウト

カードは、ページ全体と同様の構造を持っています。

カードには多くの場合、ヘッダーがあり、タイトルとカードレベルのアクションが右側に表示されます。
カードにはフッターにもアクションがあります。
複雑なカードはセクションに分けることができます。カードのセクションは、自動的にディバイダーで区切られます。
セクションには、多くの場合、左にタイトル、右にセクションレベルのアクションがある subheder があります。

ヘッダーアクションとフッターアクションの使い分けなど、詳しくはカードコンポーネントをご覧ください。

特殊なスクリーンタイプ

上記の構造は、Shopify 管理画面のほとんどのスクリーンに適用されますが、他のタイプのスクリーンも存在します。

セールスチャンネルを含む、埋め込まれた Shopify のアプリは、通常のアプリフレームの中に含まれています。しかし、ページコンポーネントの表示は異なります。

セルスクリーンでは、追加料金が必要なオプトイン機能を提示します。

イマーシブエディターは、複雑でインタラクティブな編集作業に適しています。イマーシブエディターでは、作業中のライブプレビューが表示され、その周辺に変更を加えるためのツールが配置されていることが多い。

標準的なページレイアウト

以下のパターンは、アプリのフレーム内とページヘッダーの下にコンテンツを配置する一般的な方法です。

シングルカラム、ワイド

このレイアウトは、幅の広いリストビューやテーブルビューで、水平方向のスペースを確保したい場合に使用します。

ページコンポーネントをフルワイドに設定する
1 つまたは複数の基本レイアウトセクションを使用する

<Page fullWidth title="Single column wide layout">
  <Layout>
    <Layout.Section>{/* Page-level banners */}</Layout.Section>
    <Layout.Section>{/* Wide page content */}</Layout.Section>
    <Layout.Section>{/* Page footer content */}</Layout.Section>
  </Layout>
</Page>

シングルカラム、ナロー

このレイアウトは、フォームへの入力など、単一のタスクに特化した画面にマーチャントの注意を集中させたい場合に使用します。

ページコンポーネントをシングルカラム（ナロー）モードに設定します。
1 つまたは複数の基本レイアウトセクションを使用する

<Page singleColumn title="Single column narrow layout">
  <Layout>
    <Layout.Section>{/* Page-level banners */}</Layout.Section>
    <Layout.Section>{/* Narrow page content */}</Layout.Section>
  </Layout>
</Page>

プライマリー／セカンダリー

プライマリー／セカンダリーレイアウトは、コンテンツをメインカラムとセカンダリーカラムに分けて表示します。メインカラムは通常左に配置されますが、右に配置されることもあります。

プライマリー／セカンダリーレイアウトの最も一般的な使い方は、注文や商品などの個々のオブジェクトの詳細を表示することです。

ページコンポーネントをデフォルトの幅に設定します。
最も重要なコンテンツを一次列に配置します。
その他のコンテンツは二次列に配置します。ここに配置するコンテンツは、ナビゲーション用、使用頻度の低いもの、または必須ではないものとします。

<Page title="Details page">
  <Layout>
    <Layout.Section>{/* Page-level banners */}</Layout.Section>
    <Layout.Section>{/* Primary content */}</Layout.Section>
    <Layout.Section secondary>{/* Secondary content */}</Layout.Section>
    <Layout.Section>{/* Page actions (delete and save) */}</Layout.Section>
  </Layout>
</Page>

このレイアウトのもう一つの使い方は、注文のために配送ラベルを購入するなど、要約が役立つ集中的なタスクの場合です。

ページコンポーネントをデフォルトの幅に設定する
左側にプライマリーカラムを配置し、メインの UI を表示します。
右側にセカンダリーカラムを配置し、サマリーとコールトゥアクションを表示します。

<Page title="Task screen with summary">
  <Layout>
    <Layout.Section>{/* UI to complete the task */}</Layout.Section>
    <Layout.Section secondary> {/* Summary and call to action */} </Layout.Section>
  </Layout>
</Page>

注釈付き

注釈付きレイアウトでは、ページのコンテンツを、関連性の薄い個別のセクションにまとめています。このレイアウトでは、特定のセクションを探すためにページをスキャンしやすくなります。

このレイアウトは設定画面に使用します。ユーザーがタスクを完了するために複数のセクションに移動する必要がある場合は、このレイアウトを使用しないでください。

ページコンポーネントをデフォルトの幅に設定します。
ページ上の独立したトピックごとに注釈付きレイアウトセクションを使用します。
注釈付きレイアウトを他のレイアウトタイプと組み合わせないでください。

<Page title="Annotated layout">
  <Layout>
    <Layout.AnnotatedSection
      title="Store details"
      description="Shopify and your customers will use this information to contact you."
    >
      {/* Details fields */}
    </Layout.AnnotatedSection>
    <Layout.AnnotatedSection
      title="Store address"
      description="This address will appear on your invoices."
    >
      {/* Address fields */}
    </Layout.AnnotatedSection>
  </Layout>
</Page>

カスタムページレイアウト

Shopify 管理画面のほとんどの画面は、これらのレイアウトのいずれかを使用していますが、Polaris で使用できるのはこれらのレイアウトだけではありません。以下のようなレイアウトも可能です。

複数列のリスト
等値線のグリッド
メイソンリーレイアウト

これらのレイアウトやその他のレイアウトを実現するには、1 つまたは複数のカスタムレイアウトコンポーネントを作成してください。レイアウトコンポーネントは、他のコンポーネントを置くことができる「棚」のようなものだと考えてください。

小規模なレイアウト

小規模なレイアウトに便利なのがstackコンポーネントです。任意のコンポーネントを横一列、縦一列に並べることができます。また、標準的なスペーシングを適用するのにも便利なコンポーネントです。

スタックは、1 つのアイテムが利用可能なスペースを埋めるために成長する必要があるコンポーネントの列に特に適しています。スペースに制約がある場合、コンテンツはデフォルトで折り返されます。

小規模なカスタムレイアウト

カスタムページレイアウトよりも、カスタムスモールスケールレイアウトが必要になることが多いでしょう。目的のレイアウトが単一のスタックコンポーネントで簡単に実現できない場合は、カスタムレイアウトを作成します。

スモールスケールのカスタムレイアウトは、ここで紹介するタイムライン入力のように、機能コンポーネントの一部として行うことができます。また、再利用可能なレイアウトが必要な場合は、小規模なレイアウト専用のコンポーネントを作成することも可能です。

アクションを画面上に配置する

アクションを整理することは、コンテンツを整理することと同様に重要です。

アクションがページ全体に適用される場合は

プライマリまたはセカンダリアクションとして、ページヘッダーに配置する。
ページレベルの削除や保存のアクションには、ページアクションコンポーネントを使用します。

アクションがより具体的なものに適用される場合は、影響を与えるコンテンツのレベルで配置します。例えば、あるアクションがカードのコンテンツに適用される場合です。

重要度の低いアクションや、カードの内容を確認する必要のないアクションには、カードヘッダーアクションを使用してください。例えば、マーチャントが長いリストを含むカードにアイテムを追加したい場合などです。
カードフッターアクションは、カードの最も重要なアクション、またはカードの内容を確認することが有益なアクションに使用します。例えば、マーチャントは、キャンセルやトラッキング情報を追加する前に、発送物の内容を確認する必要があります。

ナビゲーションとレイアウトの組み合わせ

レイアウトを設計する際には、常にスクリーンサイズの全範囲を考慮してください。

ページが複雑になったり、コンテンツが増えすぎたり、携帯電話でスクロールして移動するのが困難になった場合は、コアページと、ナビゲーションでアクセスできるサブページに分割することができます。

Shopify アプリのご紹介

Discussion

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