チーム紹介ページの例
チーム紹介ページの例：HTMLとCSSで作るレイアウト8種類 | We.Inc
写真グリッドから部署別の構成まで、オリジナルのチーム紹介レイアウト8種類。編集できるHTMLとCSS、列数、写真の形、余白を設定できるグリッドビルダー付きです。
チーム紹介ページの例
チーム紹介ページは、ビジネスに名前、顔、役割を添え、訪問者が誰とやり取りするのかをわかるようにします。下のレイアウトは、シンプルな写真グリッドから部署別の構成、創業者1人のストーリーまでそろっています。どれもオリジナルで編集できるHTMLとCSSで、グリッドビルダーが列数、写真の形、余白を設定してくれます。
チームの人数で選ぶレイアウト
- 1 to 2
- 大きな写真1枚と創業者のストーリー
- 名前、役割、数文の紹介、連絡先リンク
- 3 to 8
- 短いプロフィール付きのカードグリッド
- 写真、名前、役割、ひとこと紹介
- 9 to 30
- チームごとにまとめたコンパクトな写真グリッド
- 写真、名前、役割
- 30 and more
- 上部に経営陣、その下に検索できる一覧
- 名前、役割、チーム。写真は任意
人は人から買うものです。クリニック、制作会社、職人、レストランなどのサービス業では特にそうです。チーム紹介ページは、ビジネスの背後に誰がいるのかを伝え、最初のメールや来店へのハードルを下げます。ここでの例は写真の代わりにイニシャルで描いているので、レイアウトを変えずに自分の写真を入れられます。
- 人数の表を使って、人数に合ったレイアウトの種類を選びます。
- グリッドビルダーで列数、写真の形、間隔を設定し、書き出されたCSSをコピーします。
- 下の8種類のレイアウトを見て、その場で編集し、気に入ったHTMLとCSSをコピーします。
- イニシャルを幅と高さを指定した実際の写真に差し替え、その人の名前を含むaltテキストを書きます。
- 同じ光と構図で撮った写真を使いましょう。ばらばらのスナップ写真だと、優れたチームでも寄せ集めに見えてしまいます。
- 役割はお客様にわかる平易な言葉で書きましょう。Chief Happiness OfficerよりHead of Client Careのほうが伝わります。
- 写真の読み込み中にグリッドがずれないよう、各画像にwidth属性とheight属性を付けましょう。
- ページに連絡手段を載せましょう。担当者の横に直接のメールや予約リンクがあれば、共通の受付窓口を経由する手間が省けます。
- 写真や情報を公開する前に本人の同意を取り、退職した人はすぐに掲載を外しましょう。
よくある質問
チーム紹介ページには何を載せるべきですか？
最低限、各メンバーの名前、役割、写真です。お客様に対して何をしているかを1文添え、役立つ場合は連絡先リンクも加えましょう。上部の短い紹介文で、チームがどのように連携しているかを説明します。
チームの写真のaltテキストはどう書けばよいですか？
その人の名前を書き、写真の横に役割が書かれていなければ役割も加えます。たとえばalt="Ana Ruiz, physiotherapist"です。すぐ横のキャプションにすでに名前がある場合は、短いaltか名前だけにして、長い文章の繰り返しを避けましょう。
グリッド内で写真が引き伸ばされないようにするには？
aspect-ratioで画像の縦横比を固定し、object-fit: coverを使います。写真は枠いっぱいに表示され、顔が押しつぶされる代わりに余分な部分が切り取られます。
チーム紹介ページは会社概要ページと分けるべきですか？
小さなビジネスでは、会社概要ページにチームを載せることがよくあります。人数がおよそ8人を超えたり、お客様が直接連絡するチームがあったりする場合は、ページを分けると会社概要ページが自社のストーリーに集中できます。
写真なしでチームを紹介してもよいですか？
はい。写真に写りたくない人がいる場合は、イニシャル、イラスト、集合写真1枚でも大丈夫です。名前と役割を見えるようにしておけば、ページの役割は果たせます。
実際の写真でも崩れないグリッドにする
- 写真はさまざまなサイズで届きます。画像の枠にaspect-ratioを、img要素にobject-fit: coverを設定すると、どの顔も同じ枠に収まります。頭の上が切れてしまう場合は、object-positionを追加しましょう。
- repeat(auto-fill, minmax(160px, 1fr))を使ったグリッドは、ブレークポイントなしでスマートフォンからデスクトップまで対応します。固定の列数にしたい場合は下のビルダーを使い、小さな画面用にメディアクエリを追加しましょう。
読まれるプロフィールを書く
- 1人あたり1〜2文で十分です。お客様のために何をしているかと、人柄が伝わる一言です。履歴書のような長いプロフィールは読み飛ばされます。もっと詳しく紹介したい役割には、専用のプロフィールページへのリンクを用意しましょう。
チーム紹介ページのレイアウト8種類
色付きのイニシャルが写真の代わりです。各.avブロックを、同じクラスを使ったimgに置き換えてください。
1. 定番の円形グリッド
丸い写真と、中央揃えの名前と役割。4〜12人ほどのチームならほぼどこでも使えます。
2. ひとこと紹介付きのカード
お客様のために何をしているかを短く添えるだけで、顔写真の羅列が役に立つ情報に変わります。
3. 創業者のストーリー
1〜2人のビジネスなら、グリッドよりも写真1枚と率直な数文のほうが説得力があります。
4. 部署ごとのグループ
チームごとの見出しがあると、大きな会社でも訪問者が適切な担当者を見つけやすくなります。
5. チームの上に経営陣の列
意思決定をする人には大きめのカード、その他のメンバーにはコンパクトな帯を使います。
6. 大人数向けのコンパクトな一覧
名前、役割、チームを並べた行は見渡しやすく、ブラウザーの検索機能でも探せます。
7. 直接連絡できるチームカード
各メンバーにメールリンクを付けるので、お客様は最初から適切な窓口に連絡できます。
8. 名前を添えた集合写真1枚
個別の顔写真を望まない人がいる場合でも、1枚の集合写真とキャプションでビジネスに名前を添えられます。
- AR|Ana Ruiz|理学療法士
- JO|James Osei|スポーツトレーナー
- LK|Lena Kim|受付
- MB|Marco Bell|クリニックマネージャー
- SP|Sara Patel|ピラティス講師
- TW|Tess Wu|マッサージセラピスト
チームグリッドビルダー
列数、写真の形、間隔を選びます。初期のCSS：
広い画面での列数：{n}
写真の形
円形
角丸
正方形
間隔：{n}px
チームグリッドのプレビュー
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る