1. Webサイトの目的
前提:
サービスが軌道に乗ってきたので公式ライバーを増やしたい。今後女性だけでなく男性ライバーも増加させたい。20代後半の語りが上手い男性が投げ銭をえるのが上手いため、以前までのポップな要素から、ライブ配信ならではの明るい印象をキープしつつ大人っぽさを出したデザインで、スマートで知的な男女もライブ配信ができると訴求したい。
目的と導線:ライブ配信をよく知らないターゲットが、広告から当ページに飛んできて、「かっこいい。思ったより庶民的かも。自分もいけそう。簡単に始められそうだし。」と、興味を引きつつハードルを下げ、→「色々サポートもあるみたいだし、問い合わせてみよう!」→CTAより登録、相談するテンションまで持っていく(クロージング)。
2. ターゲット像
20-30代前半の、エンタメ、SNSなどトレンドに敏感な男女。できれば20代後半。副業で稼ぎたいと思っている頭のいい男性。
(詳しいターゲット分析は、下方に記載)
3. キーワード
クール、明るさ、好奇心、爽やか
4. デザインコンセプト
ライバーの認知をあまりしていない若者(賢い20代後半の男性)に向けて、オープンでカッコよく、楽しそうだなと思わせるよう、
明るさとかっこよさを融合したデザイン。
どちらかというと男性の取り込みを狙っているため、女性らしさは抑えて、クール、明るさ、好奇心、爽やか、をテーマにしたデザイン
5. ファーストビューのポイント
パッと見て、かっこいい!楽しそう!盛り上がってる!!という印象を与え、一瞬で興味を引き、下層へ誘導することを目的とした。
ライバーならではの盛り上がりを、実際のライブ画像を使用して表現。紙吹雪があしらいになっている。ライブ配信をイメージさせるため、モックアップを作成。人物、さらに笑顔の画像を入れるとコンバージョンが上がると言う効果を利用。メインダーゲットの年代の男性を前に配置しつつ、かわいい女性ライバーの写真も載せることで自然と見てしまう心理を利用。
(https://ferret-plus.com/8636)
左に白い余白を入れることで、派手すぎず、圧迫感のないデザインにした。
6. フォントの意図
【事実・表層】
欧文:Roboto
和文: Noto sans CJK JP
→【特徴・印象】
欧文
RobotoはGoogleのデザイナーが開発したフォント。AndroidやChromeOSのシステムフォントに採用され、Googleフォントの中でも最も人気のあるフォントである。ユーザーがよく目にしているので馴染み深く、違和感を与えずに読み進めてもらうことができる。
また、ビジネスデザインでよく使われるHelveticaと比べると、細部がシンプル化されており、無機質かつ癖がなくスマートな印象のフォントである。
和文
GoogleがAdobeと共同開発したフォントファミリー。webフォント。
(Noto Sans CJK JPはAndroid と Chrome OS にシステムフォントとして採用されているので一部ユーザーに対しては高速化が期待できる)
→→【目的やターゲットを踏まえた狙い】
目的は、ターゲットのサービスの理解と興味の喚起。フォントで遊ぶことは避けた。
和文、欧文とも、デジタルネイティブ世代の若者が最も親しんでいるフォントを利用。余計なエネルギーを使う事なく(オシャレな文字、見慣れない文字だと無意識にそちらにエネルギーを少なからず使ってしまう。)、サービス理解、テンションアップ、やる気をあげる、事に集中させることを意図した。
7. 配色の意図
■メインカラー
111111のブラック。10代の若者ではなく、会社勤め、知的やカッコ良さも意識している男性に合わせて、スタイリッシュな黒をメインに配色。20代後半から30代男性にむけた広告でも、黒は頻繁に使われいるので、ターゲットも違和感なく読み進められる。
ただし、純粋な黒では、長いLPを読む際に目に負担がかかるので、あえて111111と少し明度を入れた黒を採用。最後のFAQからコンタクトセクションのみ、純粋な黒でカッコ良さと文字とのコントラストを際立たせた。
■ベースカラー
白。アクセントカラー、メインカラーともに主張が強いので、白で調和かつ強調。
■アクセントカラー
彩度高めのブルーから、彩度を少し落としたブルーへのLIner(269DEC〜2664EC)。ブルーにはブルーは安定、信頼感、安心感、リラックスといった印象を与える効果がある。ライバー=チャラチャラした変な若者がやっている。怪しい。と言う感情を、ブルーを使うことで払拭。彩度をあげ、Liner効果を加えることで、明るさ、楽しさ、爽やかさ、ライブならではの盛り上がりを表現した。CTAでもブルーを使う事で、統一感と、問い合わせへの不安(ブルーがもつ安心感、リラックスという効果)を潜在的に消す狙い。
■フォントカラー
純粋な黒ではないが、比較的明度の低い黒(222222)。メインカラーに合わせてフォントも色によるメリハリをつけサイトのトンマナを統一。
8.構成の並び替えに関する考察
【FV/ Attention(注意喚起)】
広告から飛んできたターゲット(興味はあるが知識がない)が、
「パッと見て、かっこいい!楽しそう!盛り上がってる!!」という印象を与え、一瞬で興味を引き、下層へ誘導することを目的。
ライバーならではの盛り上がりを、実際のライブ画像を使用して表現。ライバーのモックアップ画像を持ってくることで、一瞬で使用イメージが沸くようにした。ライバー画像にターゲット層に近い人物を使用することで、一気に自分ごとに思わせた。笑顔の画像を入れるとコンバージョンが上がると言う効果を利用。メインダーゲットの年代の男性を前に配置しつつ、かわいい女性ライバーの写真も載せることで自然と見てしまう心理を利用。
(https://ferret-plus.com/8636)
左に白い余白を入れることで、派手すぎず、圧迫感のないデザインにして、ターゲットに心の余裕を与えた。
【About&Benefit / Interest(興味をひく)】
FVで興味を抱くも、サービスへの知識がなく、「そもそもライバーとはなんぞや?」という問いに、サービスのコンセプト、ベネフィット(利用した後の輝かしい未来)を説明することで回答。「ライバーってそういう感じなのか!素敵!!」という気持ちの変化を狙った。背景画像はあえて携帯をもつ手元にフォーカスした日常の画像にする事で、「なんて事ない日常を送っている(画像のような)あなたでも、このサービスを使えば変われますよ!」ということを伝えることを意図して選定。
すでに温度の高いユーザーが、「大枠がわかったし興味あるからとりあえず相談したい!」となるように、Aboutの下にCTAを配置。
【DeLiveって?/ Conviction(説得、納得)】
もともとライバーの知識がないターゲットにむけて、わかりやすく定義と仕組みを説明。「どういうものなの?」という最も基本的で心理的に大きな疑問がクリアになることで、ターゲットは安心して続きを読み進められる。
【特徴→メリット/ Interest & Conviction】
仕組みをクリアにしたところで、手厚いサポートの特徴を説明して一気にハードルを下げた。「これだけサポートしてくれるなら自分もできそう。でも、他のサービスとはどう違うのだろう?」という疑問には、メリットを並べて他者との差別化を測った。
【こんな方におすすめ / Desire】
仕組み、サポート特徴、メリットを理解したところで、サービスを利用する事で叶う未来を、おすすめという形で再度提示。
表現の仕方も、誰もが潜在的に抱える願望を「こんな方に」という言い回しをする事で、ターゲットがベネフィットをうまく自分ごと化できるよう工夫。このパートでターゲットはリアルに自分がライバーをして(ベネフィットを手に入れて)いるイメージを抱くことができる。
【ライバーになるまでの流れ/ Conviction】
仕組みも、メリット、差別化(当サービスへのファン化)、リアルなイメージが言語化できたところで、「どうやって始めるの?」という疑問に回答。3という人が最も覚えられ、理解しやすいステップ数と、ややこしいことを書かず端的に一言、大きめのシンプルなアイコンと共に記載することで、単純化。ハードルを一気に下げる狙い。
ターゲットが知りたい情報を、論理的かつテンションを上げながら全て提示したところで、アクションとなるCTA。白背景にCTAを配置することで、ボタンを際立たせ、自然と押せるようデザインした。
【活躍ライバー/ Conviction (& Desire)】
今回のターゲットは企業勤め、落ち着きもある知的な男性(女性)。「派手すぎる・個性的すぎる」ものではなく、「同年代かつ、カッコ良さ・親やすさ・オシャレ」といった特徴をもつキャラクターを並べることで、4人のうち誰かには親近感や憧れを抱くことができ、また、チャラチャラしたサービスではないのだなという印象を抱かせ、安心感を与える。さらに、こんな風に(カッコよく/活躍できるように)なりたいという未来への願望も刺激。
【現役ライバー/ Conviction & Desire】
ここではより親しみの沸く庶民的なキャラクターを採用。ユーザーの声と共に、「安心できるサービスだし、自分にもできそう、やってみたい」という願望にもつなげる。
自信をもったターゲットがこの気持ちのまますぐに相談できるよう、ここでCTAを配置。
【FAQ/ Conviction】
初めてみたいけどまだ数点気になることがある、、、というターゲットに向けて、定番のFAQを記載する事でよりユーザーが安心して問い合わせすることが可能。高いテンションをさらにあげてクロージングに結ぶため、FVと同じライブで盛り上がっている画像をここでも使用。
【お問い合わせ/ Action】
気軽にお問い合わせください。という最後のひと推しで、クロージング。
9. その他工夫した点
■斜線や台形の図形(あしらい)
ライブ配信ならではの臨場感や勢いを再現。特にDeLiveって?部分の台形は、満面の笑みで楽しそうに動きのある女性と組み合わせる事で、盛り上がりや飛び出してくるような立体感を表現。
斜線による背景やあしらいは、幕が上がる、切り替わる、という舞台や劇場を遠回しに表現し、閲覧しているターゲットが自身がパフォーマンスを見ている(体感している)感覚を無意識に抱けるようにした。
■写真少なめ、単純なイラスト多め
ターゲットのサービスへの理解の最短を狙った意図。仕組みは簡単な図解をして視覚的に理解。特徴、メリット、流れではなるべくシンプル化する事でわかりやすく、「簡単にはじめやすそう!」と思ってもらうのが目的。
また、主要ターゲットは30前後の男性なので、シンプルなデザインにしてその分配色やレイアウトでカッコ良さの方を重要視した。
■ターゲットを意識した画像選定
>30前後の男性(メインターゲット)
・FVのモックアップ内人物をターゲット層に。
・こんな人におすすめではPC、SPで画像を変更。意図は、PC版はより堅実、少し平凡よりなターゲットを意識してカッコ良さは少なめだが親しみやすさを出してサービスのハードルを下げた。SP版はPCよりターゲット層は若めと想定。ベネフィットによる未来に対してより希望感を訴求するために携帯、夕日、明るい画像を、黒いフィルターを被せてカッコ良さと文字の視認性を。
・活躍ライバーではかっこいいかも。自分もこんな風になりたいと印象付けるキャラクター。ユーザーでは、一気に親近感、(自分のがいけてるかも?という)優越感と自信が持てるキャラクターを。
・かわいい女性の写真を使用することで、無意識に興味を抱かせることも狙い。
>女性(サブターゲット)
モックアップやLiverって?といった箇所で女性を採用。モックアップ、活躍ライバー、ユーザー全て、ターゲットが憧れそうなキャラクターを選定。女性の方が、憧れの人をもち、その人に近づこうというモチベーションが、男性よりも高いため、(参考サイトp5-6参照
http://open.shonan.bunkyo.ac.jp/hiyoshi/class/survey3/2018/3_kimura.pdf)あえて普通より少しかわいい、頑張れば近づけそうっといった気持ちになれる女性を選んだ。
