コンテンツの高さを考慮する
Webサイトはほとんどが画面内に全て納める事ができず、スクロールさせて全体を見せます。
これは紙面と違って、表示させる画面のサイズが人によって異なるので仕方のない事ですね。
そんなWebサイトを作成する時、右(左)にバナーや会社案内など、サブ的なコンテンツを設ける事も多いと思います。
スクロールする場合がほとんどなので、ページの下に行くと、右(左)に余白が出来てしまいますね・・・
「こういうものだ」と割り切ることもできますが、「スクロールについてくるようにしたいなぁ」と思ってしまいますね。
そんな時はJavaScriptやCSSを駆使して実現させていくのですが、Webサイトのデザイン段階で注意すべきポイントがあります。
ついてくるようにするコンテンツの高さに注意
スクロールについてくるようにするコンテンツの高さについて、充分注意する必要があります。
あまりにも長いと、下に配置した要素が画面内に表示できません。
ブラウザの上部に張り付くようにCSSで指定する事で、スクロールについてくるようにできます。
つまり表示位置を固定しているんです。位置を固定している為、画面からはみ出た分はいつまでスクロールしても画面内に出ることはありません。
スクロールについてくるようにする事で、ページ全体の「情報が詰まってる感」「ギッシリ感」を出す事が出来ます。
ですが見た目を気にするあまり、機能が果たせなければ意味がありません。
クリックして欲しくて配置したバナーや、Webサイト上から外せないコンテンツ、許可番号等の情報を配置してあったとしたら、これでは意味がありませんね。
スクロールについてくるようにする以前に、コンテンツ全体の高さを抑える工夫をしたり、サイトの構造を見直し、1ページに詰め込む情報量を整理して複数ページに分ける等、デザイン段階の見直しも考慮してみてください。
どうしてもコンテンツが長くなり、スクロールした時に左右のコンテンツが追従するデザインにしたい場合、コンテンツの高さに十分注意して、掲載すべき情報が収まるように配置をしてみましょう。
その時、自分の今見ている画面に収まっているからといって安心してはいけません。
Webサイトを見る方の画面サイズは様々です。
また、ブラウザにたくさんのプラグインを入れていて、メニューの領域が高く、Webサイトを表示するエリアが狭くなってしまっていることも考えられます・・・
全てのパターンを網羅しようとすると対応できない部分がどうしても出来てしまいます・・・
ある程度から妥協する事になってしまいますが、多くの方に正しく見てもらえるよう、「見ている人の環境は様々なである」という事を忘れずにWebサイトの設計をしてください。
まとめ
・スクロールについてくるコンテンツの高さに注意する
・長すぎるとブラウザの表示領域からはみ出し、見る事ができない
・Webサイトを表示させる画面の大きさは見ている人でそれぞれ異なる