フッターコード生成用
複数店舗の情報を並べたフッター
店舗ごとの住所・電話番号を、横に並べて載せる。
用途・説明
2〜4店舗の住所、電話番号、営業時間を、店舗ごとのカラムで並べるフッターを作成します。どの店舗の情報もフッターで確認できるので、店舗の一覧ページへ移動する手間がかかりません。数店舗を展開する飲食店、美容室、整体院、教室に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ブランド名]- ロゴ部分とコピーライトに表示する名前
[店舗情報]- 店舗名・住所・電話番号・営業時間を2〜4店舗ぶん
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「複数店舗の情報を並べたフッター」を実装してください。 ## 表示内容 - 上段：ロゴ（テキスト「[ブランド名]」で代用） - 中段：店舗ごとのカラム [店舗情報] （各カラム：店舗名、住所、電話番号、営業時間、「地図を見る」のリンク） - 下段：サイトのリンク（横並び）とコピーライト ## レイアウト - PC：店舗の数だけカラムを横に並べる（最大4列）。カラムのあいだは 1px の縦線 - タブレット：2列。スマホ：1列（店舗ごとに線で区切る） - 上下 padding 64px ## デザイン - 背景 #1B2A44、文字 rgba(255, 255, 255, 0.78) - ロゴ：20px、font-weight 700、色 #FFFFFF - 店舗名：15px、font-weight 700、色 #FFFFFF - 住所・営業時間：13px、line-height 1.8 - 電話番号：16px、font-weight 700、色 #FFFFFF - 「地図を見る」：13px、色は #7FA9F7 の55%の明るい色、右に矢印 - カラムのあいだの線：1px solid rgba(255, 255, 255, 0.14) - 下段：リンク 13px、コピーライト 12px（色 rgba(255, 255, 255, 0.6)） ## アクセシビリティ - 店舗名は h3、住所は address 要素 - 電話番号は tel: リンク。aria-label に店舗名を含める - 「地図を見る」は新しいタブで開き、aria-label に店舗名を含める（例：表参道店の地図を見る） - 暗い背景の文字は、コントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 店舗を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。