はじめに

こんにちは！Toshifumiです。私のページに来てくださりありがとうございます！

今回は、私が東京デザインプレックス研究所のUI / UX専攻受講時にチーム課題で制作した、「Beomil（ビオミル）」というプロダクトの改善個人ワークについてお話します。

Beomilの詳しいお話についてはこちらをご覧ください。

ワーク前に洗い出した課題

スクールの最終発表までに制作した成果物は、個人的には改善した点が非常に多くありました。今回のワークでは、転職活動の関係ですべての改善点には取り組みませんでしたが、特に改善したかった部分に重点的に取り組みました。

以下は、ワーク前にどんな課題があるか洗い出しをした際のまとめです。あえてやり方に名前をつけるとすると、「ヒューリスティック分析」になるかなと思います。

ライブラリ（ガイドライン / コンポーネント）

改善前のガイドライン

改善前のコンポーネント

• HIGの標準フォント / システムカラーの活用が不十分である

• HIGの標準コンポーネントが上手く活用できていない

• 必要なコンポーネントが不足している

• 最終発表までに作成したコンポーネントに無駄な要素が存在する

• スタイルガイド / ガイドラインが不十分である

ユーザー体験 / UI

オンボーディング / 新規登録 / ログイン

改善前の画面

• オンボーディング3画面においてユーザーが任意に画面遷移ができる設計になっていない

• 各画面の余白サイズが統一されていない

• 登録画面からの遷移が、アドレス登録からメールを受信しURLをタップするというフローを想定された設計になっていない

• オンボーディング3画面からログインする際の導線に新規登録画面に遷移するステップが挟まってしまっている（このステップを省略できる）

• ログイン画面においてモーダルが使用されている明確な意図が存在しない

情報入力

改善前の画面

• レイアウトが左揃えで統一されていない

• 体重画面以降に前画面に戻る導線が存在しない

• 入力した情報を確認する画面が存在しない

Tab Bar / FAB

改善前のTab Bar

改善前の展開後FAB

• リサーチ（ユーザーインタビュー）から「見た目記録」＞「体重記録」＞「食事記録」が機能ニーズの優先順位であることが明らかになっていたが、「食事記録」＞「体重記録」の順序になっている（ホーム画面の配置順序とも整合性が取れていない）

ホーム

改善前の画面

• 「食事の変化」というラベルとコンテンツの内容が合っていない

• カレンダーの色が変化している部分が直感的に何を表しているのか分かりにくい

• 「たんぱく質」「炭水化物」「脂質」の目標摂取数値が可視化されていない

見た目記録

改善前の画面

• 「最初」と「最新」以外の記録写真が確認できない（変化の推移が詳細に把握しにくい）

• 画像コンポーネントが背景と同化しているように見える（ホーム画面のコンポーネントも同様）

食事記録

改善前の画面

• ホーム画面とコンテンツ順序の整合性が取れていない（栄養状況が記録カレンダーの上にある意図が不明）

改善プロセス

今回はスタイルとコンポーネントの統一、主要画面のUIデザイン改善を中心に取り組みました。本来であれば機能要件、画面要件、情報設計などの上流工程から見直したいところでしたが、時間が限られていたので対応スコープを絞って行いました。

以下は具体的に取り組んだことと、取り組まなかったことをまとめていきます。

今回取り組んだこと

スタイルの統一 / コンポーネント整理

改善後のカラーガイドとコンポーネント

まずはじめに取り組んだことは、全体スタイルの統一とコンポーネント整理です。

スタイルに関してはiOSを前提としているので、HIGを参照して進めていきました。フォントの種類は欧文、日文ともにシステムフォントに統一し、サイズやウェイトも推奨されているものを採用していきました。いくつか推奨サイズや推奨ウェイトで対応できない箇所があったため、数種類独自のスタイルを定義しました。

コンポーネントは最終発表時点の成果物を踏襲しながら、改めてボタンやTab Bar、カレンダー、グラフ、画像コンポーネントを再設計し、作成しました。

また、今回はナビゲーションバーやアイコンなど、iOSの標準コンポーネントで対応できる / すべき箇所はAppleが用意しているテンプレートを活用しました。

