代表プロフィールセクションの作り方

会社や事務所のホームページで代表紹介を掲載する際、シンプルで清潔感のあるデザインが求められます。
ここでは、HTMLとCSSだけで構成できる「代表プロフィール」セクションの実装例を紹介します。
スマホ対応（レスポンシブ）も備えた汎用的なテンプレートです。

1 実装のポイント

• Flexboxを使用して写真とテキストを横並びに配置
• 画像は円形＋影付きで整える
• スマホでは縦並びになるようレスポンシブ対応

2 HTML構造

<section class="profile-section">
  <h2>代表プロフィール</h2>
  <div class="profile-inner">
    <img src="https://example.com/wp-content/uploads/20xx/xx/sample01.jpg" alt="代表　○○○○" />
    <div class="profile-text">
      <p>代表の○○○○です。大学卒業後、民間企業で営業に従事し、独立後は地域の中小企業・個人のお客様を中心にM&Aサポートを行っています。<br>
      「誠実・迅速・丁寧」をモットーに、皆様の信頼を第一に考えています。</p>
    </div>
  </div>
</section>

3 汎用CSS

/* ------------------------------------------------
 * 代表プロフィール
 * ---------------------------------------------- */

/* 全体セクション */
.profile-section {
  background: #f9fafc; /* 背景色（淡いグレー） */
  text-align: center; /* 見出しを中央寄せ */
  padding: 80px 20px; /* 上下80px・左右20pxの余白 */
}

/* 内部のレイアウト */
.profile-inner {
  display: flex; /* 横並び配置 */
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
  flex-wrap: wrap; /* スマホ時に折り返し */
  gap: 30px; /* 要素間の余白 */
  margin-top: 30px; /* 見出しとの間隔 */
}

/* 代表写真 */
.profile-inner img {
  width: 150px; /* 横幅150px */
  height: 150px; /* 高さ150px */
  border-radius: 50%; /* 丸型にする */
  object-fit: cover; /* 画像の比率を保ちつつトリミング */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ほんのり影を付ける */
}

/* テキスト部分 */
.profile-text {
  max-width: 500px; /* テキスト領域の最大幅 */
  text-align: left; /* 左揃え */
  line-height: 1.8; /* 行間を広くする */
  color: #333; /* 文字色（濃いグレー） */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .profile-inner {
    flex-direction: column; /* 縦並びに変更 */
    text-align: center; /* 中央寄せ */
  }
  .profile-text {
    text-align: center; /* テキストも中央寄せ */
  }
}

4 完成イメージ

4.1 ディスプレイが768px以下（モバイル）の縦並びの完成イメージ

代表の○○○○です。大学卒業後、民間企業で営業に従事し、独立後は地域の中小企業・個人のお客様を中心にM&Aサポートを行っています。
「誠実・迅速・丁寧」をモットーに、皆様の信頼を第一に考えています。

4.2 ディスプレイが769px以上の横並びの完成イメージ

▶ ディスプレイが769以上の横並びの完成イメージ

5 まとめ

• シンプルで信頼感のある代表紹介デザイン
• Flexboxでスマホにも対応可能
• プラグインを使わず軽量・高速

WordPressの代表プロフィールは、サイトの信頼性を高める重要な要素です。
このテンプレートを使えば、どのテーマでも自然に馴染む美しいデザインを実現できます。