CTA・特徴紹介コード生成用
「こんな方におすすめ」のボックス
当てはまる人が、自分のことだと気づける一覧。
用途・説明
「こんな方におすすめ」の見出しをリボンのように上に乗せ、当てはまる条件をチェックマークつきで並べるボックスを作成します。対象をはっきりさせることで、当てはまる人の背中を押せます。LPの中盤や、申し込みボタンの手前に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：こんな方におすすめ
[項目のリスト]- 当てはまる条件を3〜5個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「こんな方におすすめ」のボックスを実装してください。 ## 表示内容 - 見出し：[見出し] - 項目： [項目のリスト] ## レイアウト - 最大幅 640px、中央配置 - ボックスの上の辺に、見出しのラベルを半分はみ出すように乗せる（中央揃え） - 項目は縦1列。各行は、左にチェックマーク、右に文章 ## デザイン - ボックス：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 40px 32px 24px - 見出しのラベル：背景 #1463F0、文字 #FFFFFF・17px・font-weight 700、角丸 999px、padding 8px 32px - 項目：16px、font-weight 700、line-height 1.6、色 #1B2A44、上下padding 14px - 項目の区切り：1px dashed #DCE4F0（最後の行には付けない） - チェックマーク：22px、線の太さ 2.5px、色 #1463F0 ## マークアップ - section 要素。見出しは h2 - 項目は ul / li。チェックマークは aria-hidden="true" - 見出しのラベルは position: absolute ではなく、負の margin で上にずらす（文字が長くなっても崩れないため） ## アクセシビリティ - 項目の文章が2行になっても、チェックマークが1行目の高さにそろうようにする - #1463F0 の背景と白い文字のコントラスト比 4.5:1 以上を確認する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。