モーダル・通知・タブコード生成用
動画を再生するモーダル
ボタンを押すと、暗い背景の上で動画が始まる。
用途・説明
「動画を見る」のボタンを押すと、暗い背景の上に動画プレーヤーを開くモーダルを作成します。ページを離れずに、サービス紹介やデモの動画を見てもらえます。閉じたら再生を止め、開くまで動画を読み込まない指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[動画のURL]- 動画ファイル、または動画サービスの埋め込みURL
[動画のタイトル]- 例：2分でわかるサービス紹介
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「動画を再生するモーダル」を実装してください。 ## 表示内容 - モーダルを開くボタン：サムネイルの上に再生ボタンを重ねたもの。下に「[動画のタイトル]」 - モーダル：動画プレーヤー（[動画のURL]）と、右上の閉じるボタン ## レイアウト - モーダルは画面全体を覆う。動画は中央に置き、縦横比 16:9、最大幅 960px（画面の幅の90%まで） - 画面の高さが足りないときは、高さに合わせて幅を縮める - 閉じるボタンは、動画の右上の外側 ## デザイン - 背景：#111C30（不透明度 92%） - 動画：角丸 12px、影 0 24px 64px rgba(0,0,0,0.4) - 閉じるボタン：44px の円、背景 rgba(255,255,255,0.16)、アイコン #FFFFFF - サムネイル：角丸 12px、縦横比 16:9 - 再生ボタン：64px の白い円、なかに #1463F0 の三角形。影 0 4px 16px rgba(27,42,68,0.2) - hover：再生ボタンを 1.08倍に - タイトル：14px、font-weight 700、色 #1B2A44 ## 動作 - ボタンを押すまで、動画（iframe や video）は読み込まない - 開いたら自動で再生を始める - 閉じたら、必ず再生を止める（iframe の場合は src を空にする） - Esc キー、閉じるボタン、背景のクリックで閉じる ## アクセシビリティ - dialog 要素で実装し、aria-label に動画のタイトルを入れる - 開くボタンは button 要素で、aria-label="[動画のタイトル] を再生" - 動画には字幕を用意する前提であることを、コメントで補足する - 閉じたら、開いたボタンにフォーカスを戻す - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。