フッターコード生成用
ご利用ガイドつきのECフッター
送料・支払い・返品の要点を、フッターでいつでも確認できる。
用途・説明
ネットショップのフッターに、送料、お支払い方法、お届け、返品・交換の要点をまとめた「ご利用ガイド」を載せます。どの商品ページからでも条件を確認できるので、購入前の不安が減り、問い合わせも少なくなります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ショップ名]- ロゴ部分とコピーライトに表示する名前
[送料]- 例：全国一律 660円、5,500円以上で無料
[お支払い方法]- 例：クレジットカード、コンビニ払い、銀行振込
[お届け]- 例：ご注文から3営業日以内に発送
[返品・交換]- 例：商品到着後7日以内、未使用に限る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ご利用ガイドつきのECフッター」を実装してください。 ## 表示内容 - 上段：ご利用ガイド（4つのカラム） - 送料：[送料] - お支払い方法：[お支払い方法] - お届け：[お届け] - 返品・交換：[返品・交換] - 各カラムの最後に「くわしく見る」のリンク - 下段：ロゴ（[ショップ名]）、リンク（特定商取引法に基づく表記、プライバシーポリシー、お問い合わせ）、コピーライト ## レイアウト - 上段：PCは4列、タブレットは2列、スマホは1列（アコーディオンにして、見出しを押すと開く） - 上段と下段のあいだは 1px の線で区切る - 上下 padding 56px ## デザイン - 背景 #F7F9FC、上端に 1px solid #E2E8F0 - カラムの見出し：左に線のアイコン（20px、色 #1463F0）、右に見出し（15px、font-weight 700、色 #1B2A44） - 内容：13px、line-height 1.8、色 #5F6D84。金額や日数などの大事な部分は font-weight 700・色 #1B2A44 - 「くわしく見る」：13px、色 #1463F0、右に矢印 - 下段：リンク 13px・色 #5F6D84、コピーライト 12px ## 表示の決まり - 送料や返品の条件は、詳細ページの内容と食い違わないようにする（1か所の設定から両方に表示する方法をコメントで説明する） - 「特定商取引法に基づく表記」へのリンクは必ず入れる ## アクセシビリティ - カラムの見出しは h3 - スマホのアコーディオンは、見出しを button 要素にして aria-expanded を付ける - アイコンは aria-hidden="true" - footer 要素を使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。