記事 —
SaaSプロダクトのUI設計プロセスを解説する
情報設計からFigmaでのコンポーネント管理まで、実際の進め方
SaaSプロダクトのUIを設計するとき、最初にワイヤーフレームを描き始めるのは早すぎます。画面の形を決める前に、ユーザーが何をしようとしているのかを整理する必要があります。Pixel Citadelでは、UIのご相談をいただいたら、まず情報の整理から入ることを基本にしています。
情報設計から始める理由
UIデザインの失敗の多くは、画面の設計を始める前に情報の構造が決まっていないことから生まれます。どのデータをどの画面に表示するか、ユーザーはどの順番で操作するか。これを整理せずにデザインを始めると、後から大幅な修正が必要になります。
Pixel Citadelでは、プロジェクトの開始時に、お客様のプロダクト担当の方と一緒に、ユーザーストーリーをもとにした情報設計のワークショップを行うことをご提案しています。付箋とホワイトボードを使ったアナログな作業ですが、この段階で決めたことがFigmaのファイル構成に直接反映されます。
Figmaでのコンポーネント設計
情報設計が固まったら、Figmaでコンポーネントの設計に入ります。最初に作るのは、ボタン・インプットフィールド・テーブル行・カードの四つです。この四つが決まると、ほとんどの管理画面は組み立てられます。
コンポーネントはVariantsを使って状態（default・hover・disabled・error）を管理します。状態ごとに別のコンポーネントを作ると、後から変更するときに全部修正しなければならなくなるためです。オートレイアウトを使うことで、テキストの長さが変わっても自動的にサイズが調整されます。
- ボタン：サイズ（S/M/L）× 状態（4種）× アイコン有無
- インプットフィールド：状態（5種）× ラベル位置
- テーブル行：選択状態 × ソート状態
- カード：コンテンツタイプ別に3種
開発チームへの引き渡し
Figmaのファイルを渡して終わりにしないことが、Pixel Citadelの方針です。コンポーネントの使い方・デザイントークンの定義・インタラクションの仕様を記載したドキュメントを合わせて作成します。
引き渡し後の実装に関する質問への対応は、お見積もりの段階で範囲を取り決めます。「このコンポーネントはどう使うのか」「このアニメーションの速度は何msか」といった質問が出やすく、ドキュメントだけでは伝わらない部分を補うためです。
UIの設計プロセスは、プロダクトの複雑さによって変わります。まずはお問い合わせページからご相談ください。
Pixel Citadel · UI/UX · SaaS · Figma · デザインプロセス