モーダル・通知・タブコード生成用
「元に戻す」つきのトースト
削除や移動のあと、数秒だけ取り消せる。
用途・説明
削除やアーカイブなどの操作のあとに、「元に戻す」のボタンがついたトーストを表示するパーツを作成します。確認のダイアログを出さずに操作でき、間違えたときだけ取り消せます。残り時間を、下の細いバーで示します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メッセージ]- 例：1件をアーカイブしました
[取り消せる時間]- 例：6秒
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「『元に戻す』つきのトースト」を実装してください。 ## 表示内容 - メッセージ：[メッセージ] - ボタン：元に戻す - 下端に、残り時間を示す細いバー - 動作を確かめるための、サンプルのリスト（項目を削除できるもの） ## レイアウト - 画面の下の中央に表示。下から 24px - 幅は内容に合わせる（最小 280px、最大 480px）。メッセージとボタンを横に並べる ## デザイン - トースト：背景 #1B2A44、角丸 10px、padding 12px 20px、影 0 8px 24px rgba(27,42,68,0.25)、overflow: hidden - メッセージ：14px、色 #FFFFFF - 「元に戻す」：14px、font-weight 700、色 #7FA9F7。メッセージの右に 24px の間隔 - 残り時間のバー：高さ 3px、背景 rgba(255,255,255,0.15)。塗りは #7FA9F7 で、右から左へ縮む ## 動作 - 操作をしたら、画面上ではすぐに反映する（リストから消す）。実際の処理は、[取り消せる時間]が過ぎてから実行する - 「元に戻す」を押したら、処理を取りやめ、リストを元に戻す。トーストは「元に戻しました」に変えて2秒で消す - hover またはフォーカスしているあいだは、残り時間を止める - 続けて別の操作をしたら、前の操作はその時点で確定させ、新しいトーストに置き換える - ページを離れるときは、待っている処理をすぐに実行する ## アクセシビリティ - role="status" で、メッセージを読み上げる - 「元に戻す」は button 要素。キーボードのショートカット（⌘Z / Ctrl+Z）でも取り消せるようにする - 時間内に操作するのが難しい人のために、ゴミ箱や履歴など、あとから戻せる別の方法があることが望ましいとコメントで補足する - バーの動きは prefers-reduced-motion のとき、動かさずに残り秒数の文字で示す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。