ボタンコード生成用
スマホ用の追従CTAバー
画面下に固定して、いつでも押せる申し込みボタン。
用途・説明
スマホで画面の下端に固定表示されるCTAバーを作成します。縦に長いLPでも、ユーザーが申し込みたいと思った瞬間にボタンへ届きます。ファーストビューのボタンが見えている間は隠す、フッターに重ならない、といった邪魔にならないための挙動も指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：申し込む
[補足テキスト]- ボタンの左に置く短い情報。例：月額 ¥980・初月無料
[リンク先]- 例：#apply、/signup
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはスマホ向けUIに詳しいフロントエンドエンジニアです。 以下の条件で「スマホ用の追従CTAバー」を実装してください。 ## 表示内容 - 左：補足テキスト「[補足テキスト]」 - 右：CTAボタン「[ボタン文言]」（リンク先：[リンク先]） ## 表示条件 - 画面幅 768px 未満のときだけ表示する - ページ上部にある元のCTAボタンが画面内に見えている間は非表示にする（IntersectionObserver を使用） - ページ最下部のフッターが見えたら非表示にし、フッターのリンクを隠さない - 表示・非表示は下からのスライドと透明度の変化で切り替える（0.2秒） ## レイアウト・デザイン - position: fixed で画面下端に固定、幅100% - 背景 #FFFFFF、上端に 1px solid #E2E8F0 と上向きの薄い影 - 内側の余白：上 10px、左右 16px、下は 10px + env(safe-area-inset-bottom) - 補足テキスト：13px、2行まで。ボタン：高さ 48px、角丸 9999px、背景 #1463F0、文字 #FFFFFF、font-weight 700 - 補足テキストが長いときはボタンを優先し、テキスト側を省略する ## 注意点 - バーの高さぶん、ページ本体の下に余白を足して、最後のコンテンツが隠れないようにする - 入力フォームにフォーカスが当たっている間はバーを隠す（キーボードと重なるため） - 他の固定要素（チャットボタンなど）と重ならないよう z-index を整理する ## アクセシビリティ - 非表示のときは visibility: hidden にして、キーボード操作やスクリーンリーダーの対象から外す - タブ移動の順序がページ本文の後になるよう、HTMLはbodyの末尾に置く - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - JavaScriptは表示切り替えに必要な最小限にし、処理の意図をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。