• Top
  • HTML/CSS
  • 離脱せず読まれる！”読み物”として最後まで読ませるHTMLレイアウト術
HTML/CSS
投稿日：

離脱せず読まれる！”読み物”として最後まで読ませるHTMLレイアウト術

おはようございます！株式会社ファストコーディングの働くおかんです。

先日、子どもの学校の保護者会でもらった紙のお便りを読んでいたんですが、A4にびっしり文字が詰まっていて、正直どこを読めばいいのか分からなかったんですよね。でも同じ日に届いた地域のフリーペーパーは、写真の横にテキストが回り込んでいたり、見出しに大きな余白があったりして、自然と最後まで読めてしまいました。

「同じ文章量なのに、レイアウト次第でここまで読みやすさが違うのか」と改めて感じた瞬間でした。

Webサイトでもこれはまったく同じなんです。情報量が多いページ――たとえば企業のサービス紹介やオウンドメディアの記事ページは、どうしてもテキストが縦に長く並びがちです。ユーザーはスクロールに疲れて、途中で離脱してしまいます。

こうした課題に対して有効なのが、雑誌のようなレイアウトをWebに取り入れる「エディトリアルデザイン」の考え方です。今回は、HTMLタグとCSSを使って雑誌風のレイアウトを実装する方法を紹介していきます。

雑誌風レイアウト（エディトリアルデザイン）とは

雑誌風レイアウトは、もともと「エディトリアルデザイン」と呼ばれ、雑誌や新聞など紙媒体で使われてきたレイアウト手法です。テキストと画像を段組みにしたり、余白を意識的に取ったり、見出しのサイズにメリハリをつけたりすることで、読者の視線を自然に誘導します。

ポイントは「情報の優先度を視覚で伝える」ことです。何が重要で、どの順番に読めばいいのかが、ぱっと見で分かるように設計されています。

Webサイトでは、どうしても上から下へ単調に流れるレイアウトになりがちです。ここに雑誌風レイアウトの要素を加えると、ページにリズムが生まれます。実際に案件で導入した際も、クライアントから「ただのテキストページが、読み物として成立するようになった」と言っていただけたことがありました。

段組みで「壁のようなテキスト」を崩す

雑誌風レイアウトの基本は段組み（マルチカラムレイアウト）です。新聞や雑誌をイメージすると分かりやすいですが、テキストを複数の列に分けることで、1行の文字数が短くなり格段に読みやすくなります。

CSSのcolumnsプロパティを使うと、JavaScriptなしで段組みが実現できます。

<article class="editorial-columns">
  <p>
    Webサイトのテキストが縦に長く続くと、
    ユーザーはスクロールに疲れて離脱してしまいます。
    段組みを使うことで1行あたりの文字数を抑え、
    視線の移動距離を短くできます。
    雑誌のような読みやすさをWebでも実現する
    最もシンプルな方法です。
  </p>
</article>
.editorial-columns {
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid #e5e7eb;
}

/* スマートフォンでは1カラムに戻す */
@media (max-width: 768px) {
  .editorial-columns {
    columns: 1;
  }
}

column-gapで列間のスペースを確保し、column-ruleで区切り線を入れています。区切り線があると、列同士の境界がはっきりして読みやすくなります。

ここで重要なのは、スマートフォンではカラムを1列に戻すことです。画面幅が狭い状態で2カラムにすると、1行あたりの文字数が少なすぎて逆に読みづらくなってしまいます。以前の案件でレスポンシブ対応を忘れたまま公開してしまい、スマートフォンで1行に3〜4文字しか表示されない状態になったことがありました。すぐに修正しましたが、冷や汗ものでした。

テキストの回り込みで視線にリズムをつける

雑誌でよく見かける「画像の横にテキストが回り込むレイアウト」は、WebでもfloatやCSS Shapesを使って実現できます。単調なテキストの流れを崩し、読者の視線に変化を与えます。

