モーダル・通知・タブコード生成用
ページ内のアラート（4種類）
情報・成功・注意・エラーを、色と形で伝える。
用途・説明
ページやフォームのなかに置く、アラートのボックスを4種類（情報・成功・注意・エラー）作成します。色だけでなくアイコンの形でも種類が分かるようにし、見出し・本文・ボタンを入れられる形にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メッセージの例]- 4種類それぞれの見出しと本文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ページ内のアラート」を4種類、実装してください。 ## 表示内容 [メッセージの例] - 種類：情報、成功、注意、エラー - 各アラート：左にアイコン、その右に見出しと本文。必要に応じて、ボタンと閉じるボタン ## レイアウト - 置いた場所の幅いっぱいに表示する - アイコンは見出しの1行目の高さにそろえる - 本文が長くても、アイコンの下に回り込ませない - ボタンは本文の下に左揃え ## デザイン - 共通：角丸 8px、padding 14px 16px、枠線 1px solid、アイコン 20px - 見出し：14px、font-weight 700、色 #1B2A44。本文：14px、line-height 1.7、色 #47566E - 情報：背景は #1463F0 の9%の淡い色、枠線は #1463F0 の25%の淡い色、アイコン #1463F0（丸に i） - 成功：背景 #EFFAF4、枠線 #BFE5D3、アイコン #1F9D6B（丸にチェック） - 注意：背景 #FFF8E5、枠線 #F3DFA6、アイコン #D99A06（三角に ！） - エラー：背景 #FDF2F2、枠線 #F3C6C8、アイコン #C9343A（丸に ✕） - ボタン：13px、font-weight 700、下線つき、色は各種類のアイコンと同じ ## マークアップ - 種類は data 属性またはクラスで切り替えられるようにする - 見出しを省いて、本文だけでも使えるようにする ## アクセシビリティ - エラーと注意は role="alert"、情報と成功は role="status"（ページを開いたときから表示されているものには付けない） - 種類が色だけでなく、アイコンの形と、読み上げ用の文字（例：「エラー：」）でも伝わるようにする - アイコンは aria-hidden="true" - 閉じるボタンを付ける場合は、aria-label="閉じる" ## 出力形式 - [使用技術]のコードを1つ出力 - 4種類を並べたサンプルも一緒に出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。