取引先ロゴ 12 グリッド
取引先やロゴを 6 列 × 2 行などのグリッドに敷き詰める、導入実績アピール用のセクションです。 display:grid の repeat(6,1fr) でセルを均等に並べ、セル間の gap を 1px にして背景色を透かすことで、罫線のように区切られたタイル状の見た目を CSS だけで作っています。
このパーツの使いどころと実装ポイント
取引先やロゴを 6 列 × 2 行などのグリッドに敷き詰める、導入実績アピール用のセクションです。display:grid の repeat(6,1fr) でセルを均等に並べ、セル間の gap を 1px にして背景色を透かすことで、罫線のように区切られたタイル状の見た目を CSS だけで作っています。各セルは白背景で中央寄せされ、ロゴ風のテキストや簡単な svg アイコンが収まる作りです。
向いている場面
「数の多さ」が信頼につながる場面に向きます。導入企業 120 社、提携パートナー一覧、メディア掲載実績、利用ブランドの紹介など、ロゴを並べるだけで実績の厚みが伝わります。BtoB のサービスサイトや、取引先が多い制作・卸・コンサル系の会社概要で特に効果的です。
カスタマイズの勘所
- 実際のロゴ画像を使う場合は
svgか軽量画像にし、各社で余白と高さを揃えると整然と見えます。バラつくと素人っぽさが出ます。 - ロゴが画像のときは
altに会社名を入れ、テキストでも企業名が伝わるようにします。 - セル数は列数の倍数（6 列なら 12・18）にすると、最後の行が欠けず端正に揃います。
レスポンシブでは 6 列→3 列→2 列と段階的に減らします。ロゴの掲載は許諾の範囲で行い、ブランドガイドラインに反する改変（色変更や変形）は避けてください。装飾アイコンには aria-hidden を付け、読み上げの邪魔にならないようにします。
よくある質問
ロゴはいくつ並べるとバランスがよいですか。
列数の倍数にすると最後の行が欠けず端正に見えます。6列なら12個や18個が収まりがよく、半端な数だと最終行に空白が残って不格好になります。数が足りないときは列数自体を減らして調整してください。
他社のロゴを掲載する際の注意点はありますか。
掲載は許諾の範囲で行い、各社のブランドガイドラインに従ってください。ロゴの色を勝手に変えたり、縦横比を崩して変形させたりするのは避けるべきです。また実装上は各ロゴの余白と高さを揃えると、全体が整って信頼感が増します。