<section class="editorial-wrap">
  <img
    src="photo.jpg"
    alt="オフィスでの打ち合わせ風景"
    class="editorial-float"
  />
  <p>
    雑誌風レイアウトでは、画像とテキストの関係性が重要です。
    画像を単に上下に配置するのではなく、テキストの流れの中に
    自然に組み込むことで、読者は文章を読みながら
    視覚的な情報も同時に受け取れます。
  </p>
</section>
.editorial-float {
  float: left;
  width: 45%;
  margin: 0 24px 16px 0;
  border-radius: 4px;
}

.editorial-wrap::after {
  content: "";
  display: block;
  clear: both;
}

floatは古くからあるプロパティですが、テキストの回り込みという用途では今でも最適な手段です。画像の幅を45%くらいに設定すると、テキストとのバランスがちょうどよくなります。

さらに一歩進んで、CSS Shapesを使うと画像の形に沿ってテキストを回り込ませることもできます。

.editorial-float-shape {
  float: left;
  width: 45%;
  margin: 0 24px 16px 0;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  border-radius: 50%;
}

shape-outsideでテキストの回り込み形状を指定し、clip-pathで画像自体も円形に切り抜いています。人物写真を円形にしてテキストを回り込ませると、雑誌のインタビューページのような仕上がりになります。

ある採用サイトの社員紹介ページでこの手法を使ったところ、「普通の社員紹介と違って読みたくなる」とクライアントに好評でした。テキストと画像が有機的に結びつくことで、読み物としての完成度が上がるんですよね。

余白のコントロールで「間」を作る

雑誌風レイアウトで見落とされがちなのが余白（ホワイトスペース）の設計です。雑誌をめくると、写真の周囲や見出しの上下に大きな余白が取られていることに気づくと思います。この「間」が読者の呼吸になっているんです。

.editorial-section {
  padding: 80px 0;
}

.editorial-section + .editorial-section {
  border-top: 1px solid #e5e7eb;
}

.editorial-heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 48px;
}

.editorial-paragraph {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2em;
  max-width: 720px;
}

ここでのポイントは3つです。

  • セクション間の余白を広めにとる：padding: 80px 0でセクション間にゆとりを持たせ、内容のまとまりを視覚的に伝えます
  • 行間を広くする：line-height: 2は一般的なWebサイトより広めですが、読み物としての快適さは格段に上がります
  • テキストの最大幅を制限する：max-width: 720pxで1行あたりの文字数を制御します。PCの全幅でテキストが広がると、視線の移動が大きくなって読みにくくなります

夜、子どもが寝た後にいろいろな雑誌のWebサイトを見比べてみたんですが、読みやすいと感じるサイトは例外なくこの余白のコントロールがしっかりしていました。逆に、余白が詰まっているサイトは内容がよくても途中で読む気が失せてしまいます。

CSS Gridで雑誌レイアウトを再現する

段組みや回り込みだけでなく、CSS Gridを使えばもっと自由な雑誌風レイアウトが実現できます。メインの記事エリアとサイドのキャプションを並べたり、画像を大きく見せながらテキストを配置したりといった表現が可能です。

<section class="magazine-layout">
  <div class="magazine-image">
    <img src="hero.jpg" alt="プロジェクトの成果物" />
  </div>
  <div class="magazine-text">
    <h2>リニューアルの舞台裏</h2>
    <p>
      今回のリニューアルでは、従来の縦長レイアウトを見直し、
      雑誌風レイアウトの手法を取り入れました。
      結果として、ページの平均スクロール率が改善しました。
    </p>
  </div>
  <div class="magazine-caption">
    <p class="caption-text">
      Photo: プロジェクトチームによる社内ワークショップの様子
    </p>
  </div>
