目次
はじめに
こんにちは、担当の田中です。
過ごしやすい秋の季節も過ぎ気味で、早くも寒さがやってきましたね。
うっかり風邪などひかれぬようお気を付けください。
読書の秋かは微妙ですが、最近はファッション雑誌などを読む機会が増えました。
純粋に内容を楽しむと共に、デザイン視点の勉強にもなっています。
見出しや文字サイズ、目につく色味、写真の切り抜き方、配置…などなどあげるときりがない位、WEBデザインにも応用できそうな部分が多くあり新たな気付きとなっています。
しかし、１つのページに複数のコンテンツを並べる、という点は同じですが、ホームページは雑誌やポスターと違って、ページの区切りも縦横比の制限もありません。
では、いかに分かりやすく要素をまとめているのか？
ということで、今回は『ホームページの区切り方』についてお話したいと思います。
区切りの種類
ホームページを区切ることの役割は、『ページを全体を見やすくする』『見たい情報を分かりやすくする』などがあります。
意識せずにデザインを作ってしまうと、下図のような誰も見たがらないホームページになってしまいます…。
それでは、どのような”区切る”方法があるのか、いくつかご紹介致します。
『線を引く』・・・高さや幅を統一して線で区切ります。線の幅を短くしても効果的です。
『空白・配置で分ける』・・・空白の高さを統一して、空間を区切ります。シンプルにまとめたい時、出来るだけ装飾を減らしたい時（背景色を減らし写真をメインにしたい時）などに使われます。
『シャドウを使う』・・・立体を途中にいれることで、空間の区切りが表現できます。多用すると違和感が出るので入れ具合には注意が必要です。
更に、もっとデザイン要素を入れてみると写真と相まって楽しいホームページへ仕上げることが出来ます。
『画像で分ける』・・・背景に画像を配置します。画像だらけだと、目が疲れてしまう場合があるので、途中シンプルに色を挟んでみるのも良いですね。
『色味で分ける』・・・シンプルで分かりやすい方法です。多く（3色以上）色を使いすぎるとがちゃがちゃしたまとまりのないページになってしまうので注意です。
『模様やパターンで分ける』・・・区切りを斜めにカットして表してみるのも効果的です。
意識すること
経験上ですが、延々と長いホームページって見るの途中で飽きてしまいますよね。。。
また、知りたい所にすぐいけない！そもそも見づらい！となると次のページを見るのを諦めてしまうことも。
これは『直帰率（サイトに訪れて到着したページからそのまま離脱してしまう人の割合）』に関わってきます。
パソコンとスマホでは、画面のサイズ的に見え方が大幅に違いますが、SEOの観点からパソコンで見た時もスマホで見た時も情報の差があってはいけません。
でも、スマホだと画面幅が狭くなる上に、パソコンと同じだけ情報量を載せるとなると、横幅が狭まる分長さはどんどん縦へ伸びていき……とデザイン面で悩むことも多いと思われます…。
そこで今回の空間を”区切る”ことを意識することで、情報を上手くまとめ、多くの方に見てもらえる良いホームページ作りへと繋がっていくと思います。
弊社はアクセスしてきた人が、いかに『見やすく』『分かりやすく』情報を知れるのかを考えて制作します。
まとめ
いかがでしたか？
これからもお役に立つ、見やすく分かりやすいホームページを提供できるよう、精進いたします！
