フッターコード生成用
中央揃えのフッター
ロゴ・リンク・SNSを中央に重ねた、すっきりした締めくくり。
用途・説明
ロゴ、リンク、SNSのアイコン、コピーライトを中央揃えで縦に重ねたフッターを作成します。ポートフォリオ、個人のブログ、ブランドサイト、店舗サイトなど、ページ数が少なく落ち着いた印象にしたいサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 例：コンセプト、メニュー、アクセス、お問い合わせ
[SNS]- 例：Instagram、X、YouTube
[開始年]- コピーライトの年。例：2026
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「中央揃えのフッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - リンク：[リンク項目] - SNSのアイコン：[SNS] - コピーライト：© [開始年] [サービス名] ## レイアウト - すべて中央揃え。上から ロゴ → リンク → SNS → コピーライト - 各段の間隔 24px、上下 padding 56px - スマホでリンクが入りきらない場合は折り返す（横スクロールにしない） ## デザイン - 背景 #F7F9FC、上端に 1px solid #E2E8F0 - ロゴ：18px、font-weight 700、色 #1B2A44。ロゴマークは #1463F0 - リンク：14px、色 #5F6D84、項目間の間隔 28px。hover で色 #1463F0 - SNSのアイコン：40px の丸い枠（1px solid #DCE4F0、背景 #FFFFFF）の中に 18px のアイコン。間隔 12px - コピーライト：12px、色 #5F6D84 ## アクセシビリティ - footer 要素を使用し、リンクは nav 要素（aria-label="フッターメニュー"）の中の ul / li - SNSのリンクには「Instagramを見る」のようなラベルを付け、アイコンは aria-hidden="true" - 外部サイトへのリンクは、新しいタブで開くことが分かるようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - コピーライトの年を自動で現在の年にする書き方をコメントで補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。