
michiteku YOHAのデザインコンセプトが出来るまで
2025年1月、michitekuの新プロダクト「michiteku YOHA(みちてく よは)」が正式リリースしました。
初めまして、デザイナーのゆっきです。
今回、「YOHA」のプロダクト立案、UIUXデザイン、アートディレクションに携わりました。
この記事では、「YOHA」のアートディレクションについて、プロダクトメッセージを効果的に伝えるためのデザインコンセプトをどのように構想し、作り上げていったのかをご紹介します。
「michiteku YOHA」のコンセプト背景

michiteku YOHA PRサイト / App Store / GooglePlay
「michiteku YOHA」は、通院治療中のがん患者さんのためのスマホアプリです。「通院・治療のある日々を、少しでも心地よく過ごしたい」と願う方々に向け、通院予定管理を中心に、さまざまな機能を提供しています。
このプロダクトが目指すのは、「治療」に限らず「生活」にも寄り添うこと。そしてアプリを患者さんにとっての「なんでも書ける場所」にしてもらうこと。
これを実現するため、以下の2点をデザインコンセプトの重点項目として設定しました。
・医療的な「義務感」や「冷たさ」からの脱却
・日常を受容するような「温もり」を感じられるトーン
ヘルスケア領域にはすでに多くのプロダクトが存在しています。
その中で、「機能」と「世界観」の融合によって独自性を演出することが求められたため、「YOHA」のコンセプトを包括しプロダクトメッセージを効果的に伝えるためのデザイン設計(=アートディレクション)に丁寧に取り組みました。
コンセプトメイキング
「通院治療中のがん患者さんのためのスマホアプリ」を開発するにあたり、まずは誰に使ってもらいたいのかを明確にすることから始めました。
事前ヒアリング調査の結果、メインターゲットは40代前後の女性に設定しました。多くの方が家庭や仕事、私生活の変化と同時に病と向き合いながら、治療と生活の両立に困難を感じていることが分かったからです。
YOHAはこうした状況の中で、ストレスなく利用できるプロダクトでなければなりません。
また、がん治療の意思決定において大切なのは、がん患者さん自身が「どのように暮らしていきたいか」という気持ちです。
「YOHA」は「記録」を通じて、その答えを見つける手助けができるようなプロダクトでありたいと考えました。
そのためには、症状、治療経過、日々の出来事、気持ちなど「なんでも書ける」と感じてもらうことが重要になってきます。

この感性的なコンセプトの具体化には、数ヶ月の試行錯誤を要しました。
競合や類似プロダクトのコンセプト・機能・UI設計を分析してペーパープロトタイプを作成し、がん患者さんに見ていただいた印象を採点式で定量的に評価するとともに、ヒアリングによる定性調査も並行して行いました。
こうしたプロセスを通じて得られたフィードバックを元に、より「書きやすい」と感じられるトーンを探っていき、YOHAのデザインコンセプトのベースが作られていきました。
「YOHA」のデザインコンセプト確立
「YOHA」のためのセカンダリーカラー "Aqua"

企画初期段階ではmichitekuのプライマリカラー(群青色)を「YOHA」にも適用していたのですが、医療的なトーンが強く出すぎ、「温もり」を演出するのが難しいことが分かりました。
そこで、michitekuのブランドカラーに馴染みつつ、温かみのあるセカンダリカラー「Aqua」を新たに策定しました。

さらに、Aquaをベースに「YOHA」のカラーパレットを策定し、グラフィック、UIデザイン、広報クリエイティブなどを統一感のあるデザインにまとめています。
医療情報を発信する「michiteku(web版)」と、治療や日常生活に寄り添う「YOHA」のサービスカラーを分けることで、それぞれのプロダクトを際立たせることにも成功しました。
視覚的アイデンティティ

アプリ内では「なんでも書ける場所」を目指し、心理的安全性を保ちつつリラックスして思考できる世界観が求められました。
そこで、ヒアリングでがん患者さんの関心を集めたビジュアルラフを画像生成AI(Adobe Firefly)でバリエーション展開し、絵の密度、色彩トーン、要素などを比較検討しながらイメージを膨らませていきました。
良さそうな要素を組み合わせて新たなグラフィックを描き起こし、それを再度画像生成にかけるなど試行を重ねました。

「ウェットになりすぎず、突き放さない」絶妙なトーンを模索していった結果、描写は削ぎ落とされ、「YOHA」のカラーパレットを反映することで「michiteku YOHA」の視覚的アイデンティティが完成しました。

今後は運用フェーズに移行するため、ブランドガイドラインを整備しチーム全体で「YOHA」の一貫性のあるクリエイティブを制作できるよう体制を整えていきます。
利用者の皆さまとともに、プロダクトの成長を見守れることを心から楽しみにしています。最後までお読みいただき、ありがとうございました!