どーもこんにちは。
WebプランナーのDCHSタカセです。
Webサイトの設計について、よくセミナーなんかをやらせてもらってますが、なにげにUIについて具体的にお話することはこれまでなかったので、この場を借りて、UIを設計する上で特に重要なファーストビューの設計について、DCHS流の設計法を解説します！
ファーストビューの設計における8つのポイント
サイトに訪れたユーザーは、ファーストビューに表示された情報を見て、そのサイトが、自分にとって価値のあるものかを判断します。
価値がないと判断されれば、それ以上のクリックもスクロールもせず、そっとタブを閉じることでしょう。そんなサイトでは、存在しないのと同じことですから、なんとかしてユーザーの興味を惹きたいわけです。
ブラウザにサイトを表示したその一瞬で、ユーザの興味を最大化し、次のアクションへと誘導するために、ファーストビューは如何にあるべきかを、8つのポイントに分けて解説します。
ファーストビューを構成する3つの要素
あらためて解説するほどのものでもないですが、多くのWebサイトで採用されている構成です。大事なのは、「この要素を満たすこと」ではなく、「これ以外の要素を含めないこと」です。
それがどういうことなのかは、追々解説していきます。
メリットを伝える「タグライン」
そのサイトの機能やメリットを簡潔な文言で紹介するものです。サイトの最上部に表示されていることが多いですね。
サイトの機能を伝える「ナビゲーション」
特に、グローバルナビゲーションと呼ばれる部分です。
そのサイトの機能や得られる情報を伝える重要な役割を担います。
体験を魅せる「キービジュアル」
画像による訴求は非常に強力なものです。
これがファーストビューにおいて最も重要な要素であることは、言うまでもないでしょう。
効果的なファーストビューを作る2つの手法
前項の3つの要素を如何に効果的に作りこむか。その基本となる3つの手法について解説します。
1秒以内に”理解”を得る
先にも述べていますが、ファーストビューを閲覧したその瞬間に、そのサイトの価値がユーザーに伝わらなくてはなりません。何も知らないユーザーが訪れても、パッと見て、1秒で価値を理解できる、それが理想です。
魅力的な”体験”を提示する
ユーザーは、必ず何らかの期待を持ってサイトを訪れます。
それは、ユーザー自身にとって「魅力的な体験が得られるのではないか？」という期待です。ユーザーが期待する「魅力的な体験を得た自分」を的確に提示することができれば、ユーザーの興味は強まり、コンバージョンへと至る原動力となります。
ファーストビューを評価する3つの観点
最後に、前項の2つの手法が適切に実現できているか。その評価を行うための3つの観点を解説します。
簡潔であるか？
掲載する情報は徹底的に絞り込み、わずかな脱線をも排除するくらいのつもりで精査しましょう。
「これ以外の要素を含めないこと」が大事と言いましたが、例えわずかであっても、情報のノイズはユーザーの理解を妨げることになります。それはつまり、ユーザーの離脱を招く大きな要因になってしまうので、とことんまで”必要最小限”にこだわることが重要です。
文脈は自然であるか？
自然な文脈（ストーリー）は、ユーザーの予測を喚起し、理解を加速します。
これは文章だけの話ではなく、ナビゲーションの項目や順番、キービジュアル、ページの構成に至るまで、サイトに含まれる全ての要素が含まれます。逆に、文脈の脱線はユーザーの理解を妨げ、離脱の要因となってしまいます。ファーストビューを閲覧するユーザーの視線を想定し、全ての要素を適切な文脈に則って配置することが重要です。
具体的であるか？
誰を対象としているのか、そしてどんな体験が得られるのかを、可能な限り具体的に示してください。
ユーザーのの理解力に頼らず、誰の目にも明らかであることが望ましいです。
例えば、文言であればなるべく数字を含めるのが効果的です。ユーザーの主観に頼ったワーディング（かっこいい、かわいい など）は避けてください。
画像であれば、ターゲットとなるユーザーにとって憧れとなる姿を魅せるのが効果的です。これはファッション誌の見せ方が特に参考になると思います。
より効果的なキービジュアルを作るために
最初に言っている通り、ここまでは”設計”の話です。
むしろ本番はここからですね。
このようにして作られた設計を元に、実際に素材を制作していくわけなんですが、タカセの場合、この先はコピーライターさんやカメラマンさんに依頼をします。
みなさんはどうしてますか？
特に、画像に関しては素材集や素人写真を使うケースも多いのではないかと思いますが、本当にそれで充分でしょうか？予算の都合などもあると思いますが、素材集や素人写真には限界があることも考えないといけません。
素材集や素人撮影の限界を知る
・他社と被る
これ、よくあります。
しかも競合と丸被りなんてこともめずらしくありません。 ユーザーに他社と間違われたり、特にブランドイメージを大事にするような業種では、安っぽさを感じさせてしまいますので、注意が必要です。
・意図が伝わらない
素材集から、設計したものにドンピシャ当てはまるような写真が見つかることは稀です。設計した意図を充分に発揮するには、やはり素材集では限界があります。
・素人撮影の落とし穴
かといって素人が撮影した写真はどうか？
確かに、自分たちで撮影をすれば、設計した意図をかたちにすることは可能かもしれません。ですが、明るく見せるき写真で影が入ってしまったり、被写体とは異なる部分にピントがあっていたりなど、商品の印象を著しく損なっているのをよく見かけます。
商業写真の撮影は、残念ながら、素人が簡単に習得できるようなものではありません。
素材集や素人撮影から卒業するために
カメラマンに依頼したいのはヤマヤマだけど、クライアントや上司の理解がなく、予算が取れないなんてことも多いと思います。
その場合、まずは前項にあるデメリットをクライアントや上司に理解して貰いましょう。そして同時に、カメラマンに依頼する際に必要なことも知っておく必要があります。
主には、「撮影の目的」「写真の構図」「撮影の予算」ということになりますが、その話を始めると長くなってしまうので、本記事では、詳細は割愛させていただきます。
…
……気になる？
………気になっちゃう？
そんな気になるあなたに朗報です！（笑
売上を上げる！ECサイトのためのフォトディレクション術
カメラマンに写真撮影を依頼するにあたって、必要なノウハウ満載のセミナーイベントが開催されます！
