フッターコード生成用
1行のシンプルなフッター
ロゴ・リンク・コピーライトだけの、最小限のフッター。
用途・説明
ロゴ、数個のリンク、コピーライト表記だけを横1行に収めた、最小限のフッターを作成します。LPやポートフォリオ、ツール系サイトなど、ページ数が少ないサイトに向いています。スマホでの並び順とタップしやすさも指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 例：利用規約、プライバシーポリシー、お問い合わせ
[開始年]- コピーライトの年。例：2026
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「1行のシンプルなフッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - リンク：[リンク項目] - コピーライト：© [開始年] [サービス名] ## レイアウト - PC：左にロゴ、中央にリンク、右にコピーライトを横1行に並べる - コンテンツ最大幅 1200px、左右 padding 24px、上下 padding 28px - スマホ（640px未満）：中央揃えの縦並びにし、ロゴ → リンク → コピーライト の順 - スマホのリンクは折り返してよい（横スクロールにしない） ## デザイン - 背景 #F7F9FC、上端に 1px solid #E2E8F0 - ロゴ：16px、font-weight 700、色 #1B2A44 - リンク：14px、色 #47566E、項目間の間隔 24px。hover で下線と色 #1463F0 - コピーライト：13px、色 #5F6D84 - リンクのタップ領域は上下に余白を足して高さ 44px 以上にする ## ページ下部に固定する - コンテンツが少ないページでもフッターが画面の下端に来るよう、body を縦方向の flex にして main を伸ばす方法も合わせて示す ## アクセシビリティ - footer 要素を使用し、リンクは nav 要素（aria-label="フッターメニュー"）の中の ul / li で実装 - 外部サイトへのリンクには、新しいタブで開くことが分かる表示または説明を付ける - focus-visible のスタイルを用意する - 文字と背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - コピーライトの年を自動で現在の年にしたい場合の書き方をコメントで補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。