フッターコード生成用
バナーリンクを並べたフッター
採用や関連サイトへのバナーを、フッターの上段に並べる。
用途・説明
フッターの上段に、採用情報・オンラインショップ・関連サイトなどへのバナーを横に並べるフッターを作成します。メインのメニューには入れないけれど、見つけてほしいページへの入口を用意できます。コーポレートサイト、学校、自治体、団体のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[バナー]- タイトルと補足を2〜4個。例：採用情報／一緒に働く仲間を募集中
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- フッター本体のリンク
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「バナーリンクを並べたフッター」を実装してください。 ## 表示内容 - 上段：バナー [バナー] （各バナー：英字の小さなラベル、タイトル、補足、右端に矢印） - 下段：ロゴ（[サービス名]）、リンク（[リンク項目]）、コピーライト ## レイアウト - 上段：バナーを横に並べる（PCは最大4列、スマホは1列）。間隔 16px - 上段と下段のあいだは 40px - 下段：左にロゴ、右にリンク、その下にコピーライト ## デザイン - フッターの背景 #1B2A44 - バナー：高さ 96px、padding 20px 24px、角丸 12px、背景 rgba(255, 255, 255, 0.06)、枠線 1px solid rgba(255, 255, 255, 0.14) - 英字のラベル：11px、font-weight 700、letter-spacing 0.15em、色は #7FA9F7 の55%の明るい色 - タイトル：15px、font-weight 700、色 #FFFFFF - 補足：12px、色 rgba(255, 255, 255, 0.72) - 矢印：右端の上下中央、20px、色 #FFFFFF - hover：背景 #7FA9F7、枠線 #7FA9F7、矢印が 4px 右へ - 下段のリンク：14px、色 rgba(255, 255, 255, 0.78) - コピーライト：12px、色 rgba(255, 255, 255, 0.6) ## 動作 - 外部のサイトへ移動するバナーは、新しいタブで開き、矢印を「外部リンク」のアイコンに変える ## アクセシビリティ - バナーは ul / li のなかの a 要素。バナー全体をクリックできるようにする - 外部サイトのバナーには、読み上げ用に「（外部サイト）」を付ける - 矢印は aria-hidden="true" - hover の動きは prefers-reduced-motion で無効化 - フォーカスリングは白で表示する ## 出力形式 - [使用技術]のコードを1つ出力 - バナーを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。