髪型アプリのデザインプロセス ✂️ 【記録】

こんにちは。東京のUIデザイナを目指している、神戸の新社会人mです。
今回は、cocoda! のお題に取り組んだ（実は前の家計簿アプリの前に取り組んでまとめずそっとしまっていました.. ）ものを振り返ってみます。

今回取り組んだお題は..

髪型アプリを作ろう👩✂️

です！
今回はユーザーインタビューからサービスを設計してみました。
さっそくですが考えたアプリはこちらです↓

**

◼︎アプリ概要 （ コア機能 ）

アプリ概要はこんな感じです。
わかりやすいかなと思い、ちょっと広告風にデザインしてみました（笑）
早くこういう画像をiPadでいい感じに作れるようになりたいです（ iPad出だし遅れて在庫切れ組です...）

ユーザーインタビュー 〜 コア機能に落とし込みまでの流れは、
下記の流れで進めていきました。

◼︎ユーザーインタビュー

まず、次の３つの質問を友人５人にヒアリングしていきました。
-----------------------------------------------------------------------
①真似したい髪型は、いつ、どうやって探している？
②美容師さんにオーダーするとき、なりたいイメージをどんな風に伝える？
③ヘアカット（カラー）が終わったとき、「イメージと違った！」は経験はある？たとえば？
-----------------------------------------------------------------------

👧** なりたい髪型は「春らしくて明るい感じ」ニュアンス重視の女子大生
（23歳・大学生）**
髪型はなんとなく「ふんわり系」「春らしい」といったニュアンスレベルでイメージをもっている。美容室にある髪型カタログを美容師さんと一緒に見て具体的なヘアスタイルを決める。カタログのイメージと「なんか違うな」「似合ってないかも」と思うこともたまにある。

👧** モデルの髪型を再現したい、綺麗なお姉さん（26歳・不動産受付）**
美容院に行く前に髪型をネットで画像検索して、なりたいイメージを具体化している。ただ、これまで憧れのモデルの写真を見せて「この髪型にしてください」といってもその通りになった試しがないから、最近は写真は見せずに、ニュアンスを言葉で説明したあと、失敗されたくないから「過去に自分がされて嫌だったカットやカラー」を列挙して説明している。

 👧** ファッション誌でイメージを持っているサブカル女子（22歳・大学生）**
普段からファッションが好きで雑誌を見ているのでだいたい理想のイメージがある。特にカラーに一定こだわりがある。写真を見せて「この色がいい」とオーダーしても、仕上がりが思っていたカラーと違うことがよくある。
美容師さんからの色の見え方と自分の見え方は違うのかな？と思ったりする

👧** 自分の髪質ではいい感じにできないと半ば諦め気味のくせ毛女子**
（23歳・社会人）
ファッションもそこそこ好きで、こんなパーマでこんな色、と憧れのイメージはもっているものの、過去に「髪質的にパーマがかからなかった」「なぜか色が思うように入らなかった」という経験が多々あり、最近では「自分の髪はどうせいい感じにはならない」と半ば諦めてしまっている。

👧 髪色にかなり強いこだわりあり！バンド大好きサブカル女子
（22歳・大学生）
髪型は毎回、自分でイメージを考える。たとえば春は桜のピンク、秋は紅葉の赤、といった感じ。最近はグラデーションで「青 × 黄 」にしたいが、ネットではなかなか参考写真を見つけにくくて探すのが面倒だな〜と思っている。自分の理想を一番近く再現してくれる、お気に入りの美容師さんを必ず指名するので、毎回仕上がりは満足。今の美容師さんを見つけるまでは失敗も多かった（色がうまく入らない、すぐ色落ちする、など）

◼︎ヒアリングからわかったこと

５人ともタイプが全く異なりましたが、この２点が気づきでした。

❶「なりたいイメージ」の具体度は人によってさまざま
「綺麗め」「ふんわり」などざっくりしたニュアンスレベルでイメージをもっている人もいれば、なりたい髪の長さやパーマ、カラーを具体的にイメージしている人もいる。

❷ 皆、「髪の仕上がりがイメージと違った」経験はあるが原因は不明・・？
５人中、全員が「髪を切った（染めた）あと、イメージと違って不満だった経験がある」と回答してくれましたが、みなその原因は「？？？」という感じでした。

＋α 美容師さんにもヒアリング！

上記❷に関して、改めて「モデルの写真を見せても、自分の髪ではその通りに再現できないことが多いなぜ？」と疑問が残ったので、美容師さんの友達に原因を聞いてみました！

① 同じカラー名称でも、カラー剤がどこのメーカーのものかによって色の明るさやマットさが微妙に違う
② そもそもモデルと髪質や元の髪の色が違うから、再現には限界がある
└ ストレートで髪の量が少なめのモデルのヘアカットを、くせ毛の子だったり髪の量が多い子が真似すると広がりやすくなってしまったり、元の髪色が明るいモデルがやった「ブリーチなしでデキるアッシュカラー」を髪色が暗い子が鵜呑みにして、同じようにオーダーすると色が綺麗に入らなかったりする

