CTA・特徴紹介コード生成用
ダーク背景の特徴紹介
濃い背景に、半透明のカードで特徴を並べる。
用途・説明
濃い色の背景に、半透明のカードで特徴を3つ並べるセクションを作成します。明るいセクションが続くページの途中に置くと、メリハリが付きます。技術的な強みや、セキュリティなどの信頼性を伝える内容に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[セクション見出し]- 例：選ばれる3つの理由
[特徴のリスト]- 見出しと説明文のセットを3つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ダーク背景の特徴紹介」のセクションを実装してください。 ## 表示内容 - セクション見出し：[セクション見出し] - 特徴： [特徴のリスト] ## レイアウト - 画面の幅いっぱいの背景。上下padding PC 96px / スマホ 64px - 見出しは中央揃え、その下 48px にカードを PC：3列、スマホ：1列。間隔 20px - カード内は上から アイコン → 見出し → 説明文 ## デザイン - 背景：#1B2A44 - セクション見出し：PC 28px / スマホ 22px、font-weight 700、色 #FFFFFF - カード：背景 rgba(255,255,255,0.06)、枠線 1px solid rgba(255,255,255,0.16)、角丸 16px、padding 28px - アイコンの枠：48px、角丸 12px、背景は #7FA9F7 の20%の半透明。アイコンは線のアイコン 24px・色 #7FA9F7 - 見出し：18px、font-weight 700、色 #FFFFFF - 説明文：14px、line-height 1.9、色 rgba(255,255,255,0.72) - hover：枠線を #7FA9F7 にする ## アクセシビリティ - 説明文の色は、背景とのコントラスト比 4.5:1 以上を保つ - ul / li でマークアップ。カードの見出しは h3 - アイコンは aria-hidden="true" - focus-visible の枠は、暗い背景でも見える明るい色にする ## 出力形式 - [使用技術]のコードを1つ出力 - 背景色とアクセントの色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。