Fluxion デザインシステムを使う

作るものに合わせて、共通ブランドと用途別の画面規約を選びます。Webは「共通ブランド」「LP・ホームページ」「Webアプリ」の3層です。LPの外観は自社HPに揃え、Webアプリの操作原則はCarbon・Fluent 2等、読みやすさと素材はデジタル庁を参照します。スマホはApple HIGと各OS標準を優先します。

見て、操作して、実装する

• 4用途のコンポーネントカタログ
• LP・ホームページの完成画面：自社HPの外観に揃えたヘッダー・濃紺フッター、狭幅メニュー、サービスカード
• Webアプリの完成画面：トップバー・左ナビ・狭幅ドロワー、一覧から詳細・編集へ
• ボタンの優先度と状態 / 用途別カード
• Appleを主軸にしたスマホ専用カタログ
• Webトークン CSS / Web部品 CSS
• LP共通外枠 CSS / メニュー JS / ヘッダー原本 / フッター原本
• LP CSS / LP操作 JS / Webアプリ CSS / Webアプリ操作 JS
• モバイル CSS / 操作 JS / 動き JS

適用順は、利用者の要件とアクセシビリティ、対象OSの標準挙動、用途別規約、共通規約、ブランド装飾です。従来のグラデーションや文字指定を新しい用途へ無条件には適用しません。

HTML・CSS・JavaScriptの見本は独自のブラウザ参照キットです。Apple、Google、デジタル庁の公式配布物や認証済みライブラリではありません。スマホ用の数値・素材・動きはHTML近似で、ネイティブSDKではありません。操作結果はページ内だけに反映され、外部送信・永続保存は行いません。

上流の第三者資料を採用した範囲は動きの規約で明示しています。MITライセンスと出典を保持してください。Apple等の公式資料の権利・商標までMITになるものではありません。

素材と更新の原則

イラストレーション・アイコンはデジタル庁の公式素材を第一候補にします。使用分の原本と出典・利用条件は素材READMEにまとめています。収録されていない操作記号は製品内で統一した補助セットを使います。

LPの外枠はヘッダー・フッター原本から静的に展開します。共通部品を更新したときは見本と公開サイトへ同じ内容を同期し、用途ごとにコピーが分岐しないようにします。WebアプリにはLPの会社ナビを重ねず、製品名・製品内ナビ・ヘルプを配置します。新規制作では完成画面と用途別規約を一緒に参照してください。