パートナーロゴグリッド
導入企業や取引先のロゴを並べて信頼感を伝えるパートです。見出しの下に display:grid で6カラムのロゴ枠を等間隔に配置し、ロゴはグレースケール調の薄い色で表示しておき、マウスを乗せると濃い色に変わる :hover 演出が入っています。
このパーツの使いどころと実装ポイント
導入企業や取引先のロゴを並べて信頼感を伝えるパートです。見出しの下にdisplay:gridで6カラムのロゴ枠を等間隔に配置し、ロゴはグレースケール調の薄い色で表示しておき、マウスを乗せると濃い色に変わる:hover演出が入っています。色を抑えることで個々のロゴが主張しすぎず、全体が落ち着いた印象になるのが狙いです。グリッドなので枠数を変えても自動で整列します。
向いている場面
- BtoBサービスサイトの「導入企業」「取引実績」セクション
- イベントやメディアの「協賛・パートナー」紹介
- 採用サイトでの提携先・関連企業の一覧
カスタマイズの勘所
実際のロゴ画像に差し替える際は、各spanをimgに置き換え、widthとheight属性、意味のあるalt（会社名）を必ず入れてください。ロゴの形や余白がバラバラだと不揃いに見えるので、同じ高さにそろえると整います。グレー表示を保つならfilter:grayscale(1)を当て、ホバーで解除する形にすると写真ロゴでも統一できます。掲載には先方の許諾が前提になる点にも注意してください。
レスポンシブの注意
6列のままでは狭い画面でロゴが小さくなりすぎます。grid-template-columnsをメディアクエリで3列や2列に減らすと、スマートフォンでも視認性を保てます。
よくある質問
ロゴの数が6個ちょうどでなくても大丈夫ですか？
グリッドなので個数は自由に増減できます。ただし最終行が中途半端に空くと不揃いに見えるため、列数の倍数になるよう調整するか、最終行を中央寄せにするときれいにまとまります。
ロゴをグレーで表示するのはなぜですか？
色味を抑えると個々のロゴが主張しすぎず、ページ全体のトーンを乱さないためです。実ロゴ画像でも同じ効果を出したい場合は、CSSのグレースケールフィルターをかけ、ホバー時に元の色へ戻す方法が使えます。