moi labo
UI DESIGN企画・UIデザイン制作
ポートフォリオ用サンプル

Flowle

毎日を、もっと軽やかに。

社会人向けのライフワーク支援アプリ「Flowle」を企画・UIデザイン制作。単なるタスク管理ではなく、スケジュール・習慣・アイデア・振り返りを統合し、「毎日を軽やかに整える体験」をコンセプトに設計しました。

UIデザインUX設計Figmaライフワーク社会人向け

TARGET

20〜30代の社会人

仕事や予定管理に追われながらも、「整理したい」「ちゃんと暮らしたい」という気持ちを持つユーザーを想定。一般的な生産性アプリは機能重視で無機質になりやすいため、Flowle では柔らかい空気感・余白による心地よさ・毎日開きたくなるデザインを重視しました。

ORGANIZE

整う

SUSTAINABLE

続く

FEEL GOOD

気持ちいい

POINTS

こだわりポイント

01

「管理感」を減らしたUI設計

タスク管理アプリ特有の圧迫感を避けるため、柔らかいブルーグレー・広めの余白・丸みのあるカードUI・軽いシャドウを使用。「管理される」ではなく、自然に整う体験を目指しました。

02

感情に寄り添うデザイン

毎日の気分が少し上がるよう、手書き風イラスト・ナチュラルモチーフ・温かみのある配色・軽やかなアイコンを採用。UIそのものに「癒し」を持たせています。

03

情報量の整理

社会人向けアプリは情報量が多くなりやすいため、セクション分割・優先順位の明確化・カードベースUI・色による視線誘導で視認性を高めました。

04

続けたくなる体験設計

習慣化や記録機能に達成率表示・バッジ・週間振り返り・小さな成功体験を組み込み、モチベーションが維持しやすい構成にしています。

UI DESIGN

UI設計で意識したこと

視線設計

重要情報 → 行動 → サブ情報の順に自然に視線が流れるよう構成。ホーム画面では「今日やること」が最初に入るレイアウトにしています。

モバイルでの操作性

片手操作を想定し、主要操作を下部配置・FABを中央固定・タップ領域を広めに設計しています。

ブランドトーン統一

全画面でBlue Gray / White / Warm Beigeを基調にし、統一感のある世界観を構築しています。

TOOLS

デザイン

Figma

想定FW

Next.js

想定CSS

Tailwind CSS

想定ANIM

Framer Motion

Flowle UIデザイン — ライフワーク支援アプリ サンプルLP

コーディング・開発のご相談はお気軽に

ご相談・お見積りは無料。
内容が固まっていなくても大丈夫ですので、まずはお気軽にご連絡ください。

お問い合わせはこちら