実写＋アイコンのサービスカード
実写サムネとMaterial Symbolsアイコンを組み合わせた3列サービス紹介カード。各カードに概要と詳細リンクを備えた、事業内容セクションの定番。
このパーツの使いどころと実装ポイント
実写サムネイルと Material Symbols アイコンを組み合わせた3列のサービス紹介カードです。各カードは画像エリア（aspect-ratio:16/10）の左下にアイコンバッジを半分はみ出させて重ね、その下に見出し・説明文・「詳しく見る」リンクを置く構成です。object-fit:cover で画像の縦横比を保ったまま枠に収め、ホバーでカードが浮き上がり、リンクの矢印が右へ動く小さな演出が付きます。
向いている業種・場面
制作会社・コンサル・士業など「サービスを3〜4本柱で見せたい」事業内容セクションの定番です。サンプルではWeb制作・運用改善・集客広告を並べていますが、整体院の施術メニュー、教室のコース紹介、飲食店のサービス区分などにも置き換えられます。
カスタマイズの勘所
- 画像は Unsplash CDN を
srcsetとsizesで配信し、端末に応じて600w/1200wを出し分けています。自社写真に差し替える際もwidth/heightを残すとレイアウトのガタつきを防げます。 - カード数を4枚以上にするなら、880px・560px のブレークポイントで2列・1列へ畳む設定を確認してください。
- 左下のアイコンバッジは
position:absoluteではみ出させているため、本文側のpadding-topを削るとアイコンと文字が重なります。 - 各
imgには意味のあるaltが必要です。装飾と割り切る場合のみ空にしてください。
よくある質問
カードを3枚から4枚や2枚に変えられますか。
変えられます。グリッドは3列基準ですが、880pxで2列、560pxで1列に折り返す設定が入っているため、カードを足しても引いても崩れにくいです。4枚にする場合は画面幅の広いPCで4列にしたいか3列+折り返しにしたいかを決め、列数指定を調整してください。
Unsplashの画像のまま公開してよいですか。
デモとしては使えますが、本番では事業内容に合った自社写真や許諾済みの素材に差し替えるのが基本です。差し替える際は同じ縦横比（16:10想定）で書き出し、width・height属性とalt文を実態に合わせて入れると、表示崩れやアクセシビリティ上の問題を避けられます。