ホームページデザインのコツ、知っておくべき7点。

ホームページデザインのコツ、知っておくべき7点。

ホームページデザインのコツで、知っておくべき7点を説明します。読者対象は、成果のあがるホームページデザインが知りたい方です。ホームページにおけるデザインの重要ポイントだけでなく、集客への影響も説明しています。

ホームページのデザインを知る意味とは?

まず、ホームページのデザインについて、ポイントを考えてみましょう。ホームページのデザインには、全体の形・カラム数・レイアウト・色(配色)・画像・バナー・文字サイズ・行間隔など、様々な要素があります。そして、これらを組み合わせて、一つのデザインにまとめ上げます。

では、具体的にどのようなホームページデザインが良いのかというと、「訴求すべき内容をどれだけ引き立てられるか」という一点になると思います。ホームページの集客力に影響を与えるのは、中身の出来が大部分ですから、中身の邪魔をしてはいけないわけです。

つまり、ホームページのデザインは、いかに中身を引き立てて魅力を引き出せるかという視点が重要になります。そこで、どのような点に注意すればよいのか、コツを見ていきましょう。

ホームページのデザインで、知っておくべきポイント。

それでは、ホームページのデザインで、知っておくべきポイントを説明します。ポイントは7つありますので、しっかりと頭に入れてください。

全体の形やカラム数はどうする?

ホームページ全体の形について考えてみましょう。特殊で、奇をてらったものは避けてください。なぜなら、デザインに目がいってしまい、内容が頭に入らないからです。これでは本末転倒になってしまいますので、注意してください。

また、中途半端に変わったデザインや新しい形にしてしまうと、操作方法が一目では分かりません。訪問者は一目で分からないと、「なんだこのサイトは、どこをクリック(タップ)したらページが表示されるんだ?」なんてことになりかねません。

ところで形と言えば、カラム数が一つのポイントになると思います。1・2・3カラムの3種類があるのはご存じだと思います。さらに、2カラムはメニューカラムを左右のどちらに置くかという違いもありますから、全部で4種類になりますね。では、どれを選ばいいんでしょうか?

これは用途で別けます。例えば、ランディングページ(集客用ページ)やスマホがメインであれば、1カラムが適します。また、通販サイトやカタログサイトのように、複数のページを見せる場合は左メニューの2カラムが適します。逆に文章がメインなら、右メニューの2カラムです。

なお、3カラムはあまりお勧めしません。これは、左右にメニューやバナーがあるとうるさくなってしまい、閲覧者が集中して内容を読めないからです。

このように、特殊なデザインと3カラムは避け、用途に応じて1カラムと2カラム(左右)をうまく使い分けてください。これで、閲覧者の心理に合わせて、中身の魅力を引き出せると思います。

レイアウトはどう考える?

レイアウトはどう考えたらよいのでしょうか? レイアウトとは、メニューの位置、本文の位置、画像の位置など、配置のことを指しますが、どの位置に置くのが良いかはケースバイケースです。なぜなら、サイトの使われ方に大きく影響するからです。

それでも、あえて言うなら、平凡なものがベストです。とにかく、使いにくくなってしまうものは避けてください。使いにくいと感じた瞬間にお客さんは去ってしまいますから。デザインを追求しすぎると、どうしても使いにくいレイアウトになってしまいがちです。

いわゆる、カッコいいスタイリッシュなデザイン程度ならよいかもしれないですが、それでも「一目見て操作がわからない」ものは避けるべきです。つまり、レイアウトは、見慣れた使いやすいものが一番であるということなんです。

もし、平凡なものと言われてピンとこない場合は、いろいろなサイトを見て平均をとってみてください。おおよそ何がどこにあるというのが、見えてくると思いますよ。

色合いや配色はどうする?

色合いや配色はどうすればよいのでしょうか? これは、それなりに考えなくてはいけないと思います。なぜなら、デザインで集客力をアップできる可能性があるのは、色だからです。したがって、色については、研究してこだわっても無駄にはなりません。

例えば、 Firefox の公式サイトでは、ボタンの色を変えただけで劇的にダウンロード数が増えたという実績があります。他にも、ボタンの色を変えて大きく影響が出た例は多数あります。したがって、色が集客に影響を与える可能性は高いと言えます。

具体的な考え方ですが、色にはなんとなくイメージがあるので、業種に合わせて色合いを考える必要があるでしょう。例えば、銀行は緑色が多いとか、医療関係なら青色が多いとかあるんです。要するに、信頼とか安心とか、色から感じるものがあるらしいんです。

全体的なトーンとして、色合いを業種ごとに考えるとよいかもしれないですね。ネットで検索すると結構いろいろと出てくるので、興味がある方は調べてみてください。そして、自分のサイトに適切な色を見つけ出してください。

ザックリというと、明るく元気な方が訪れるサイトであれば暖色系で、悩みや困りごとを抱えた方が訪れるサイトであれば寒色系が基本になると思います。それを基本にすれば、目安になるのではないでしょうか。

画像の扱い方とは?

画像の扱い方について説明します。画像は、説明文を補足する存在であると考えてください。なぜなら、主役は文章だからです。文字情報なしにはどうしても詳細は伝えきれません。したがって、画像の使いどころは、「これ以上の文章による説明は無理だ」と思った時です。

