フッターコード生成用
サイトマップ型の大きなフッター
ページ数の多いサイト向けに、リンクを分類して一覧する。
用途・説明
ページ数の多いサイトで、すべての主要ページへのリンクを分類して並べる大きなフッターを作成します。淡い背景に4〜5列でリンクを並べ、サイトマップの役割を持たせます。コーポレートサイトやECサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンクの分類]- 分類名と、それぞれのリンクを4〜6件ずつ
[開始年]- コピーライトの年。例：2026
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「サイトマップ型の大きなフッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用）と、説明1文 - リンク：[リンクの分類] - 下段：コピーライト（© [開始年] [サービス名]）と、規約類のリンク ## レイアウト - PC：左にロゴと説明（幅 1.4）、右にリンクの列を4列 - タブレット：リンクを2列。スマホ：ロゴの下に、リンクを2列 - コンテンツ最大幅 1200px、上下 padding 64px、下段との間に 1px の区切り線 ## デザイン - 背景 #F7F9FC、上端に 1px solid #E2E8F0 - ロゴ：18px、font-weight 700、色 #1B2A44。ロゴマークは #1463F0 - 分類名：13px、font-weight 700、色 #1B2A44 - リンク：14px、色 #5F6D84、行間 2.1。hover で色 #1463F0 と下線 - コピーライト：13px、色 #5F6D84 ## アクセシビリティ - footer 要素を使用。リンクの列はそれぞれ nav 要素にし、aria-label に分類名を入れる - 分類名は h2 または h3 でマークアップする - リンクのタップ領域は高さ 44px 以上（スマホ） - 文字と背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - リンクの分類を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。