CloudDonut — クラウドコンピューティングサービス
Webサイトの情報設計＆ユーザーフロー設計
CloudDonutは、シンガポールを拠点とするクラウドコンピューティングサービスプラットフォームです。情報設計・ユーザーフロー設計からUIデザイン・品質確認まで、Web全体のデザインを担当しました。
目的
- →クラウドサービスを分かりやすく伝える
- →情報設計と導線設計の構築
役割
- →Webサイトの情報設計＆ユーザーフロー設計
- →クライアントとのオンラインコミュニケーション
挑戦
- ⚡クラウドコンピューティングサービス（AWS・DigitalOceanなど）に関する専門知識が不足していた
- ⚡コミュニケーションはすべてオンライン
- ⚡フルタイム勤務と並行したフリーランス案件であり、時間管理が必要
- ⚡プロジェクトスコープが明確に定義されていなかった
デザインプロセス
Clarifying Scope（要件整理）
2023年2月要件が明確でなかったため、複数のデザイン案をメリット・工数とともに提示し、合意形成を図りました。
- ·複数のUI構成案を提示
- ·各案のメリット・工数感を整理
- ·クライアントと議論し方向性を合意
Information Architecture & User Flow
2023年3月クラウドサービスは情報量が多いため、まず情報設計（IA）を構築し、正常系・異常系を含むユーザーフローを設計しました。
- ·サイトマップ・IAをゼロから構築
- ·Positive Flow（正常系）を設計
- ·Negative Flow（エラー・例外系）を設計
UI Design & Collaboration / Design Handoff
2023年3月ー7月「信頼感のあるシンプルなビジュアル」「設計比較しやすいレイアウト」「直感的なUI構造」の3軸で設計。Figmaでアノテーション・フロー・仕様書込みのHandoffを実施。
- ·信頼感のあるシンプルなビジュアル
- ·設計比較しやすいレイアウト技術
- ·サービスを直感的に理解できるUI構造
- ·Figmaリンク共有（アノテーション・仕様書含む）
- ·ユーザーフロー／画面遷移図の共有
Design Quality Check
2023年7月実装後にUI確認を行い、デザイン意図がコード上でも再現されているかを保証しました。
- ·実装後のUI確認
- ·デザインとの差分チェック
- ·レスポンシブ挙動の確認
- ·微調整フィードバック
Flow（Positive / Negative）設計
機能ごとに正常系（Positive Flow）と異常系（Negative Flow）を整理し、開発側と認識を揃えました。
例：パスワード変更の場合
✅ Positive Flow （正常系）
- 1現在のパスワード入力
- 2新しいパスワード入力
- 3バリデーションOK
- 4変更成功
- 5完了メッセージ表示
❌ Negative Flow （異常系）
- ✕入力不足／形式エラー → エラーメッセージ表示 → 再入力誘導
- ✕現在のパスワード不一致 → エラー表示 → 再入力
- ✕新しいパスワードの条件未達（文字数不足など） → ガイド表示
- ✕ネットワークエラー → 再試行導線表示
学び・得られた知見
複雑なドメインでも構造化すればUIに落とし込める
クラウド領域の理解が浅い状態からでも、情報整理（IA）とユーザーフロー設計により、ユーザーが理解しやすい形へ変換できた。
要件が曖昧なほど「言語化」と「選択肢提示」が重要
スコープが明確でない状態では、認識ズレが最も大きなリスク。選択肢を提示しながら合意形成を進めることが効果的だった。
リモート環境では「Handoff設計」が品質を左右する
画面だけでなく、仕様・状態・フローまで含めて共有することで、実装の再現性と開発スピードが上がった。
デザインと実装の整合性はデザイナーが担保するべき
実装後のUI確認（QA）を行うことで、意図した体験がコード上でも再現されているかを保証できた。
成果・インパクト
🚀
30%
開発スピード向上
開発効率の向上
精緻なデザインシステムと仕様書により、手戻りが大幅に減少。
📉
0
マニュアル不要
ユーザーの学習コスト削減
新規ユーザーがマニュアルなしで基本操作を完遂できるようになりました。
⚡
100%
レスポンシブ対応
技術的実現性とデザインの両立
実装の制約を考慮した設計により、パフォーマンスを損なうことなくモダンなUIを実現。
デザインギャラリー
さらに多くの作品はこちら
Dribbble ↗