フッターコード生成用
SNSへの誘導を主役にしたフッター
「フォローしてね」の一言と、大きなSNSボタンを中央に。
用途・説明
SNSのフォローを促す一言と、大きめのSNSボタンを中央に置いたフッターを作成します。最新情報をSNSで発信しているお店やブランド、クリエイターのサイトで、ページを読み終えた人をSNSへつなげられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- コピーライトに表示する名前
[呼びかけ]- 例：新作やイベントの情報は、SNSでお届けしています。
[SNS]- 例：Instagram、X、YouTube、LINE
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「SNSへの誘導を主役にしたフッター」を実装してください。 ## 表示内容 - 英字のラベル「FOLLOW US」 - 呼びかけ：[呼びかけ] - SNSのボタン：[SNS]（丸いボタンの下に、サービス名を小さく表示） - 下段：リンク（利用規約、プライバシーポリシー、お問い合わせ）とコピーライト（© 年 [サービス名]） ## レイアウト - すべて中央揃え。上から ラベル → 呼びかけ → SNSのボタン → 区切り線 → リンクとコピーライト - SNSのボタンは横に並べ、間隔 20px - 上下 padding 72px（スマホ 48px） ## デザイン - 背景：#1463F0 の9%の淡い色 - ラベル：12px、font-weight 700、letter-spacing 0.28em、色 #1463F0 - 呼びかけ：18px（スマホ 16px）、font-weight 700、line-height 1.7、色 #1B2A44 - SNSのボタン：直径 48px の円、背景 #FFFFFF、枠線 1px solid #DCE4F0、アイコン 22px・色 #1B2A44 - hover：背景 #1463F0、アイコン #FFFFFF、2px 上に動く - ボタンの下のサービス名：11px、色 #5F6D84 - 下段：リンク 13px・色 #5F6D84、コピーライト 12px・色 #5F6D84 ## 表示の決まり - 各SNSのロゴには、提供元が定めるガイドライン（色、形、余白）がある。公開前に確認する旨を出力の最後に書く - アイコンは仮のSVGで置き、差し替える場所をコメントで示す ## アクセシビリティ - footer 要素を使う - SNSのリンクは新しいタブで開き、aria-label に「Instagramを新しいタブで開く」のように書く - アイコンは aria-hidden="true" - hover の動きは prefers-reduced-motion で無効化 - タップ領域は 44×44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。