Shopify Polaris
Shopify Polaris / 2017– / スタイル / プラットフォームの画面言語
商品、注文、決済、顧客を扱うShopifyの画面を一つの商取引言語に揃えるUIフレームワーク。情報の塊をカードとセクションへ分け、状態と次の行動を短い言葉で示し、管理者が迷わず店を運営できることを中心に置く。
ひと目で判断
見た目の特徴
- 白いカードを淡い地の上へ積む
- 緑をブランド色より成功や前進の合図として使う
- ページ上部に題名、状態、主要操作をまとめる
- 商品・注文・決済の状態を短いバッジで示す
向いている用途
- 商品や注文の管理画面で、状態確認から次の行動までを一画面にまとめるとき
- 事業者向けツールを、業務的すぎない穏やかな語調と部品で統一するとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 題名と主要操作を先に置き、状態名と補足は短いラベルと本文へ分ける。
- 構成
- 淡い地に白いカードを積み、各カードは一つの業務判断だけを受け持つ。
- 素材
- 無彩色を基礎に、緑は成功と前進、赤は危険という意味へ固定する。
- 注意
- 何でもカードへ入れるとページ全体の順序がなくなる。業務の流れと主要操作をカードの外側で先に決める。
- 関連研究
- Shopify adminのページ構造 / 商取引の状態ラベル / Web ComponentsとしてのPolaris
関連項目
- Atlassian Design System（Atlassian Design System）同じ「プラットフォームの画面言語」の系統。Shopify PolarisとAtlassian Design Systemの違いを見る
- ベントーグリッド（Bento Grid）共通する印象：信頼 / 親密 / 技術。Shopify Polarisとベントーグリッドの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- Salesforce Lightning（Salesforce Lightning Design System）共通する印象：信頼 / 技術 / 親密。
- Ubuntu Yaru（Ubuntu Yaru）共通する印象：技術 / 親密 / 信頼。
- モチーフ（Motif）共通する印象：技術 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/shopify-polaris
- Markdown
- [Shopify Polaris（Shopify Polaris） — デザインスタイル辞典](https://indexstyle.org/ja/styles/shopify-polaris)
- HTML
- <a href="https://indexstyle.org/ja/styles/shopify-polaris">Shopify Polaris（Shopify Polaris） — デザインスタイル辞典</a>