CTA・特徴紹介コード生成用
お悩みから解決へつなぐセクション
「こんなお悩み、ありませんか？」から始める。
用途・説明
読む人の悩みを3つ並べ、矢印でつないで「まとめて解決できます」と示すセクションを作成します。ファーストビューの直後に置くと、読む人が「自分のことだ」と感じて読み進めてくれます。LPの定番の構成です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：こんなお悩み、ありませんか？
[悩みのリスト]- 読む人の悩みを3つ。それぞれ全角20文字以内
[解決のメッセージ]- 例：そのお悩み、〇〇がまとめて解決します
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お悩みから解決へつなぐセクション」を実装してください。 ## 表示内容 - 見出し：[見出し] - 悩み： [悩みのリスト] - 解決のメッセージ：[解決のメッセージ] ## レイアウト - すべて中央揃え。最大幅 880px - 見出し → 悩みのカード（PC：3列、スマホ：1列）→ 下向きの矢印 → 解決のメッセージ の順 - 悩みのカードの間隔 16px ## デザイン - 見出し：PC 28px / スマホ 22px、font-weight 700、色 #1B2A44 - 悩みのカード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px 16px、文字 15px・font-weight 700・色 #47566E・中央揃え - 各カードの上に、困った表情の人物の線画アイコン（32px、色 #8A96AA） - 矢印：下向きの三角形、幅 32px、色 #1463F0。上下に 24px の余白 - 解決のメッセージ：背景 #1463F0、角丸 12px、padding 28px、文字 #FFFFFF・PC 24px / スマホ 18px・font-weight 700 - メッセージのなかで強調したい言葉には、半透明の白い下線（マーカー風）を引く ## マークアップ - 悩みは ul / li - 矢印とアイコンは aria-hidden="true" - 解決のメッセージは p 要素にし、強調する言葉は strong ## アクセシビリティ - #1463F0 の背景と白い文字のコントラスト比が 4.5:1 以上になるか確認する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。