お客様の声・実績コード生成用
横に流れるロゴの帯
導入企業のロゴが、1列でゆっくり流れる。
用途・説明
導入企業のロゴを横1列に並べ、ゆっくり流し続ける帯を作成します。場所を取らずに多くのロゴを見せられるため、ファーストビューのすぐ下に置くのに向いています。動きを好まない人には、静止した一覧を表示します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- 例：導入企業
[ロゴのリスト]- 会社名とロゴ画像のパスを8〜10社
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横に流れるロゴの帯」を実装してください。 ## 表示内容 - ラベル：[ラベル] - ロゴ： [ロゴのリスト] ## レイアウト - 画面の幅いっぱいの帯。上下に 1px solid #E2E8F0 の線、上下padding 24px - ラベルは帯の上に中央揃え - ロゴは横1列、間隔 56px。左右の端は背景色へ向かって薄くなるようにマスクをかける ## デザイン - ラベル：13px、font-weight 700、letter-spacing 0.1em、色 #5F6D84 - ロゴ：高さ 32px、幅は自動。グレースケール・不透明度 60% - hover したロゴは元の色に戻し、下に #1463F0 の細い線（2px）を出す ## 動作 - CSS アニメーションだけで実装する。リストを2回くり返して並べ、切れ目なくループさせる - 1周 30秒。帯に hover またはフォーカスしているあいだは停止する ## アクセシビリティ - 複製したリストには aria-hidden="true" を付ける - 各画像の alt に会社名を入れる - prefers-reduced-motion のときは流さず、折り返して全部を表示する ## 注意点 - ロゴの縦横比を変えない - ロゴの掲載には各社の許可が必要であることを、コメントで明記する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。