【Polaris和訳】Design/Spacing
この記事について
この記事は、Polaris/Design/Spacingの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Spacing
一貫したスペーシングは、マーチャントがスキャンしやすいユーザーインターフェース（UI）を実現する視覚的なバランスを生み出します。
一貫したスペーシングを適用することで、UI の品質を向上させることができます。
原則 | Principles
視覚的なリズムを作る
コンポーネントとテキストの調和のとれた配置を作るために、段階的に測定されたスペーシングを使用します。
これにより、要素に予測可能なリズムが生まれ、エクスペリエンス全体が意図的に設計されていると感じられるようになります。
正確さと柔軟性 | Create visual rhythm
数学的な正確さだけでなく、スペーシングは周囲のオブジェクトに反応し、大きなオブジェクトにはより大きなスペースを、小さなオブジェクトにはより小さなスペースを与えます。
また、ある要素に違和感があり、スペーシングを調整する必要がある場合には、光学的な調整を行うことができます。
スペーシングシステム | Precise but flexible
コンポーネントとタイポグラフィのすべてのスペーシングは、4 ピクセル単位で行われます。これは、スペーシングの基本的な測定単位です。
4px グリッド | The spacing system
タイポグラフィでは、伝統的なベースライングリッドを使用しません。
代わりに、行の高さは 4px 単位で設定され、間隔はテキストボックスの端から計測されます。
多くのコンポーネントは、本文の行の高さに合わせて、20px 刻みでサイズが設定されています。
これにより、コンポーネントとテキストの調和のとれた配置が簡単にできます。
コードでのスペーシング | Spacing in code
コードでスペーシングを適用するには 2 つの方法があります。
- スタイルシートを使う
- Polaris React が提供するユーティリティーコンポーネントを使用する
スタイルシートでスペーシングを適用する | Applying spacing with stylesheets
Polaris をプレーンな CSS で使用している場合、4px 単位で値を設定してください。Polaris 内蔵の Sass ライブラリを使用している場合は、rem 単位を使用するか、spacing 関数を介して共通の値にアクセスできます。
| CSS | Sass (rem 関数) | Sass (spacing 関数) |
|---|---|---|
| 0 | 0 | spacing(none) |
| 4px | rem(4px) | spacing(extra-tight) |
| 8px | rem(8px) | spacing(tight) |
| 12px | rem(12px) | spacing(base-tight) |
| 16px | rem(16px) | spacing() |
| 20px | rem(20px) | spacing(loose) |
| 32px | rem(32px) | spacing(extra-loose) |
コンポーネントによるスペーシングの適用 | Applying spacing with components
Polaris 内の様々なコンポーネントは、要素間の自動スペーシングを可能にします。
テキストコンテナコンポーネントを使用して、一連の段落、リスト、またはその他のテキストコンポーネントの間に適切な間隔を自動的に追加します。
スタックコンポーネントは、任意のコンポーネントを横一列または縦一列に間隔を空けて並べることができるコンポーネントです。このコンポーネントは、アイテム間の間隔を制御するための Sass spacing 関数と同じ値を受け入れます。
間隔の選び方 | How to choose spacing
小さなコンポーネントや、機能的に密接な関係にあるコンポーネントの間には、少ないスペースを使用します。
小さなコンポーネントや、機能的に密接な関係にあるコンポーネントの間のスペースを少なくする。
小さな値と大きな値を、構造的なコンポーネント（ホームカードなど）と一緒にコーディネートして、関連するものの視覚的なグループ化を行います。これにより、マーチャントがインターフェイスを理解し、探しているものをより簡単に見つけることができます。特殊なレイアウトの画面では、コンテンツの密度に応じて全体の間隔を調整します。例えば、デスクトップ画面のシンプルなログイン画面では、スペースに余裕があるため、より多くのスペースを使用することができます。
一般的な値 | Common values
最も一般的なスペーシングのサイズは、以下のように Polaris for admin 全体で使用されています。
アイコンとテキストの間に4px（extra-tight）。
ボタンコンポーネントは、このスペーシングを内蔵しています。
アイコンとテキストの間は8px（tight）です。
ボタングループコンポーネントには、このスペーシングが組み込まれています。
フォームのフィールド間は 16 または 20px。
垂直方向に16px（base）、水平方向に20px（loose）です。
フォームレイアウトコンポーネントには、このような間隔が組み込まれています。
カードには20pxのパディングが施されています。
小画面での16px（base）のサイドパディング。
カードコンポーネントにはこれが組み込まれています。
20px（loose）のカード間隔
カードコンポーネントは、自動的に先行するカードとの間に垂直方向のスペースを追加します。
水平方向の間隔については、レイアウトコンポーネントを使用してマルチコラムレイアウトを作成してください。
調整と例外処理 | Adjustments and exceptions
微妙な位置調整が必要な場合は、いくつかの例外が適用されます。
コンポーネントの内部でテキストが垂直方向に中央配置されている場合、上下のパディングは任意のサイズにすることができます。
テキストの長さによって、コンポーネントの幅や、並んだときの水平方向の位置を決めることができます。
光学的調整 | Optical adjustment
要素が見た目よりも大きくなることがあります。要素の見えないエッジを基準にして間隔を決めると、違和感があります。
このような光学的効果を補正するために、4px 単位でスペースを調整し、バランスが良くなるようにします。
光学的調整を行わない場合、開示アイコンがボタンの右端から離れすぎている。
光学的調整後は、よりバランスのとれた間隔になっています。
タッチターゲット | Touch targets
インタラクティブな要素が推奨されるタッチターゲットのサイズと間隔のガイドラインに沿っていれば、マーチャントはモバイルでより簡単にタスクを実行できます。
リンク、ボタン、入力の間に十分なスペースを確保することで、誤った操作を防ぐことができます。
注：タッチターゲットのサイズは、iOS（44px）と Android（48dpi）で異なります。
モバイルデザインの基礎となる原則を読む
次 | Next
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion