お客様の声・実績コード生成用
横に流れるレビューの帯
短い声が、ゆっくり流れ続ける2段の帯。
用途・説明
短いレビューのカードが、横にゆっくり流れ続ける帯を作成します。2段を逆方向に流すことで、にぎわいのある印象になります。ファーストビューのすぐ下や、CTAの手前に置くのに向いています。止める手段も用意しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[短いレビューのリスト]- 全角20文字以内のコメントを10件程度
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横に流れるレビューの帯」を実装してください。 ## 表示内容 [短いレビューのリスト] （各カード：星の評価、短いコメント） ## レイアウト - 画面の幅いっぱいに、カードを横1列に並べた帯を2段。段の間隔 16px - 上の段は右から左へ、下の段は左から右へ流す - 帯の左右の端は、背景色へ向かって薄くなるようにマスクをかける ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 14px 20px、カードの間隔 16px - 星：12px、色 #F5B63F - コメント：14px、font-weight 700、色 #1B2A44、1行で表示 - hover したカードの枠線を #1463F0 にする ## 動作 - CSS アニメーション（transform: translateX）だけで実装する。リストを2回くり返して並べ、切れ目なくループさせる - 1周 40秒。帯に hover またはフォーカスしているあいだは停止する - 「動きを止める」ボタンを帯の下に置く ## アクセシビリティ - くり返しのために複製したリストには aria-hidden="true" を付け、読み上げが重複しないようにする - prefers-reduced-motion のときは流さず、横スクロールできる静止した一覧にする - 「動きを止める」は button 要素で、aria-pressed を切り替える ## 出力形式 - [使用技術]のコードを1つ出力 - 流れる速さを変える箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。