カードコード生成用
動画サムネイルのカード
再生ボタンと長さを重ねた、動画一覧用のカード。
用途・説明
動画のサムネイルに再生ボタンと再生時間を重ねたカードを作成します。使い方の解説動画、セミナーのアーカイブ、お客様インタビューなどの一覧に向いています。動画はクリックされるまで読み込まない作りにして、ページの表示速度を落としません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[動画情報]- タイトル・再生時間・公開日を件数分
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「動画サムネイルのカード」を実装してください。 ## 表示内容 [動画情報] （各カード：サムネイル、再生ボタン、再生時間、タイトル、公開日） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 24px - カード内：上にサムネイル、下にタイトルと公開日 ## デザイン - サムネイル：縦横比 16:9、角丸 12px、overflow: hidden - 再生ボタン：サムネイルの中央に 56px の円。背景 rgba(255, 255, 255, 0.92)、三角のアイコンは #1463F0 - 再生時間：サムネイルの右下（8px 内側）。11px・font-weight 700、文字 #FFFFFF、背景 rgba(27, 42, 68, 0.8)、角丸 4px、padding 2px 6px - タイトル：15px、font-weight 700、line-height 1.5、2行まで、サムネイルの下 12px - 公開日：12px、色 #5F6D84 - hover：サムネイルを 1.03倍に拡大し、再生ボタンの背景を #1463F0・アイコンを #FFFFFF に ## 動作 - 最初はサムネイル画像だけを表示し、クリックされたら動画のプレーヤー（iframe など）に差し替える - サムネイルには loading="lazy" を付ける ## アクセシビリティ - 再生ボタンは button 要素にし、aria-label を「〇〇を再生（3分24秒）」のようにタイトルと長さを含める - 再生時間は「3:24」の表示とは別に、読み上げ用の文言を用意する - hover の拡大は prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。