CSS UI・Webデザイン集 | Webサイト基本構成：オウンドメディア

Web APP CSS
スポンサーリンク
スポンサーリンク

オウンドメディアは「読みやすさ・回遊性・信頼性」を同時に満たす構成が重要

オウンドメディアは、企業が自社の情報を発信し、読者との関係を育てるための“情報発信基地”です。 ECサイトやプロダクトサイトと違い、目的は「売る」よりも “読んでもらう・理解してもらう・信頼してもらう” にあります。 そのため、構成は記事中心でありながら、回遊性（次の記事へ進む導線）とブランドらしさを両立させる必要があります。

ここでは、実務で使われる王道構成を、初心者向けにかみ砕いて解説しながら、CSSとSCSSのテンプレートを提示します。

オウンドメディアの基本構成

オウンドメディアは大きく ヘッダー（ロゴ・カテゴリ） ヒーロー（メディアの世界観） 記事一覧（カード型） 記事詳細（本文＋サイドバー） フッター（ブランド情報） という流れで構成されます。 この構成は「読者が記事を探す順番」に沿っているため、どのメディアでもほぼ共通です。

ヘッダー（世界観とカテゴリを示す）

ヘッダーの役割

オウンドメディアのヘッダーは、ロゴとカテゴリが主役です。 読者は「どんなジャンルの記事があるのか」を最初に確認するため、カテゴリを横並びで配置します。

CSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

header .logo {
  font-size: 1.6rem;
  font-weight: bold;
}

header nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: #374151;
  font-size: 1rem;
}
CSS

SCSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;

  .logo {
    font-size: 1.6rem;
    font-weight: bold;
  }

  nav {
    a {
      margin-left: 1.5rem;
      text-decoration: none;
      color: #374151;
      font-size: 1rem;
    }
  }
}
SCSS

深掘り

オウンドメディアのヘッダーは「読み物としての落ち着き」が重要です。 派手な色よりも、白＋グレー＋アクセントカラーの組み合わせが実務で好まれます。

ヒーローセクション（メディアの世界観を伝える）

役割

オウンドメディアのヒーローは、記事ではなく「メディアのテーマ」を伝える場所です。 キャッチコピー・背景画像・簡単な説明を配置し、読者に“どんなメディアなのか”を一瞬で理解させます。

CSS例

.hero {
  padding: 4rem 2rem;
  text-align: center;
  background: #f9fafb;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  color: #4b5563;
  max-width: 600px;
  margin: 0 auto;
}
CSS

SCSS例

.hero {
  padding: 4rem 2rem;
  text-align: center;
  background: #f9fafb;

  h1 {
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.1rem;
    color: #4b5563;
    max-width: 600px;
    margin: 0 auto;
  }
}
SCSS

深掘り

ヒーローは「余白」が命。 情報を詰め込みすぎず、世界観を伝える一言に絞ることで、読者が気持ちよく記事一覧へ進めます。

記事一覧（カード型で視線を安定させる）

役割

記事一覧は、読者が記事を選ぶ場所です。 カード型レイアウトで整列させることで、視線の流れが安定し、記事が選びやすくなります。

CSS例

.articles {
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.article-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.article-card:hover {
  transform: translateY(-4px);
}

.article-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.article-card .content {
  padding: 1.2rem;
}

.article-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.article-card p {
  color: #4b5563;
  font-size: 0.95rem;
}
CSS

SCSS例

.articles {
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;

  .article-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-4px);
    }

    img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .content {
      padding: 1.2rem;

      h3 {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
      }

      p {
        color: #4b5563;
        font-size: 0.95rem;
      }
    }
  }
}
SCSS

深掘り

記事カードは「画像の印象」が最重要。 画像が魅力的だと記事のクリック率が大きく上がるため、横長よりも“縦長の比率”が実務で好まれます。

記事詳細（本文を読みやすく整える）

役割

記事詳細ページは、読者が最も長く滞在する場所です。 本文の読みやすさ、余白、行間、フォントサイズが非常に重要になります。

CSS例

.article-detail {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.article-detail h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.article-detail p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 1.5rem;
}

.article-detail img {
  width: 100%;
  border-radius: 12px;
  margin: 2rem 0;
}
CSS

SCSS例

.article-detail {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1.5rem;

  h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 1.5rem;
  }

  img {
    width: 100%;
    border-radius: 12px;
    margin: 2rem 0;
  }
}
SCSS

深掘り

本文は「行間」が命です。 行間を広めに設定することで、読者が疲れずに読み進められます。 実務では line-height: 1.7〜1.9 が最も読みやすいとされています。

フッター（ブランドの信頼性を示す）

役割

フッターは、メディアの信頼性を補強する場所です。 会社情報・SNSリンク・コピーライトなどをまとめます。

CSS例

footer {
  padding: 2rem;
  background: #1f2937;
  color: #e5e7eb;
  text-align: center;
  font-size: 0.9rem;
}
CSS

SCSS例

footer {
  padding: 2rem;
  background: #1f2937;
  color: #e5e7eb;
  text-align: center;
  font-size: 0.9rem;
}
SCSS

深掘り

フッターは「静けさ」を作る場所。 濃い背景色＋薄い文字色で、サイト全体の印象を落ち着かせます。

まとめ

オウンドメディアは ヘッダーで世界観を示す ヒーローでテーマを伝える 記事一覧で選びやすくする 記事詳細で読みやすさを極める フッターで信頼性を補強する という流れが鉄板です。

CSSとSCSSで構造を整理することで、 初心者でも迷わずに実務レベルのオウンドメディアを作れるようになります。

スポンサーリンク
タイトルとURLをコピーしました