フッターコード生成用
スマホで押しやすい縦積みフッター
リンクを1行ずつの大きな行にして、指で押しやすく。
用途・説明
スマホでの押しやすさを優先して、リンクを1行に1つずつ縦に並べたフッターを作成します。各行に十分な高さをとり、右端に矢印を付けます。小さなリンクが密集したフッターよりも、押し間違いが起きにくくなります。スマホからの利用が中心のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 5〜7個
[SNS]- 例：Instagram、X
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スマホで押しやすい縦積みフッター」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - リンク：[リンク項目]（1行に1つ） - SNSのアイコン：[SNS] - コピーライト ## レイアウト（スマホ） - 上から ロゴ → リンクの一覧 → SNS → コピーライト - リンクの各行：高さ 52px、左にリンク名、右端に右向きの山形。行の間は 1px の線 - SNSとコピーライトは中央揃え - 左右 padding 20px ## レイアウト（768px 以上） - リンクを横に並べる通常の形に切り替える（矢印と行の線は消す） - ロゴを左、リンクを右に置く ## デザイン - 背景 #1B2A44、文字 rgba(255, 255, 255, 0.85) - ロゴ：18px、font-weight 700、色 #FFFFFF、下に 20px の余白。ロゴマークは #7FA9F7 の55%の明るい色 - リンク：15px。行の線は 1px solid rgba(255, 255, 255, 0.14) - 山形：16px、色 rgba(255, 255, 255, 0.5) - 押している間（active）：行の背景 rgba(255, 255, 255, 0.06) - SNSのアイコン：44×44px の丸（枠線 1px solid rgba(255, 255, 255, 0.24)）、アイコン 20px。間隔 12px - コピーライト：12px、色 rgba(255, 255, 255, 0.6) ## アクセシビリティ - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"）のなかの ul / li - a 要素を行いっぱいに広げ、行のどこを押しても移動できるようにする - 山形は aria-hidden="true" - SNSのリンクには「Instagramを見る」のようなラベルを付ける - フォーカスリングは白で表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。