LP・ホームページ用プロファイル
公式資料の確認日: 2026-09-05。制作方針の更新日: 2026-09-12。プロファイル名: web-lp。Fluxion Partners のブランドと 自社ホームページ の外観を起点にし、DADSはアクセシビリティ・読みやすさ・色設計等の参照に使う。HTML部品の外観は一律に採用せず、他デザインシステムも用途別に比較する。共通基盤 / トークン / コンポーネント / カタログ
使う場面と見た目
企業ホームページ、サービス紹介、資料請求、相談予約の LP に使う。既存の classic にある青とライム、白背景、Outfit の見出しは残す。新規ページでは青を操作に、ライムを装飾・ブランドのアクセントに使う。段落やボタン文字を青からライムへのグラデーションにしない。
ヘッダーは自社HPの左側の波形ロゴ・グラデーションブランド文字と右側の主要ナビ、フッターは濃紺背景に左ブランド文字・右著作権表示を置く外観を基準にする。ナビの項目はページの用途に合わせる。自社HPの狭幅ナビ不足を補う、操作できるモバイルメニューを共通実装した。外観の継承を理由に旧CTA・カード・動きの全規則を自動適用しない。
イラスト・アイコンは 共通基盤の素材方針 に従い、.claude/paths.json の folders.digital_agency_assets からデジタル庁素材を参照する。2026-09-12に完成LP見本と共通ヘッダー・フッターを実装し、既存寸法を保ちながらカード4用途とボタンの優先度を具体化した。採用したSVGと利用条件は素材READMEを参照する。
以下の寸法・ページ構成は FP 採用値であり、DADS の LP テンプレート指定ではない。
| 要素 | 標準 |
|---|---|
| コンテンツ幅 | 最大 1200px、読物・フォームは最大 768px |
| ページ左右 | 16px / 768px 以上で 32px |
| セクション上下 | 狭幅 64px / 広幅 96px |
| Hero | 狭幅 1 カラム、広幅は文章＋画像の 2 カラム。文章を DOM の先に置く |
| Hero 見出し | 狭幅 36px / 広幅 48px、700、行高 1.4 |
| 本文 | 16px、400、行高 1.75 |
| カード | padding 24px、角丸 16px、必要なときだけ淡い影 |
| 主 CTA | L、最小高さ 56px / 最小幅 136px、角丸 8px |
| 補助 CTA | M、最小高さ 48px / 最小幅 96px、アウトラインまたはテキスト |
min-height: 100vh を全セクションに強制しない。短い説明は短いまま表示し、画像・長文・拡大文字に応じて伸びる構成にする。文章のあるカラム間は原則 32px 以上とする。DADS のレイアウトは可変幅を前提とし、本文サイズの 2 倍をガターの原則としている。DADS レイアウト
共通ヘッダー・フッターの契約
| 対象 | FP採用仕様 |
|---|---|
| 広幅ヘッダー | 左に48pxの静止波形ロゴとブランド文字、右に会社概要／価値観／サービス／お問い合わせ／Tools。最小88px、左右32px、内幅最大1400px。白・淡青・淡ライムの面、スクロール後は白面と薄い影 |
| 固定方法 | 本文を覆い始めない sticky。実高さ144px超は通常フローへ戻す。狭幅は常に通常フロー。JSで実高さを測りアンカーの余白を確保 |
| 狭幅切替 | 1120px未満（70rem）で「メニュー」ボタンを表示。これは会社ナビ5項目とブランドが収まるFP採用値で、本文カラムの768pxとは別 |
| モバイル開閉 | ヘッダーの下に同じnavを展開。モーダルにせず本文を下へ押す。aria-expanded / aria-controls、閉じたnavは hidden、Escapeで閉じて起点へfocus。ページ内リンクを選ぶと対象節へfocus |
| キーボード | Enter/Spaceで開閉、Tab/Shift+Tabで通常のリンク順を進む。navに role="menu" を付けず、フォーカストラップはしない |
| JSが使えない場合 | nav全項目を表示し、動かない開閉ボタンは非表示。ブランドもfooterもHTMLに含まれているため消えない |
| フッター | 背景 #1A1A2E、上下48px（小画面40px）、左にブランド、右にcopyright。補足文字は #D3D9E6 で可読性を確保。狭幅・拡大では折り返す |
ロゴのグラデーションは既存の商標表現の継承であり、本文や操作文字の配色規約の例外を増やさない。ロゴの常時アニメーションは入れない。Toolsは同じタブで開く。新規タブが必要なサイトでは、その動作を文字で伝える。
正本はheader.html / footer.html、見た目はsite-shell.css、開閉はsite-shell.js。.fpds の直下で使用し、本文には id="main-content" を付ける。Webアプリにはこの企業ナビを追加せず、アプリ用shellを使う。
再利用先HTMLでは <!-- fp-site-header:start --> 〜 <!-- fp-site-header:end -->、footerも同型の区間にpartialsの内容を静的に展開する。公開ビルドはこの区間を同期・一致検査するため、ページごとに手で複製を改修しない。tokens.css → components.css → site-shell.css → 用途別CSSの順に読み込む。共通JSは defer で読み込む。
ナビの既定URLは自社HPの実在する節への絶対URL。LP見本のように同じ節がある場合はbodyに data-fp-local-sections を指定し、存在する節だけ共通JSがページ内リンクへ置き換える。JSが使えなくても既定の公式リンクへ進める。公開サイトに適用する際はブランド・遷移先・copyrightの年を案件に合わせて確認する。
ページを組み立てる
- ヘッダー: ブランド名、主要ページへのリンク、相談などの主要導線。固定する場合は見出しとフォーカスの隠れを確認する。
- Hero: 誰の何を支援するかが分かる見出し、短い説明、主 CTA、必要なら補助リンク。
- 課題と提供価値: 見出しと本文をセットにし、アイコンだけで意味を担わせない。
- サービス・実績: 比較しやすい順序と粒度で説明。数値には対象期間や条件を添える。
- 進め方: 問い合わせ後のステップ、目安期間、依頼側の準備事項。
- FAQ と問い合わせ: 料金条件や契約等の重要事項は初期状態でも見つかる場所に置く。
- フッター: 会社情報、連絡先、プライバシー方針など。
必要な項目を選び、見た目のために不要なセクションを増やさない。見出しは h1 から内容の階層で設定する。カードを使う場合、見出し・要約・リンクの順序を揃え、カード全体リンク内に別ボタンや別リンクを入れない。
CTA・ナビゲーション
FP採用: 同じ検討段階にある CTA 群では主要なものを 1 つに絞り、「相談を予約する」「資料をダウンロードする」のように結果が分かるラベルを使う。ページ内の複数箇所で同じ主 CTA を繰り返すことはできる。スマホでは長いラベルを折り返し、ボタンを必要に応じて全幅にする。
リンクは下線を基本とし、ホバーだけで操作可能性を表さない。本文・操作文字は大きさにかかわらず背景と 4.5:1 以上を確認する。各状態の表現は 共通基盤 に従う。
DADS のパンくずナビゲーションは階層上の位置を示し、ヘッダーとページ見出しの間に置く。FP は折り返しを基本にする。横スクロール仕様を選ぶ場合は、DADS のとおりページ下部に折り返し版も用意する。DADS パンくずナビゲーション
狭幅でメニューを折り畳む場合は「メニュー」「閉じる」を表示し、遷移リンクとサブメニュー開閉ボタンを区別する。DADS はメニューの操作方式を混在させず、挙動ごとのアイコンを一貫させる考え方を示す。DADS モバイルメニュー
問い合わせフォーム
FP採用: 基本は 1 列、入力欄の上にラベル、必須・任意、形式の説明を配置する。入力欄は標準 48px 以上とし、プレースホルダーを使わず、入力中も残るヒントを使う。送信後の成功画面・通信失敗・再送信方法を設計する。実際の送信先を持たない見本フォームは、実送信するように見せない。
DADS のフォームはラベルと入力フィールドを必須要素とし、条件はサポートテキストで先に知らせ、エラーには内容と直し方を記す。必須表示は「※必須」、エラー文は「＊」を前置する方式を採用する。DADS インプットテキストの使い方
フォームの入力エラーは静的な文として表示して aria-describedby で入力と結びつけ、aria-invalid="true" を設定する。エラー文に aria-live や role="alert" を付けない。DADS インプットテキストのアクセシビリティ
送信時に複数の入力エラーがあれば、フォーム上部の要約にフォーカスを移し、該当入力へのリンクを表示する。成功の通知は入力エラーとは別の状態として扱う。このフォーカス手順は FP の実装方針である。
公開前の確認
- 320px の幅と文字拡大で CTA・ナビ・フォームが切れず、本文に不要な横スクロールが出ない。
- Tab でヘッダーから本文へ進める。メニューを閉じると起点にフォーカスが戻る。
- ブランド装飾を含め、ボタン・リンク・エラーが全状態で読める。
- 装飾 SVG は支援技術から隠し、内容を伝える画像には目的に合う代替テキストがある。
- 常時動く背景や自動再生に頼らず内容を理解でき、動きの低減設定を尊重する。
- 送信成功・入力不備・通信失敗それぞれで次の行動が分かる。