Flowle
毎日を、もっと軽やかに。
社会人向けのライフワーク支援アプリ「Flowle」を企画・UIデザイン制作。単なるタスク管理ではなく、スケジュール・習慣・アイデア・振り返りを統合し、「毎日を軽やかに整える体験」をコンセプトに設計しました。
TARGET
20〜30代の社会人
仕事や予定管理に追われながらも、「整理したい」「ちゃんと暮らしたい」という気持ちを持つユーザーを想定。一般的な生産性アプリは機能重視で無機質になりやすいため、Flowle では柔らかい空気感・余白による心地よさ・毎日開きたくなるデザインを重視しました。
ORGANIZE
整う
SUSTAINABLE
続く
FEEL GOOD
気持ちいい
POINTS
こだわりポイント
「管理感」を減らしたUI設計
タスク管理アプリ特有の圧迫感を避けるため、柔らかいブルーグレー・広めの余白・丸みのあるカードUI・軽いシャドウを使用。「管理される」ではなく、自然に整う体験を目指しました。
感情に寄り添うデザイン
毎日の気分が少し上がるよう、手書き風イラスト・ナチュラルモチーフ・温かみのある配色・軽やかなアイコンを採用。UIそのものに「癒し」を持たせています。
情報量の整理
社会人向けアプリは情報量が多くなりやすいため、セクション分割・優先順位の明確化・カードベースUI・色による視線誘導で視認性を高めました。
続けたくなる体験設計
習慣化や記録機能に達成率表示・バッジ・週間振り返り・小さな成功体験を組み込み、モチベーションが維持しやすい構成にしています。
UI DESIGN
UI設計で意識したこと
視線設計
重要情報 → 行動 → サブ情報の順に自然に視線が流れるよう構成。ホーム画面では「今日やること」が最初に入るレイアウトにしています。
モバイルでの操作性
片手操作を想定し、主要操作を下部配置・FABを中央固定・タップ領域を広めに設計しています。
ブランドトーン統一
全画面でBlue Gray / White / Warm Beigeを基調にし、統一感のある世界観を構築しています。
TOOLS
デザイン
Figma
想定FW
Next.js
想定CSS
Tailwind CSS
想定ANIM
Framer Motion
