フッターコード生成用
明るい背景のカラム型フッター
白い背景に細い線で区切った、軽やかなカラム型。
用途・説明
白い背景のうえに、ロゴとリンクのカラムを並べるフッターを作成します。暗い色のフッターよりも軽く、ページ全体が明るい印象のまま終わります。クリニック、教室、暮らしまわりのサービスなど、やさしい雰囲気のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[紹介文]- ロゴの下に添える1文
[リンクのカラム]- 見出しとリンクを3カラムぶん
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「明るい背景のカラム型フッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用）と紹介文：[紹介文] - リンクのカラム： [リンクのカラム] - 最下段：コピーライト（© 年 [サービス名]）と、利用規約・プライバシーポリシーのリンク ## レイアウト - PC：左にロゴと紹介文（幅 30%）、右にリンクのカラムを3つ並べる - 最下段は、上の段と 1px solid #E2E8F0 で区切り、左にコピーライト、右にリンク - スマホ：ロゴと紹介文を上、リンクのカラムを2列で下に並べる - 上下 padding 64px、コンテンツの最大幅 1120px ## デザイン - 背景 #FFFFFF、上端に 1px solid #E2E8F0 - ロゴ：18px、font-weight 700、色 #1B2A44。ロゴマークは #1463F0 - 紹介文：13px、line-height 1.8、色 #5F6D84 - カラムの見出し：13px、font-weight 700、色 #1B2A44 - リンク：14px、色 #5F6D84、行の間隔 12px。hover で色 #1463F0 - 最下段：12px、色 #5F6D84 ## アクセシビリティ - footer 要素を使う。リンクのカラムは nav 要素（aria-label="フッターメニュー"）にまとめ、各カラムの見出しは h2 または h3 にする - リンクは ul / li - 小さな文字でも、背景とのコントラスト比 4.5:1 以上 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - コピーライトの年を自動で現在の年にする書き方をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。