28歳、女性、未婚、年収300万円――サイトの方向性を決める「ペルソナ」：エンジニアのためのWebデザイン基礎の基礎（5）

デザイン初心者向けにWebデザインのイロハを解説する本連載。今回は、サイトの方向性を決める際に有効な「ペルソナ（顧客にすべき典型的なユーザー像）」の定義方法を解説する。

[吉田光利，＠IT]

連載目次

　Webデザイン初心者に向けて、機能的なWebサイトを作るポイントを解説する本連載。今回は、「ペルソナ」を作成するときのポイントを解説します。

ペルソナとは何か

　ペルソナデザインとは「顧客にすべき典型的なユーザー像」を明確にすることです。名前や年齢、学歴や勤め先、ライフスタイル、交際相手など、できるだけ具体的にユーザーを定義します。そうして出来上がった人物が「ペルソナ」です。

　ペルソナを定義すると、ユーザーの人物像がはっきりし、Webサイトをどう使ってもらいたいか戦略を立てやすくなります。

図1　架空の民間Webスクールのペルソナとそれに適したサイトの例（クリックすると、大きなサイズの画像を表示します。以降の画像も、クリックで拡大します）　出典：「スタートアップのための起業のWeb技術」（吉田光利著／日本実業出版社）

　これは架空の民間Webスクールと、サイトを作る際に設定したペルソナです。このペルソナはどのような人物なのでしょうか。

名前

吉田真里さん

住所

東京都目黒区アイティマンション204　家賃6万5000円

年齢

28歳　未婚

出身地

秋田県

学歴

デザイン系短大卒

職業

携帯電話操作チェックスタッフ

年収

300万円

目指していること

クリエイティブな仕事に就くこと

恋愛

彼氏がいない歴が長い（3年くらい）

購買の嗜好（しこう）

本や漫画には惜しみなくお金を使う。洋服などはそんなに高いものは買わないが、安くてかわいい物を見つけるセンスがある

ストーリー

「将来は絶対、Webサイト制作の仕事をしたい」と考え始めたのは大学生のころ。お笑いが好きで、共通の趣味を持つ遠方の知らない人とWebで交流して感動した経験がある。ブログを書いたり、CSSを少しいじったりするなど、デザイン変更の経験がある。就活がうまくいかず、現在は別の仕事に就いているが、諦めきれなくてWebデザイナーになりたいと思っている

出典：「スタートアップのための起業のWeb技術」（吉田光利著／日本実業出版社）

　細かな項目や物語を具体的に設定したことで、ペルソナが好む話題や悩みが想像できるようになりました。

　このペルソナ像を踏まえて作成したのが、冒頭の民間WebスクールのWebサイトです。デザインは優しくポップに、内容は「初心者も学べる」ことを前面に押し出しました。ペルソナを想定すると、Webサイトの設計、制作、マーケティングを正しく進めやすくなります。

別のペルソナとサイトの例

　ペルソナをはっきりさせると、デザインやコンテンツが自然と導かれます。

図2　架空の和菓子屋のペルソナとそれに適したサイトの例　出典：「スタートアップのための起業のWeb技術」（吉田光利著／日本実業出版社）

　これは架空の和菓子屋サイトです。中高年女性がペルソナだったら、和のテイストとシンプルな使い勝手が必要でしょう。

ペルソナを決めるメリット

　ペルソナが決まると、向かうべき方向が決定します。写真や属性、ストーリーなどによって、ユーザー像をより具体的にすると、さまざまなメリットが生まれます。

　メリットの一つ目は、ブレーンストーミングなどのアイデア会議が活発になることです。デザイナーはWebサイトをどうデザインするかの方向性が見えるようになりますし、プロダクトの機能を決めるUI／UXをデザインしやすくなります。マーケターも「どこに広告を出すべきか」などの作戦を立てやすくなるでしょう。

　チームでペルソナを共有すれば、「同じゴール」を目指せるようになり、プロダクトのクオリティが上がります。

アップルの事例

　アップルほどペルソナデザインを活用してプロダクトをつくり、マーケティングを展開して成功を収めている企業はありません。

　アップルはプロダクトを開発する前に必ずペルソナをデザインし、その使用する「シーン」や「用途」などを具体的に洗い出します。

　iPadのCMで外科医らしき人物が出てきて、iPadを見ながら助手に説明しているシーンをご覧になったことがある方も多いでしょう。彼はiPadのペルソナの一人です。iPadが「このような人物が使う」ことを前提にデザインされたプロダクトだということが、ここから推察できます。

