見出し画像

早稲田文系大学生、デザイナーになる。　Daily UI 03 Landing Page(LP)

てんぱ

はじめに

おはこんばんにちは！

Daily UI第3回。
今回は、「ランディングページ(LP)」に挑戦します！

前回の記事（第2回）はこちら↓

前回に引き続き、第3回を奇跡的に迎えることができてホッとしています。
実は僕、生粋の飽き性で三日坊主で終わった挑戦が人生の大半を占めています。

1人で続けるのは難しいので、周りの人の手を借りることにしました。

友人へ。いきなりLINEでリンク送りつけてごめんな。ちゃんと監視しててください。

第100回まで継続できたらお祝いにブレワイ買うんだもん、、、。

概要

  • 制作物：LP ファーストビュー(見出し)のみ

  • 言語交換アプリ「HelloTalk」LPのリデザイン

  • 制作時間：約6時間

制作過程
1. LPについて調べる
2.リサーチ、考察 
3.サービス内容、ペルソナ設定
4.ワイヤーフレーム作成
5.キャッチコピー、ビジュアル

1. LPについて調べる

LPについて知ることからスタートします。

バンクーバーのとあるIT企業によればLPとは、

Unlike web pages, which typically have many goals and encourage exploration, landing pages are designed with a single focus or goal, known as a call to action (or CTA, for short).

一般的に多くのゴールを持ち、探索を促すウェブページとは異なり、ランディングページは、コール・トゥ・アクション（略してCTA）として知られる、1つの焦点またはゴールをデザインされます。

Unbounce "What is a landing page?"

(CTAについてはこちらから)

つまりLPとは、

1つの目的のためにデザインされるもので、

企業がLPを使う場合、

潜在顧客に自社の商品・サービスを売るために使うと言えるでしょう。

LP＝橋

LPは、いわば潜在顧客と商品・サービスを結ぶ「橋」です。

では、この橋に必要な要素はなんでしょうか？
リサーチを通して解明していきます。

2. リサーチ、考察

リサーチ
まず各サービスや他の挑戦者によるLPを調査してみます。
今回は、UI PocketとMobbinで調べるのが困難だったため、Dribbbleや知っているSNSアプリのLPをGoogleで調べて調査してみました。

 Dribbble
SNS


考察

  • 共通項

    • CTAがある

    • キャッチコピー（大文字、太文字）

    • サービスカラーを使う

  • いいなと思った所

    • セールスポイントを端的に表現（3つが多い）

    • 目を引くオブジェクトを置く

    • LPから会員登録ができ、Web上で利用できる

    • モックアップを置くことでスマホで使うイメージを連想させる

    • サービス名の主張が弱い

    • ファーストビューの情報量は少なく、詳細は下にスクロールすると分かる

      • ファーストビューの世界観で潜在顧客に「なんか良さそう」と思わせるデザイン

    • Zの法則を利用(視線誘導)

  • 微妙な所

    • 洗練されすぎて親近感、安心感が薄い

      • 人の写真を入れたらよさそう

また他にも良いLPの実例を知るために、LP考察サイトから考察を得ました。

良質なLP40個をまとめたサイト
それぞれのデザインの特徴を説明している


3. サービス内容、ペルソナ設定

今回はLPを制作することに集中したかったので、架空のサービスではなく既存のアプリLPをリデザインする方法を取ります。

HelloTalkのロゴ

リデザインするLPは、言語交換アプリ「HelloTalk」。
HelloTalkのサービス内容はこちら↓

「HelloTalk」とはあらゆる言語のネイティブスピーカーたちとチャットやタイムライン、通話機能などを通して交流ができ、楽しみながら語学学習ができるアプリです。

現在の対応言語は英語や中国語、スペイン語など主要な言語のほか、話者の多くない言語まで含めると150か国以上。ユーザー数は世界5,000万人以上もいます。

BIGLOBE 
"世界中のユーザーと言語を教え合える「Hello Talk（ハロートーク）」基本機能と安全な使い方"
※ユーザー数が古い情報だったので修正しました

