従来のFluxion
既存サイトの白・グラデーション・ガラス表現を保持。
従来の表現を見るENERGIZING EVERY FLOW.
ブランドをつなぐ。
使いやすさを広げる。
Fluxionらしいブルーとライムを、サイト・業務画面・スマホへ。目的に合わせて、読みやすく、迷わず操作できる部品を選びます。
Webはデジタル庁デザインシステムを主軸に、Google Material Designを補完。スマホはApple HIGを主軸に、各OSの操作へ合わせます。
このページは独自規約のブラウザ参照キットです。公式配布物やネイティブのコンポーネントライブラリではありません。操作結果はこのページ内だけに反映され、外部送信・永続保存は行いません。
ひとつのブランド、4つの用途
用途から選択LP・ホームページ
内容を読み、価値を理解して、次の行動へ進む。
LPの見本を見るWebアプリ
入力・検索・確認を、正確に積み重ねる。
業務画面の見本を見るスマホアプリ
iOSを中心に、OSの文字・操作・テーマに合わせる。
スマホの見本を見る共通の基礎
共通規約Action / Blue
主な操作
#0066FF白文字とのコントラスト 4.83:1。
Brand / Lime
ブランドのアクセント
#7FD300濃色 #1A1A2E との比率 9.11:1。白文字を重ねません。
Text / Ink
読むための文字
#1A1A2E本文 16px・行高1.75。補助文字も読みやすさを確保。
Surface / Subtle
背景と境界
#F5F7FA / #767676入力境界は濃いグレー。薄い罫線は装飾用。
余白は4pxを最小単位に8・16・24・32・48pxを中心に構成。Webの標準操作は48px、主要CTAは56px。数値はブラウザのCSS pxです。
入力とエラーをひとつの流れに
フォーム・状態の規約空欄で「見本として保存」を押すと、エラー一覧へフォーカスします。各エラーから項目へ移動できます。すべて有効になると、このページ内に確認結果を表示します。
色だけに頼らない通知
STATUS + TEXT情報：ここには操作に必要な補足を表示します。
完了：設定を反映しました。（表示例）
注意：未保存の変更があります。（表示例）
エラー：入力内容を確認してください。（表示例）
静的な通知をすべて読み上げ通知にしません。保存完了の動的通知は status を使用し、項目エラーはラベル・説明との関連付けとフォーカス移動で伝えます。
00 / 従来のFluxion
従来版の記録Energizing Every Flow.
ブルーとライムのグラデーション、白い背景、やわらかな角丸。従来の視覚表現を残して、既存サイトの保守に使います。
既存表現の参照旧Canvas・Glass・グラデーションCTAなどの記録は従来版にあります。ここでは識別のための配色を示しています。旧グラデーション上の白文字などは、新規の適合例として扱いません。
01 / LP・ホームページ
web-lp 規約読みやすい見出しと説明、ひとつの主CTA。ブランドの装飾は情報や操作を妨げない位置に置きます。
02 / Webアプリ
web-app 規約検索条件、結果件数、状態を見渡せる一覧。データ表は見出しとの関係を保ち、狭い画面では表の領域だけ横スクロールできます。
3件のプロジェクト
| プロジェクト | 担当 | 状態 |
|---|---|---|
| 業務改善プロジェクト | チーム A | 進行中 |
| 顧客対応の見直し | チーム B | 確認待ち |
| 社内サイトの刷新 | チーム C | 完了 |
| 条件に一致するプロジェクトがありません。 キーワードや状態を変更するか、「条件をクリア」を押してください。 | ||
03 / Appleを主軸にしたスマホアプリ
スマホ専用カタログで開く34の大見出しと17の本文、グループ化したリスト、アイコン付きタブ。iOSの画面構造から、編集・確認・失敗への対処までを揃えました。
Apple HIGを参考にした独自のHTML参照キットです。文字・寸法・素材はブラウザ近似であり、Apple純正UIではありません。独自SVGを使用。操作はこのページ内に反映され、外部送信・永続保存は行いません。
スマホ規約 · Appleの文字・色・素材 · 部品と画面の規約
アプリ見本を読み込んでいます。JavaScriptが無効の場合は、スマホデザイン規約をご覧ください。