お客様の声・実績コード生成用
動画インタビューの一覧
サムネイルを押すと、その場で動画が再生される。
用途・説明
お客様インタビューの動画を、サムネイルのカードで並べるセクションを作成します。再生ボタンを押すまで動画を読み込まないため、ページが重くなりません。動画の長さと業種を添えて、見るかどうかを判断しやすくしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[動画のリスト]- 見出し・業種・長さ・動画のURLを3件
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「動画インタビューの一覧」を実装してください。 ## 表示内容 [動画のリスト] （各カード：サムネイル、再生ボタン、見出し（お客様のひとこと）、業種、動画の長さ） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 24px - サムネイルは縦横比 16:9。その下に見出しと補足 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - 再生ボタン：サムネイルの中央に 56px の白い円、なかに #1463F0 の三角形。影 0 4px 12px rgba(27,42,68,0.15) - 見出し：16px、font-weight 700、line-height 1.5、色 #1B2A44 - 補足（業種・長さ）：13px、色 #5F6D84 - hover：サムネイルを少し暗くし、再生ボタンを 1.08倍に ## 動作 - 再生ボタンを押すまで、動画のプレーヤー（iframe）は読み込まない。押したら、サムネイルをプレーヤーに置き換えて再生する - 同時に再生できる動画は1つだけにする ## アクセシビリティ - 再生ボタンは button 要素で、aria-label="（見出し）の動画を再生" - サムネイルの alt は空にする（見出しがすぐ下にあるため） - 動画には字幕を付ける前提であることを、コメントで補足する - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。