ペルソナ作成7つのステップ

　Webサイトの目的を達成する「典型的なユーザー＝ペルソナ」を具現化するための7つのステップを説明します。

1　大まかな設定を決める

　最初のステップでは、はっきりとしたことは決めません。「大学生で卒業後に留学を考えて、英会話スクールに通っている21歳の女子」「早期退職して退職金を持って何か新しいことをしようとしている人」などの簡単なストーリー＋バックグラウンドを考えます。

2　写真を検索する

　上のストーリーにふさわしいと思われる人物を「Google画像検索」で探します。いろいろな検索ワードで探してみてください。ピッタリの人物が見つかれば詳しいストーリーは自然と湧き出てきますので、じっくりと探しましょう。

3　名前と属性を決める

　写真が見つかったら、年齢、性別、未婚既婚、職業、住所、勤務先、出身地、年収などを具体的に決めます。こうすると、ぐっとリアリティが出ます。

　最初はうまく決められないかもしれませんが、あまり考え込まずに大胆に決めていきましょう。しっくり来なければ、後で修正すればいいのです。

4　ストーリーを作る

　ペルソナが何を考え、日々どう暮らしているかを定義します。定量的なデータとは違い、性格や嗜好、人生観などが表れるような定性的な情報です。

　例えば「残業なしでいつも6時には帰宅できるので、その時間を有効利用してジムに通うようになった。週末には英会話スクールにも3年間通い続けている」などというストーリーを作れば、「目標を持って、コツコツと取り組む人なのかな」などと想像できます。

5　何に困っていて、何を解決したいと思っているか？ を考える

　ペルソナは何に困っているのでしょうか？ 仕事において、もしくは人生において、困っていて解決したい問題とは何でしょうか。それを書きましょう。

　例えば、ペルソナを一人のWebマーケターと設定した場合で考えてみると、「ランディングページの制作に時間がかかり、困っている」「クオリティとスピードを持っているデザイナーを獲得したい。ギャラは多少高くても構わない」というように、ペルソナの「困っていること」と「解決策」について書けると思います。

6　参考にしているWebサイトとサービスを設定する

　ペルソナが日常的に使い、気に入っていそうなWebサイトを3つ以上挙げてみましょう。

7　Webスキルを設定する

　「ペルソナがどのようにWebと接しているのか？」「デバイスはどのようなもので、どのタイミングでアクセスしているのか？」などを定義します。

　例えば「Facebookを最近使い始めて、日常の出来事を写真付きで頻繁にiPhoneから投稿している。アメブロでブログを書いている」などを決めます。ここから、ペルソナのWebスキルはそれほど低くなく、スマートフォンも使いこなしていることが分かります。

---

　来週は、Webサイトの満足度を上げる「UX（ユーザーエクスペリエンス）」を解説します。

「エンジニアのためのWebデザイン基礎の基礎」バックナンバー

• 「AIDA」でデザインの効果を計測する
• Webサイトの満足度を上げる「UX（ユーザーエクスペリエンス）」の作り方
• 28歳、女性、未婚、年収300万円――サイトの方向性を決める「ペルソナ」
• 情報のレベルをコントロールする――Webデザインの4原則その4「コントラスト」
• デザインで使い勝手を向上させる――Webデザインの4原則その3「反復」
• “見えない”線を“見せる”グリッドシステム――Webデザインの4原則その2「整列」
• 重要な情報は左上に――効果的なデザインに必要な4つの原則

書籍紹介

「スタートアップのための 起業のWeb技術

吉田光利著　日本実業出版社　2160円（税込み）

起業家（予備軍）向けに、最新のトレンドを踏まえたWebサイトの開発に不可欠な技術を、概論的かつ多角的に紹介する。

プログラミング（コーディング）の実際や個別ソフトの操作解説などではなく、スタートアップに合わせたWebサイトの開発から運用までの全体感、しくみ、流れなどを中心に、初心者にも分かりやすく解説する。

吉田光利

デザインからプログラミング、サーバーシステム構築までを手掛けるオールラウンドなクリエイター。IT／Webの教育に長く携わり、企業研修や専門学校などでの講師も延べ1000社以上務める。アイデアをカタチにしてビジネスにできるところが強み。現在は2つの会社の代表を務め、精力的に活動している。

※この連載は「スタートアップのための 起業のWeb技術」（吉田光利著）の一部を、著者と出版社の許可の下、一部修正して転載するものです。