members

members

0から1を、1から10を生み出す力

Tweet

こんにちは!EMCカンパニーBU1-4の20新卒の伊藤です。

私の所属部署では様々な新しいプロダクトやサービス開発をご支援しているのですが、自分目線で欲しいサービスをコンセプトから可視化してみることでスキルアップはもちろん、ものづくりの中での気づきなどもお披露目できればと思い、執筆してみました。是非最後まで読んでいただけると幸いです!

 

目次
1.お題
2.戦略-ユーザーニーズ・プロダクトの目的
3.要件-コンテンツ・機能の要件要件定義
4.構造-全体全体構造の設計
5.骨格-インターフェースデザイン
6.表層-ビジュアルデザイン
7.感想

1.お題

 今回、作成したアプリはヘアアプリです。なぜヘアアプリにしたかというと、私自身普段美容室に行くたびに、お気に入りのヘアスタイルや昔オーダーしたヘアスタイルの画像を探すのに時間がかかったり、美容室予約サイトとWebブラウザ(髪型の画像検索をWebブラウザですることが多い)の行き来が面倒臭いと感じることがありました。それ以外にも、髪型をなんて美容師さんに伝えればいいだろう…など美容室に行く前に多くの悩みを抱えていたのがきっかけです。

 このような課題を解決すべく、「​​ヘアスタイルの検索から美容室の予約、施術後の髪型の記録までできるアプリ」を作成しようと思いました。しかし、進めていく中で、若年層とは違う課題を中年層の人たちが抱いていることに気付きました。そこで、若年層向けと中年層向けの2パターンのアプリを作成することで相互をより深く理解できるのではないかと思い、年代別によるヘアアプリを作成しようと試みました。

(以降、若年層が10〜20代、中年層が40〜60代を指します)

 

2.戦略-ユーザーニーズ・プロダクトの目的

 まず作成するにあたって、アメリカのUXデザイナーであるJesse James Garrett 氏が唱えた「UXの5段階モデル」の概念を意識しました。


画像:goodpatch.com『UXデザインにおける5段階モデルとは?』

戦略段階は、UXの5段階モデルにおいて土台となる重要な要素です。この段階で下記の2つを明らかにすることで、以降の段階の指針とします。
・ユーザーニーズ(どんなユーザーが何を求めているのか)
・プロダクトの目的(実現したいゴール)
まずユーザーのニーズを知りたいと思い、身近な方達にヒアリングをしてみた結果がこちらになります。

 10〜20代と40〜60代では、美容室選びとヘアスタイル選びの優先順位や、美容室の選び方、施術後の心情が違うことに気付きました。
 以上から得られたインプットを元に、「どんなユーザーのどんな問題を解決することで対価をもらうのか」というプロダクトの目的を設定しました。

【10~20代向けヘアアプリの目的】
新しい美容室でオーダーの際に、「あの時の髪型ってなんて言うんだっけ…」という悩みを解決するためにアプリを制作する

【40~60代向けヘアアプリの目的】
行きつけの美容室を探すために、美容室や美容師の雰囲気や、自分に合ったヘアスタイルを簡単に知れるアプリを制作する

これらのユーザーニーズとプロダクトの目的を具象化したペルソナがこちらになります。

3.要件-コンテンツ・機能の要件定義

 続いて、ユーザーにとって必要なコンテンツと機能のアイデアを出すに当たって、ユーザー体験のモデル化を行います。ユーザーの行動・感情を時系列で整理するカスタマージャーニーマップを作成しました。ユーザーはいつ、どこで、どんなシチュエーションでどんな問題を抱え、それをどのような形で解決したいと考えているのかを可視化します。

 

4.構造-全体構造の設計

 次は「構造化」をしていきます。プロダクトの全体構造を可視化したものをアウトプットとしました。

 ナビゲーションを中心に必要な要素を追加していきました。比較的ネットリテラシーが高い10〜20代は画面遷移が多く、枝分かれしていますが、40〜60代は一方向での画面遷移にしてわかりやすい構造にしました。

 

5.骨格-インターフェースデザイン

 骨格段階では、実際にユーザーが接するインターフェース上の情報設計を行います。画面に表示される情報の配置や優先順位を、ユーザーが理解しやすいように設計しました。

 

6.表層-ビジュアルデザイン

ここまでの段階を踏まえて、UXデザインの最終成果物に仕上げるのが表層段階です。ユーザーが実際に認識するものをデザインするので、より感性に訴える設計が必要です。実際に制作したものがこちらになります。

 

プロトタイプ:「https://www.figma.com/proto/4LZKJ3pjwkqNcCWepKo7TK/my-hair?node-id=91%3A488&scaling=scale-down&page-id=2%3A5&starting-point-node-id=91%3A488&show-proto-sidebar=1

 

プロトタイプ:「https://www.figma.com/proto/4LZKJ3pjwkqNcCWepKo7TK/my-hair?node-id=91%3A491&scaling=scale-down&page-id=2%3A5&starting-point-node-id=91%3A491&show-proto-sidebar=1」

 

7.感想

 ペルソナやカスタマージャーニーマップなどは初めて本格的に制作しました。カスタマージャーニーマップを作ることによって何が課題なのかが明確になったり、今まで見えなかったユーザーの課題を発見することもでき、上流工程の重要さを改めて実感することができました。難しかった点としては、上がった課題をどのような機能に落とし込めばいいのか、コンテンツや機能をどのくらいまで反映させれば良いのかなど、要件定義したものを構造化、情報設計する作業が難しかったです。ただ、自ら発想し実現していくという過程がとてもクリエイティブで、ワクワクしました。今回だけで終わらずに継続してこのようなアウトプットをしていきたいです。「ゼロベースから何かを考えられる力、生み出せる力、そしてそれらをかたちにしていく力」をもっと培っていきたいと思います。

最後まで読んでくださりありがとうございました!

 

コラム執筆者

伊藤 真実(いとう まみ)

2020年4月入社。第1ビジネスユニットアカウントサービス第4ユニット所属のデザイナー。
デザインについて日々勉強中!趣味はホラー映画を見ることです。

カテゴリ: UI/UX
2022年02月03日