{"id":"shopify-polaris","no":547,"name":"Shopify Polaris","ja":"Shopify Polaris","era":"2017–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 27","addedAt":"2026-08-22","source":{"title":"Shopify Developers — Polaris","url":"https://shopify.dev/docs/api/polaris"},"reference":{"status":"verified","pageUrl":"https://shopify.dev/docs/api/polaris","credit":"Shopify Developers — Polaris"},"essence":"商品、注文、決済、顧客を扱うShopifyの画面を一つの商取引言語に揃えるUIフレームワーク。情報の塊をカードとセクションへ分け、状態と次の行動を短い言葉で示し、管理者が迷わず店を運営できることを中心に置く。","cues":["白いカードを淡い地の上へ積む","緑をブランド色より成功や前進の合図として使う","ページ上部に題名、状態、主要操作をまとめる","商品・注文・決済の状態を短いバッジで示す"],"intents":["信頼","親密","技術"],"works":["商品や注文の管理画面で、状態確認から次の行動までを一画面にまとめるとき","事業者向けツールを、業務的すぎない穏やかな語調と部品で統一するとき"],"recipe":{"type":"題名と主要操作を先に置き、状態名と補足は短いラベルと本文へ分ける。","layout":"淡い地に白いカードを積み、各カードは一つの業務判断だけを受け持つ。","material":"無彩色を基礎に、緑は成功と前進、赤は危険という意味へ固定する。"},"avoid":"何でもカードへ入れるとページ全体の順序がなくなる。業務の流れと主要操作をカードの外側で先に決める。","colors":["#F1F2F3","#008060","#202223"],"motif":"ui","pair":["atlassian-design-system","bento-grid"],"study":["Shopify adminのページ構造","商取引の状態ラベル","Web ComponentsとしてのPolaris"],"en":{"essence":"Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.","cues":["White cards stacked on a pale ground","Green used as success or forward motion","Title, status and primary action gathered at the top","Compact badges for product, order and payment states"],"works":["Management screens that connect order status to the next operational action","Giving business tools a calm, humane voice without losing rigor"],"recipe":{"type":"Lead with the page title and primary action; split status and explanation into badge and body text.","layout":"Stack white cards on a pale ground, with one business decision per card.","material":"Use neutrals as the base, green for success and progress, and red only for danger."},"avoid":"Putting everything in a card removes the order of the page. Define the workflow and primary action outside the cards first.","study":["Shopify admin page structure","Commerce status labels","Polaris as Web Components"]},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}