![見出し画像](https://assets.st-note.com/production/uploads/images/121841401/rectangle_large_type_2_43a49f85a2bf6fa38f2a8e3d30d52e82.png?width=1200)
自主制作 IDEAL ME ~情報設計編~
制作のきっかけ
最近、友人たちと話していると睡眠や食事など健康に関する話題が多くなってきていると感じた。ほとんどが学生時代からの友人たちだが、みな年齢を重ねて、体力や体型に変化があったり、人によってはライフステージが変わったりと20代前半とは違った悩みが出てきているようだった。睡眠時間や生活のちストア画像のょっとしたこと変化を記録できるアプリがあったらいいのかなと感じたことがきっかけ!
解決したい課題
健康意識を高めたいし、QOLを高めたいでもなにをしたらいいのかわからない
デザインしたアプリ
【IDEAL ME(理想の私)】
「キノウをキロク」
昨日に焦点を当てたセルフケアアプリ
プロトタイプ
要件定義・価値定義フロー
マインドマップで思考整理
最初に友人たちとの話で特に話題に上がっていた睡眠にフォーカスしてみた。
睡眠に関するイメージやなんとなく思うことを洗い出してみる。
一般人の睡眠に関する知識は少なく、何が自分に合っているか実践可能なのかを判断するのは難しそう。本当に睡眠の質にコミットするアプリを作るなら専門的な知識や知見が必要だが、今回はその準備はできない。
そのため、睡眠の質を向上するではなく「生活の質を向上する」というとこ
ろにフォーカスしてみることにした。
![](https://assets.st-note.com/img/1698109588976-TJtciDGo8a.png?width=1200)
ドメイン調査
本や雑誌で健康や睡眠、生活習慣などについて調査。
予想通りに不合理
Tarzan特別編集痩せる生活
眠れなくなるほど面白い 図解 睡眠の話
これらの情報から、自分の目標や理想を常に意識できるようにすれば継続させることができるのでは?と思った。また、健康は一つの項目で成り立つのではなく、睡眠・食事・精神状態・運動・・・その他様々なことが相互的に
影響し合うということがわかった。
カスタマージャーニーマップの作成
社会人6年目のベンチャー勤務の女性をペルソナにした。
ターゲットの年齢層としてはある程度仕事に慣れ、年齢の変化やライフステージの変化を意識し始める年齢。社会人1年目から今まで生活に大きな変化はまだ起きていないものの、結婚や出産を身近に感じ始める年齢でもあると思う。様々な面で焦りも含めたステップアップ意欲が高まる時期と想定できる。また、現段階では金銭的にも余裕があり、新しいものを取り入れること
も可能。
![](https://assets.st-note.com/img/1698109650510-rNHjMnHY3p.png?width=1200)
競合調査
睡眠時間を記録するアプリや日記の機能があるアプリを調査。
睡眠記録アプリには似たような雰囲気で機能も似ているものが多く差別化が難しそうだった。
日記系のアプリは女性向けのデザインのものと、シンプルな日記だけの両極端になっていたため、シンプルな機能かつ、コンセプトのある設計であれば差別化できるのではないかと感じた。
![](https://assets.st-note.com/img/1698110284608-ypagTSNwZY.png?width=1200)
価値定義
![](https://assets.st-note.com/img/1698196810204-vxqZoD3eE1.png?width=1200)
機能選定
MVPで作成したかったため、機能は最小限に。記録し、振り返るという基本的な部分にフォーカスして選定。生活習慣や健康、睡眠に関する記事(PRを含む)を載せるメディアやお知らせの機能を今後の追加機能として入れられそう!
記録する:昨日を振り返り、記録をする(記録できる内容:睡眠時間/気分/日記)
あなた:ユーザーの理想が表示される。記録した内容が反映され、グラフとして可視化
設定:プロフィール情報の編集など
![](https://assets.st-note.com/img/1698196954690-zP0hIGv6ZD.png?width=1200)
ユーザーフロー図
決定した機能をもとにユーザーフロー図を作成!機能を少なくしたため、簡潔なフローになりました。
気軽に利用開始できるように登録をしなくても基本的な機能は使えるようにしました。
![](https://assets.st-note.com/img/1698197026156-MFSbfQyHcK.png?width=1200)
ワイヤーフレーム作成
フロー図をもとに、全体のワイヤーフレームを作成しました。
各画面にどの要素が必要なのかおおまかな配置を決め、不足しているフローがないか確認します。
![](https://assets.st-note.com/img/1698197065589-GIQbakFVUy.png?width=1200)
続きのビジュアル編はこちら!
figmaファイルを公開しています!