お客様の声・実績コード生成用
導入企業のロゴ一覧
取引先や導入企業のロゴを、整えて並べる。
用途・説明
導入企業や取引先のロゴを、グリッドで整然と並べるセクションを作成します。形も大きさもばらばらなロゴを、同じ枠のなかで見た目の重さがそろうように配置する指定にしています。BtoBサービスの信頼づくりの定番です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：3,000社以上に選ばれています
[ロゴのリスト]- 会社名とロゴ画像のパスを8〜12社
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「導入企業のロゴ一覧」を実装してください。 ## 表示内容 - 見出し：[見出し] - ロゴ： [ロゴのリスト] - 補足：「※一部のお客様を掲載しています」 ## レイアウト - PC：4列、タブレット：3列、スマホ：2列。間隔 12px - 見出しは中央揃え、ロゴの上 32px ## デザイン - 見出し：18px、font-weight 700、色 #1B2A44。数字の部分だけ #1463F0 - ロゴの枠：高さ 80px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 8px、padding 16px 24px - ロゴ画像：枠の中央に置き、max-width 100%、max-height 100%、object-fit: contain - ロゴは初期状態でグレースケール・不透明度 70% にし、hover で元の色に戻す - 補足：12px、色 #5F6D84、右揃え ## 注意点 - ロゴの縦横比を変えない。色を勝手に変えない（グレースケール表示は CSS の filter で行い、画像そのものは加工しない） - ロゴの掲載には各社の許可が必要であることを、コードの冒頭にコメントで明記する ## アクセシビリティ - ul / li でマークアップし、各画像の alt に会社名を入れる - 色の変化は prefers-reduced-motion のとき、切り替えの時間を0にする ## 出力形式 - [使用技術]のコードを1つ出力 - ロゴを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。