モーダル・通知・タブコード生成用
トースト通知
操作の結果を、画面の端に数秒だけ知らせる。
用途・説明
「保存しました」などの操作の結果を、画面の端に数秒だけ表示するトースト通知を作成します。成功・エラー・お知らせの3種類を用意し、複数が重なったときは縦に積みます。エラーは自動で消さない指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表示する位置]- 例：右下（スマホでは下の中央）
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「トースト通知」を実装してください。
## 表示内容
- 種類は3つ：成功（例：保存しました）、エラー（例：送信できませんでした）、お知らせ（例：新しいバージョンがあります）
- 各トースト：左に種類のアイコン、中央にメッセージ、右に閉じるボタン
- 動作を確かめるための、3種類のサンプルボタン
## レイアウト
- 表示する位置：[表示する位置]。画面の端から 24px（スマホでは 16px）
- 幅 360px（スマホでは画面の幅 − 32px）
- 複数あるときは縦に積み、間隔 8px。新しいものを画面の端に近い側に追加する
- 同時に表示するのは3つまで。それ以上は、古いものから消す
## デザイン
- トースト：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、padding 12px 16px、影 0 8px 24px rgba(27,42,68,0.12)
- メッセージ：14px、font-weight 700、line-height 1.6、色 #1B2A44
- アイコン：22px の円、なかに白い記号。成功 #1F9D6B（✓）、エラー #C9343A（！）、お知らせ #1463F0（i）
- 閉じるボタン：32×32px、アイコン 16px、色 #8A96AA
## 動作
- 関数ひとつ（例：toast("保存しました", "success")）で表示できるようにする
- 成功とお知らせは、5秒後に自動で消える。hover またはフォーカスしているあいだは、時間を止める
- エラーは自動で消さず、閉じるボタンを押すまで残す
- 表示：端から 16px スライドしながらフェードイン（0.25秒）。消えるときはフェードアウト
## アクセシビリティ
- 成功とお知らせは role="status"（aria-live="polite"）、エラーは role="alert"
- 表示のための領域は、最初からページに置いておく（あとから追加すると読み上げられないことがあるため）
- 色だけに頼らず、アイコンの形とメッセージの文で種類が分かるようにする
- 閉じるボタンに aria-label="通知を閉じる"
- 動きは prefers-reduced-motion で無効化
## 出力形式
- [使用技術]のコードを1つ出力使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。