WEBデザインのヘッダーは超重要!
ネットサーフィンしていて、
ふと気になるサイトを見つけてページを開くことはありませんか?
サイトの第一印象はトップページで決まります。
ユーザーはサイトを閲覧するとき、どんな情報があるのか、読みすすめるべきかなどを3秒以内に決めると言われています。もし3秒で「何か違う」と判断すれば、すぐに離脱してしまうのです。
ヘッダーのデザインが、サイトの滞在時間に影響したり、お申込みなどの行動を取ってもらえるかどうかが決まるので、使いやすさが考慮された設計と、ユーザーの目を引き付けるデザインが必要です。
今回は、人を引きつける魅力的なヘッダーを制作する4つのポイントをご紹介。
ターゲットを決める
WEBサイトは、ホームページやSNSを検索したユーザーの興味を引き、申し込みや購買などの行動に移してもらうことを意識してデザインする必要があります。
例えば、化粧品のサイトで、20代がターゲットとしたらフレッシュさや透明感など若々しさのサイトデザインがイメージされます。
そうすると、白や青をメインにして、黄色のアクサンとカラーを使ったり、明るいトーンで透明感を出したり……と方向性が決まってきますよね。
また、40代女性がターゲットだとしたらアンチエイジングなどちょっと高級な化粧品をイメージされます。そうなると、黒や紫、ゴールドなどを使った落ち着きとゴージャス感のあるデザインがイメージされます。
このようにターゲットを決めることで、デザインの方向性が見えてきます。
WEBサイトとのバランスを意識する
WEBページ全体とヘッダーのテイストが合っているかどうかを意識しましょう。
企業には、伝えたいイメージや決められたコーポ―レートカラーがあるので、そこから外れないようなテイストでヘッダーも制作する必要があります。
また、企業の採用サイトを見てみると、スタイリッシュな青を基調としたサイトや赤を基調とした力強いサイトが多く存在します。
青は誠実さ、赤は情熱が伝わるカラーです。
このように、「何を伝えたいか」でカラーやデザインのテイストが決まってきます。
フォントを工夫して効果的に文字を入れる
ヘッダーは、ユーザーがサイトを訪れたときに最初に目にする場所です。
そして、3秒以内にこのサイトに留まるかどうかを判断するので、一目でユーザーに伝えたいことが伝わらなければなりません。
そのため、ヘッダーのフォントは非常に重要になってきます。
・フォントが与える印象を踏まえて、サイトの雰囲気とマッチしたものを選ぶ
・特に読ませたい言葉のジャンプ率を高くしたり、色を変えたりして目立たせる
・背景に埋もれないよう、ドロップシャドウや光彩、境界線をつける
また、ユーザーが読む順番を考慮して、文字を配置することも大切です。
ユーザーの視線の動きを考える
ヘッダーのデザイン・設計において、ユーザーの視線の動きを考えることは非常に重要です。
その理由は2つあります。
1つ目は、スムーズに情報を見つけさせるため。
2つ目は、ユーザーの視線の動きをサポートするためです。
人の視線で最も自然な動きが「上から下」への移動で、WEBサイトにおいては主に2パターンの動きを示します。
◇Zパターン
ユーザーの視線の動きが、アルファベットの「Z」の形をなぞるパターンです。
◇Fパターン
ユーザーの視線の動きが、アルファベットの「F」のように動くパターンです。
特徴は、左上から始まり右に移動した後、少し下に移動してまた左から右へ進み、また下へ・・・といった流れで移動していきます。
ヘッダーは、ユーザーがそのサイトを読むか読まないかを判断する場所で、そのデザインや設計は緻密に練る必要があります。
・サイトのイメージや伝えたいことは何か?
・ターゲットは誰か?
これらを念頭において、ユーザーへ瞬時に伝わるように作りましょう。