フッターコード生成用
グラデーション背景のフッター
2色がなめらかに移り変わる、華やかな締めくくり。
用途・説明
背景に2色のグラデーションを使ったフッターを作成します。単色のフッターよりも華やかで、ブランドカラーを印象づけられます。アプリの紹介サイト、キャンペーンページ、スタートアップのサービスサイトなど、明るく前向きな雰囲気のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[キャッチコピー]- ロゴの下に添える1文
[リンクのカラム]- 見出しとリンクを3カラムぶん
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「グラデーション背景のフッター」を実装してください。 ## 表示内容 - 左：ロゴ（テキスト「[サービス名]」で代用）、キャッチコピー：[キャッチコピー] - 右：リンクのカラム [リンクのカラム] - 最下段：コピーライトと、利用規約・プライバシーポリシーのリンク ## レイアウト - PC：左にロゴとキャッチコピー（幅 35%）、右にリンクのカラムを3つ - スマホ：ロゴを上、リンクのカラムを2列で下に - 上下 padding 64px ## デザイン - 背景：左上から右下へ、#1463F0 → #8B5CF6 の linear-gradient（135度） - 文字はすべて白系 - ロゴ：20px、font-weight 700、色 #FFFFFF - キャッチコピー：14px、line-height 1.8、色 rgba(255, 255, 255, 0.88) - カラムの見出し：13px、font-weight 700、色 #FFFFFF - リンク：14px、色 rgba(255, 255, 255, 0.85)、行の間隔 12px。hover で #FFFFFF と下線 - 最下段：上に 1px solid rgba(255, 255, 255, 0.24)、12px、色 rgba(255, 255, 255, 0.8) ## 読みやすさ - 白い文字と背景のコントラスト比が、グラデーションのどの位置でも 4.5:1 以上になるか確認する - 足りない部分がある場合は、色を暗くする案、または背景に rgba(0, 0, 0, 0.1) を重ねる案を出す ## アクセシビリティ - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"） - フォーカスリングは白で表示する - 印刷時（@media print）は背景を白にし、文字を黒にする ## 出力形式 - [使用技術]のコードを1つ出力 - 2色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。