取引先ロゴ横並び
このパーツは、取引先や導入企業のロゴを横一列に並べる「導入企業」セクションです。Flexbox の justify-content:space-around でロゴ間を均等に空け、 flex-wrap:wrap で画面幅に応じて自動的に折り返します。
このパーツの使いどころと実装ポイント
このパーツは、取引先や導入企業のロゴを横一列に並べる「導入企業」セクションです。Flexbox の justify-content:space-around でロゴ間を均等に空け、flex-wrap:wrap で画面幅に応じて自動的に折り返します。各ロゴは標準で opacity:.55 と filter:grayscale(1) によって淡いグレーで表示され、ホバー時に色と濃さが戻る指定で、控えめながら主張する見せ方になっています。
向いている場面
第三者からの信頼を示したい場面に向きます。受託制作会社が取引先を並べる、SaaS が導入企業ロゴで社会的証明を作る、人材サービスが提携企業を見せる、といった用途です。トップページのファーストビュー直下に置くと、訪問者が早い段階で安心感を得られます。
カスタマイズの勘所
- サンプルはテキストでロゴを代用していますが、実運用では各社の正式なロゴ画像（できれば
<img>の SVG/WebP）に差し替えます。 - グレースケールを外して各社のブランドカラーで見せる方針にも切り替えられます。
実装上の注意として、他社ロゴの掲載は必ず掲載許可を取ることが前提です。ロゴ画像を入れる際は alt に企業名を書き、読み上げや検索でも企業が伝わるようにします。レスポンシブでは wrap によりロゴが自然に複数行へ折り返すため、スマートフォンでも横スクロールは発生しません。
よくある質問
ロゴをグレーで薄く表示しているのはなぜですか
各社のロゴの色がばらばらだと画面がうるさくなるため、grayscale と opacity でいったんトーンを揃えています。並びとして整って見え、ホバー時にだけ本来の色が戻ることで、興味を持った訪問者に強調できる狙いです。
ロゴ画像を入れるとき注意することはありますか
テキストの代わりに img を使う場合は、各社の正式なロゴデータを掲載許可のうえで配置し、alt 属性に企業名を入れてください。背景透過の SVG か WebP を使うと、グレースケールや拡大縮小をかけても劣化しにくくなります。