フッターコード生成用
大きなロゴ文字で締めるフッター
ページの最後に、ブランド名を画面いっぱいに置く。
用途・説明
リンクやコピーライトの下に、ブランド名を画面の幅いっぱいの大きな文字で置くフッターを作成します。ページの最後にもう一度名前を印象づけられます。デザイン事務所、ブランドサイト、ポートフォリオなど、世界観を大切にしたいサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ブランド名]- 英字がおすすめ。例：Toolly
[リンク項目]- 例：About、Works、News、Contact
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはタイポグラフィに強いWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「大きなロゴ文字で締めるフッター」を実装してください。 ## 表示内容 - 上段：左にリンク（[リンク項目]）、右にコピーライト - 下段：大きなブランド名（[ブランド名]） ## レイアウト - 上段：左右に振り分ける。上 padding 56px、下 padding 40px - 下段：ブランド名を、フッターの左右いっぱいに広げる。下端は、文字の下が少し切れるくらいの位置にそろえる（overflow: hidden） - スマホ：上段は縦に並べる。ブランド名は幅いっぱいのまま ## デザイン - 背景 #1463F0、文字 #FFFFFF - リンク：14px、letter-spacing 0.05em、項目の間隔 28px。hover で下線 - コピーライト：12px、不透明度 0.8 - ブランド名：font-size は clamp(64px, 22vw, 320px)、font-weight 800、line-height 0.8、letter-spacing -0.04em - ブランド名の色：白の不透明度 0.16（背景になじませる） ## 文字を幅に合わせる方法 - ブランド名の文字数によって幅が変わるため、vw 単位の font-size を文字数に合わせて調整する - 調整する値をCSS変数（--logo-size）にまとめ、文字数ごとの目安をコメントに書く - container query units（cqw）を使って、フッターの幅に合わせる方法も併記する ## アクセシビリティ - 大きなブランド名は装飾として扱い、aria-hidden="true" にする（読み上げでは、上段のコピーライトで名前が伝わる） - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"） - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - フォーカスリングは白で表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。