フッターコード生成用
会社情報つきのフッター
社名・住所・電話番号を、リンクと並べてきちんと載せる。
用途・説明
会社名、所在地、電話番号、営業時間などの会社情報を、リンクのカラムと並べて載せるフッターを作成します。どのページからでも会社の連絡先が確認できるので、信頼感につながります。コーポレートサイト、BtoBのサービスサイト、士業や工務店のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[会社名]- 例：株式会社サンプル
[住所]- 郵便番号から
[電話番号・受付時間]- 例：03-0000-0000（平日 9:00〜18:00）
[リンクのカラム]- 見出しとリンクを2カラムぶん
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「会社情報つきのフッター」を実装してください。 ## 表示内容 - 左：ロゴ、会社名（[会社名]）、住所（[住所]）、電話番号と受付時間（[電話番号・受付時間]） - 右：リンクのカラム [リンクのカラム] - 最下段：コピーライト ## レイアウト - PC：左に会社情報（幅 40%）、右にリンクのカラム - 会社情報は、ロゴ → 会社名 → 住所 → 電話番号 の順に縦に並べる。住所と電話番号の行頭に小さなアイコン - スマホ：会社情報を上、リンクのカラムを下に - 上下 padding 64px ## デザイン - 背景 #1B2A44、文字 rgba(255, 255, 255, 0.78) - ロゴ：18px、font-weight 700、色 #FFFFFF - 会社名：14px、font-weight 700、色 #FFFFFF - 住所・受付時間：13px、line-height 1.8 - 電話番号：20px、font-weight 700、色 #FFFFFF、letter-spacing 0.02em - アイコン：16px、色は #7FA9F7 の55%の明るい色 - カラムの見出し：13px、font-weight 700、色 #FFFFFF - リンク：14px、行の間隔 12px。hover で #FFFFFF - 最下段：上に 1px solid rgba(255, 255, 255, 0.14)、12px、色 rgba(255, 255, 255, 0.6) ## アクセシビリティ - 会社情報は address 要素でマークアップする - 電話番号は tel: リンクにする - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"） - 暗い背景の文字は、コントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 会社の構造化データ（Organization）を JSON-LD で出力する例をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。