ボタンコード生成用
ページの上へ戻るボタン
スクロールすると右下に現れ、押すといちばん上へ。
用途・説明
長いページを下まで読んだ人が、ひと押しでいちばん上へ戻れるボタンを作ります。少しスクロールしてから右下にふわっと現れ、ページの最上部では隠れます。記事ページ、商品の一覧、FAQなど縦に長いページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表示を始める位置]- 例：400pxスクロールしたら
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「ページの上へ戻るボタン」を実装してください。 ## 仕様 - 画面の右下に固定表示する丸いボタン。上向きの矢印アイコンを中央に置く - [表示を始める位置]、ボタンを表示する。それより上では非表示 ## デザイン - 直径 48px、背景 #FFFFFF、枠線 1px solid #DCE4F0、矢印の色 #1463F0 - 影：0 4px 12px rgba(27, 42, 68, 0.12) - 位置：右 20px、下 20px（iPhoneのホームバーを避けるため env(safe-area-inset-bottom) を足す） - hover：背景 #1463F0、矢印 #FFFFFF - 現れるとき・消えるときは、不透明度と 8px の上下移動を 0.2秒で ## 動作 - 押すと、ページのいちばん上へなめらかにスクロールする - スクロールの監視は IntersectionObserver（ページ上部に置いた目印の要素）で行い、scroll イベントを連続で処理しない - 非表示のあいだは、タブキーでフォーカスが当たらないようにする ## アクセシビリティ - button 要素に aria-label="ページの先頭へ戻る" を付ける - 戻ったあと、フォーカスをページ先頭（スキップリンクや h1）へ移す - prefers-reduced-motion のときは、なめらかなスクロールをやめて一瞬で移動する - 固定表示のほかのボタン（チャットなど）と重ならないよう、位置をCSS変数で調整できるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。