モーダル・通知・タブコード生成用
画像を拡大して見るライトボックス
サムネイルを押すと、大きな画像を順に見られる。
用途・説明
サムネイルを押すと、暗い背景の上に画像を大きく表示するライトボックスを作成します。左右の矢印やスワイプで前後の画像に移動でき、何枚目かも表示します。商品写真、施工事例、ギャラリーなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[画像のリスト]- 画像のパス・説明（alt）・キャプションを4〜8枚
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「画像を拡大して見るライトボックス」を実装してください。 ## 表示内容 [画像のリスト] - サムネイルの一覧（PC：4列、スマホ：2列、間隔 8px、縦横比 1:1） - 拡大表示：画像、キャプション、「2 / 8」のような枚数、左右の矢印、閉じるボタン ## レイアウト - 拡大表示は画面全体を覆う。画像は中央に置き、画面の幅90%・高さ80%に収める（縦横比は保つ） - 左右の矢印は画面の左右の端、上下中央。閉じるボタンは右上 - キャプションと枚数は、画像の下に中央揃え ## デザイン - 背景：#111C30（不透明度 92%） - 矢印・閉じるボタン：48px の円、背景 rgba(255,255,255,0.16)、アイコン #FFFFFF。hover で背景を rgba(255,255,255,0.28) に - キャプション：14px、色 #FFFFFF。枚数：13px、色 rgba(255,255,255,0.8) - サムネイル：角丸 8px。hover・フォーカス時に #1463F0 の枠（3px） ## 動作 - サムネイルを押すと、その画像から拡大表示を始める - 左右の矢印キー・画面上の矢印・スワイプで前後に移動。最後の次は最初に戻る - Esc キー、閉じるボタン、背景のクリックで閉じる - 拡大用の大きな画像は、開いたときにはじめて読み込む。前後の1枚も先に読み込んでおく - 開いているあいだ、後ろのページはスクロールさせない ## アクセシビリティ - dialog 要素で実装し、aria-label="画像の拡大表示" を付ける - サムネイルは button 要素。alt に画像の説明を入れる - 矢印に aria-label="前の画像" / "次の画像" - 画像が変わったら、枚数とキャプションを aria-live="polite" で伝える - 閉じたら、押したサムネイルにフォーカスを戻す - 切り替えの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。