チーム写真ストリップ

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

このパーツは、チームメンバーの丸い顔写真を少しずつ重ねて横一列に並べ、最後に「+49」のように残りの人数をまとめた円を置く「フェイスストリップ」型のセクションです。各円には白い枠を付け、margin-left をマイナスにして重ねることで、人の集まりを 1 枚の帯として見せています。ホバーで対象の円が少し浮き上がり前面に出る動きも入っており、賑やかさと人の気配を演出できます。

向いている場面

「顔が見える」安心感を出したい組織紹介に向きます。制作会社やコンサルティング、士業事務所の About ページ、採用サイトのチーム紹介、コミュニティの参加者一覧などで、規模感と親しみやすさを同時に伝えられます。

カスタマイズと注意点

• サンプルはグラデーションのプレースホルダなので、公開時は実在する人物の写真に差し替える
• 顔がはみ出さないよう、正方形に近いトリミングで中央に人物を収める
• 写真には誰の画像かが分かる alt を付け、装飾ではなく情報として扱う

狭い画面では円が小さくなる指定が入っていますが、重なりが強すぎると顔が隠れます。人数が多いときは表示する枚数を絞り、残りは「+◯」でまとめると見やすく保てます。