コーポレートサイトやLPなどのWebデザインは外部への制作依頼はしやすいですが、サービスのUI/UXのデザインとなると少し難しいところがありますよね。
サービスやユーザー、事業ドメインなどに対するより深い理解が不可欠で、サービス全体のユーザビリティを考慮したり、ユースケースに応じて細かなUIパターンをつくっていく必要もあります。
先日初めて外部のデザイナーさんにUI制作をしてもらいましたので、その時に整理した外注・依頼時のフローや考えるべきポイント、注意点などをざっと備忘録として残しておきます。
実際にやってみて色々と失敗や反省点などが多々あったので、それについても振り返っていきます。初めてUIデザインを外注したいと思っているディレクターやPMな人に、少しでも参考になれば幸いです。
UIデザイン制作の外注・依頼の流れ
UIデザインの制作を外注・依頼する際に、実施したおおよそのステップはおおよそ下記です。
- 1. 企画・要件定義＋おおよそのワイヤーとプロトタイプの精査
- 2. 制作依頼の要件整理
- 3. UIデザイナーの募集要件の整理＋リクルーティング
- 4. 依頼要件とワイヤーなどを踏まえ、概算お見積り
- 5. 複数の制作会社やデザイナーからの見積もり比較
- 6. 依頼の打診と稼働スケジュールの調整
- 7. 契約書周りの対応（秘密保持契約書など）
- 8. 初回オリエンテーションのMTG（Zoomにてオンライン実施）
- 9. デザイン作業開始＋随時コミュニケーション
- 10. 初回納品＋フィードバック踏まえて調整
- 11. 最終納品
- 12. 請求書受け取り＋支払い
ざっとこんな流れですね。細かくやることを分解すると、考えないといけないことは割とあります。
タイムラインとしては、仕様の企画後リクルーティングを開始し1〜2週間ほどで依頼するデザイナーさんを確定し、その2週間後に初回オリエンテーションと作業を開始した感じです。その間に仕様やワイヤー、テキストなどは随時ブラッシュアップできる部分は調整していきました。
UI外注時に事前に準備しておくと良いこと・必要な段取り
おおよその流れが分かったところで、UIデザインを外注する上で事前に準備しておくべきことをメモしておきます。
1. 仕様企画＋ワイヤーフレームの精査
要件定義と、仕様およびワイヤーフレームは事前にしっかり固めておきましょう。特に必要となるUIパターンは、可能な限りすべて洗い出しておくことが大切です。
例えば、ユーザーのステータス（ログインやその他フラグの有無など）によって、デザインパターンはどれくらい変わるか？など。
仕様・パターンの洗い出しが不十分だと、追加でデザインを依頼する必要が生じます。その分スケジュール全体がズレ込みますし、開発上の懸念が新たに生じる可能性があります（そのケースの仕様は想定外で、実装が難しいなど）。当たり前ではあるのですが、このあたりを事前に精査し切るのはなかなか難しいところです……。
デザインの段階でパターン出しも具体的に検討しようと思っていると、デザイン時に結構たいへんなことになります。
社内のデザイナーさんであればサービスや事業ドメイン、ユーザーへの理解も豊富だったりするので、ワイヤーやプロトタイプ段階で抜け漏れていたパターンなどにも対処できたりします。しかし社外のデザイナーさんで初めて依頼する方だと、そうした理解が不十分でどうしてもUIの抜け漏れが生じる可能性が高くなります（もちろんその方の対応力や、どこまですり合わせできたかにもよりますが）。
ですのでUIを外注する場合は、ある程度のUIパターンを社内でしっかり決めておくのが良いですよ。
可能であればプロトタイプをつくり、ユースケースごとに最適な利用フローになっているか、機能やUIの抜け漏れがないかを確認すると良いです。
2. 依頼内容とデザイナーの要件定義
仕様をある程度精査できたら、依頼内容およびリクルーティングの要件を整理していきましょう！
・それを達成するためにどんなデザイナーさんである必要があるのか
（どんなスキルセットや経験値があるといいのか、どれくらいの作業日数をいつまでに取れるといいかなど）
おすすめな依頼方法・依頼サイトは？
具体的にデザイン作業の内容が定まってきたら、リクルーティングを順次はじめていきます。知人経由や社内人脈を活用してリファラルで探すのが一番良いですが、もし見つからなければ外部の求人サービスやSNSをフルに活用して探すことも検討してみて下さい。
参考までに下記のサイトなどで探していました。
- ランサーズ
- boshu＋SNS
ランサーズは一度募集した時に、10人以上応募がありましたね。実績がありそうなUIデザイナーさんやUIデザイン会社などからコンタクトもちらほらあったので、意外と良い感じでした！
大体の予算感は？
これはデザインの内容や工数、予算、依頼する個人・企業などにもよってくると思うので参考までにですが、1ページあたり数万円前後で提案いただくことが多かったです。
ちなみに金額については、成果ベース（1ページいくら）で握るか、時間ベース（トータル何時間くらいか、1時間あたりいくらかなど作業工数）で握るかは事前に考えておきましょう。
ある程度やるべきことが明確に決まっている場合は成果ベースでもよいですが、デザイナーさんと一緒に考えつつ調整しながら進めたい場合や不確定要素が多い場合は、工数ベースで依頼するとよいかなと思います。
3. オリエンテーション資料の作成と共有
仕様を詰めたりするのと同様、初回のオリエンテーションはかなり大事だと思っています。
依頼の背景や目的、サービス・事業、ユーザーについての概要、今回解決したいユーザー課題と達成したいゴールなど、ドキュメントでも共有しつつ口頭でもできる限り丁寧に補足しすり合わせていきました。
今回はコロナ禍ということもあり、Zoomにてオンラインで実施しましたよ。
- 依頼背景
- サービス概要
- 依頼・仕様の詳細について
- トンマナやデザイン上のルール
- コミュニケーションの方法 / 今後の進め方
- 納品について
など
Marginやカラーリング、レイアウト、各種トンマナなどデザイン上のルールがあれば共有し、事前に認識を揃えておくと良いです。開発側の制約などでデザイン上変更できない箇所などもあれば、ここで整理しておきましょう！
また納品の形式や拡張子、画像をどこまで書き出すのか？どのように共有するか？などは、後ほどトラブルにならないように必ず事前にすり合わせておきましょう！
必要なテキスト情報は事前に用意しておく！
デザイン時に必要なテキストコンテンツなども、スプレッドシートなど一覧でまとめておくと良いです。
もしマークアップやフロント構築も同時に依頼する場合は、遷移先のリンクURL、パンくず、メタタグ（サイトタイトルやディスクリプション）などの情報も整理しておきましょう。
4. 契約関連の資料
必要に応じて業務委託契約書や秘密保持契約書なども、忘れずに用意しておきましょう。今回秘密保持契約書については、「Misoca」でつくり全てオンラインでやりとりをしましたよ！
5. コミュニケーションの取り方
コミュニケーションについては、チャットワークでグループを作成し、そこに開発や社内のデザイナーなど関係者含めてやり取りしました。ツールについては、フェイスブックメッセンジャーでもSlackでも、チームで使い慣れたものでOKです！
また事前に作業日時は洗い出しすり合わせた上で、作業開始前にチャットで一言（作業開始します！など）入れてもらい、作業後は簡単に1日の進捗を共有してもらっていました。
デザインの進め方やフィードバックで気をつけること
デザイン制作を進めていくにあたり、その進め方や修正・フィードバックで気をつけておくべきこともざっとまとめておきます。
デザイン提出の順序や進め方は事前に握っておく
デザインの進め方は事前に握っておいた方が良いです。先に30%くらいの完成度でいったん提出してもらって、確認後一緒に叩きながらデザインをブラッシュアップしていくのか、もしくはデザイナーさん側で一度完成形まで仕上げてから提出後修正などをしていくのかなど。
このあたりは依頼側のチームやデザイナーさん自身のスタイルによる部分もあると思います。ですが提出時に「思ってたのと違う！」とならないように、事前にどのようにどのタイミングで確認するか、確認フローや頻度などは考えておいた方が良いです。
また細かいですが、
- デザインパターンは複数作る想定か？
- 修正は何回くらいまでOKか？
なども話しておいた方がいいでしょう。
フィードバックの観点
何となく「これ直して！」だと、何のためにその修正をするのかデザイナーさん側も分かりません。
事業やサービスについて理解があるのは依頼側の方ですので、そうしたことも踏まえて、なぜそのフィードバックをしたのか？なぜその修正をするのか？など理由も明文化し丁寧に伝えると、よりよいデザインに繋がるのかなと思います。
非デザイナーからすると、デザインについて言語化するのはなかなか難しいところですが……、できる限り言語化する努力はしましょう。
またケースごとに言ってることやフィードバックの方向性が異なると混乱しがちです。どの観点でどんなスタンスで、などフィードバックの軸も統一できるといいです。このあたりも、どんなデザインをするのかの方向性が固まっていないと難しいところですが。
フィードバックやコメント方法も整理しておく
フィードバックする項目は、スプレッドシートなどシートでまとめておくと良いです。修正内容が多数発生した場合、どれが対応済みでどれが未対応なのか抜け漏れが発生しないように、また認識のズレが発生しないように、明文化し整理しておきましょう！
フィードバックは五月雨にすると、抜け漏れが発生したり、デザインの統一感がなくなったりすることもあります。できる限り一度整理・精査してから、フィードバックを渡す方がいいです。
UI検討時に抜け漏れ出さないために……
先程も述べましたが、事前の仕様策定が曖昧だとUIデザインをつくっていく中で、
「このパターンも必要だ」
「このケースの場合、どういうUIになるのか」
などパターンが抜け漏れ、デザイン作成のスケジュールも押していくことになります。
可能な限り仕様を策定する段階で、下記の観点は抜けもれないく事前に検討しておくとUI作成がよりスムーズになるかと。ベースの仕様が合った上で、デザイナーさんと叩きつつUIや仕様を必要に応じてブラッシュアップしてくと良いかなと思います。
- ページごとのユーザーのゴール / 役割を明確にする
- ユーザーの想定されるステータスを全て整理（ページごとに整理）
- ユーザーステータスごとに、UIの挙動の整理
- コンテンツのあるパターン、ないパターンの整理
- コンテンツの最大文字数、最長文字数のパターン整理
- コンテンツの表示される項目数は？（最大・最小）
- データの追加、更新・編集、削除などのパターンはあるか？
- PC版とSP版で機能やコンテンツに差異はないか？
- （他のページに仕様の変更が影響・関連しそうか？）
依頼内容や進め方などはプロジェクトによりますので、あくまで参考として検討すべき項目の抜け漏れチェックにどうぞ。
下記の記事も参考になります。
「UIスタック」でデザインする際の抜け漏れをなくす
強度の高いUIをデザインする
プロトタイプでの検証
UIが完成した時点でそのまま納品とせず、一度完成版のUIでもプロトタイプをつくり、動作やユーザーフローの検証を進める時間を取った方が良いです。開発・プロダクトチームで確認し、擦り合わせておきましょう。
UI制作を外注して進める場合は、スケジュール的に実施が大変かもしれません。しかしプロトタイプを挟んで確認すれば、
- 新規ページと既存ページのつながりを把握できる
- おかしい場所やユーザーが行き止まりになる場所に気づける
- 使いやすさや、使いにくさ分かる
- UIパターンの抜け漏れに気づける
- デザイン、企画、開発の作業者間での認識がずれにくい
などメリットは大きいです。「1,000の会議より、1つのプロトタイプ」（prottのキャッチコピー）です。
もし懸念事項などあれば、納品前に確認して修正することもできます。ぜひワイヤー段階だけではなく、出来上がったUIデザインでのプロトタイプ検証の時間をスケジュールに組み込んでおきましょう。
【まとめ】UI制作を社外で進めるには、事前の準備とすり合わせが必須！
ここまで外部のデザイナーさんにUI制作を依頼する際のフローや考えるべきポイント、注意点などをざっとですが振り返ってみました。
それなりの規模のUI制作を社外の方に依頼して進めるには、しっかり準備して進めることが大切です。目指すサービス体験や改善の方向性など、依頼するデザイナーさんとのすり合わせや目線合わせは丁寧にしていくと良いです。
UI制作の外注は難しい面も多かったですが、今回実施してみて色々と学びがあったので、また改善しつつトライしてみようと思います。もっと良い進め方やコツがあれば、ぜひ教えて下さい……！
