LP・ホームページ用プロファイル

確認日: 2026-09-05。プロファイル名: web-lp。デジタル庁デザインシステム（DADS）を操作と読みやすさの主基準にし、Fluxion Partners のブランド表現を追加する。共通基盤 / トークン / コンポーネント / カタログ

使う場面と見た目

企業ホームページ、サービス紹介、資料請求、相談予約の LP に使う。既存の classic にある青とライム、白背景、Outfit の見出しは残す。新規ページでは青を操作に、ライムを装飾・ブランドのアクセントに使う。段落やボタン文字を青からライムへのグラデーションにしない。

以下の寸法・ページ構成は 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 レイアウト

必要な項目を選び、見た目のために不要なセクションを増やさない。見出しは h1 から内容の階層で設定する。カードを使う場合、見出し・要約・リンクの順序を揃え、カード全体リンク内に別ボタンや別リンクを入れない。

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 の実装方針である。