</section>
.magazine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.magazine-image {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.magazine-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.magazine-text {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  padding: 24px 0;
}

.magazine-caption {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size: 0.85rem;
  color: #6b7280;
}

@media (max-width: 768px) {
  .magazine-layout {
    grid-template-columns: 1fr;
  }

  .magazine-image {
    grid-column: 1;
    grid-row: 1;
  }

  .magazine-text {
    grid-column: 1;
    grid-row: 2;
  }

  .magazine-caption {
    grid-column: 1;
    grid-row: 3;
  }
}

画像を左カラム全体に配置し、右カラムにテキストとキャプションを分けて配置しています。画像にobject-fit: coverをかけることで、テキスト側の高さに合わせて画像が自動的にトリミングされます。

この手法はコーポレートサイトの実績紹介ページや、オウンドメディアの特集記事でよく使っています。通常の上下配置と比べて、ページの「読み物感」がぐっと増すんですよね。

ドロップキャップで記事の格を上げる

雑誌の特集記事でよく見かける「最初の一文字が大きくなっている」あの表現、ドロップキャップと呼びます。CSSの::first-letter擬似要素で実装できます。

.editorial-article > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-right: 8px;
  margin-top: 4px;
  color: #1e40af;
}

たったこれだけで、記事の冒頭にぐっと引き締まった印象が加わります。フォントサイズは3.5remくらいがバランスよく収まります。色を変えるとアクセントにもなるので、サイトのブランドカラーを使うのがおすすめです。

注意点として、日本語のドロップキャップは英語ほど一般的ではないので、使う場面は選んだほうがいいです。英語混じりの見出しの後や、特集記事の冒頭など、「ここぞ」という場面で使うと効果的です。実際に案件で日本語の記事全ページにドロップキャップを入れてみたことがあるんですが、やりすぎ感が出てしまい、最終的に特集記事のトップだけに絞りました。

実装時の注意点

雑誌風のレイアウトは効果的ですが、実装する際に気をつけるべきポイントがあります。

まず、レスポンシブ対応は必須です。段組みやGridレイアウトはPC表示では美しく決まりますが、スマートフォンで崩れると逆効果になります。今回紹介したコード例にはすべてメディアクエリを入れていますが、実機での確認は必ず行ってください。

次に、アクセシビリティへの配慮です。CSSのcolumnsで段組みにした場合、スクリーンリーダーはソースコードの順番でテキストを読み上げます。段組みの見た目と読み上げ順序がずれないように、HTMLの構造には注意が必要です。

最後に、パフォーマンスです。backdrop-filterや複雑なclip-pathを多用すると、描画負荷が上がります。雑誌風レイアウトはCSSのプロパティ自体は軽量ですが、画像を多用する場合は遅延読み込み（loading="lazy"）を組み合わせてください。

以前担当した案件で、画像を10枚以上使った雑誌風レイアウトを組んだことがあるんですが、遅延読み込みを入れ忘れて初期表示が重くなってしまいました。読了率を上げるためのデザインで、読み込み速度が遅くなって離脱されては本末転倒です。

まとめ

今回は、雑誌のようなレイアウトをWebに取り入れる雑誌風HTMLレイアウトの手法を紹介しました。テキストが長いページでも、レイアウトの工夫次第で読了率は変わります。

雑誌風レイアウトを実装に落とし込むとき、押さえておきたいポイントは以下の3つです。

  • 段組みと回り込みで単調な縦長レイアウトを崩し、視線にリズムを作る
  • 余白と行間を十分にとって、読者に「呼吸」させる
  • レスポンシブ対応を忘れず、スマートフォンでは1カラムに戻す

実際のプロジェクトでは、サービス紹介ページにCSS Gridの雑誌レイアウトを導入したところ、ページ下部までスクロールするユーザーの割合が増えたことがありました。大掛かりな改修ではなく、CSSの調整だけで改善できたケースです。

雑誌風レイアウトの手法は、すべてのページに使うものではありません。テキストが多い記事ページ、実績紹介、サービス紹介など「読んでもらいたいページ」にピンポイントで導入するのが効果的です。次の案件でテキストの多いページがあれば、段組みや余白の設計から試してみてください。

株式会社ファストコーディングでは、こうした雑誌風レイアウトの実装や、読了率を意識したページ設計のサポートも行っています。「テキストが多いページをもっと読みやすくしたい」「コーポレートサイトに雑誌のような表現を取り入れたい」といったご要望がありましたら、お問い合わせフォームからお気軽にご相談ください。

この記事を見た人がよく見ている記事

SEO