◼︎コア機能

美容師さんに問題の原因を教えてもらえたので、この問題を解決できそうなコア機能を考えてみました。
------------------------------------------------------------------------

❶ 同じカラー名称でも、カラー剤がどこのメーカーのものかによって色の明るさやマットさが微妙に違う（課題①）
→ モデルの髪型のビジュアルだけでなく、カラー剤やパーマの詳細がわかる機能

❷そもそもモデルと髪質が違うから、再現には限界がある（課題②）
→ ユーザーの髪質を予約段階で美容師さんに事前共有できる機能。
カット / カラーのときにモデルとの髪質の差を考慮してもらうことができる

→ 真似したい髪型を探すときに、自分の髪質に近いモデルから探すことができる機能。服でたとえると、自分の身長や体重にあったモデルのコーデを一覧で見れるイメージです👚**
（※ また、髪質に絞って記載していましたが、自分に似たモデルから探す、という観点で、髪質だけではなく顔型・パーソナルカラーも選べるように設計しています）

❸ 「なりたいイメージ」の具体度は人によってさまざま。「綺麗め」「ふんわり」などニュアンスレベルの人もいれば、まで具体的にイメージを持っている人もいる。
→「検索方法」は幅を持たせよう（ニュアンス検索〜こだわり検索）

--------------------------------------------------------------------------

◼︎ステートメント （ まとめ ） 

コア機能が定まってきたので、最後に整理します！

📌ステートメントシート
**
◼︎ステートメント**
真似したい髪型を探して、自分の髪質に合わせて再現してもらえる髪型アプリ。髪型の記録・シェアもできる。

◼︎ユーザー
美容院で真似したい髪型の写真を見せたり言葉で説明しても、仕上がりが「イメージと違った」となった経験がある人

◼︎コア機能
⑴ こだわり検索機能
・流行りのスタイル、「愛されヘア」などニュアンスから検索
・長さ、色を指定して検索
・自分の髪質と近い髪質のモデルから検索
⑵ モデルの髪型詳細
・ビジュアルだけでなくカラー / カット / パーマのsh
⑶ 髪質カルテ
・予約段階で美容師さんに事前共有
⑷ 髪型の記録・シェア
・過去の髪型を見返したり友達にシェアできる
・いいね！の数で、人から見た自分に似合う髪型がわかる

◼︎ユースケース
・美容院に行く前、真似したい髪型を探せる
・美容院を予約すると同時に、美容師さんに髪質の事前共有をする
・新しい髪型を記録、シェアする

◼︎諦めた機能
・美容師さんのヘアカットレポ（どのように切って、どこを注意してカラーを入れたか、などをブログ風に記載）
└ 美容師さんが入力するコストが高いこと、実際の美容師さんより「そこまで詳しく情報を記載なくても、モデルとの髪の状態の違いや使用カラー剤がわかれば十分再現しやすい」と言ってもらえたことから諦めました。

◼︎アプリ画面一覧

「シンプル × 洗練」を意識しました。わかりやすく使えて、髪型の写真が主役なので主張のすくないデザインにしています。

◼︎さいごに

今回は初めてユーザーインタビューをしてサービス設計を考えましたが、ユーザーや美容師さんに聞いて初めてわかることだらけでした。
また、作ってから３週間くらい経ってからこのnoteを書いてみて、改めて「ここはもっと詰めないといけないな.. 」と思う部分が出てきたので最後に残しておきます。（まだ全然詰められていないなと思うので、何かアイデアあればいただけると嬉しいです ... 🙏

・新しい髪型の入力画面と入力のタイミングについて
└ 髪型の詳細情報について、カラー剤のメーカーなど詳細情報を入力するのは美容師さんになりそうだが、どのタイミングで入力してもらう？
└ 髪を切ったあと、ユーザーから「ちょっとここだけ入力お願いします」的な感じで。ユーザーだけでなく美容師さんも髪型ページを美容院のSNSにUPして宣伝できるなど、美容師側にもメリットがあったらやってくれそう

・美容院予約画面について
└ オリジナルの予約画面をつくる？他の美容院サイトと連携する？連携する場合、髪質のシェアはどうやって行う？
└ オリジナルの予約画面をつくるのがUI的にはベストだが、まずは他の予約サイトと連携するほうが現実的そう。「ご要望があればフリーコメント欄に記載ください」の欄にURLを貼るとか...？

以上でおしまいです！
なにかアドバイス・FBがあれば教えていただけると大変喜びます....！
最後まで読んでいただき、ありがとうございました！！
（そしていつもスキくださるかた本当にありがとうございます.....）

画面遷都については、良かったらプロトタイプも見てください！🙏

🐤プロトタイプはこちら
https://projects.invisionapp.com/share/EROXKREUXQ2

🐦Twitterやっています！
「m」でやっております！デザイン好きな方、駆け出しのデザイナさん、よかったらフォローいただけると嬉しいです〜！！お仕事も探しています！
https://twitter.com/maima_1107

-fin-