アプリを公開した後、「画面ごとにデザインがばらついている」「機能を追加したら操作しにくくなった」「開発はできるがUIを整えられる担当者がいない」といった問題が出ることがあります。
この場合、アプリ全体を作り直す必要はありません。既存の構成や機能を維持しながら、問題のある画面だけをFigmaで改修する方法があります。
ただし、既存アプリのUI改修を外注するときは、「きれいにしてください」と依頼するだけでは不十分です。改修する画面、残す要素、変更できない仕様を整理しておくことで、見積もりや制作を進めやすくなります。
既存アプリのUI改修では何を変更できる？
UI改修で変更できるのは、配色や装飾だけではありません。情報の並び順、ボタンの位置、入力欄の見せ方なども改修対象です。
主な改修内容には、次のようなものがあります。
- 文字サイズや余白を統一する
- ボタンの形状や配置ルールをそろえる
- 重要な情報を画面上部へ移動する
- 入力フォームを分かりやすくする
- メニューやタブの構成を整理する
- 追加機能の画面を既存デザインに合わせる
- スマートフォンとPCの表示を整える
- Figmaのコンポーネントやカラー設定を整理する
たとえば、機能追加を重ねたアプリでは、画面ごとにボタンの色や大きさが異なることがあります。各画面単体では問題がなくても、アプリ全体で見ると操作方法が統一されていません。
このような場合は、新しい機能を作るより先に、既存画面のデザインルールを整理した方が効率的です。
UI改修の外注が向いているケース
既存アプリのUI改修を外注する方法は、すべての案件に適しているわけではありません。現在の準備状況によって、依頼すべき作業範囲が変わります。
| 現在の状況 | 向いている依頼内容 |
|---|---|
| アプリは完成しているが見た目が古い | 配色、余白、文字、ボタンのブラッシュアップ |
| 構成案はあるがデザインできない | ワイヤーフレームをもとにしたUIデザイン |
| 新しい機能を追加する予定がある | 追加画面と既存画面のデザイン統一 |
| 画面ごとにデザインがばらついている | コンポーネントやカラー設定の整理 |
| ストア掲載時の見せ方も整えたい | アプリアイコンやストア画像の制作 |
| アプリの企画自体が決まっていない | 先に企画・要件定義を依頼する |
UIデザインのみを外注する場合は、アプリの目的や主要機能がある程度決まっていることが前提です。
「どのようなアプリを作るか」から決めてほしい場合は、UI制作だけでなく、企画、要件定義、ユーザー調査まで対応する依頼先を探す必要があります。
一方、手書きのラフや簡単なワイヤーフレームが用意できていれば、完成された設計書がなくても相談できる場合があります。
外注前に用意する資料
既存アプリのUI改修では、長い企画書よりも、現状が分かる資料の方が重要です。
最低限、次の資料を用意します。
現在の画面
改修したい画面のスクリーンショットを用意します。
画面数が多い場合は、すべてを送るだけでなく、各画面に番号を付けてください。
- 01：ログイン画面
- 02：ホーム画面
- 03：検索結果画面
- 04：詳細画面
- 05：設定画面
番号を付けることで、「03の検索条件部分を変更したい」と具体的に伝えられます。
困っている点
「見づらい」「使いにくい」だけでなく、どこで問題が起きているかを書き出します。
具体例は次のとおりです。
- 主要ボタンが目立たない
- 情報量が多く、見る順番が分からない
- 入力必須項目が判別しにくい
- 戻るボタンの位置が画面ごとに異なる
- 追加した機能だけデザインが浮いている
- PC版を縮小しただけでスマートフォンでは操作しにくい
原因まで断定する必要はありません。利用者から寄せられた意見や、運営側が困っている点をそのまま共有します。
変更できない部分
既存アプリでは、デザイン上は変更した方がよくても、開発上変更できない部分があります。
- ボタンの数は変更できない
- 画面遷移は変更できない
- 使用する文章は確定している
- 指定されたブランドカラーを使う
- 既存の画像やロゴを残す
- 使用できるフォントが決まっている
制約を最初に伝えることで、実装できないデザインが提案されるのを防げます。
Figmaで外注するメリットは納品後の修正にある
Figma形式で納品してもらう利点は、開発担当者や社内メンバーへデザインを共有しやすいことです。
画像だけの納品では、ボタンのサイズ、余白、文字設定などを確認するために追加の説明が必要になることがあります。
Figmaデータがあれば、画面上で各要素を確認できます。今後追加画面を制作するときも、既存のコンポーネントやカラー設定を再利用できます。
特に継続的に機能を追加するアプリでは、次の項目を整理してもらうと便利です。
- メインカラーとサブカラー
- 見出しと本文の文字設定
- 通常ボタンと重要ボタン
- 入力欄とエラー表示
- アイコンのサイズ
- カードや一覧項目の余白
- 選択中、未選択、無効状態の表示
ただし、Figmaデータの納品と、実際に動作するアプリの実装は別作業です。外注前に、UIデザインだけの依頼なのか、コーディングや実装まで必要なのかを確認してください。
UI改修の料金は画面数だけで決まらない
UIデザインの料金は、単純な画面数だけでなく、情報量や構成の複雑さによって変わります。
同じ1画面でも、ログイン画面と、多数の情報や操作項目がある管理画面では作業量が異なります。
今回紹介しているサービスでは、掲載されている目安として、主要画面が1画面25,000円から、下層画面が1画面20,000円からとなっています。
関連制作の目安は次のとおりです。
| 制作内容 | 料金の目安 |
|---|---|
| 主要画面 | 25,000円から |
| 下層画面 | 20,000円から |
| アプリアイコン・ストア画像 | 10,000円から |
| アプリ内バナー・ビジュアル | 6,000円から |
| リサイズ | 5,000円から |
| 4回目以降の修正 | 1,000円から |
料金は、画面内の情報量、デザインの難易度、制作点数によって変わります。複数画面をまとめて依頼する場合も、購入前に見積もり相談を行った方が確実です。
UI改修で優先すべき画面の決め方
予算内ですべての画面を改修できない場合は、利用頻度と重要度で優先順位を決めます。
最初に検討したいのは、次の画面です。
- アプリを開いた直後に表示される画面
- 申込みや購入につながる画面
- 利用者が繰り返し操作する画面
- 問い合わせや離脱が多い画面
- 新機能を追加する画面
設定画面のように利用頻度が低い画面より、ホーム画面や申込み画面を先に改修した方が、改善内容を多くの利用者に届けられます。
最初に主要画面のデザインルールを決め、そのデザインを下層画面へ展開する方法もあります。
依頼先を比較するときの確認項目
価格だけで依頼先を決めると、必要な作業が見積もりに含まれていないことがあります。
次の項目を比較してください。
| 確認項目 | 確認する内容 |
|---|---|
| 対応範囲 | 新規制作だけでなく既存UIの改修に対応しているか |
| 構成整理 | ラフをそのまま清書するだけか、配置も相談できるか |
| 対応端末 | スマホ、PC、タブレットのどこまで対応できるか |
| 納品形式 | Figma、XD、PSD、PNGなど希望形式に対応できるか |
| 修正回数 | 無料修正の回数と追加料金 |
| 関連制作 | アイコン、ストア画像、バナーも依頼できるか |
| 実績 | アプリや管理画面の制作経験があるか |
| 実装範囲 | デザインのみか、コーディングも含むか |
また、既存デザインを改修する場合は、「現在の雰囲気を残す」「ブランドカラーは変更しない」などの細かな要望を汲み取れるかも重要です。
ポートフォリオを見るときは、見た目の好みだけでなく、情報量の多い画面を整理した実績があるかも確認してください。
見積もり相談で送る文章の例
見積もり依頼では、必要な情報を箇条書きで送ると伝わりやすくなります。
以下の形に整理してください。
- アプリの概要
- 利用するユーザー
- 改修したい理由
- 改修対象の画面数
- スマホ、PC、タブレットなどの対応端末
- 現在の画面やワイヤーフレーム
- 使用するテキスト
- ロゴや写真素材の有無
- 希望する納品形式
- 希望納期
- 参考にしたいアプリやサイト
- 実績掲載の可否
デザインのイメージが決まっていない場合でも、「企業向けで信頼感を出したい」「ポップだが子どもっぽくしたくない」など、避けたい印象と希望する雰囲気を伝えれば相談できます。
既存アプリのUI改修は小さく始められる
既存アプリのUI改修では、最初から全画面を作り直す必要はありません。
まず主要画面を1つ選び、デザインの方向性を確認してから下層画面へ展開する方法があります。これなら、完成後に全体の方向性が合わないと判明するリスクを抑えられます。
今回紹介したサービスは、新規アプリだけでなく、既存UIのブラッシュアップ、追加機能や追加画面、アプリアイコン、ストア画像の相談にも対応しています。
無料修正は3回で、通常のUIはFigmaまたはXDのローカルデータで納品されます。一方、企画・要件定義やプロトタイプ作成は基本料金に含まれないため、構成案やラフを用意したうえで相談するのが適しています。
既存アプリのUI改修をFigmaで外注するときは、改修画面、現在の問題、変更できない仕様、納品形式を整理してください。
資料が完全にそろっていなくても、現在の画面と困っている点が分かれば、必要な作業範囲を相談できます。まずは優先度の高い画面から見積もりを取り、予算と改修範囲を調整する方法が現実的です。
