モーダル・通知・タブコード生成用
下から出てくるボトムシート
スマホで、画面の下から選択肢がせり上がる。
用途・説明
スマホの画面の下から、選択肢のシートがせり上がるボトムシートを作成します。親指が届きやすい位置に操作が集まるため、共有や並び替え、メニューなど、いくつかの選択肢から1つを選ぶ場面に向いています。下にスワイプして閉じられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：共有する
[選択肢のリスト]- アイコンと文言を3〜5個
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「下から出てくるボトムシート」を実装してください。 ## 表示内容 - つまみ（シートの上の短い横線） - 見出し：[見出し] - 選択肢： [選択肢のリスト] - 最後に「キャンセル」 ## レイアウト - スマホ：画面の下に貼りつき、幅は画面いっぱい。高さは内容に合わせる（最大で画面の80%） - PC（768px以上）：ボトムシートではなく、押したボタンのそばに出るメニューとして表示する - 下の余白に、端末の下端の余白（safe-area-inset-bottom）を加える ## デザイン - 背景の幕：rgba(27,42,68,0.45) - シート：背景 #FFFFFF、上の角だけ角丸 20px、padding 8px 16px 16px - つまみ：幅 40px、高さ 4px、角丸 999px、色 #CBD5E1、中央に配置 - 見出し：15px、font-weight 700、色 #1B2A44、上下padding 12px - 選択肢：高さ 52px、文字 16px・色 #1B2A44、上に 1px solid #E2E8F0。左にアイコン（22px、色 #1463F0） - 押しているあいだ、行の背景を #F7F9FC にする - 「キャンセル」：中央揃え、色 #5F6D84 ## 動作 - 下から上へスライドして開く（0.3秒） - シートを下に 80px 以上ドラッグして離すと閉じる。それより少ないと、元の位置に戻る - 幕のタップ、キャンセル、Esc キーでも閉じる - 選択肢を押したら、コールバックを呼んで閉じる ## アクセシビリティ - dialog 要素で実装し、aria-labelledby で見出しと結びつける - 選択肢は button 要素。アイコンは aria-hidden="true" - ドラッグの操作ができなくても、キャンセルのボタンで必ず閉じられるようにする - 開いたら最初の選択肢にフォーカスを移し、閉じたら元のボタンに戻す - スライドの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。