ただし、物を販売している場合は商品写真が必要ですし、サービスであればサービスを提供している風景の写真が必要です。画像に表せないサービスであれば、それを想起させるようなものを用意します。画像は、あくまでも文章を補足し、イメージしやすくする補助として考えましょう。

なお、商品と直接関係しないような説明やブログなどの場合は、ページの上部に何らかの画像を入れるようにしてください。これはアイキャッチと言って、読み始めの弾みをつけるものです。なお、画像の種類は問いませんので、なにか1枚挿入できればそれで構いませんよ。

バナーの作り方とは?

バナーの作り方における注意点は、文字サイズと色合いです。例えば、重要な部分を大きくしたり目立つ色にするといったことが必要です。また、バナーは目立たせるのが基本ですが、色の使い方がおかしいと悪目立ちしてしまいますので、注意が必要です。

実は、バナーでデザイン上注意するところはこれぐらいしかありません。なぜなら、重要なのは「何を書くのか」という内容と、「どこに置くか」という配置だからです。どんな説明を書けば注目してもらえるのか、どこに配置すれば目立つのかよく考える必要があります。

これはケースバイケースなので、ザックリとしか言えませんが、

  • 内容・・・誰の何を解決できるのかを明確にし、魅力をしっかり引き出すこと。
  • 配置・・・文章の初めや終わり、メニューカラムなら最上部に置くこと。

などが基本になるでしょう。内容によっては、説明の途中においた方がクリックされやすい場合もありますので、ここなら間違いないという配置はありません。実験を繰り返しながら、最適な場所を見つける必要があるでしょう。

このように、バナーはデザインではなく内容と配置が重要ですので、あまりデザインに固執しないように注意しましょう。

文字サイズ・行間隔はどうする?

デザインで、最も気を配っていただきたいのが、文字サイズや行間隔です。なぜなら、ホームページは文章が基本だからです。しっかりとした説明を行うと、どうしてもある程度の長さになりますが、それを気持ちよく読んでもらうためには、文字サイズや行間隔が非常に重要です。

文字サイズは、おそらく15ポイント以上あるほうが良いでしょう。あまりに細かいサイズだと、とても読む気にならないからです。逆に、大きすぎると中身が無いことをごまかしているように思われてしまいますので、そこは注意してさじ加減してください。

また、行間隔は1行半以上は開けたほうが良いと思います。こちらも、詰まっているとごちゃごちゃして読みにくいからです。また、開きすぎるとやはり内容がスカスカに感じてしまいますので、加減を注意してください。段落の間隔は、さらにその倍は開けましょう。

このように、読みやすい文字サイズと行間隔になるよう、調整してください。

見出しのデザインはどうするのか?

見出しのデザインには、次のようなポイントがあります。なお、ここで言う見出しとは、H1~H6 のタグで表される部分のことを指します。

  • 本文と区別ができること
  • 華美にならない事
  • デザインではなく内容で興味を引くこと

まず、文字サイズはやや大きめが良いと思います。少なくとも本文と同じ大きさにはしないようにしましょう。そうしないと、本文と区別がつきませんからね。また、あまり華美(派手)なものにしないようにしましょう。なぜなら、デザインで目立っても意味が無いからです。

特に見出しの場合は、新しい話の始まりの意味がありますから、デザインに凝っても仕方がないと言えます。それよりも「どんな話が読めるのか?」という、期待を閲覧者にさせることが重要です。せいぜいで、左端や下に色つきのラインを入れる程度ではないでしょうか。

文字サイズ以外では、前後のマージンをやや大きく取ると、より見出しらしくなると思います。繰り返しますが、見出しはあくまでも、話の始まりを知らせる区切りのような役割です。見た目で興味を引くのではなく、内容で興味を引くようにしてください。

まとめ:デザインのコツは、中身が伝わることです。

いかがでしたか? ホームページデザインのコツ、知っておくべき7点を説明しました。

今回説明したのは、全体の形やカラム数はどうする?、レイアウトはどう考える?、色合いや配色はどうする?、画像の扱い方とは?、バナーの作り方とは?、文字サイズ・行間隔はどうする?、結局デザインは力を入れなくてもいいのか?、などのポイントでした。

ここまで、内容を引き立てるためにデザインを考えてほしいと伝えてきました。すると、「デザインはシンプルが一番ですね」と思われる方が少なくありませんが、そのような意味ではないんです。お分かり頂きたいのは、内容に合わせたデザインが重要だということです。

具体的には、「うちの商品は文章でしっかり説明すべきだから、シンプルが一番だ。」という場合があれば、「うちの商品は感覚を重視すべきだから、画像中心で派手にしよう。」という場合もあります。だから、内容によってデザインが決まるんですね。

したがって、デザインだけ先行しても成果はあがらないんです。あくまでも、内容の魅力を引き立て伝わりやすくするのがホームページのデザインです。最初にしっかりとした内容を作って、それに見合ったデザインを心がけてください。それがデザインのコツですよ。

以上、「ホームページデザインのコツ、知っておくべき7点。」と題して説明しました。