【HOOKラボ #03】コラムの本文カラムと目次表示を見直した理由

コラムページの読みやすさを見直しました

HOOKサイトでは、コラム記事を増やしていく中で、本文の表示幅や目次の位置を見直しました。

今回調整したのは、主にPC表示での本文カラムと目次の見せ方です。

これまでは、本文エリアと目次の関係が少し窮屈に感じられる部分がありました。文章を読むページとして考えたときに、情報は掲載できていても、読み進めやすさの面ではまだ改善できる余地があると感じていました。

そこで、コラムページをより「読むためのページ」として整えるために、本文の見せ方と目次の配置を変更しました。

Before&After

noteの読みやすさを参考にしました

今回の調整では、noteのような読み物系サービスのUIを参考にしました。

noteは、文章を読むことに集中しやすいレイアウトになっています。本文の幅、余白、見出しの間隔、画面全体の余裕の取り方がシンプルで、長い文章でも読み進めやすい印象があります。

もちろん、HOOKサイトをnoteのようにそのまま変えるわけではありません。

ただ、コラム記事はサービスページや制作実績ページとは違い、ユーザーが文章を読みながら理解を深めるページです。

そのため、装飾を増やすよりも、本文の読みやすさを優先する必要があると考えました。

PC表示では本文を1カラムに近い形へ

PC表示では、本文エリアを中心に置き、読み物としての見やすさを高める方向で調整しました。

以前は、画面内に本文と目次が並んでいることで、文章を読む視線が少し分散していました。

そこで、本文の表示幅を整え、読み進める主役を本文にしました。

文章の横幅が広すぎると、1行あたりの文字数が増えすぎて目線の移動が大きくなります。逆に狭すぎると改行が増えて、文章が細切れに見えてしまいます。

そのため、コラムページでは「読みやすい行幅」を意識しながら、本文が自然に目に入るバランスを目指しました。

目次は画面右側に配置しました

PC表示では、目次を本文のすぐ横に置くのではなく、画面右側に配置する形へ変更しました。

目次は、記事全体の構成を把握したり、読みたい見出しへ移動したりするために便利な要素です。

一方で、常に本文の近くに大きく表示されていると、読み物としては少し存在感が強くなりすぎる場合があります。

そこで、本文を読む邪魔にならない位置に置きながら、必要なときには目次を確認できるようにしました。

特に長めのコラムでは、目次があることでユーザーは記事の全体像を把握しやすくなります。

ただし、目次はあくまで補助的なナビゲーションです。本文より目立ちすぎないことも大切だと考えています。

スマホ閲覧が中心でも、PC表示を整える理由

現在、多くのWebサイトではスマートフォンからの閲覧が中心になっています。

HOOKサイトでも、今後コラム記事が増えていけば、スマホで読むユーザーの割合は高くなると想定しています。

そのため、まずスマホで読みやすいことは大前提です。

しかし、PC表示を軽視してよいわけではありません。

特にホームページ制作やSEO対策のようなテーマでは、仕事中にPCで調べる人や、複数のページを比較しながら検討する人もいます。

また、制作会社を探している企業担当者の場合、スマホで最初に見つけたあと、PCで改めて確認するケースも考えられます。

つまり、PC閲覧の割合がスマホより低かったとしても、PCで見たときの印象は信頼感に関わります。

「スマホが多いからPCは最低限でいい」ではなく、「少数でも検討度の高いユーザーが見る可能性がある」と考えて、PC表示も丁寧に整えることが大切だと感じています。

コラムページは“情報量”より“読み進めやすさ”が大切

SEOを意識して記事を書くと、どうしても情報量を増やすことに意識が向きがちです。

もちろん、検索ユーザーの疑問にしっかり答えるためには、必要な情報を網羅することも大切です。

ただし、情報量が多くても、読みにくければ最後まで読まれません。

特にコラム記事では、次のような要素が読みやすさに影響します。

• 本文の横幅
• 行間
• 見出し前後の余白
• 目次の位置
• 本文とサイド要素の距離
• スマホでのボタン配置
• スクロール中の視線の流れ

文章そのものの内容だけでなく、画面上でどう読まれるかを考えることも、コラム運営では重要です。

目次はSEO対策というより、ユーザーのための設計

目次を入れるとSEOに良い、という話を聞くことがあります。

ただ、HOOKでは目次をSEO目的だけで入れているわけではありません。

目次の役割は、ユーザーが記事の全体像を把握しやすくすることです。

長い記事を読むとき、最初に見出しの流れが分かるだけで、読み手は安心して読み進めやすくなります。

また、すべてを最初から読むのではなく、自分に関係のある見出しだけを確認したいユーザーもいます。

そのような読み方にも対応できるように、目次は補助ナビゲーションとして残しつつ、本文の邪魔にならない位置へ調整しました。

小さなUI改善も、積み重ねるとサイトの印象が変わる

今回の変更は、サイト全体を大きく作り直すような改修ではありません。

本文幅や目次の位置を見直すという、小さなUI改善です。

しかし、こうした小さな改善の積み重ねが、サイト全体の印象を変えていきます。

ユーザーは、細かいCSSやレイアウトの意図を言葉で説明されることはありません。

それでも、「なんとなく読みやすい」「迷わず読める」「見ていて疲れにくい」といった感覚は、サイトへの信頼感につながります。

Web制作では、派手なデザイン変更だけでなく、こうした地味な調整も大切だと感じています。

今後も読みやすさを検証していきます

今回の調整で完成ではありません。

今後、コラム記事が増えていく中で、実際にどのように読まれているのかを確認しながら、必要に応じてさらに改善していく予定です。

例えば、スマホでの目次ボタンの使いやすさ、本文下部への関連導線、記事カードの見せ方、内部リンクの配置など、まだ検証できるポイントは多くあります。

HOOKでは、ホームページを作って終わりにするのではなく、運用しながら気づいたことを改善していくことを大切にしています。

今回のコラムページのカラムと目次の見直しも、その一つです。

まとめ

HOOKサイトでは、コラムページをより読みやすくするために、PC表示での本文カラムと目次の位置を見直しました。

noteのような読み物系サービスを参考にしながら、本文を読みやすい幅に整え、目次は補助的に使える位置へ配置しています。

スマホ閲覧が中心になりやすい時代でも、PCでじっくり比較・検討するユーザーは存在します。

そのため、スマホだけでなくPC表示でも読みやすさを整えることは、信頼感のあるサイトづくりにつながります。

HOOKラボでは、今後も実際のサイト運営や制作の中で行った改善、検証したこと、気づいたことを発信していきます。