背景コード生成用
ブランドカラーのグラデーション背景
2色をなめらかにつないだ、力強い背景。
用途・説明
ブランドカラーを使った、はっきりしたグラデーションの背景を作成します。CTAセクション、キャンペーンの帯、フッター手前の申し込みエリアなど、ページの中で一番目立たせたい場所に向いています。白い文字を重ねる前提で、コントラストを確認する条件を入れています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいWebデザイナーです。 ブランドカラーの「グラデーション背景」を持つCTAセクションを実装してください。 ## 仕様 - グラデーション：#1463F0 から #7FA9F7 へ、135deg の方向 - 中間に、#1463F0を少し暗くした色を40%の位置に入れて、のっぺりしないようにする - 上に置く文字はすべて白（#FFFFFF） ## レイアウト - セクションの上下 padding：PC 96px / スマホ 64px - コンテンツは中央揃え、最大幅 720px - 上から 見出し → 補足文 → ボタン の順 - ボタンは白背景に #1463F0 の文字（高さ 52px、角丸 9999px） ## 実装方法 - background に linear-gradient を指定する。グラデーション非対応の環境向けに、先に background-color: #1463F0 も書く - 色の帯（バンディング）が目立つ場合に備え、ごく薄いノイズを重ねる方法をコメントで補足する ## アクセシビリティ - 白い文字と、グラデーションの最も明るい部分とのコントラスト比を4.5:1以上にする。満たさない場合は #7FA9F7 を暗くする案を出す - ボタンに focus-visible のアウトライン（白、2pxオフセット）を付ける - 見出しは h2 ## 出力形式 - [使用技術]のコードを1つ出力 - 2色と角度をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。