フッターコード生成用
最新のお知らせを載せたフッター
フッターの一角に、新しいお知らせを3件並べる。
用途・説明
フッターのカラムのひとつに、最新のお知らせを3件表示するフッターを作成します。どのページを見ていても、新しい情報があることに気づいてもらえます。更新の多いお店、学校、団体、メディアのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンクのカラム]- 見出しとリンクを2カラムぶん
[お知らせ]- 日付とタイトルを3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「最新のお知らせを載せたフッター」を実装してください。 ## 表示内容 - 左：ロゴ（テキスト「[サービス名]」で代用） - 中央：リンクのカラム [リンクのカラム] - 右：「最新のお知らせ」の見出しと、お知らせ3件 [お知らせ] - お知らせの下に「お知らせ一覧」のリンク - 最下段：コピーライト ## レイアウト - PC：ロゴ（幅 20%）、リンクのカラム（幅 35%）、お知らせ（幅 45%） - お知らせの各行：上に日付、下にタイトル。行の間は 1px の線 - スマホ：お知らせを最初に表示し、その下にリンクのカラム ## デザイン - 背景 #1B2A44、文字 rgba(255, 255, 255, 0.78) - カラムの見出し：13px、font-weight 700、色 #FFFFFF - リンク：14px、行の間隔 12px。hover で #FFFFFF - お知らせの日付：11px、色は #7FA9F7 の55%の明るい色 - お知らせのタイトル：13px、line-height 1.6、色 rgba(255, 255, 255, 0.85)、1行で省略。hover で #FFFFFF と下線 - 行の線：1px solid rgba(255, 255, 255, 0.14)、上下 padding 10px - 「お知らせ一覧」：13px、色は #7FA9F7 の55%の明るい色、右に矢印 - 最下段：上に 1px solid rgba(255, 255, 255, 0.14)、12px、色 rgba(255, 255, 255, 0.6) ## 動作 - お知らせは、新しい順に3件を表示する（データは配列で渡す） - 7日以内のお知らせには「NEW」の小さなラベルを付ける ## アクセシビリティ - お知らせは ul / li。日付は time 要素（datetime 属性付き） - 「最新のお知らせ」の見出しは h2 または h3 - 「NEW」は色だけでなく文字で示す - footer 要素を使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。