オンボーディング

改善後のオンボーディング画面

オンボーディング3画面では、主にレイアウトを中心に改善しました。具体的には以下の通りです。

• ユーザーが任意にスキップできるように、画面下部に「Beomilをはじめよう！」と「Beomilにログインする」のボタン導線の設置

• インジケーター横に矢印を設置

• 余白のサイズ統一

改善前のUIでも、「さあ、はじめよう！」というボタンは設置されていました。しかし、それではユーザーがより具体的にどのような画面に遷移するのかイメージがしにくい状態でした。そこで、ボタンをタップすることで遷移先のページをイメージしやすいくする狙いを持って、「Beomilをはじめよう！」と「Beomilにログインする」の2つのボタンを設置しました。これにより、ボタンタップの1動作で「新規登録」と「ログイン」への遷移分岐を実現し、ユーザー行動を1つ削減することができました。

また、インジケーター横の矢印は改善前のUIには設置されていませんでした。もう少し深掘りすると、基本は自動で次ページに画面遷移することを想定し、スキップしたいユーザーは「さあ、はじめよう！」ボタンをタップすることを想定していました。しかし、それでは「ユーザー任意のペースで画面遷移を行い、オンボーディングをすべて確認する」ことができませんでした。そこで矢印を設置して「ユーザー任意のペースで画面遷移を行い、オンボーディングをすべて確認する」を実現し、3パターンのユーザー行動を可能にしました。

その他、改善前のUIでは余白のサイズや配置位置が各画面でわずかにずれていたので、そちらの修正も行いました。

新規登録 / ログイン

改善後の新規登録 / ログイン画面

新規登録 / ログイン画面では、前ステップの「Beomilをはじめよう！」と「Beomilにログインする」から分岐遷移を想定した設計に変更しました。また、フォームはボタンなど他のコンポーネントとの統一感を高めるため丸みを強めました。さらに、Apple IDとGoogleアカウントの登録 / ログインボタンはラベルを追加し、サイズも大きくすることによって、視認性と操作性を向上させる狙いのデザインに修正しました。

新規登録画面はメールアドレス登録とパスワード登録の画面を分割し、メール認証のステップを想定した設計に変更しました。

情報入力

改善後の情報入力画面

情報入力では、前の画面に戻る導線を設置し、1番最後に入力した情報を確認する画面を追加しました。また、全体のレイアウトの修正も行いました。

ホーム画面

改善後のホーム画面 / FAB展開画面

ホーム画面では、まず「見た目の変化」の画像コンポーネントにシャドウをつけることによって、背景と同化して見える状態を解消しました。また、並び順を「見た目記録」と同じように、左側を「スタート」、右側を「最新」に変更しました。

「食事の管理」では、ラベルを「食事の変化」から変更しました。また、食事を記録した日としていない日を直感的に認識できるように、色つきの円背景を追加しました。このUIは、iOSの「ヘルスケア」アプリにある、「マインドフルネス」の記録カレンダーを参考にしました。

さらに摂取カロリーと栄養素の箇所は、数値ラベルを追加することによって目標摂取数値とその日に摂取した数値を直感的に確認しやすくしました。

Tab BarとFABは、ホーム画面のコンテンツ配置順と統一させるために、順番を並べ替えました。また、アイコンも統一性を持たせられるように、SF Symbolsを採用し修正しました。

見た目記録

改善後の見た目記録

「見た目記録」では、「スタート」と「最新」以外の過去の記録を確認できるUIに修正しました。並び順は「スタート」と「最新」と異なり、追加日が新しい順にしています。また、ホーム画面と同様にシャドウを追加することで、背景と同化しているように見える状態を解消しました。

体重記録

改善後の体重記録

「体重記録」は改善前のUIを踏襲しながら、数値記録画面を画面遷移からモーダルに変更しました。体重の数値記録は他の機能よりも小さな機能なので、完全な別画面を用意するのではなく、「体重記録」画面に内包させる意図でモーダルを採用しました。

食事記録

改善後の食事記録

「食事記録」は、ホーム画面と統一するために記録カレンダーと栄養状況配置を入れ替えました。

今回取り組まなかったこと

