UI/UXデザインは、要件定義・企画、設計・プロトタイプ、テスト・リリースの3フェーズを順に進めます。各工程の成果物を確かめてから次へ進みます。外注と内製のどちらでも、この流れを判断材料に使えます。
UIは操作画面、UXは利用全体の体験を指します。また、Nielsen Norman Groupでは、UX投資の平均リターンが100倍と報告されています。
Webサービス開発の工程ごとの進め方と注意点については、無料ホワイトペーパー「Webサービス開発の完全ガイドブック」で詳しく解説しています。
UI/UXデザインの全体像
UIとUXは別の概念です。ただし、2つで同じ体験を支えています。
Jesse James Garrettの5段階モデルで全体を追うと、設計の抜けを減らしやすくなります。
UIとUXの違いと関係性
社内の判断材料としてUIとUXを考えるときは、まず両者を分けて捉えます。
- UI（User Interface）：画面の見た目と操作性を担う部分
- UX（User Experience）：発見、購入、継続利用までの体験全体
- 関係性：両方を一つの体験として設計する
たとえば、UIだけ仕上げても、UXに問題があれば離脱につながります。
UXの5段階モデルとデザインの思考法
UXの設計は、下の層から順に固めていきます。
- 戦略：最初に決める層で、ほかの層の前提になる
- 要件：固まってから、表層の設計へ進む
- 表層：利用者の目に触れる見た目の部分
UXの5段階モデルは、戦略（Strategy）と要件（Scope）から始まり、構造（Structure）、骨格（Skeleton）を経て、表層（Surface）に至ります。
また、Design Thinkingの流れとも連動します。共感や定義、テストなどの段階と照らし合わせると、抜けを見つけられます。
UI/UXデザインの進め方
UI/UXデザインは、要件定義・企画、設計・プロトタイプ、テスト・リリースの3フェーズで進みます。
各フェーズは前の工程で決めた内容を土台にするため、各工程の成果物を確かめてから次へ進みます。途中で確認を飛ばすと、問題が後の工程になってから見つかります。
要件定義・企画フェーズ
企画では、ユーザー、課題、ビジネス目標を先に決めておきます。これらは後の工程の前提になる内容です。この段階で準備すべき条件は、目的、ユーザー、調査の3点です。
- 目的：何のために作るのかを言葉にする
- ユーザー：利用者が抱える課題を、調査で確かめる
- 調査：チーム全体で、利用者の見方をそろえる
この段階では、調査や競合分析を行い、ペルソナやカスタマージャーニーマップを使います。たとえば、ペルソナを30代会社員とする場合、名前、年齢、職業を具体的に決め、行動も書き込みます。
設計・プロトタイプフェーズ
設計では、情報の構造から見た目へと、段階を追って画面を具体化します。
- 構造：画面の並びと階層を組み立てる
- 試作：操作の流れを、動く形で確かめる
- 視覚表現：ブランドに沿う見た目の仕上げ
情報設計では、サイトマップとワイヤーフレームを作ります。
プロトタイプは、Figma、Adobe XD、InVisionのほか、Miroを使って作り、そのあと視覚デザインへ進みます。
発注先を比べる軸も、この段階でそろえておくと、各社の提案を同じ条件で見比べられます。
テスト・リリースフェーズ
テストでは、結果を記録しておくと、どこを直すべきかが見えてきます。
- 方法：目的に合わせて、複数のテスト方法を使い分ける
- 指標：測った結果を、数字で比べられる形にする
- 改善：リリース後も、手を入れ続ける
テストでは、モデレート、リモート、A/Bの方法を使います。
結果の測定では、完了率、エラー率、操作時間を取り、ISO 9241-11の有効性、効率性、満足度で評価します。
リリース後は、Hotjar、Microsoft Clarity、Google Analytics 4で利用データを集め、改善を続けます。
契約前には、リリース後の改善をどこまで発注に含めるかを確認しておきます。
費用相場とコストの内訳
費用は依頼範囲によって数十万円から数千万円まで変わります。そのため、相場だけで判断せず、工程と成果物を分けて見積もると、内訳を比べやすくなります。
人件費と工数の目安
工程ごとの費用は、人件費と工数を分けて見ると内訳をつかめます。計画では、工程、工数、成果物の3領域を工程表に置きます。
- 工程：3フェーズごとに区切って進める
- 工数：作業時間を工程別に見積もる
- 成果物：工程ごとに受け取り、次へ進む前に確かめる
時間単価は、フリーランスで3,000〜8,000円、専門会社で5,000〜15,000円程度です。
工数は、小規模で50〜100時間、中規模で150〜300時間、大規模で500時間以上になることがあります。
工程費は、UXリサーチ30〜150万円、情報設計50〜200万円、ビジュアルデザイン50〜300万円です。また、統合プロジェクトは100〜600万円が目安で、1,000万円を超える例もあります。
初期費用以外のランニングコスト
費用は、初期費用だけでなく、運用中にかかる費用まで含めて見ます。
- 初期費用：制作の時点でかかる費用で、これだけでは判断しない
- 継続費用：公開後も続いて発生する費用
- 予算：運用に回す金額を、年間で別に確保する
継続費用は、テストやデザインシステムなどで発生します。たとえば、テストは1回20〜80万円、デザインシステムは月額5〜30万円です。
ツールの利用料も、継続費用に含まれます。Figmaは1ユーザー月額1,800〜4,500円、Hotjarは月額1〜5万円程度です。ランニングコストとしては、初期費用の20〜30%を年間で見込みます。運用時の連絡方法も、あわせて確認しておきます。
見積もりを取る際のポイント
見積もりは、工程、品質、価格を同じ条件で比べることが大切です。そのため、依頼の前に要件と判断基準をそろえておきます。
要件明確化と仕様書の準備
前提がそろっていないと、見積もりの金額を比べても意味がありません。
- 範囲：RFPで、依頼する条件を明示する
- 比較条件：各社の金額を、同じ前提で並べられる状態にする
- リスク：仕様変更と権利の扱いを、契約に入れる
RFP（Request for Proposal）には、目的、ユーザー、画面を書きます。さらに、参考URLや日程、予算上限も記載し、対象プラットフォームとしてWeb、iOS、Androidを明記します。品質確認の手順も、発注前にそろえておきます。
複数社比較と発注先の選び方
発注先を比べる前に、UIとUXの関係をつかんでおくと、各社の提案を正しく読み取れます。
- UI：提案のなかで、操作画面がどう設計されるか
- UX：発見から継続利用までの体験を、どう設計するか
- 関係性：UIとUXを一つの体験として、一体で設計できるか
見積もりは必ず3社以上から集めます。1社だけでは妥当性を判断しにくくなります。複数の金額を並べると、提示された金額が妥当かどうかを比べやすくなります。
そのうえで、価格だけでなく、実績、ポートフォリオ、応答を確かめます。加えて、研究範囲や改善支援も比べます。
注意すべきリスクと対策
発注の途中では表に出にくいリスクほど、先に洗い出しておくことが大切です。
- 戦略：目的がぶれると、作る範囲が広がりやすい
- 要件：要件が固まる前に設計を進めると、後から変更が生じやすい
- 表層：デザインと開発の食い違いを、Design Thinkingの段階と照らし合わせて開発前に確かめる
代表的なリスクは、スコープクリープ、デザインと開発の乖離、権利確認の不足です。抑えるには、変更管理を行い、開発前にレビューします。加えて、Figmaで仕様を共有し、著作権とファイル権限も確かめます。
まとめ
UI/UXデザインは、UIとUXの違いを理解したうえで、3フェーズを順に積み上げていくものです。費用は初期制作だけでなく、継続改善まで含めて計画します。
発注時にはRFPで比較条件をそろえ、利用データをもとに改善を続けることが大切です。
▼開発を相談する前に、無料ホワイトペーパーをご覧ください。
・Webサービス開発の完全ガイドブック
・【2026年最新版】AI駆動開発の完全ガイドブックをご覧ください。
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。