背景

  • →はじめに
  • ページのレイアウトは要素が多く、どう整理すれば良いか分からない
    • 「ページタイトル-コンテンツ」ぐらいであれば迷わないが、実際は2つの間に説明文があったりする
    • ページの横にサブメニュー的なものや検索フォームを置くことも多く、ますますどう整理すれば良いか分からない

目的

  • ページレイアウトのコンポーネント開発方針を決める

デザインシステムの比較

各デザインシステムのサイトの「Layout」や「Pattern」などを確認した。

Primer

  • Foundation→Layout→Page types
  • 主に3種類としている
    • Full pages
      • 基本的なタイプ
      • Header、Content、Pane、Footer
    • Split pages
      • Pane、Content
    • Interstitial pages
      • Header、Content
  • コンポーネントとしてPage layoutを提供している

Material Design

  • Foundations→Overview
  • 主に3種類としている
    • Feed
      • ページいっぱいにグリッドレイアウト
    • List-detail
      • ListとDetailの2エリア
      • 親子関係があるコンテンツの表示に使う
    • Supporting pane
      • プライマリコンテンツとセカンダリコンテンツの2エリア
      • 親子関係はないが、関連のあるコンテンツの表示に使う

Polaris

  • Patterns
  • ページレイアウトについては主に3種類としている
    • App settings layout
      • 2カラム
        • ラベルや説明があるカラム
        • 入力欄のカラム
    • Resource index layout
      • 1カラムで、下記の3エリアに分かれる
        • タイトルやアクション
        • フィルタやソート
        • リスト
    • Resource details layout
      • 1カラムで、ページヘッダとメインコンテンツの2エリアに分かれる
      • メインコンテンツは下記の2カラム
        • プライマリコンテンツ
        • セカンダリコンテンツ

自分のページレイアウト方針

  • PrimerのInterstitial pagesとPolarisを合わせたようなページレイアウトを作成する
    • 命名はPolarisに合わせる
    • Material Designのようにリストと詳細を同時に表示する実装は多くやるわけではないので、今回は考えない

自分のコンポーネント開発方針

  • 4つのページレイアウトコンポーネントを作成する
    • InterstitialPageLayout
      • スロットとして、Header、Contentがある
      • 中央揃えにする
    • SettingPageLayout
      • スロットとして、Header、Contentがある
    • IndexPageLayout
      • スロットとして、Header、Content、Paneがある
    • DetailPageLayout
      • スロットとして、Header、Content、Paneがある

次にやること

  • PageHeaderコンポーネントの開発方針を決める