受賞ロゴグリッド
受賞ロゴグリッドは、受賞歴や認証マークをカード状に並べて権威性を示すセクションです。 grid-template-columns:repeat(3,1fr) で3列の等幅グリッドを組み、各カードにアイコンと賞名を縦に配置しています。
このパーツの使いどころと実装ポイント
受賞ロゴグリッドは、受賞歴や認証マークをカード状に並べて権威性を示すセクションです。grid-template-columns:repeat(3,1fr) で3列の等幅グリッドを組み、各カードにアイコンと賞名を縦に配置しています。:hover で軽く浮き上がる transform が添えられ、静的な羅列に少しだけ動きを与えています。見出しはセリフ体で格式を演出しています。
向いている場面
- 表彰歴のある制作会社・メーカーの実績紹介
- ISOやプライバシーマークなど認証を示したい企業
- 掲載メディアや提携先を並べて信頼を補強したいLP
固有の勘所は、実際のロゴ画像に差し替えること。デモはアイコンですが、本番では各賞の公式ロゴ画像を使うと説得力が増します。3列が前提なので、件数は3の倍数にそろえると最後の行が欠けず見栄えします。
実装上の注意
ロゴ画像を入れる場合は width と height を指定し、alt に賞や認証の正式名称を書きます。スマートフォンでは3列だと窮屈なので、画面幅に応じて2列や1列へ落とすとつぶれません。他者のロゴは利用条件を確認し、許可された範囲で掲載することも忘れないようにします。
よくある質問
アイコンを実際のロゴに替えるには
各カードのアイコン部分を賞や認証の公式ロゴ画像に置き換えます。画像にはwidthとheight、正式名称を入れたaltを付け、軽量化のためWebPなどで配置すると表示も速くなります。
スマートフォンでも3列のままですか
そのままだと窮屈になります。画面幅が狭いときはグリッドの列数を2列や1列に切り替えると、ロゴと文字がつぶれず読みやすくなります。