スタイルガイド / ガイドラインの作成

今回はスタイルガイドとガイドラインの作成に取り組みませんでした。というよりも、今回はUIデザイン改善の優先度が高かったため取り組むことができませんでした。

本来であれば中長期的なデザインの運用を見据えるのなら、規模が大きくなるにつれて必要性が増してきます。

私の経験不足から、初期フェーズにおいてどの程度詳細に構築していく必要があるのか現時点では判断することができません。

しかし今回のワークでも、細かい定義をスタイルガイドやガイドラインという形で可視化しきっていなかったため、途中で迷ってしまったときがありました。

また、チームでプロジェクトを進める際もスタイルガイドやガイドラインを作成しておいたほうが、共通認識を持って進めることが可能です。

こうした経験から、初期フェーズにおいてもスタイルガイドやガイドラインは可能な限り作成していったほうがよいと思いました。

外部サービス連携

東京デザインプレックス研究所のワークでは、外部の宅食サービス（noshさん）との連携を想定したサービス構想になっていました。しかし今回の個人ワークでは、アカウント連携のユーザー体験精査や、noshさんとのデータ連携をどのように行っていくのかを考慮する必要があり、大幅な工数を見込んだため改修を見送りました。

食事記録の機能改修

Beomilの機能として「見た目記録」「体重記録」「食事記録」の3つが主機能として存在しますが、「食事記録」はユーザーインタビューから優先度が1番低かったので、今回は「見た目記録」（顔の撮影）と「体重記録」の2機能の改修に注力しました。

詳細なプロトタイピング

この個人ワークでは、全体のスタイルやレイアウト、UIデザインの修正を重視していたため、細かいインタラクションを含めた全体の詳細なプロトタイピングは行いませんでした。ただ、動きとレイアウトを確認したかったため、今回は起動から会員登録までと、ホーム画面のグラフの横スクロールのプロトタイピングは行いました。

ワーク後の課題（もし取り組むのならやりたいこと）

今回のワークでは対応できませんでしたが、今後やるとしたら取り組みたいことをまとめていきたいと思います。

スタイルガイド / ガイドラインの作成

「今回取り組まなかったこと」でも触れましたが、スタイルガイドやガイドラインの作成はぜひやりたい思います。スタイルガイドやガイドラインは、プロダクトやサービスの世界観に関わってくるものなので、ユーザーの課題を解決する価値を届けられるものを生み出していくためにできるようになっていきたいです。

ユーザー体験の整理 / 改善

今回のワークでは、ユーザー体験全体の見直しと改善までは深く行いませんでした。本来であればUIデザインはユーザー体験を可能な限り精緻に設計した上で成り立つものだと認識しています。また、情報設計の面でも、各コンポーネントやコンテンツのレイアウトの妥当性を検討しきれていないと実感しています。今後取り組むとしたら、ユーザーストーリーマップやサービスブループリントなども活用して、体験設計の質を高めていきたいです。

全体のプロトタイピング

今回は起動から会員登録完了まで、ホーム画面にあるグラフの横スクロールのみの対応になりました。細かいインタラクションはユーザーにとって、使いやすさやプロダクトの世界観にいかに引き込まれていくかなど、影響がとても大きい要素です。全体の詳細なプロトタイピングをすることで、現時点では見えていない課題が明らかになることもあるので、ユーザーに対する価値提供の質を高めていけるように取り組んでいきたいです。

おわりに

今回の個人ワークに取り組んで感じたことは、まだまだ力不足で、私には伸び代しかないということです。ひとつひとつ取り組みを進めていく中で、始めは見えていなかった改善点が見えてきたり、行き詰まって改善に時間がかかってしまったりと、新たに多くの気付きを得ることができました。

そして、さらに実感として湧いてきたことは、「自分の手で人の役に立つ何かを創り出すことはやっぱり楽しい」というものです。純粋に様々なことを考えながらデザインをしていくことに夢中になれるので、「もっとできるようになりたい」と思いました。

実力も経験もまだまだ足りませんが、もっとできるし伸びていける自信はとてもあるので、地に足をつけながら今後も地道にステップアップしていきたいです。

ここまで読んでいただきありがとうございました！