webサイトの1ページは長くてもいい。ファーストビューに収めよ、というのは10年前の発想。

2020年07月26日 2020年11月15日

最近webディレクターと話をしていて、ページが長いので、コンテンツを開閉させるなどして、短くしようとしている、というような話を聞いた。
ただ、なぜ短くするのか？ということに対する解を持っていないように感じた。
ここでは、なぜ長いページはダメ、という風潮があるのか。
本当に長いページは悪なのか、ということを考えてみたい。

メリットデメリットあり。ページの内容による。

結論としては、そのページの内容による。
長いから悪いということはありません。
特に長くても問題ないと思われるのは、記事等の読み物ページ。
何度も繰り返し見るとかではない、読み進めて一通り読んだら終わり、というページについては少々長くても問題はない。

なぜなら、記事のページを分割してしまうと、１ページ１テーマという考えが崩れるし、何を区切りにページを分けるのか明確にすることが難しいから。

最近は、ブログ、note、まとめサイト、昔は2chなど、フロー型長いページを流し読みすることにユーザーは慣れている。
TwitterやFacebook等のSNSもそう。連続して情報を閲覧できるということは、ユーザーのメリットにもなっていると考えて良さそう。
少なくとも長いから読みにくいということはないはずです。

ページが長いからローディングが長くなるというのは誤り。

これは正直「いつの話ですかね？」という感じ。
昔は確かにページが長いとそれだけページの読み込み速度が遅くなるので、１ページのデータサイズは軽くしたほうがいい。
そのためにページも短いほうが良い、というのはある意味正解。

ページの表示スピード重要と言われるこの時代でもあるので、そこを蔑ろにはしないが、要はそのページのデータ量を何が食っているかという話で言えば、テキストデータのサイズなんぞ、気にするサイズではない。

圧縮率の低い画像、動画、バックエンドと連携した動的な処理をしている、等、本質的に考慮すべきことは別にある。

長いから「ユーザビリティ的に悪い」とは言い切れない。

ではユーザビリティ的にはどうか？
確かに長すぎるページは、その長いページの「どこにユーザーが求める情報があるか」分かりにくい。
また、SEO的に考えるなら、１ページ１テーマと言われているので、そうなっているかどうかは、検証する必要があると言える。
複数のテーマが１ページ内に凝縮されており、結果としてページが長くなっているのであれば、テーマ毎にページは分割されるべきだし、逆に1つのテーマで１ページに纏まっているのであれば、無理に分割する必要はないと考える。

クライアントはなぜ長いページを嫌うのか？

理由は大きく2つあると思っている。

まず1つ目。

「ページのデザイン」を印刷物で確認するから。

これは制作側の見せ方に問題があるんじゃないか。

長いページをそのままA3用紙などに印刷して、クライアントに持っていくと、まず「文字が読めない」。また、デザインも情報構造もよく見えないので、「印刷物上で見づらいページ」という認定を受けてしまっているケースがあるように思う。

クライアントには、是非、PCやスマホでデザインを確認してもらいたいと思うし、そういう確認手法を製作側も準備すべきだと思う。
PCでスクロールして見ると、「意外と普通に見れますね。」
という感想をもらって拍子抜けすることもある。

次に2つ目。

スマホサイトや、SNSなどの利用が少なく、クリックやタップの操作負荷がスクロールよりも重いことを理解していないから。

悲しい現実。
特にファーストビューの重要性を強く言ってくるクライアントに多い。
ファーストビューが大事なのは同意だが、だからといって、ファーストビューで全てを完結させる必要はない。
ファーストビューはあくまで概要が把握でき、印象に残す、といったことは考慮してすべきだが、具体的なコンテンツはその続きにあるべき。
細切れにすることで、「次へ」ボタンを押さないといけない、戻る時には「前へ」ボタンを押さないといけない。そして、肝心の大事なことがどのページに書いてあるか探しにくくなる。

・・・とはいえ、長いことが正義ではない。

勘違いしていただきたくないのは、ただただ長いページが正義というわけではないこと。
長いページの最大の弱点は、サマリーが把握しづらく、読み始めることに心理的な障壁があること。
そうなると大事なのは「見出し」や「ページ内目次」。
このような読みやすいブログ記事で使われているような手法を検討する必要がある。

ちなみに、見出しはSEO的にも重要とされているが、閲覧するユーザーにとっても同様。
上から順番に文字を追って行かなくても、見出しだけ読めば、そのページに記載されていることが、大まかには理解できるようにしておくと良いですね。