Daily UI #030（Pricing）
Daily UI 30日目のお題は「Pricing」。
プロジェクト管理ツールのプラン一覧を制作します。
制作過程
今回は5時間くらいでした。
制作の流れ
前回の反省点の確認：3分
リサーチ・要件定義：1時間10分
ワイヤーフレーム・ビジュアル：3時間42分
--------------------------------------
計 4時間55分
リサーチ
Dribbbleで検索して出てきたデザインやFigmaのプラン表示を主に参考にしました。
要件定義
ChatGPTに制作物の詳細を詰めてもらいました。
サービス名：TaskFlow
サービス内容：プロジェクト管理とチームコラボレーションを効率化するSaaSプラットフォーム。タスク管理、進捗状況の追跡、ドキュメント共有、コミュニケーションツールを統合し、リモートワークやオフィスでの作業を円滑にサポートします。
サービスカラー：ターコイズブルー
運営会社：アメリカの会社
プラン：
①Freeプラン
・金額：無料
・タスク管理機能
・チームメンバー5人まで
・プロジェクトテンプレート
・1GBのストレージ
・チーム内チャット機能
・共有カレンダー機能
②Basicプラン
・金額：月額$9
・タスク管理機能
・チームメンバー20人まで
・プロジェクトテンプレート
・10GBのストレージ
・チーム内チャット機能
・共有カレンダー機能
・タイムトラッキング機能
・ガントチャート表示
③Premiumプラン
・金額：月額$29
・タスク管理機能
・チームメンバー無制限
・プロジェクトテンプレート
・無制限のストレージ
・チーム内チャット機能
・共有カレンダー機能
・タイムトラッキング機能
・ガントチャート表示
・高度な分析レポート機能
・APIアクセス
・シングルサインオン（SSO）機能対応
ペルソナ：Emma Johnson
33歳のプロジェクトマネージャー。中規模IT企業で働き、複数のプロジェクトを同時に管理しています。TaskFlowの無料プランを利用し始めて1ヶ月。無料プランの限界を感じ始め、より高いプランへの移行を検討中。
デザインコンセプト：プロフェッショナルかつ親しみやすい
キーワード：クリーン、モダン、フレンドリー
ラフ・ビジュアル
制作したラフがこちら ↓
手書きでラフを描くのをケチっていきなりFigmaで作ったんですが、あまりスムーズに行かず、ここからラフが大量発生します。
完成
制作した画面がこちら ↓
Figmaのプラン表示と同じように、下にスクロールできる想定です。
デザインのポイント
動物名のプラン
Freeプラン・Basicプラン・Premiumプランそれぞれに動物の名前をつけました。分かりやすさ・インパクトを出すのに加え、こういったSaaS製品は仕事上、半強制的に使うことも考えられるので、少し楽しく仕事してもらえたらいいなという気持ちです。幼稚園のクラス名で、1組・2組…ではなくてうさぎ組とかパンダ組とかついてることがあると思うんですが、ああいうイメージです。覚えやすいし可愛いので真似しました。実は、表にも動物がいて、プランに含まれていないサービスは、「‐」で示す代わりに各プランの動物アイコンにしました。画面下の方です。
「詳細を見る」ボタン
アップグレードするボタンのみだとやや抵抗のある人向けに、プランの詳細をまずは見てもらうボタンをつけました。
制作してみて
・手書きラフを端折ったのが失敗だったみたいです。レイアウトが定まらないうちに色をつけてまた戻って…みたいなことになってしまったので、次回はちゃんと描こうと思います。
・おすすめしたかったペンギンプランがあまり目立っていないような気がします。プランごとに色分けしたからなおさらかもしれません。後は、インプットが足りないせいでもあったと思います。参考にしたデザインが少ないと、やはりアウトプットもそれなりのクオリティになってしまうので、次回はインプット多めを意識したいです。
・これは細かいことなんですが、サカナプランだけすごく括りが大きかったなと思いました。ペンギンとシャチは1つの種の名前なのに、サカナは総称？というか…。イワシプランとかにすれば良かったかもしれない。
この記事が気に入ったらサポートをしてみませんか？