Life hakko
UX UIデザイン

ゼロからサービスを考えてアプリデザインを作りました。

 

 

内容:自主制作

担当:リサーチ/要件定義/UI作成

期間:1ヶ月

 

1.概要

 

1-1.コア機能概要

制作フローは後述に続きますが、先にFigmaを見たい方はコチラをご覧ください。

 

プロトタイプをさわる

 

作業全体を見る

 

 

以下、コア機能です。
(「5.UI完成」で全体の機能を載せています)

 

○クイズ機能(よむ-まなぶ)

 

発酵のメカニズムをまなべる記事。読んで終わりではなく、クイズで知識を定着。1記事1問なので隙間時間で気軽にトライできます◎

 

 

○アクティビティ機能(ふりかえる)

 

記事をよむ、クイズに正解、記事をSNSシェアの3つのアクションで発酵Ptをゲット。たまると発酵菌のランクがアップ!「ふりかえる」でランクアップまでのネクストアクションや、これまでの積み上げをチェックできます。

 

 

○レシピ機能(つくる)

健康的で奥深い発酵食レシピをたくさんお届け。 ただ作るのではなく、発酵のチカラを知りながら料理することで、より美味しく感じられます◎

 

1-2.制作背景

自主制作のヒントを得るため友人にヒアリングしたところ、以下の意見をもらいました。

(発酵食が大好きな友人。私も小さい頃から発酵中毒です。)

コロナ禍のニーズにこたえて人との繋がりを促進するサービスが増える一方で「自分が好きな情報で心を満たし、まずは自分自身と繋がりたい」と考える方は少なくないと感じます。
この段階では漠然としていますが、今回はそういった方に喜んでもらえるサービスをデザインしたいと考えました。

 

2.サービスの方向性

 

2-1.サービスアイデア(ヒアリング前)

ヒアリングから抽象的に「美容と健康によい手軽に作れる発酵食レシピアプリ(+αで他の情報)」をイメージしました。

(特化した領域なので、アイデアの1つとして考えていました。)

 

発酵食に興味がある人は日頃どんな行動をして、何かしらの困りごと(課題)があるのか?
リアルな意見を収集するため、ユーザーヒアリングをしていきます!

 

2-2.ユーザーヒアリング(制作価値の確認と課題発見)

 

○ヒアリング内容

目的:サービスの制作価値の確認、課題について調査

人数:3名(発酵食に興味がある方)

方法:オンラインでデプスインタビュー

ポイント:
回答範囲を狭めないようまず抽象的に質問し、話してもらった内容から深掘りしていく

 

質問内容をメモしてから伺いました。

 

2-3.サービスアイデア(ヒアリング後)

ヒアリング内容をまとめていきます。
「普段、発酵食の情報はWebメディア・検索エンジン・Instagramから調べている」と聞き、そもそもアプリとしての制作価値はあるのか?という前提からヒアリングしました。

意外と肯定的なコメントが多く(提案している側なのに)驚きました。

 

情報が溢れている中で、特定ジャンルのキュレーションアプリは
・欲しい情報だけ得られる利便性
・無駄な時間を吸い取られない安心感
があるようです。
また「発酵について学びたいけど、お金と時間はかけたくない…」という具体的なニーズが見えてきました。

レシピ機能にプラスして「学習」と「購入」が求められていました。

 

ユーザー像を明確にするため、ヒアリング結果やWebメディアのリサーチから「発酵食に関する興味レベル」を6段階にわけました。

アプリの利用イメージが湧きやすい3をプライマリー、4をセカンダリーのユーザー層に考え、「4のユーザーは最初はレシピ中心に見るけれど、アプリを使ってる内に3の興味レベルに引き上げる構成」を組み立てていきます。

 

ユーザーの行動フローを捉えるため、ヒアリングを元に興味レベル3寄りのプライマリーペルソナを設定しました。


(発酵食専門料理教室の主宰をされていた方が、生徒さんのお話を色々教えていただき大変有益でした。)

 

「望み」「目標」とそれを拒む「悩み(課題)」が明確になってきたので、解決に導くコア機能を考えていきます。

 

ユーザーの体験目標「楽しく学ぶ」を実現するため、ヒアリングであがったクイズ機能導入を考えていきます

 

ユーザーファーストのサービスであることはもちろん、運用視点でユーザーにして欲しい行動と導線を考えます。


(深堀りしたのですが、あとで見事にアイデアがひっくり返るため省略します)

 

  • メイン目標の認知拡大について「クイズに正解→ランクアップ→SNSにシェアする」というアイデアが浮かびました。ランクアップ制度はユーザーのモチベーション向上を意識しています。
  • サブの商品購入について、収益化を考えてアプリ内でEC機能を設けるアイデアも浮かびましたが、発酵に特化して商品のラインナップが少ないため、EC機能は無理に付けず商品紹介記事から購入サイトへのアクセスを促す形が自然だと考えました。

 

