受賞歴リスト

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

このパーツは、受賞年・賞の名前・補足説明を一行ずつ並べた表彰実績リストです。各項目は display:grid;grid-template-columns:90px 1fr で左に大きな受賞年、右に賞名と説明を配置し、上下を細い罫線（border-bottom）で区切ってすっきり見せています。年は font-weight:900 の大きな数字でブラウン（#B5651D）に着色し、視線が自然に時系列をたどれるよう設計されています。全体は Georgia のセリフ体とクリーム背景で格調ある雰囲気です。

向いている場面

デザイン会社や制作会社のアワード実績、メーカーの製品受賞歴、士業やクリニックの表彰・認定など、第三者評価で権威性を伝えたい場面に向きます。会社案内や採用サイトの信頼づくり、サービス紹介ページの実績欄に効果的です。

カスタマイズの勘所

• li を増減すれば受賞件数を自由に変えられる
• 受賞年の列幅は grid-template-columns の 90px を変えて調整できる
• 賞のロゴを添えたい場合は説明文の脇に小さく置くと信頼感が増す

注意点として、実績は誇張せず事実に基づいて記載します。賞の正式名称や順位は出典どおりに書き、可能なら受賞先へのリンクを付けると裏付けになります。アクセシビリティ面では年を time 要素で表しているのでそのまま活かし、賞名は h3 見出しとして本文の階層と矛盾しないよう配置してください。狭い画面では年と内容が窮屈にならないよう余白を確認します。