情報量が多すぎるページを整理する型

料金表や研修要項、制度の説明ページを整理していると、「情報を減らしましょう」と言われることがあります。でも、受講要件も日程も料金も申込方法も必要で、実際にはほとんど削れません。

研修LPを作り直したときに効いたのは、情報量を減らすことではなく、最初から全部を同じ強さで見せないことでした。何を先に見せ、何を必要な場所で探せるようにするか。そのとき使った整理の型をまとめます。

Why、What、Howの順に置く

ファーストビューでは「なぜ利用するのか」「何が得られるのか」を伝え、その後に対象者、日程、料金、申込方法を独立したセクションとして置きます。公式PDFは末尾だけでなく、受講要件や申込書類など判断に迷う場所の近くにも配置します。

公開中の情報が1件なら一覧を挟まず詳細へ直行し、複数件なら一覧を入口にします。URLに年度を入れなければ、翌年も外部リンクを維持できます。

詳細情報の可読幅を絞る

• PCでは 960〜1000px 程度を上限に中央配置する
• 表の項目名列は固定幅、内容列は可変幅にする
• スマートフォンでは横スクロールではなく縦積みにする

同じ締切が何度も出る場合も、機械的には消しません。詳細セクションが明快なら中間の要約は削り、意思決定に直結する締切と申込方法はヒーローと最終CTAに残します。

色と動きを検証する

参考画像の色は目視で合わせず、ピクセル値を測ってカラーコードを確定します。アニメーションは本文が見える状態を初期値にし、利用可能な環境だけで有効化します。

if ('IntersectionObserver' in window &&
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.documentElement.classList.add('is-animation-enabled');
}

アコーディオンの高さは実測値を切り上げ、アニメーション完了後にインラインの height と overflow を削除して auto に戻します。これで文字切れとレスポンシブ時の不整合を防げます。

配布ファイルの運用も揃える

• PDF、Word、Excelは assets/download/ に集約する
• target="_blank" には rel="noopener" を併記する
• 差し替え時はファイル名だけでなく内容とリンク先を確認する
• CSS更新時はHTML側のバージョン文字列も更新する

この型で整理すると、内容を大きく削っていないのに、以前よりページが短く感じられるようになりました。情報量そのものではなく、最初からすべてを同じ強さで見せていたことが、読む負担になっていたからです。

情報が多いページで先に決めるのは「何を消すか」ではなく、「いま判断するために何が必要か」です。最初に見る情報と、必要になったとき探せる情報を分ける。それだけでも、正確さを残したまま読みやすさをかなり変えられます。

今回は以上です。