アプリの画面設計を外注する前の準備|ワイヤーフレームと画面遷移図の違い 2026


この記事のポイント
- ✓アプリの画面設計を外注する前に整えるべき資料と
- ✓ワイヤーフレーム・画面遷移図の違いを解説
- ✓失敗しない選び方まで発注者向けに具体的にまとめました
先日、アプリ開発を検討している経営者の方からこんな相談を受けました。「エンジニアには声をかけたけれど、画面設計は誰に頼めばいいのか分からない」と。結論から言うと、画面設計を外注する前に、ワイヤーフレームと画面遷移図の違いを理解し、依頼したい範囲を整理しておくことが、費用のブレとやり直しを防ぐ最大のポイントです。この記事では、画面設計をアプリ開発の外注先に依頼する際の準備、相場、失敗しない選び方を、発注者の立場から具体的に解説します。
画面設計の外注ニーズが高まっている背景
アプリ開発の相談件数は、ここ数年で明確に増えています。背景にあるのは、業務のデジタル化とスマートフォン利用の定着です。中小企業庁の調査でも、中小企業のIT投資意欲は年々高まっており、自社サービスとしてアプリを持ちたいという相談が増加傾向にあります。
中小企業においても、デジタル技術の活用による生産性向上や新たな事業機会の創出が重要な経営課題となっている。 出典: chusho.meti.go.jp
一方で、アプリ開発を検討する担当者の多くが最初につまずくのが「画面設計」の工程です。エンジニアに開発を依頼する前に、どんな画面が必要で、どういう順番で遷移するのかを固めておかないと、開発着手後の手戻りが発生します。手戻りが起きると、追加の工数費用が発生し、当初の見積もりから30%以上膨らむケースも珍しくありません。つまり、画面設計は「開発の下準備」ではなく「開発コストを左右する最重要工程」なのです。
画面設計を外注する動き自体も広がっています。社内にデザイナーがいない企業や、エンジニアはいるがUI/UX設計の専門知識がないチームが、画面設計だけを切り出してフリーランスや制作会社に依頼するケースが増えています。この「工程の切り出し発注」は、全体を丸ごと発注するより費用を抑えやすく、かつ専門性の高い人材にピンポイントで依頼できるという利点があります。
ワイヤーフレームと画面遷移図の違いを理解する
画面設計を外注する前に、まず押さえておきたいのが「ワイヤーフレーム」と「画面遷移図」の違いです。この2つを混同したまま発注すると、依頼内容が正しく伝わらず、想定していた成果物と違うものが納品される原因になります。
ワイヤーフレームとは何か
ワイヤーフレームは、1つの画面の中に何を配置するかを示す設計図です。ボタンの位置、テキストの配置、入力フォームの場所など、画面の骨格を線と枠で表現します。色やフォント、装飾は含めません。あくまで「情報の配置」を確認するための資料です。
ワイヤーフレームを先に固める理由は、デザインの見た目に気を取られる前に、情報の優先順位と操作導線を確認するためです。見た目が整っていても、必要な情報にたどり着けない画面設計では意味がありません。つまり、ワイヤーフレームは「使いやすさの土台」を作る工程だと考えてください。
画面遷移図とは何か
画面遷移図は、複数の画面がどうつながっているかを示す図です。ログイン画面から会員登録画面へ、会員登録画面から本人確認画面へ、といった画面同士の流れを矢印でつなぎます。アプリ全体の構造を俯瞰できる資料であり、開発チームと発注者の間で「どの画面がどこにつながるか」の認識をそろえるために欠かせません。
画面遷移図が曖昧なままだと、開発途中で「この画面からどこに戻るのか」「エラー時にどの画面を表示するのか」といった判断が現場任せになり、想定外の仕様が生まれます。発注者側が画面遷移図の段階でしっかり確認しておくことで、開発後半での認識齟齬を大幅に減らせます。
2つを混同して依頼した場合の失敗例
実際にあった相談です。ある店舗オーナーの方が「画面のデザインをお願いします」とだけ伝えて外注したところ、届いたのは1枚1枚の見た目のいい画面デザインでした。しかし、画面同士のつながりが決まっていなかったため、いざ開発を始めると「予約完了後にどの画面へ戻るのか」が誰にも分からず、追加の打ち合わせと追加費用が発生しました。ワイヤーフレームと画面遷移図、両方を先に依頼していれば防げたトラブルです。
画面設計を外注する際の費用相場
画面設計の費用は、依頼する範囲と画面数によって大きく変わります。一般的な相場観としては、シンプルなアプリ(画面数10〜15程度)のワイヤーフレーム作成で5万円から15万円程度、画面遷移図まで含めた設計一式で10万円から30万円程度が目安です。UI/UXデザインまで含めた本格的な画面設計になると、100万円を超えるケースもあります。
料金の内訳としては、以下の要素が積み上がって最終的な見積もりになります。
・画面数(多いほど費用は増える) ・画面遷移の複雑さ(条件分岐やエラー画面が多いほど工数が増える) ・デザインの作り込み度合い(ラフなワイヤーフレームか、色やフォントまで含めた高精度なモックか) ・修正回数の上限(何回まで無料で修正できるか) ・要件定義からの巻き取りの有無(発注者側で仕様が固まっているか、ヒアリングから任せるか)
相場を把握したうえで押さえておきたいのが、依頼先の違いによる費用差です。制作会社(代理店)に依頼する場合、ディレクション費用や管理費用が上乗せされるため、フリーランスへ直接依頼するケースと比べて割高になる傾向があります。制作会社を経由すると中間マージンが発生し、その分が見積もりに反映されるためです。逆に、実務者であるフリーランスに直接依頼すれば、中間マージンがない分、同じ予算でもより多くの作業を依頼できる、あるいは同じ内容をより安く依頼できる可能性が高くなります。
もちろん、制作会社には「窓口が一本化される」「品質管理体制が整っている」といったメリットもあります。予算と体制のどちらを優先するかで、依頼先を選び分けるのが現実的です。
画面設計を外注する方法とツール
画面設計を外注する方法は大きく3つに分かれます。
クラウドソーシングサイトで探す
フリーランスのデザイナーに直接依頼する方法です。実績やポートフォリオを見比べながら選定でき、費用も比較的抑えやすいのが特徴です。ただし、応募者の実力に差があるため、過去の制作実績やレビューを丁寧に確認する必要があります。
制作会社に依頼する
アプリ開発全体を任せる制作会社に、画面設計工程も含めて依頼する方法です。要件定義からデザイン、開発まで一気通貫で任せられる安心感がありますが、費用は高めになりやすく、画面設計だけを切り出して安く抑えたいという要望には向きません。
個人のUI/UXデザイナーに直接依頼する
SNSやポートフォリオサイトで見つけたデザイナーに、個人間で直接依頼する方法です。中間マージンが発生しないため費用を抑えやすい一方、契約書の取り交わしや納期管理は発注者側でも意識しておく必要があります。
依頼時によく使われるツールとしては、Figma、Adobe XD、Sketchなどが代表的です。特にFigmaはブラウザ上でリアルタイムに共同編集ができるため、発注者と受注者の間でのやり取りがスムーズになります。依頼する際は「どのツールで納品してほしいか」を事前に伝えておくと、あとで確認しづらいファイル形式で納品されるといったトラブルを防げます。
画面設計を外注する際に準備しておくべき資料
画面設計をスムーズに外注するためには、依頼前に以下の資料を整理しておくことをおすすめします。
・アプリの目的とターゲットユーザー像 ・実現したい主要機能のリスト ・参考にしたい既存アプリのスクリーンショットやURL ・必要な画面の一覧(ログイン、会員登録、一覧、詳細、設定など) ・想定する画面遷移の大まかな流れ
これらをすべて完璧に用意する必要はありませんが、箇条書きレベルでも整理しておくと、ヒアリングの時間が大幅に短縮され、見積もりの精度も上がります。逆に、目的も機能も曖昧なまま「とりあえず良い感じの画面設計をお願いします」と依頼すると、要件定義からのやり直しが発生し、想定以上の工数がかかってしまいます。
失敗しない外注先の選び方
画面設計の外注先を選ぶ際に確認しておきたいポイントを整理します。
過去の実績が自社の業種・アプリの種類と近いか
ECアプリの実績が豊富なデザイナーに、業務システムの画面設計を依頼しても、勝手が違うため思うような提案が出てこないことがあります。依頼したいアプリの種類に近い実績を持つ相手を選ぶことが、認識のズレを防ぐ近道です。
修正対応の範囲と回数が明確か
見積もり時点で「修正は何回まで無料か」「追加修正の場合の費用はどうなるか」を確認しておきましょう。ここが曖昧なまま契約すると、後から追加請求されて揉めるケースがあります。
画面遷移図まで含めた提案ができるか
見た目のデザインだけが得意で、画面遷移の設計まで踏み込めない外注先も存在します。依頼前に「画面遷移図の作成経験はあるか」を確認しておくと安心です。
コミュニケーションのスピードと質
画面設計はやり取りの往復が発生する工程です。返信が遅い、意図を汲み取ってもらえないといった相手だと、進行が滞ります。初回の問い合わせ時のレスポンスで、ある程度見極めることができます。
私自身、初めて外注を依頼した際、見積もりの安さだけで相手を選んでしまい、後になって「画面遷移図が含まれていなかった」と気づいて追加費用が発生した経験があります。安さだけで判断せず、見積もりに含まれる範囲を一つひとつ確認することの大切さを、身をもって学びました。※契約内容に食い違いが生じた場合は、感情的に対応せず、まず契約書や見積書の記載内容を確認し、必要であれば弁護士や行政書士に相談してください。
契約時に確認しておきたい注意点
画面設計を外注する際は、契約形態にも注意が必要です。多くの場合、画面設計は「準委任契約」または「請負契約」のいずれかで結ばれます。請負契約であれば成果物の完成が義務付けられますが、準委任契約の場合は業務の遂行自体が目的となり、成果物の完成義務は原則としてありません。どちらの契約形態かによって、納品されなかった場合の対応が変わるため、契約書の文言は必ず確認してください。
また、2024年に施行されたフリーランス保護新法により、業務委託の内容や報酬額、支払期日などを書面またはメールなどの電磁的方法で明示することが発注者に義務付けられています。つまり、口頭だけでの発注は避け、必ず書面やメールで発注内容を残すことが、双方を守る手段になります。著作権の帰属についても、納品後にデザインデータを自社で自由に使えるのかどうかを、契約時に明確にしておくべきポイントです。
独自データから見えてくる画面設計外注の実態
画面設計を含むアプリ開発関連の依頼は、AIチャットボット・アプリ開発のお仕事やアプリケーション開発のお仕事といった案件カテゴリでの相談が中心ですが、画面設計そのものはUI/UX・アプリデザインのお仕事として個別に切り出して依頼されることも多くなっています。エンジニアへの発注とデザイナーへの発注を分けることで、それぞれの専門性に合わせた依頼ができ、結果的に費用対効果が高まる傾向があります。
依頼先を検討する際には、ソフトウェア作成者の年収・単価相場のような単価データを参考にすると、提示された見積もりが相場から大きく外れていないかを判断する材料になります。あわせて、画面設計に関わる文章作成や仕様書のまとめが必要な場合は、著述家,記者,編集者の年収・単価相場も参考になるでしょう。
技術力を客観的に判断する材料として、開発側の担当者がKubernetes認定アプリケーション開発者(CKAD)やCCNA(シスコ技術者認定)のような資格を保有しているかどうかも、チーム全体の技術水準を推し量る一つの目安になります。画面設計そのものはデザインスキルが中心ですが、開発チーム全体の技術力を見極めたい発注者にとっては参考情報になるはずです。
20年近くこの市場を見てきた立場から言えば、画面設計の外注で成功する発注者には共通点があります。それは、最初から完璧な仕様書を用意しようとせず、たたき台となるラフな資料を用意した上で、外注先とのやり取りの中で仕様を固めていく姿勢を持っていることです。逆に、仕様が固まりきらないまま「良い感じにお願いします」と丸投げしてしまう発注者ほど、後工程での手戻りに悩まされる傾向があります。
もう一つ運営者として見えてきたのは、中間マージンが発生しない直接取引の構造が、発注者と受注者の双方に良い影響を与えているという実感です。制作会社を経由する場合と比べて、フリーランスへの直接依頼は同じ予算でより多くの作業時間を確保できます。発注者は費用を抑えられ、受注者は手取りが厚くなる。この構造は、単なる価格競争ではなく、双方にとって合理的な取引の形だと感じています。手数料0%の直接取引が支持される理由は、まさにこの「額面ではなく手取りの質」にあります。
アプリ開発の外注全体を検討している方は、アプリ開発の外注費用相場|iOS・Android・Web別の料金目安【2026年版】で開発全体の費用感を確認しておくと、画面設計にかけられる予算配分の判断がしやすくなります。また、グローバル展開を視野に入れているアプリであれば、ローカライゼーションのフリーランス需要|アプリ・ゲーム翻訳の仕事内容のように、画面設計後の多言語対応まで見据えた計画も検討材料になるでしょう。セキュリティ面の運用体制を整えたい場合は、【SOC運用外注費用】24時間365日の監視体制!SOCアウトソーシングの相場と選び方も参考になります。
画面設計は、アプリ開発全体の成否を左右する土台の工程です。ワイヤーフレームと画面遷移図の違いを理解し、依頼前に必要な資料を整理し、費用の内訳と契約内容を確認しておく。この3つを押さえておけば、外注先とのミスマッチや想定外の追加費用を大きく減らすことができます。
公的機関・関連参考情報
本記事の内容に関連する公的機関や信頼できる情報源は以下の通りです。最新情報は公式サイトで確認してください。
よくある質問
Q. ワイヤーフレームと画面遷移図はどちらから先に依頼すればいいですか?
先に画面遷移図でアプリ全体の構造を固め、その後に各画面のワイヤーフレームを詰めるのが一般的な進め方です。全体の骨格を先に決めることで、個別画面の設計に手戻りが起きにくくなります。
Q. 画面設計だけを外注することは可能ですか?
可能です。エンジニアへの開発依頼とは別に、画面設計だけを切り出してフリーランスや制作会社に依頼するケースは多くあります。専門性の高い人材にピンポイントで依頼できる利点があります。
Q. 画面設計の外注費用を抑えるコツはありますか?
依頼前に必要な画面数や機能を整理しておくことで、見積もりのブレを減らせます。また、制作会社より中間マージンが発生しないフリーランスへの直接依頼も、費用を抑える選択肢の一つです。
Q. 画面設計の成果物は誰のものになりますか?
契約内容によります。著作権の帰属先は契約時に明記されていないとトラブルの原因になるため、納品後に自社で自由に使えるデータかどうかを、契約書で必ず確認してください。
この記事について
編集部
監修:@SOHO編集部
2004年よりフリーランス・在宅ワーク向けサービスを20年運営。編集部が事実確認のうえ公開しています。

