受賞バッジ列

このパーツの使いどころと実装ポイント

受賞歴や認定マークを横並びで見せ、権威付けをするパートです。各バッジは白いカードに薄い影（box-shadow）を付け、flexとflex-wrapで中央に並べています。上部にアイコン、その下に受賞名と補足という縦積みの構成で、画面が狭くなるとカードが自動で折り返すため、数が増えても崩れにくいのが特徴です。アイコンはインラインSVGなので外部読み込みなしで表示されます。

向いている場面

• コーポレートサイトの「受賞・認定」「メディア掲載」
• 製品ページでの第三者評価・ランキング実績の提示
• 士業やクリニックなど、資格・認定を信頼の根拠にしたい業種

カスタマイズの勘所

バッジを増やすときはabr__bのブロックを複製します。並べる数は3〜4個までに絞ると、一つひとつの説得力が保たれます。アイコンは星形のSVGが入っていますが、賞の性格に合わせて盾や月桂冠などへ差し替えても構いません。差し替える際はfill:currentColorで色が文字色に追従する点を踏まえ、線アイコンを使うなら塗りつぶしに変える必要があります。受賞名は具体的な年や主催を添えると信頼性が増します。