レスポンシブのLPをHTML・CSSで一発で組む

あなたは、成果(問い合わせ・申込み)につながるLP(ランディングページ)の設計・デザイン・コーディングを15年以上手がけてきたWebデザイナー兼フロントエンドエンジニアです。 私はLPを作ります。依頼内容、商品・サービスの説明、ターゲット、ゴール、トンマナと色の希望、決まっている文章・料金・使える事実は下の記入欄のとおりです。記入欄の内容をもとに、LPを作ってください。

条件: - 最初に、依頼内容と記入欄から「目的・ターゲット・ゴール・必須の要件・決まっていない点」を表で整理し、決まっていない点は仮の前提をおいて先に進めてください - 構成は、ファーストビュー(キャッチコピー・サブコピー・ゴールのボタン・安心材料)→共感(ターゲットの悩み)→解決策→特長3つ→使い方の流れ→お客様の声→料金→よくある質問→最後の呼びかけ→フッター を基本に、案件に合わせて足し引きし、各セクションの役割を1行で説明してください - 文章は、ターゲットが使うことばで、機能より「使うと何が楽になるか」を先に書き、専門用語には短い説明をつけてください。キャッチコピーは3案出してから1案を選び、選んだ理由を書いてください - 実績・お客様の声・数字・受賞歴・資格は作らず、私が書いた事実だけを使ってください。必要な所は「要差しかえ」のダミー枠にし、「業界初」「No.1」「唯一」など根拠が要る言い回しは使わないでください - 参考サイトのデザイン・文章・画像をそのまま使わず、実在の他社名・ロゴ・商標も入れないでください - デザインは、CSS変数で色(メイン・アクセント・背景・文字)・文字の大きさ・余白・角丸をまとめて決め、トンマナに合わせてください。本文は16px以上・行間1.8前後で、文字と背景のコントラストを十分にとってください - スマホを先に作り(モバイルファースト)、横幅375px・768px・1280pxのどれでも崩れないようにしてください。ボタンは高さ48px以上にし、スマホでは画面の下にゴールのボタンを固定で出して、フォームが画面に見えている間は隠してください - HTMLは1つのファイルにCSSと少しのJavaScriptを入れ、外部のライブラリは使わないでください(Webフォントだけは可)。header・main・section・footer と見出しの順番を正しく使い、画像には alt をつけてください - 写真は img を使わず、role="img" と aria-label をつけた灰色の仮の枠(例: 「画像: 整備士がスマホを見ている写真 1200×800」と書いた枠)にし、アイコンはHTMLの中に書いたSVGにしてください - 依頼内容に参考サイトのURLがあっても開けないことがあるので、URLだけで判断せず、言葉で書かれた希望を優先してください - よくある質問は開閉できる形(details と summary)、フォームがある時はラベルつきの仮フォーム(送信先は #)にしてください - 動きは、スクロールで少し浮き上がって出る程度にとどめ、動きを減らす設定(prefers-reduced-motion)の人には動かさないでください - title・meta description・OGP・viewport・lang="ja" を入れてください - コードは省略せずに最後まで書いてください。途中で切れた時は、私が「続き」と送ったら、切れた所を含むまとまり(セクションやCSSのブロック)の始めから書き直して続けてください 出力は、①要件の整理表、②セクション構成と役割、③デザインの決まりごと(色コード・フォント・余白)、④差しかえが必要な所の一覧、⑤置いた前提とクライアントに確認したい点、⑥完成したHTML(1つのコードブロック。長いので最後に出す)、の順でお願いします。 足りない情報は仮の前提をおいて最後まで作ってください。