「ごちゃごちゃしているのでもっと見やすい、使いやすいWEBサイトにしたい」
「できるだけたくさんWEBサイトに書いておきたいが読みづらくなると離脱が多くなるかもと不安」
このように読みやすさや見やすさ、スマホからの操作性と情報量のバランスについてWEBサイト制作やリニューアル時に悩まれている方も多くいらっしゃいます。
たくさん情報をWEBサイトに書いておき読んでもらいたい、というご希望も理解できますし、文章がずらずらと並んでいたら読みづらいという訪問者様のお気持ちもわかります。
またSEO対策としては、ページ内にたくさんの文章があったほうがよいのか？、それとも離脱が多くなれば評価は下がってしまうのか？など悩むポイントもあります。SEOとデザイン（操作性）は関係があり、Googleもデザインに関するガイドラインを出しています。
https://design.google/
○たくさんの情報を読みやすくする対策はある
情報量を減らさず、読みやすさ、見やすさを追求し、訪問者さまの滞在時間を長くしたり、SEO対策をしたりすることは可能です。
今回の記事ではその対策についてまとめます。大きく分けて3つの対策をご紹介します。いますでにお持ちのWEBサイトにも活用できる対策ですので、御参考にしていただければ幸いです。
■UIデザイン（ユーザーインターフェースデザイン）とも
このように訪問者さまの目に触れる部分（液晶画面に写っている部分）の見せ方や操作性のことをまとめてUI（ユーザーインターフェース）といいます。訪問者さまにWEBサイトをどう見せるか考え、作り込んでいくことをUIデザインといいます。
UIデザインは「おしゃれ」や「かっこいい」とは少し違う視点で、「使いやすいか」「読みやすいか」「操作しやすいか」などを考えます。
新規制作やリニューアルで制作会社さんに相談される場合は「UIデザインについて」とお伝えいただくと、意図が伝わりやすくスムーズだと思います。
対策１．今あるWEBサイトにもすぐ活かせる「余白」を活用
文字や画像の隙間である「余白」の取り方も読みやすさを向上させる方法の一つです。
参考：https://www.kurokawaonsen.or.jp/
余白はWEBサイトの作成時にCSS（スタイルシート）で調整しています。コードでいうと、paddingやmargin、line-heightなどのタグを主に使い、「どれくらい空けて表示させるか」の設定をしています。
余白を工夫すると、たくさん文字や写真が並んでいても視認性が向上し、文章や写真を削らなくても読みやすくすることができます。また、デザインはそのままでも情報がひとかたまりに見えたり、関連性があるように見えたりします。
これまで何となく空けていたものを、「ここを読んでほしいから読みやすい余白にするため、これだけのスペースを空ける」と目的を持って設定するだけでもずいぶん変わります。
デザインはそのままで、デザインが崩れない範囲で余白を調整するなどすれば大規模なリニューアルも必要ありません。
簡単なようで答えがはっきりありませんので試行錯誤が必要かもしれません。けれど少し調整して訪問者様の反応を確認する、また調整…と繰り返せば、よりよくなっていくことは間違いありません。少しずつでも継続して修正していくことをオススメ致します。
対策２．メニューや画像の「レイアウト」を変更する
レイアウトは画面上の要素（コンテンツ）の並び方を指します。
内容は同じでも、画像の並び方を変更したり、文字を右に出すか左に出すかなど位置を変えたりするだけでも読みやすく、見やすくなります。
特にWordPressで作成したWEBサイトは、「ウィジェット」機能を使うことで簡単にレイアウトが変更できます。
参考：https://ja.wordpress.org/support/article/appearance-widgets-screen/
レイアウトはトレンドもありますし、レスポンシブデザインを採用の場合はパソコン（PC）とスマホでも見え方が異なりますので修正は慎重に行う必要があります。しかし、同じ内容のまま、ネットニュースのように読ませる、コーポレートサイトとして読ませる、雑誌のように読ませるなど印象を変えることができます。
近年はモバイルファーストが進んでいるため、スマホやタブレットから読みやすいレイアウトを優先して制作します。もしモバイルファーストが言われる前に作成したWEBサイトであれば、モバイルファーストのレイアウトを実装する（→スマホ専用ページをつくる、デザインリニューアルをするなど）だけでも訪問者様が読みやすくなるかもしれません。
参考：https://developers.google.com/search/docs/advanced/mobile/resources-mobile-friendly?hl=ja
過去記事にもスマホからの表示を変更していくことによるメリットをまとめていますので、よろしければご一読ください。
→スマホ表示最適化の重要性〜売上や問い合わせの数もアップ〜
対策３．”動き”を利用して「情報量のバランス」を取る
WEBサイトを表示させるスペースには限界があり、たくさんの情報を載せようと思うと縦に長くなってしまう弊害があります。
あまりに長いと”どこに何があるのか”わからず、訪問者様がスクロールしている途中で諦めて離脱してしまうこともあります。
けれど、たくさん情報を載せておかなければならない…そんなときに”動きのあるデザイン”がオススメです。例えば情報を隠しおき、見たい方にはクリックやフリックなどのアクションで続きを見てもらう、といったことができます。
よく見かけるのは「タブ」「スライドショー（スライダー）」「アコーディオン」「オーバーレイ」など。これら動きのあるデザインは、JavaScript、jQuery（ジェイクエリー）といわれるプログラミング技術を使っています。
ズラズラと縦に長くなってしまいそうなページをつくるときに「この部分をタブやアコーディオンで表示できませんか？」と制作スタッフと相談されるとよいと思います。
以下の参考サイトで動きをご確認ください。スマホから閲覧いただくとより動きがわかりやすいページが多いです。
○タブ
参考：https://www.yahoo.co.jp/
ニュースのカテゴリをタブにして、タップ（クリック）することで読みたいカテゴリに移動できます。ニュースが多くても減らさず読んでもらえます。
○スライドショー（スライダー）
参考：https://www.rakuten.co.jp/
ショッピングサイトや観光サイトでの採用率が高いです。PRしたい特集が多いとき、訪問者様の目的が多岐にわたるときに便利です。
○アコーディオン
参考：https://ja.wikipedia.org/wiki/%E7%86%8A%E6%9C%AC%E7%9C%8C
ウィキペディアは各項目の文章が長いので、アコーディオン表示が採用されています。全体の文章が長くてもページ内に何が書いているか一目瞭然で、読みたいところを選んで読み進められます。
○オーバーレイ
参考：https://www.suntory-kenko.com/sp/contents/ad/40/lst/supplement_g/id_01a/
ページから離れるときに画面がフワッと現れます。ページから戻ることを引き止めたり、お得な情報を見せて別ページに誘導したりと、離脱させない工夫として使われることが多いです。
■隠すことでSEO対策効果が減少する？
タブやアコーディオン表示はSEO対策としてデメリットが多いのでは？と議論されることも多いです。隠していることで「文章が少ない」と検索エンジンから判断されるのではと考えられますし、実際過去には隠れている部分が読まれないこともありました。
しかし、現在はプログラミングの技術で隠された文章も、しっかり検索エンジンが読み取ってくれます。「訪問者様が読みやすく、滞在時間や閲覧ページ数が多くなるWEBサイト」を目指すことで、SEO対策に結びつきます。
まとめ
文章が多いことは直接WEBサイトにとってデメリットにはなりませんが、読みづらいことによって訪問者様が離脱したり閲覧するページ数が減少したりすると、WEBサイトの評価は下がってきます。
「どうやって読みやすくしようか」と考え、読みやすく、使いやすいWEBサイトをできるところから心がけていってください。もしデザイン変更やリニューアルが難しければ、記事内で紹介しました「余白」をうまく使えないか、まずはそこからご検討ください。