フッターコード生成用
カラム型のサイトフッター
リンクを整理して並べた、情報の見つけやすいフッター。
用途・説明
ロゴと説明文、カテゴリ別のリンク列、コピーライトを並べる定番のフッターを作成します。リンクが多いサイトでも整理して見せられ、スマホでは読みやすい1列に切り替わります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- 例：Toolly
[サービス説明]- ロゴの下に置く1〜2文
[リンク構成]- 列の見出しと、その中のリンク名
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で、サイト共通フッターを実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用）と説明文：[サービス説明] - リンク列： [リンク構成] - 最下部：コピーライト「© 2026 [サービス名]」と、利用規約・プライバシーポリシーへのリンク ## レイアウト - PC：左にロゴと説明（幅 1/3）、右にリンク列を3列 - タブレット：ロゴ・説明を上段、リンク列を下段に3列 - スマホ：すべて1列。各リンク行の高さは 44px 以上 - コンテンツ最大幅 1200px、上下 padding 64px（スマホ 48px） - 最下部はリンク列から区切り線（1px）で分け、上下 padding 24px ## 配色・タイポグラフィ - 背景：#1B2A44（濃いネイビー） - 見出し：14px、font-weight 700、色 #FFFFFF - リンク・説明：14px、色 rgba(255,255,255,0.72)、hover で #FFFFFF と下線 - ロゴの左に小さな角丸の四角（12px）を置き、色は #7FA9F7 を明るくした色にする - 区切り線：rgba(255,255,255,0.14) - コピーライト：12px、rgba(255,255,255,0.6) ## アクセシビリティ - <footer> 内のリンク列はそれぞれ <nav aria-label="…"> と <ul> で構成 - 暗い背景でもリンク文字のコントラスト比4.5:1以上を確保（足りなければ値を調整） - focus-visible 時に白いアウトラインを表示 ## 出力形式 - [使用技術]のコードを1つ出力 - リンクをデータ配列から生成し、追加しやすい構造にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。