Flexboxで作る！左右非対称の特長セクションデザイン

サイトの特徴紹介セクションを美しく配置するデザイン例です。
左側に半円状の青背景とタイトル、右側に白いカードで内容を表示する構成です。
視覚的なリズムを持たせたいLP（ランディングページ）や企業サイトに最適です。

1 実装のポイント

HTMLとCSSのみで実装可能です。左側の青い背景を中央寄せしつつ、右側にカードを配置します。
Flexboxでレイアウトを組み、スマホでは縦並びに切り替えるレスポンシブ対応も含めています。

2 HTML構造

<section class="feature-area">
  <div class="feature-left"><h2>わたしたちの特長</h2></div>
  <div class="feature-right">
    <div class="feature-item">
      <span class="num">1.</span>
      <div>
        <h3>「ペット」に焦点を当てたサポート</h3>
        <p>飼い主とペットの両方に寄り添ったトレーニング・ケアサービスを提供。</p>
      </div>
    </div>
    <div class="feature-item">
      <span class="num">2.</span>
      <div>
        <h3>専門資格を持つスタッフが常駐</h3>
        <p>獣医師監修の安心サポート体制で健康面もトータルケア。</p>
      </div>
    </div>
    <div class="feature-item">
      <span class="num">3.</span>
      <div>
        <h3>全国対応・10年以上の実績</h3>
        <p>ペット業界で培った経験と信頼で全国の飼い主を支援します。</p>
      </div>
    </div>
  </div>
</section>
    

3 汎用CSS

/* -----------------------------------------------------
 * Flexboxで作る！左右非対称の特長セクションデザイン
 * ----------------------------------------------------- */

/* --- セクション全体 --- */
.feature-area {
  display: flex; /* フレックスボックスで横並び配置 */
  justify-content: flex-end; /* 子要素を右寄せ配置（カードを右側へ） */
  align-items: center; /* 縦方向を中央揃えに */
  width: 100%; /* 横幅を全幅に */
  padding: 120px 0; /* 上下に広めの余白を設定 */
  background: linear-gradient(to bottom, #fff5dc 0%, #fffaf0 100%); /* 上下で色が変化する淡いグラデーション背景 */
  position: relative; /* 絶対配置要素（青背景）を中で扱うため相対指定 */
  overflow: hidden; /* はみ出した部分を非表示にする */
}

/* --- 左の青い背景棒 --- */
.feature-left {
  position: absolute; /* 固定的に配置し、右の白カードの下に重ねる */
  left: -200px; /* 左に少しはみ出すように配置 */
  top: 50%; /* 親要素の高さの中央に配置 */
  padding-left: 60px; /* タイトル文字を右寄せに少し移動 */
  transform: translateY(-50%); /* 上下中央に正確に揃える */
  width: 50%; /* 青背景を全体の半分程度に設定 */
  height: 320px; /* 背景の縦の長さ */
  background: #cde8ff; /* 柔らかい水色背景 */
  border-radius: 0 300px 300px 0; /* 右側だけを大きく丸める（半円形状） */
  z-index: 2; /* 白カードの下になるよう調整 */
  display: flex; /* 中のテキストを中央に配置するためフレックス化 */
  justify-content: center; /* テキストを横方向中央寄せ */
  align-items: center; /* テキストを縦方向中央寄せ */
}

/* --- 左のタイトル文字 --- */
.feature-left h2 {
  font-size: 1.4rem; /* タイトル文字サイズ */
  color: #1a4e80; /* 濃い青で可読性を高める */
  font-weight: 700; /* 太字で強調 */
  margin: 0; /* 外側の余白をなくす */
  text-align: center; /* テキストを中央揃え */
}

/* --- 白いカード --- */
.feature-right {
  width: 70%; /* 全体幅の7割を使用（残りは青背景用） */
  background: #fff; /* 白背景のカード */
  border-radius: 24px; /* 角を丸くして柔らかい印象に */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); /* ふんわりとした影で浮かせる */
  padding: 60px 70px; /* 内側の余白を調整（上下60px・左右70px） */
  position: relative; /* 重なり順制御のため相対指定 */
  z-index: 1; /* 青背景より上に配置 */
  margin-right: 20px; /* 右に少し余白を設ける（デザインバランス調整） */
}