3.要件定義

 

3-1.機能アイデアの洗い出し

「機能アイデアを大まかにまとめて再度ヒアリングしたい」と考えていたので、この時点でペーパープロトタイプを書きます。
目的はUIビジュアルを固めることではなく、文面では浮かばない機能の過不足をアプリの型に当てはめて洗い出すことです。

思い浮かんだ細かい考えは、後で活かせる可能性があるのでメモを添えています。

 

上記の仮アイデアは本当に使ってもらえるのか?
方向を見誤っていないか、ユーザーインタビューで確認していきます!

 

3-2.ユーザーヒアリング(機能アイデアで目標達成できるのか)

 

○ヒアリング内容

目的:方向性の答え合わせ。ズレていたら改善ヒントを得る

人数:4名(発酵食に興味がある方)

方法:オンラインでデプスインタビュー

ポイント:

・YES/NOで答える具体的な質問が含まれるため、誘導的にならないよう注意する
→冒頭で「辛辣な意見大歓迎なので忖度ゼロで教えてください」と伝え、意見しやすい雰囲気作りを心がける

・YES/NOだけで終わらせず「なぜ?どうして?」のWhyを伺い、具体エピソードから明確なヒントを得る

 


友人や、参加しているオンラインコミュニティでインタビュイーを募集したところ、とても親切な方が多くて助かりました。

 

3-3.要件定義の確定

忖度ない意見に感謝しながら、ヒアリング結果をまとめていきます。

  • コアユーザー「興味レベル3」の方はクイズに意欲的なので、クイズ機能は搭載決定します。
  • クイズ〜ランクアップ〜SNSシェアの導線は有効ではなさそうなので没案に。アプリの認知拡大は「面白い記事やレシピならLINEでシェアする」という意見を元に、自然な流れで組み立てることにします。

 

上図の通り、機能全体の「記事を読む」「SNSシェア」のアクションも含めてポイントゲット機能を搭載し、ゲーミフィケーションを活かして学習意欲の向上・アプリ定着を誘う方向に転換します。

 

上記に至った理由は以下2点です。

・「子育てで自分の時間が取れないから学習の定着は難しい」とおっしゃってたので「学習に限らず、続けられてる習慣はありますか?」と伺ったところ「noteは毎日みてる。記事も面白いし、サービスの優しい雰囲気が好き」と回答をいただきました。

その後、深津さんのnoteに実績バッジをつけたらどうなる?からヒントを得ました。また、記事から3年経過した今も継続しているので、バッジ機能は効果的だと考えました。

 

・インタビューとは別で、友人が「子供が家で楽しく過ごせる様にラジオ体操のカードみたいに”いい子カード”を作った。私も頑張ってるから”いいママカード”に誰かスタンプ押して欲しい笑」と言っていたことを思い出し、学んでいる自身に対して、自己肯定感をほんの少しでも上げてもらえるようにアクティビティの充実を考えた。

 

ユーザーがアプリを開く前の感情を3パターンに分けて、行動フローと利用定着サイクルを再考します。

 

アプリの顔となるホーム画面の記事カテゴリーも、ヒアリングを参考にしました。
1回目のヒアリング+Webメディアのリサーチから、興味があるカテゴリを洗い出し、
2回目のヒアリングで興味度を伺い、ホーム画面での並び順を決めました。

 

他にも
「癒される雰囲気がいい」
「とりあえぜずアプリDLするけど、好みのデザインじゃなければアンインストールする。シンプルでおしゃれなデザインがいい」
「ビジュアルだったら、today’s specialのブランドイメージが好き」

など、情緒的価値を重視した意見も多くいただきました。

 

方向性が固まったので、UIビジュアルに落とし込んでいきます。

 

4.UIビジュアル

 

4-1.ペーパープロトタイプ

改めて機能全体のペーパープロトタイプを書き出します。

 

4-2.パターン出し

プロトタイプでパターンを出しながら、ブラッシュアップしていきます。

いざビジュアルに起こすと受けるイメージが変わってくるので、優先バランスを考えたオブジェクトの配置にとても悩みました。

 

4-3.制作ルール

デザイン品質の担保と操作性向上のため、ルールを定めながら一貫性のあるビジュアルに仕上げました。

 

作業効率のためにFigmaのコンポーネント/Varinants/Auto Layoutを使用しました。

 

レスポンシブデザインや細かな定義まで作り込めていませんが、実装を意識して「エンジニアさんへどう伝えたらよいか?」をおおまかに考え、ほんの一部メモを置きました。

 

また運用面を意識し、非現実的なビジュアルにならないよう注意しました。
具体的に、記事をアップする際の画像サイズの調整に手間がかからないよう、サムネイルの比率は統一してサイズ感でデザインのメリハリをつける、などの工夫をしました。

 

5.UI完成

冒頭に記載したコア機能も含め、以下が全体像です。

 

