背景

  • →はじめに
  • アプリの一番外のレイアウトのパターンがはっきりしない
    • UIライブラリのコードでいうとAppProvider的な要素の真下に来るものをどう整理すれば良いかわからない
  • 概ね「ヘッダ-メニュー＋コンテンツ-フッタ」であると思うが、下記のような例外もあり、自分の中でうまくパターン分けできていない
    • サインアップ系の画面だと「ヘッダ、コンテンツ」だけになる
    • メニューがヘッダやフッタを突き抜けて「メニュー-ヘッダ+コンテンツ+フッタ」という2カラム構成になるものもある

前提

  • 以降、一番外のレイアウトを「アプリレイアウト」と呼ぶことにする

目的

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

デザインシステムの比較

調べた限りでは、アプリレイアウトに言及せず、その1階層下のレイアウトから言及しているデザインシステムが多かった。

Material Design

Ant Design

  • Components→Layout→Layout→Basic structure
  • 例として4パターンあげている
    • パターン1
      • Header
      • Content
      • Footer
    • パターン2
      • Header
      • Sider+Content
      • Footer
    • パターン3
      • パターン2のSiderとContentが入れ替わっただけ
    • パターン4（メニューがヘッダとフッタを突き抜けるパターン）
      • 1カラム目
        • Sider
      • 2カラム目
        • Header
        • Content
        • Footer

自分のアプリレイアウト方針

  • Material Designのように、Navigation+Bodyに2カラム構成にする
    • Ant Designのようなアプリレイアウトの方が自分には馴染み深いが、レスポンシブ化対応を考えるとMaterial Designの方が今後楽になりそう
    • 前から薄々「ヘッダをスペースの割に有効活用できない」と思っていたので、思い切って今回からヘッダをなくす
      • ヘッダにあったホームへのリンクや検索バーは、Navigationに置く

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

  • AppContainerコンポーネントを作成する
    • スロットとして、NavigationとBodyがある

次にやること

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