/* --- 見出し（白カード内で使う場合） --- */
.feature-right h2 {
  font-size: 1.8rem; /* 見出し文字サイズ */
  font-weight: 700; /* 太字で強調 */
  color: #222; /* 落ち着いた黒文字 */
  margin-bottom: 30px; /* 下にスペースを確保 */
  border-left: 6px solid #4da8f0; /* 左にアクセントラインを追加 */
  padding-left: 12px; /* 線と文字の間に余白 */
}

/* --- 各項目（1行ごとの特長） --- */
.feature-item {
  display: flex; /* 番号と本文を横並びに配置 */
  align-items: flex-start; /* 上揃えにして自然に */
  gap: 16px; /* 番号と本文の間にスペース */
  padding: 20px 0; /* 各項目の上下余白 */
  border-bottom: 1px solid #e3e8ee; /* 区切り線を追加 */
  justify-content: flex-start; /* 左揃え明示 */
}
.feature-item:last-child { border-bottom: none; } /* 最後の要素には線を引かない */

/* --- 番号スタイル --- */
.feature-item .num {
  font-size: 2rem; /* 大きめの番号サイズ */
  color: #4da8f0; /* 青系で目立たせる */
  font-weight: bold; /* 太字で強調 */
  flex-shrink: 0; /* 横幅を固定して縮まないように */
}

/* --- 本文エリア --- */
.feature-item div {
  flex: 1; /* 残り幅を全て占有して整列 */
  text-align: left; /* 左寄せで読みやすく */
}

/* --- 各項目タイトル --- */
.feature-item h3 {
  font-size: 1.1rem; /* 小見出しとして適度な大きさ */
  color: #222; /* 黒文字で明瞭に */
  margin-bottom: 5px; /* 下に軽く余白 */
}

/* --- 各項目の説明文 --- */
.feature-item p {
  font-size: 0.95rem; /* 小さめで軽やかに */
  color: #555; /* 落ち着いたグレー */
  line-height: 1.7; /* 読みやすい行間 */
}

/* --- 1199px以下で青背景を白カードの上に移動 --- */ /** 1199px以下のレイアウト調整 **/
@media (max-width: 1199px) { /** 1199px以下のメディアクエリ開始 **/
  .feature-area { /** 青背景と白カードの親要素 **/
    flex-direction: column; /** 縦並びに切り替え **/
    align-items: center; /** 中央寄せ **/
    padding: 100px 0; /** 上下余白を広く取る **/
  }

  .feature-left { /** 青背景エリア **/
    position: relative; /** 絶対配置を解除して通常フローに戻す **/
    top: 0; /** 上下位置リセット **/
    left: 0; /** 左右位置リセット **/
    transform: none; /** translate解除 **/
    width: 90%; /** 幅を広げてバランス良く **/
    height: auto; /** 高さを自動調整 **/
    border-radius: 12px; /** 半円から矩形に変更 **/
    margin-bottom: 40px; /** 白カードとの間に余白を追加 **/
    padding: 40px 20px; /** テキストに余白を持たせる **/
    display: flex; /** 中央配置用Flex **/
    justify-content: center; /** 横方向中央寄せ **/
    align-items: center; /** 縦方向中央寄せ **/
  }

  .feature-left h2 { /** 青背景内の見出し **/
    font-size: 1.6rem; /** モバイルではやや大きめに **/
    color: #1a4e80; /** 濃い青で視認性アップ **/
    text-align: center; /** テキスト中央寄せ **/
  }

  .feature-right { /** 白カードエリア **/
    width: 90%; /** 画面幅に合わせる **/
    padding: 50px 30px; /** 内側余白を確保 **/
  }
}

/* --- スマホ対応（960px以下） --- */ /** スマホ専用の追加調整 **/
@media (max-width: 960px) { /** 960px以下のメディアクエリ開始 **/
  .feature-left { /** 青背景エリア再定義 **/
    display: block; /** 1199pxで相対化したため再表示維持 **/
  }

  .feature-right { /** 白カードエリア再定義 **/
    width: 90%; /** 横幅90%に調整 **/
    padding: 40px 25px; /** 余白をやや小さめに調整 **/
  }
}
    

4 完成イメージ

▶ Flexboxで作る！左右非対称の特長セクションデザイン

5 まとめ

左右で非対称のデザインを使うことで、単調なページ構成を避け、
サイトの信頼性や専門性を視覚的に伝えることができます。
配色・丸み・余白を微調整してブランドに合わせてカスタマイズしてください。