【webサイトができるまで⑦】デザイン作成その１
記事コラム
こんにちは、Leycoです。
普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。
（webページとは、ホームページやLP全般のことを指します）
今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。
この記事では次のような方を対象に作っています。
・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある
・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない
「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。
今回は「webサイトができるまで」の７回目です。
【webサイトができるまで⑦】デザイン作成
一般的にwebサイトは、次のような手順で作成されます。
今回は「【３】デザイン作成その１」です。
webページでのデザイン作成は大きく分けて２種類あります。
・ファーストビュー、バナーなどの画像作成
・ページ全体を見やすくするためのデザイン作成
今回は、ファーストビューなどの画像を作る時に気をつけたいポイントをご紹介いたします。
はじめに：ファーストビューはwebサイトの「第一印象」
「ファーストビュー」とは、webサイトを開いた時に見える画面のことです。
大体は、上の部分にヘッダーがあります。
ファーストビューはwebサイトの第一印象。
ページの離脱率にも大きく関わる部分と言われており、使う画像やコピー選びが大切です。
ファーストビュー作成のポイントは色々とありますが、今回は人物画像を使った場合として、３つご紹介していきます。
【ファーストビュー作成のポイント１】何を載せるべきか、考えましょう
まずは、何をファーストビューで載せるのか、まとめておきます。
・キャッチコピー
・サブコピー
・ボタン
・画像
・
などが通常は使われます。
見やすいデザインにするためには、あまり多くの情報を詰め込まないことがポイントです。
どうしても情報量が多い場合は、優先順位を作るようにしましょう。
【ファーストビュー作成のポイント２】人物画像は「ペルソナ」「目線」「やってはいけないこと」を意識して選びましょう
もし、人物の画像を使う場合は、次の３つのポイントを意識してみてください。
①ペルソナに合っているか？
ペルソナとは、購入者のイメージのこと。
もし50代女性をペルソナにしているのに、画像が20代女性だったらどうでしょうか。
ペルソナは「私の世代には向かない商品なのね」とサイトを離れてしまうでしょう。
特に女性の場合は、メイクやファッションの雰囲気にも気を付けておきたいところです。
②目線
人の顔で、「目」は強い力を持っています。
こちらの２枚を見比べてみてください。
どちらのほうが緊張を感じますか？
左のほうが緊張を感じる方が多いのではないかと思います。
人物に注目させたい場合は、左のような画像が良いです。
一方、右のように、どこかを見ている画像は、視線の先が気になりませんか。
その感覚を利用して、視線の先にコピーを置く方法もあります。
また、目をつぶった画像を使って、商品の満足感を表す場合も多いですね。
③人物画像（イラストでも）やってはいけないこと
最後は気を付けておきたい「やってはいけないこと」をご紹介しておきます。
ぜひ人物画像を使うときには、チェックしておいてください。
【ファーストビュー作成のポイント３】何を見せたいのか、メリハリをつけましょう
まずは、こちらをご覧ください。
同じような２枚の画像ですが、右のほうは、キャッチコピーがよく見えると思います。
左のほうは、文字は同じくらいの大きさで、見る方はどこを見たら良いのかちょっと迷いそうです。
載せる情報の優先順位を考えて、メリハリのあるデザインを作りましょう。
まとめ：見る人の目をひくファーストビューを目指しましょう。
ここまで、ファーストビューのデザインのポイントを３つあげてきました。
それぞれのポイントを使うときに大切なのは、「何を一番に伝えたいのか」ということ。
キャッチコピーを読ませたいのか、人物の表情で訴えたいのか、など、目的によってデザインのポイントは変わっていくはずです。
ここまでご覧いただきまして、ありがとうございました。
webサイトを作るときに少しでもお役に立てればうれしいです。
