導入企業ロゴグリッド
実写ロゴの代わりに企業名テキストとMaterial Symbolsの業種アイコンで品よく見せる導入企業セクション。ベタ塗りに頼らないカード型。
このパーツの使いどころと実装ポイント
導入企業を、実写ロゴの代わりに企業名テキストと Material Symbols の業種アイコンで上品に見せるパートナー紹介セクションです。ul を grid-template-columns:repeat(4,1fr) の4列グリッドで並べ、各カードはアイコン・企業名・業種ラベルを縦中央に揃えています。ベタ塗りや権利の曖昧なロゴ画像に頼らず、淡い枠線とホバー時の浮き上がりだけで質感を出しているのが特徴で、末尾に「サンプル表記」の注記も添えています。
向いている場面
ロゴ掲載の許諾がまだ取れていない段階のコーポレートサイトや、業種の幅広さを示したいBtoB事業の信頼セクションに向きます。サンプルでは不動産・小売・医療・教育・金融など8業種を並べており、「業種を問わず支援している」というメッセージを視覚的に伝えられます。実績数が少ないうちの仮置きとしても使えます。
カスタマイズと注意
- カードは
li.plg__card単位で増減できます。4の倍数だと最終行がきれいに揃います。 - 768px以下で2列、420px以下で1列に畳まれるため、狭い画面でも企業名が読めます。
- 実際にロゴ画像を載せる場合は、各企業から掲載許諾を得るのが前提です。許諾前はこのテキスト表記が安全です。
- 業種アイコンは Material Symbols から意味の合うものを選びます。塗り（fill）で描かれる前提なので、枠側のCSSが線アイコン用だと表示されない点に注意してください。
よくある質問
なぜロゴ画像ではなく企業名テキストで見せているのですか。
ロゴの掲載には各企業の許諾が必要で、許諾前にロゴ画像を載せると権利上の問題になりかねません。このパーツは企業名テキストと業種アイコンで品よく見せることで、許諾が整う前でも導入実績や業種の広さを安全に表現できます。許諾が取れた企業から順にロゴ画像へ差し替えていく運用がしやすい設計です。
掲載する企業数は何社が見やすいですか。
4列グリッドなので、4の倍数（8社や12社など）にすると最終行が揃って整然と見えます。数が中途半端だと最後の行に空きが出ますが、その場合はカードを足すか、列数を調整して対応できます。多すぎると一社ずつの印象が薄れるため、代表的な企業に絞るのも有効です。