この記事を書いた人
長谷川 奈津@SOHO編集部
行政書士・元企業法務
企業法務で数多くのフリーランス契約を扱った経験を活かし、フリーランス向けの法律・契約・権利に関する記事を執筆。「法律はあなたの味方です」がモットー。
関連記事
カテゴリから探す

クラウドソーシング入門
クラウドソーシングの基礎知識・始め方・サイト比較

職種別ガイド
職種・スキル別の案件獲得方法と単価相場

副業・在宅ワーク
副業・在宅ワークの始め方と対象者別ガイド

フリーランス
フリーランスの独立・営業・実務ノウハウ

お金・税金
確定申告・節税・経費・ローンなどお金の知識

スキルアップ
プロフィール・提案文・単価交渉などのテクニック

比較・ランキング
サービス比較・おすすめランキング

AI活用
職種別にChatGPT・生成AIを活用して業務効率化・収益化するノウハウ

最新トレンド
市場動向・法改正・AIなど最新情報

発注者向けガイド
クラウドソーシングで外注・人材探しをする企業・個人向け

転職・キャリア
転職エージェント・転職サイト比較・キャリアチェンジ

看護師
看護師の転職・副業・フリーランス・キャリアガイド

薬剤師
薬剤師の転職・副業・キャリアパスガイド

保険
生命保険・医療保険・フリーランスの保険設計

採用・求人
無料求人掲載・採用コスト削減・人材募集の方法

オフィス・ワークスペース
バーチャルオフィス・コワーキング・レンタルオフィス

法律・士業
契約トラブル・士業独立開業・フリーランス新法

シニア・50代
シニア世代のキャリアチェンジ・副業・年金

セキュリティ
サイバーセキュリティ・脆弱性対策・情報保護

金融・フィンテック
暗号資産・決済・ブロックチェーン・金融テクノロジー

経営・ビジネス
経営戦略・ガバナンス・事業承継・知財

ガジェット・機材
フリーランスに役立つPC・デバイス・周辺機器

子育て×働き方
子育てと在宅ワークの両立・保育園・時間管理

補助金・助成金
個人事業主・フリーランスが使える公的補助金・助成金・給付金の申請ガイド