実はHelloTalkは、僕が高校生の頃から7年ほど愛用しているアプリで、今回の制作には一層熱が入ります。

今回リデザインするLP

HelloTalkのLPを分析すると、

  • いいところ（できれば残す)

    • PCで閲覧するを前提にCTAにQRコードを設置

    • 数字（ユーザー数、対応言語）

    • モックアップ

  • 改善点

    • 直訳した感が残っている（Hellotalkは中国企業のサービス）

      • 改行が不自然（ex.「ネイティブとチ」で切れてる）

    • 配色が少ない

      • ロゴを考慮するともっとカラフルでもいいのでは

      • 多様性も表現できる

    • キャッチコピーが弱い

    • インストールボタンの画面占有率が高い？

      • 他に情報を入れたい

    • 人の写真がない

      • 安心感がない

      • 親近感が湧かない

    • 無料という文言をもっと強調してよさそう

    • ヘッダーが小さい

ペルソナ設定
ペルソナはChat GPTを使って決めます。

Photo ACより

名前: マリコ 年齢: 21歳
職業: 大学生
背景: 英語を学んでいるが、実際の会話に自信がない。異文化交流に興味があり、海外旅行を計画中。
目標: 英会話のスキルを向上させ、外国の友人を作りたい。
課題: どこで言語交換パートナーを見つけるか分からない、忙しい学生生活の中で効率よく学びたい。
動機: 自然な会話を通じて言語を学びたい、他の文化を理解したい。

マリコは、英語ネイティブと会話することで会話力を高めたいようですね。
さらに英語の勉強をするだけではなく、海外の友達を作ってみたいようです。

まさにHelloTalkを使うべき潜在顧客ですね。

4. ワイヤーフレーム作成

恐竜じゃないです。人です。
絵心はありません。

今回は、WebサイトLPなのでMacbook airのサイズで制作します。

今回は、人物写真を使うことにこだわりたいので、写真の配置について考えました。人物の下にCTAを置くと情報量が多くなり窮屈な印象を与えそうだったので、上2つは除外しました。

この中で、一番バランスがいいと思った左下のフレームワークを採用することにします。

4.キャッチコピー、ビジュアル

キャッチコピー
LPの心臓ともいっても過言ではない部分、キャッチコピー。
アプリの特徴を元に案を出していきます。

Hellotalkとは、
・ネイティブと話せる
・世界中の人と繋がる
・無料でできる
・友達ができる
・恋人ができる
・価値観が広がる
・暇つぶしができる
・楽しく語学学習ができる
アプリだ。

上記の特徴を元にChat GPTでアイデアを出してみました。

デザイナーは「選ぶことが仕事」ってこういうことですかね

一番グッときた、

「言語を学ぶ、
友達を作る、
世界を広げる。」

を採用します。アプリ使用歴7年の僕として、最もHelloTalkの世界観を表現できていると感じました。

ビジュアル

HelloTalkユーザーは怠け者が多い(僕調べ)

作ってみて一言。

「コレジャナイ感」

理由を考えてみました。

  • 写真が世界観と合っていない

    • くつろぎすぎ

    • メリハリがない

    • 写真の画質が悪い

    • 写真の上にキャッチコピーを入れると窮屈

  • 切り抜きが不自然

  • 情報過多

    • モックアップと写真どちらかに絞った方がいい

今回は、訪問者に「なんか良さそう」と思ってもらえるようなデザインを目指して、下にスクロールして詳細が見たくなるようなLPにしたいと思います。
そのためモックアップは消して、余白を作ることを意識してみます。

モックアップを消して、写真素材やデザイン、配置を変えてみました↓

吹き出しはHelloTalkのロゴから

だいぶ良くなりましたよね。
余白を増やしたことで、焦点がやっと合ってきました。

ちなみに写真は、AIで生成しました。ツールはImage FX。

もはや本物と見分けがつかない

思った通りの写真を生成するのに少し手間りました。
AIと共存できるデザイナーになるためにも、プロンプトの出し方について学習する必要がありそうです。

サイズも変えてみました
女性が消えました

