フッターコード生成用
左ロゴ・右リンクの2段フッター
上段にロゴとリンク、下段にコピーライト。小規模サイトの基本形。
用途・説明
上段の左にロゴ、右に横並びのリンクを置き、下段にコピーライトとSNSを置く、2段のフッターを作成します。ページ数が5〜8ほどの小規模なサイトにちょうどよい情報量です。個人事業主、小さなお店、単一サービスのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 例：サービス、料金、事例、会社情報、お問い合わせ
[SNS]- 例：Instagram、X
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「左ロゴ・右リンクの2段フッター」を実装してください。 ## 表示内容 - 上段：左にロゴ（テキスト「[サービス名]」で代用）、右にリンク：[リンク項目] - 下段：左にコピーライト、右にSNSのアイコン：[SNS] ## レイアウト - 上段と下段のあいだを 1px の線で区切る - 上段：上下 padding 32px。リンクは横に並べ、項目の間隔 28px - 下段：上下 padding 20px - スマホ：ロゴを上、リンクを2列で下に。下段はコピーライトを下、SNSを上に（どちらも中央揃え） ## デザイン - 背景 #1B2A44 - ロゴ：18px、font-weight 700、色 #FFFFFF。ロゴマークは #7FA9F7 の55%の明るい色 - リンク：14px、色 rgba(255, 255, 255, 0.78)。hover で #FFFFFF - 区切りの線：1px solid rgba(255, 255, 255, 0.14) - コピーライト：12px、色 rgba(255, 255, 255, 0.6) - SNSのアイコン：20px、色 rgba(255, 255, 255, 0.78)。タップ領域は 44×44px ## アクセシビリティ - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"）のなかの ul / li - SNSのリンクには「Instagramを見る」のようなラベルを付け、アイコンは aria-hidden="true" - 暗い背景の文字は、コントラスト比 4.5:1 以上 - フォーカスリングは白で表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。