前回の記事「ホームページ作成の勘所①設計および企画編」の続編となります。
ホームページの企画はできましたか。今回はトップページのイメージを作っていきます。コンセプトがわかりやすく一瞬で伝わるかを考えていきましょう。
目次
- ホームページにやってきたユーザーはまずどこを見るのか？
- 訪問者にとって最も重要な情報を提供できれ入るか？
- コンバージョンに向かってユーザーの不安を解消する構成になっているか？
- カラーバランスは取れているか？
- 文字のサイズはバラバラになっていないか？
ホームページにやってきたユーザーはまずどこを見るのか
ヤコブ・ニールセン博士の研究では、左上から右へそして下に移動して右を見ます。その動きがアルファベットのFのようであるから、Fラインと呼ばれています。
ヤコブ・ニールセン（Jakob Nielsen, Ph.D.、1957年 – ）は、デンマーク出身のアメリカの工学博士。主にウェブサイトにおける、ユーザビリティ（使いやすさ）研究の第一人者。
引用元：wikiヤコブ・ニールセン
この話は結構有名なのでいろいろな書籍やブログで紹介されています。
このことから、重要な情報は左上に配置することが有効な方法となります。
訪問者にとって最も重要な情報を提供できれ入るか？
では、Fラインに沿って訪問者が求めている文章を入れることができているか考えていくことが重要になります。ホームページ作成の勘所１でも紹介しましたが、ターゲットが何を求めて、検索キーワードを入力するかを想像してキャッチコピーを配置するのが最も効果的な方法です。
コンバージョンに向かってユーザーの不安を解消する構成になっているか？
前回の記事でも書きましたが、訪問者はほとんど記事を読みません。このことを前提にホームページを作る必要があります。ホームページをある特定の検索キーワードで訪れた方は、その目的が解決されないなら、即違うホームページに行ってしまいます。
私たちができることはどのページから訪問者がやってくるのかを調べること。
どんなキーワードでやってくるのか想像すること。
解決できると伝えるキャッチコピーをFライン上に書くこと。
サービスを導入したあと何が手に入るのか（どうなるのか）を伝えること。
申し込みボタンを必ず設定すること。
カラーバランスは取れているか？
ターゲットによって色使いを考えていきます。暖色系なのか寒色系なのか紹介する商品や業種によって変える必要があります。たとえば、士業などでしたら信頼感を持ってもらえる様な濃いブルーやダークブラウンなどがいいかもしれません。寒色系は落ち着いたイメージを連想させるといいます。
暖色系は温かさやポップな活動的なイメージを連想させます。ホームページのカラーを決める際の基本は、たくさんの色を使わず基本色を３から４色として事前に決めておくことです。
とはいえ、カラーを決めるのはなかなか難しいので最初は自分が好きなホームページを参考にするのがいいでしょう。
また、デザインを学んだことがなくても最適な色を選ぶことができるウェブサービスもたくさんあります。
ウェブカラーの心理効果による効果などまとめ
ホームページのカラー選びで役立つWebサイト・ツール
にまとめていますので、参考にしてください。
文字のサイズはバラバラになっていないか？
文字サイズも３から４に統一するべきです。記事のメインコンテンツ部分を中心に、小さいサイズ、見出しのサイズ、キャッチコピーのサイズなど統一感が出て読みやすいホームページになります。
日本人に読みやすい文字サイズは14px（0.88em）から16px（1em）といわれています。
文字が小さいと全体的にキッチリとしたイメージになり、文字サイズが大きいとデザイン的にはあまり見栄えが良い感じではないと思います。サイドバーのない1カラムデザインに向いていると思います。２カラムでは14pxを中心に作っていくといいでしょう。
まとめ
売れるホームページ（わかりやすいホームページ）を作るには訪問者の視線部分にマッチした情報を掲載することと、色のバランス・文字のバランスを統一するだけでかなり大丈夫な範囲に収めることができます。
このようなことを基本として制作を進めることで売上の上がるホームページを作ることができると思います。
完成後は試行錯誤を繰り返してキャッチコピーや記事の構成などを見直しながらベストな方法を探していくスタンスが重要になります。
