CTA・特徴紹介コード生成用
チェックリストで見せる特徴
「できること」を、チェックマークつきで簡潔に。
用途・説明
左に見出しとボタン、右にチェックマークつきの短い特徴を並べるセクションを作成します。細かい説明なしで「これも、これもできる」と伝えたいときに向いています。料金表の前や、ページの中盤のまとめとして使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：はじめてでも、安心して使える理由
[チェック項目]- 全角15文字以内の特徴を4〜6個
[ボタンの文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「チェックリストで見せる特徴」のセクションを実装してください。 ## 表示内容 - 見出し：[見出し] - ボタン：[ボタンの文言] - チェック項目： [チェック項目] ## レイアウト - PC：2カラム。左（45%）に見出しとボタン、右（55%）にチェックリスト。間隔 64px、上下中央揃え - スマホ：見出し → チェックリスト → ボタン の順に縦並び - チェックリストは縦1列。各行の下に区切り線 ## デザイン - 見出し：PC 28px / スマホ 22px、font-weight 700、line-height 1.5、色 #1B2A44 - ボタン：高さ 48px、左右padding 28px、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700 - チェック項目：16px、font-weight 700、色 #1B2A44、上下padding 16px、区切り線 1px solid #E2E8F0 - チェックマーク：20px、線の太さ 2.5px、色 #1463F0、項目の左に 12px の間隔 ## マークアップ - チェックリストは ul / li - チェックマークは SVG で、aria-hidden="true" - 見出しは h2、ボタンは a 要素 ## アクセシビリティ - ボタンには hover（少し暗く）と focus-visible のスタイルを用意する - タップ領域は高さ 44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。