○ホーム画面(よむ)・ボトムナビ/設定/お知らせ

  1. カテゴリー(タブバー)は、ヒアリングを元に内容と並び順を確定。
    ボトムナビは直感的にタップしやすいように、ユーザーの行動に伴った「よむ」「つくる」「さがす」「すき」「ふりかえる」の名前をつけた。ヒアリングの「癒される雰囲気」を重視し、優しい印象を届けるためひらがなで統一。
  2. 設定はユーザーの利用頻度は高くないため、ハンバーガーメニューに配置。
  3. お知らせはアクションを促す通知が含まれるため、目に止まりやすいヘッダー右上に配置。

 

 

○記事全体

  1. ボトムナビは、スクロールしている間は記事への没入感を高めるために非表示にする。(現在のFigmaの仕様では、プロトタイプで表現できず)
  2. 「すき」は、ヒアリングを元に優先度高くFABで配置。
    SNSシェアボタンは強制的に感じさせないよう優先度を下げて、ヘッダー右上に配置。
    商品紹介記事では、購入サイトへのリンクボタンを配置。
  3. 記事の最後は、カテゴリー全体に興味を誘うために「あわせて読みたい記事」などレコメンドを表示。

 

 

○クイズ機能(よむ-まなぶ)

 

  • 「たのしくまなぶ」をコンセプトにしているため、クイズをするかはユーザーの意思で操作できる設計。
  • 復習ユーザーや「とりえずクイズやってみたい」と考えるユーザーは、記事を最後まで読まないと推測し、クイズボタンもFABで配置。
  • 利用定着につなげる「ちょっと気分が上がる」配慮として、クイズ回答後のポップアップはシンプルなアニメーションを配置。

 

 

○アクティビティ機能(ふりかえる)

  • 利用定着のため、現在のランク/保持ポイントのプログレスバー/ランクアップまでのネクストアクション/今月のアクティビティで日々の積み上げを可視化。
  • プラスαの便利機能として「今月のアクティビティ」に記事の閲覧履歴/クイズの解答履歴を配置。
  • アクティビティの集計単位は、1週間だとアクション回数がたまらず「あまり使ってないアプリの意識(からの、アンインストール検討)」の恐れが浮かんだため、範囲を持たせて月単位で表示。

 

 

○レシピ機能(つくる)

  • 忙しい主婦が片手間に読んで手軽に作れるレシピを想定。
  • 最初はレシピ目当てのユーザーも、徐々に「まなぶ」ことに興味が湧くよう、レシピ記事最後に関連の「まなぶ記事」をレコメンド。

 

 

○検索機能(さがす)

  • 「よむ」と「つくる」で横断して検索できるようタブバーを配置。
  • 検索目的が曖昧なユーザーに対しても興味が湧きやすいようにレコメンド記事を表示。

 

 

○記事保存機能(すき)

  • 「すき」アイコンは、学習コストを下げるために記事サムネイル右上に統一して配置。
  • ヒアリングを元に優先度を上げて「すき」機能をボトムナビに設置。
  • 初期リリースでは必要最低限の機能を導入するのがベストと考え、並び替え/一括選択/任意のフォルダ作成などは不要と判断。

 

 

○商品紹介記事〜SNSシェア

  • ヒアリングの「近くのスーパーじゃ買えない珍しい調味料が欲しい」という意見を参考に、カテゴリー「レア発酵」の記事で商品購入サイトのリンクを配置。
  • SNSシェアはアプリの認知拡大を担うアクションなので、発酵Ptを高得点に設定。気分が上がるようにポップアップにアニメーションを配置。

 

 

○新規アカウント登録フロー

  • 前提として、初回の操作負荷を下げるため、オンボーディングでアカウント登録不要。(アプリ全体的にログイン済の状態をイメージしてデザイン)
  • 「ふりかえる」をアカウント登録必須の機能とすることで会員登録を促す。

 

改めてチェックされたい方はコチラをご覧ください。

 

プロトタイプをさわる

 

作業全体を見る

 

 

 

6.まとめ

 

○学び
・インタビューでは、Whyの深堀りで多くの発見がありました。最初はNoでも別の角度でYesに変わる回答もあり、表層を鵜呑みにせず、深層心理を汲み取る重要さを学びました。
・アプリ全体を設計し、機能とオブジェクトの優先順位を考えながらデザインする難しさと楽しさを感じました。一画面のみでなく、前後の画面や他の機能の条件も含めて、一貫性のあるUIを組み立てるトレーニングを継続していきます。
・今回は1人で制作しましたが、実際にはチームの方々といかにスムーズにコミュニケーションをとれるかがサービスの質に直結すると思うので、伝え方の工夫・思いやりを常に意識しながら、ユーザーファーストのデザインを生み出していきたいと思います。

 

○お礼
ヒアリングに協力してくださった方、記事を最後まで読んでくださった方、ありがとうございました!