お客様の声・実績コード生成用
お客様の声カルーセル
1件ずつ大きく見せて、左右に切り替える。
用途・説明
お客様の声を1件ずつ中央に大きく表示し、矢印やドットで切り替えるカルーセルを作成します。声の数が多く、すべてを並べると長くなるページに向いています。自動で流さず、読む人のペースで切り替えられる指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お客様の声リスト]- コメント・名前・肩書き・星の数を4〜6件
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お客様の声カルーセル」を実装してください。 ## 表示内容 [お客様の声リスト] （各スライド：星の評価、コメント、顔写真またはイニシャル、名前、肩書き） ## レイアウト - 中央のスライドを大きく表示し、左右に前後のスライドを少しだけ見せる（幅の約10%ずつ） - スライドの最大幅 640px。スマホでは左右の見切れをなくし、1件だけ表示 - 下にドット、左右に前後の矢印ボタン ## デザイン - スライド：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px - 星：16px、色 #F5B63F - コメント：18px、font-weight 700、line-height 1.7、色 #1B2A44 - 名前：14px、font-weight 700。肩書き：12px、色 #5F6D84 - ドット：8px の丸、色 #C5D8FA。現在のスライドは横長（24px）にして #1463F0 - 左右のスライドは不透明度 60% ## 動作 - CSS の scroll-snap を使い、スワイプ・矢印ボタン・ドットのどれでも切り替えられる - 自動再生はしない - 最初と最後のスライドでは、進めない方向の矢印を無効にする ## アクセシビリティ - 全体を section 要素にし、aria-roledescription="カルーセル" と aria-label を付ける - 矢印ボタンは button 要素で、aria-label="前の声" / "次の声" - 各スライドは figure、コメントは blockquote、人物情報は figcaption - 切り替えの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 声を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。