レスポンシブWebデザインでホームページを作成する際はもちろんですが、もしかすると、従来のホームページ作成でも見落とされていたのではないかと感じることがあります。

それが、サイドバー(サイドメニュー)の構成と意図です。

そもそも2カラム以上になぜレイアウトするのか

レスポンシブWebデザインでホームページを作成する際には、「モバイルファースト」といって、スマートフォンなどのモバイル端末で閲覧されることを第一に想定して、ホームページの作成が行なわれます。

なぜそのような、スタイルでホームページを作成するかについては、『レスポンシブWebデザインのメリット』をご覧下さい。このホームページもそうですが、例に挙げている画像のサイトもTOPページは1カラムで構成されており、サブページが右サイドバーの2カラムとなっています。

そして、当たり前のことですが、スマートフォンビュー(スマートフォンで閲覧したときのレイアウト)は、1カラム表示で、PCビューのサイドバーは、フッターの上部に表示されるようになります(上部画像の青矢印)。

実際にこのサイトをパソコンとスマートフォンで見比べてみてください。

もう、勘の良い人ならお気づきのことと思いますが、サイドバーの位置づけは、レイアウトからも分かるように、フッターの上部に過ぎないわけなのです。ホームページ作成の打合せを進める中で、サイドバーに資料請求やメルマガ登録などのバナー設置をご要望される人は少なくありません。

ホームページ作成の基本的な考え方はこれまでパソコンでホームページを閲覧されたさいの目の動きがアルファベットの「Z」や「F」ような動きをしていたため、右上部に顧客化に繋がるようなコンテンツへの入り口(バナーやフォーム)を設置するというレイアウトが流行しました。

しかし、レスポンシブデザインでホームページを作成した場合。パソコンでの見た目は従来の「Z」や「F」の法則に準じたレイアウトになるのですが、モバイルビューになった途端に、そのサイドバーの最上部(閲覧者の視線が初めに止まる位置)はフッターとほぼ変わらなくなってしまいます。果たして、従来通り右カラムの上部に、注目させたいコンテンツを配置すると言う考え方のままで良いのでしょうか…。

更に、上の画像を見ていただいても分かる通り、レスポンシブWebデザインはホームページの幅(約1000px)をスマートフォンの横幅(約360pxなど)に可変させ表示させますので、横に並ぶ文字数も変更され、その分縦に長いホームページになってしまいます。サイドバーが長ければそれだけ、モバイルビューのレイアウトも長くなるというわけなのです。








長いページは読まれない?

このようにレスポンシブWebデザインのレイアウトを考えていくとコンテンツの配置で悩んだ先には、また新たな悩みと言いますか疑問が出てきます。それが「長いページは読まれない」のではないかと言う不安と言うか疑問です。

その不安に回答するとすれば、今、あなたはここまで約1200文字をお読み頂いています。PCでもスマートフォンでも結構な長さになっていることでしょう。結論だけをお伝えすれば、興味を持ってくださる人はお読み頂け、そうでない人は途中で離脱する。ということなのです。

さて、ここでも戻ります。

資料請求やメールマガジンへの登録、その他、コンバージョンへショートカットさせるようなバナーなどをサイドバーに配置することは有益でしょうか。それとも他に戦略を考えなければならないでしょうか。

このことについては、ホームページの役割やどのような経路でアクセスさせるか、SEO的な側面と、そのページが持つLPO的な要素によって配置は異なってきます。これらのことは、1つのコラムではお伝えしきれませんので、今回「サイドバーの役割」というカテゴリーを設けましたので、数回の記事にわけポイントを抑えながらお伝えしていきたいと思います。

レスポンシブWebデザインでホームページの構成を考えると

  1. サイドバーの位置付けは、従来の「Z」や「F」の法則は通用しない。

【答えがすぐに欲しい方へ】

私がこれまで作成してきたレスポンシブWebデザインのホームページでは、常に一定の役割としてのみサイドバーの構成を行い、一部のサイトでは、サブページであってもサイドバーがないページなども用途によって使い分けています。