また、アメリカ人男性(仮)と日本人女性の配置について再考してみました。
Zの法則から言えば、左上に情報を置いた方が視線がスムーズに進むと考え、日本人女性を左上に置き、サイズも拡大しました。

女性どこ行った、、。
最後の完成品で帰ってきます

日本人とアメリカ人の2人だけだと、1対1の出会い系アプリのような印象を与えそうなので、日本で人気国である韓国の男性も追加しました。三角関係ではありません（ありえる）。

セールスポイントや、CTAボタン、サイト下部への誘導も追加しました。

この時点で完成と言ってもよかったのですが、、、

なんだろう

「コレジャナイ感」

また来ました。
この違和感を探っていると1つの答えに辿り着きます。

HelloTalk感が薄い

HelloTalkの最大の特徴として、ユーザー出身地の幅広さがあります。（150カ国語以上に対応）

ある時には、イスラエルの女性から、自国の国旗の成り立ちついて熱く語られ、ある時には、見たことも聞いたこともない国の男性から、二度と使うことの無いであろうその国の言語を覚えさせられたり、ある時には無意識的に差別発言をしていて、他国の友人からひどく罵声を浴びせられ絶縁したりします。

そんな世界中の人々が金魚鉢に無理やり詰め込まれたような空間、それがHelloTalkです。

言語学習とは一見華やかなようで、現実は残酷な所業なのです。

この混沌とした世界観を表現するために、世界中の言語で「笑」を翻訳した言葉の羅列を背景として使うことにしました。

タイで笑う時は「555」を使いましょう

笑顔は世界を救う。

そんな意味も込めて、最後の仕上げをしていきます。

完成品

笑Ver.
女性が帰ってきました
こんにちはVer.も作りました

2パターン作りました。
1つ目の笑Ver.は、HelloTalkの世界観を良く表していて、アプリの雰囲気を伝えることができそうです。

2つ目のこんにちはVer.はありがちですが、定番で安心感がありますね。

元々のLPとリデザインしたLPの比較

縦横比めっちゃ違う

みなさんは元のLPとリデザインされたLPどちらが好みですか？

デザインの特徴

  • ファーストビューの世界観で興味を持たせることを第一とした設計

    • アプリを利用すると得られる体験（DX）を想起させる

  • 奥行き

    • 人物の写真を吹き出しからはみ出させたり、シルエットを使うことで奥行きを演出

  • 日本における人気学習言語から人物の国籍を決定

    • アメリカ人（日本ではアメリカ英語が主流）

    • 韓国人

【Duolingo Language Report 2023】世界5億人のユーザーと各都道府県100人に聞いた年次調査発表日本語人気は5位と安定、日本語学習者の86%が30歳以下とZ世代に人気
PR Times

  • 人物にスマホを持たせることで、スマホアプリのサービスであることを示唆

  • 画面下部の矢印

    • 下へ続きがあることを示している

  • カラフルな配色

    • 多様性を表現するために、赤青緑黄4色を使用

  • 人物の配置

    • 向かい合わせで配置することで、対話している印象を与える

  • 日本の国旗

    • 白に吹き出しに赤丸を置くことで、国旗として機能させた

学びと今後の課題

学び

今後の課題

  • デザインは細部に宿る

    • 切り抜きがうまくいかず白い余白が余っている部分がある

    • もっと早く制作ができるようになったら細部によりこだわりたい

    • 今はこだわりすぎると10時間くらいかかりそう

  • 切り抜きをもっとスムーズに

    • 自分に合った切り抜きツールを探す

使用したツール

  • Figma

  • Dribbble

  • Chat GPT

  • Image FX

  • Google検索

  • Youtube

次回予告

次の課題は、計算機です！

今の所、
制作に4-5時間、
noteの執筆に3-4時間
で合計8時間ほどかかるので、1週間に多くて3つ進めるペースになりそうです😅

ただ、義務感からではなく、表現する喜びや好奇心から生まれる動機でこれからも楽しく投稿していきます。

最後までお読みくださりありがとうございます。

みなさん今日も1日お疲れ様です。

おやすみなさい！

いいなと思ったら応援しよう！