はじわかデザイン編、今回はサイトやランディングページの顔となるキービジュアルについて。
キービジュアルは来訪したユーザーが一番に目にする場所、滞在するかは3秒以内に判断すると言われている大事なセクションになります。
デザイン的なアプローチというよりは、座学のような記事なりますがお付き合いください!
ユーザーの目的とのマッチング
構成編でランディングページについて書きましたが、意図にあったサイトなのかを考えましょうという内容でした。
このサイトは悩みに応えてくれそう・・・なのかどうか
【#10】ランディングページを意識する
悩みに応えてくれるなら、なぜそれが実現できるのか
本当に信頼できるサイト、運営元なのか
実際に利用したユーザーの声が聞きたい
利用するにはどんな手順なのか、料金はいくらなのか
どんなサイトなのかをキチンと伝えられるキャッチコピーやベネフィット(解決したことや変化した自分)を想像できるビジュアルになっているべきですよね。
ページの目的に合わせて、キービジュアルにも目的を持つ

- ブランディング(メッセージ)
- コーポレートサイト(理念、何をする会社か)
- サービスサイト(何ができるサービスか)
- ランディングページ(誰の何が達成される商品・サービスか)
特に検索連動型広告などでは検索キーワードを決めているので、そのキーワードから来訪するユーザーに伝えるべき情報はとても大事です。
検索するユーザーは何を期待しているのか、キービジュアルでは「あーこれこれ!」と探していたものが見つかるとページを読み進めたくなります。
ユーザー目線で考える
ユーザーの目的を想定して、ユーザーが離脱しないような内容にしましょう。
年齢や性別にあわせたキービジュアルになるとさらに自分ゴトにしてもらいやすいと思います。
- ユーザーに合わせたデザイン(性別や年齢層)
- ユーザーに合わせたモデル(ユーザーを配置するのか、スタッフを配置するのか)
一番大事にしたいことは、ユーザーの目線になって違和感がないか、期待した内容になっているか、をしっかり考えること。
自分たちが売りにしたいことを前面に出すのではなく、ユーザーの気持ちが考えることが近道だと考えています。
性別や年齢にあわせたデザイン

男性向けか女性向けかによって、デザイン、特に色味やテキストの表現が変わってきます。
もちろんサービスや商品によって変わることもありますが、性別や年齢に合わせることは意識をしたいポイントです。
年齢によってはフォントサイズは大きい方が良いかもしれませんし、言葉のニュアンスも相手によって分かりやすい表現を選ぶとより伝わります。
ターゲットにあわせたモデル

ページの目的や内容によっては、キービジュアルにモデルや商品など、テキストだけでなく写真や画像が使われます。
その際に意識するのは、ユーザーにとって受け入れやすいもの、信頼できる雰囲気なのか、人物をキービジュアルに配置する時には気をつけたいポイントになります。
- 成功体験をイメージできる写真
- 安心して相談できそうなスタッフの写真
- 利用をイメージできる施設の写真
ユーザーがそのサービスを利用して、変化を感じ(ベネフィット)成功した自分をイメージできる。
サービスを利用する不安を減らしてくれる、安心感のある、気軽に相談したくなる雰囲気の人物がいる。
他社さんとの比較対象に利用環境や施設が大事な場合は、キービジュアルに施設の写真を使う場合もあるでしょう。
ユーザーを考え、どんなキービジュアルだと安心してもらえるか、自分ゴトにしてもらえるかを考えることで、配置すべきテキストや画像は絞られていきます。
人が提供するサービスは自社のスタッフがいるのも安心材料になりますよね。
素材写真は映りも良く素敵ですが、実際に担当する人が見えるのは利用するユーザーにとっては好ポイントです。
キービジュアルはユーザーとのマッチング
- キャッチコピーは誰のために書かれているか
- 写真でイメージが伝わるか
- ユーザーが求めている情報が書かれているか
デザインはマッチングを補ったり、後押しする要素だと思います。
言葉だけでは伝わりづらいこともデザインがあるとパッと見て伝わることがあります。
これまで考えてきたユーザーにより伝わるように、ユーザー目線でデザインを考えていきましょう!