意識するのは3つ!見たくなる自社サイトを作成しよう

こんにちは。内定者の村越です。
皆さんは御社のサイトをご覧になられたことはありますか?
サイトを見て、皆さんが御社の商品やサービスを購入したくなるページになっているでしょうか。
また競合他社のサイトと比較していかがでしょう。
「分かりにくいな」
「リニューアルしたい」
「自分でもっとユーザーに見てもらえるサイトを作ってみたい!」

このように感じられた方必見!!
サイトを作るなんてできない?いやいや、難しい内容は一切ございません。サイト制作初心者の方でも少し意識してもらうだけで簡単に見やすいサイトが作れるポイントをご紹介。
ぜひ最後までご覧ください!

ストレスフリーなレイアウト

1.文字位置

まずはこちらを見てください。

一行の文字数も配置もばらばら。これではほとんど内容が頭に入ってきませんよね。不規則な配置では、ユーザーにストレスを与えてしまいます。そこで意識してほしいポイントが

原則、文字や画像の配置は「左揃え」


いかがでしょう。文の先頭が左に揃っただけでこんなにも読みやすくなりましたよね。ストレスを感じないので内容も自然に入ってきます。
また左に統一されることで視線移動もほとんどないため、見出しなどの情報も見落とされる可能性が低くなります。
確実に情報を伝えるために、文字は左に揃えることを意識しましょう。

Zの法則

一般的に人は、左上からモノを見始めます。
それから右上→左下→右下の順となり、人の視点がZを描くことから
Zの法則と呼ばれています。

ユーザ―が初めて目にした内容がサイトの印象を左右するため、
一番伝えたい情報を左上に配置することが訴求力を上げるために効果的です。
ちなみにこちらの法則はチラシなどでも多く活用されており、基本的かつ効果的な方法です。

Fの法則

こちらもZの法則と同様に視線が左上→右上→左下…となりますが、その後も左→右を繰り返しながらページの下へと目線が移っていきます。

図のように視線の動きがFを描くことから、この法則をFの法則と呼びます。
こちらの法則は紙媒体よりもWEBサイトで多く見られます。

Zの法則・Fの法則と2つの法則を紹介しましたが、
共通点は左を始点にして視線が右→左と順に移動することです。
これをもとに重要度の高いものから順に配置をすると効果的なサイトに変わるでしょう。

普段サイトを見る際はレイアウトのことはほとんど意識していないと思います。それはストレスを感じるレイアウトになっていないということですね。しかし、もしも文字や画像がサイト内に不規則に散らばっていたら、読みにくいと感じすぐに離脱してしまうでしょう。

離脱をさせないために【左揃え】や【Fの法則】を意識して製作してみてください。

フォントカラー

「黒一色だと堅苦しい」
「単調だな」
このように感じて
ポップなイメージを持たせるために、カラフルな色使いを用いることもあるかと思います。しかし、それ注意です⚠

様々な色が合わさったために統一感がなくなり、色がサイト内に散らばって見えます。そのためユーザーは個々の色ないし文字に目がいってしまい
「肝心の内容が頭に入ってこない」なんてことも。

色は見た目を良くするだけでなく、情報を的確に伝える役割も担っています。情報をユーザーに届けるためにも、まずは以下2点を決めましょう。

1.基準となる色を設定

御社のイメージカラーがあればその色を設定してみましょう。そうでなければ、自社の商品やサービスのイメージに合った色を選定するとよりユーザーに伝わりやすくなります。

2.コンセプトを設定

今回作成するサイトのイメージに合わせて色を選定していきましょう。

例えば、
このように同系色を使用することで洗練された印象を与えます。

デザインの経験がない方にも比較的まとめやすい配色です。

同系色と反対に、補色(正反対の色)を使用することでダイナミックかつカジュアルな印象を与えます。

この場合ののように補色を少なく使用することで、メイン色であるがより際立つ効果を持ち合わせています。

より興味を惹きつけるために

主に黄、黄赤、赤などの高彩度かつ暖色系のような誘目性の高い色を使用することで、相手の関心を惹くことができます。

危険や緊急性を周知するために効果的で、セールを伝える際にも適しています。

お問い合わせや購入に導くアイコンには視認性を意識してみてください。

誰でも見つけやすい配色にすることが重要です。
そのためには、背景と文字のコントラストを強くしましょう。
例えば背景色は明るさを落とし、文字は白を使用すると分かりやすくなります。

色見本帳などネットで識別できるだけでも何千色とあるため、サイトで使用する色を決めるだけでも迷ってしまうでしょう。
そこでまずは、コンセプトを決め、テキストにある色を当てはめてみましょう。それだけでも印象はガラッと変わるので初めは拘り過ぎず、まずは試してみてください。

フォント

1.フォントサイズ

基本は8~10ポイント以上の大きさにしましょう。
12ポイントあるとより読みやすくなります。サイトのターゲットが高齢者や小学生くらいの層向けであれば、12ポイント以上の大きめサイズに設定することで、判読性を高められます。

フォント

明朝体とゴシック体のどちらかに分けられます。


明朝体:強弱があることから文字を判別しやすく、スムーズに読みやすいという特徴があります。また横線が細いため、軽やかで明るい印象を与えます。

ゴシック体:線の太さが統一されており、明朝体に比べてインパクトがあり自然と目に入ってくるという特徴があります。簡潔に伝える文章やキャッチコピーに使われる場合が多いです。

フォントやフォントサイズを変えるだけでも、ターゲットに魅力的に映るかが変わってきます。例えば小学生向けのサイトを作る時、会議資料によく使用される明朝体を提示するよりも、ポップ調のフォントに変えた方が、最後まで興味をもって見てもらえるでしょう。

ターゲットやコンセプトに合わせてフォントやサイズを変えてみてください。

まとめ

いかがでしたか。
見やすいサイトを作りたいという思いはあっても、サイトを1から作成するのは難しいと思います。
しかし今回ご紹介したものに難しいものはありません!
【レイアウト】【フォントカラー】【フォント】これら3つのポイントを少し意識するだけで、お客様によく見ていただけるサイトに早変わりします!
ぜひお試しください。

参考:LISKUL
   販促伝説

参考になったらシェアをお願いします!