ウェブサイトを制作する際、構成（ワイヤーフレーム）を作成し、それをもとにデザインを行い、ウェブページを作成というのがおおまかな流れです。
このデザインを作る作業には、以下の作業が含まれます。
- 前行程で作成した構成を元にデザイン制作
- クライアントへ提出
- クライアントは確認しこうして欲しいああして欲しい等のフィードバックを送る
- フィードバックを元に修正し再度提出
- フィードバック確認し問題なければデザイン完了、次工程へ
クライアントがフィードバックの作業に慣れているかいないかでどの程度スムーズに進むか大きく差がでます。そこで、クライアントにとっても、制作側にとっても比較的取り組みやすく、手間がかからない方法として、Adobe XDの共有機能を使ったフィードバックフローをご紹介します。
目次
ウェブデザインのフィードバックとは？
- テンプレートをベースに行うためデザインとして作成するのはバナー等のみ
- 構成を作成せずデザインから入る
- 最初に構成を作成しその後デザインにとりかかる
制作方法にも色々あると思いますが、上記いずれにしてもクライアント向けにウェブサイトを制作、納品という場合はどこかでクライアントに確認依頼とそれに対する変更や調整の要望をもらう作業が発生します。この作業をフィードバックと呼びます。
「クライアントからフィードバックが送られてきたらデザイン修正を行う」「フィードバック対応した修正デザインをクライアントへ送る」というような感じで使います。
基本的にデザイン段階のためまだ実際のウェブサイトにはなっていませんので、細かいテキストの言い回しや文言の変更は次工程のウェブページ制作後でも対応可能なことが多いですが、このフィードバック作業を行うことでウェブサイトの基本デザインを決めていきます。
フィードバックを送る方法ともらう際の課題
「デザインできましたので確認お願いします」としてデザインのフィードバック依頼を送る方法は色々あります。
- 画像やPDFに書き出してメールやチャット等に添付して送る
- 印刷した上で、提出する・ミーティングで説明する
- URLを共有する
1, 2は従来よく使われてきている方法で、今でも多いと思います。簡単にデザイン確認ができる一方で、「ここのバナーの下部分をもっとこうして欲しい」「この要素はインパクトが弱いので左の部分を目立たせたい」など、具体的なフィードバックをもらう際に手間が多くなることが課題でした。
フィードバックをもらう際の課題
- メールやチャットでテキストでもらうと確認が容易だが、どの部分を指しているかわかりづらく、照らし合わせる作業が意外とかかる。複数回のメールにまたぐと確認が大変。
- ミーティングを設けて直接伺う機会を作るとニュアンスが伝わって双方の認識のすり合わせがしやすいが、対応箇所と具体的な対応内容をまとめておく必要がある。抜け漏れも発生しやすく記録が残りにくい。ミーティング開催のためお互いの時間もかかる。
- 手書き原稿を送る場合は見えづらいことが多く、文言の修正の場合打ち直す必要もでてくる
- 電話で説明するとミーティングと同様。
- WordやExcelといったツールに取り込んで伝えると各箇所に対して具体的な説明ができるが資料を作成する手間がかかる
このような様々な問題が発生します。
片や3「URLを共有する」は最近になって採用されるようになってきた方法です。修正指示に特化したAUN、制作から共有までできるFigma、そして今回取り上げるAdobe XD。どれもフィードバック依頼をオンライン上でできる仕組みとなっています。これらの場合、専用URLを送るだけでフィードバックが送信できるため、書き出しや印刷が不要です。フィードバックを依頼をされた方は内容を確認し、修正指示はブラウザ内の特定の場所を指定しコメントを書けます。学習コストはほぼゼロで直感的に扱えるのがほとんどなので、レビューする側の敷居も低く、今後のフィードバックの主流になっていくことが考えられます。
Adobe製品を使っていればXDがおすすめ
制作会社、フリーランスのデザイナーや製作者はAdobe製品を利用していることが多いと思います。PhotoShopやIllustratorを契約していて、他のAdobe製品も使える状況になっていればまずはAdobe XDが最有力候補です。AUNは個人的にはインターフェースはXDの方が優れていると感じましたし、Figmaは実際にプロジェクトで使うならば有料プランを使わないとなので最低でも月額$12かかります。学習コストもかかります。
その点XDであればPhotoshopやIllustratorといった他のAdobe製品との連携がしやすく、操作も近いためそこまで学習コストもかからず、月額有料ユーザーであればクラウド保存もできるのでお薦めです。今見たらスタータープランというのであれば無料で利用できるようですね。
フィードバック機能もシンプルでわかりやすく問題ありません。
- URLを共有設定して送るだけ
- コメント返信があればメール通知がある
- コメントに対しての返信もできる
- 解決すれば非表示にできて残りのタスクを可視化できる
- 解決したコメントをもう一度見たいときは再度表示もできる
- さらにフィードバックを対応して再度共有したいときは別バージョンとして新しく共有も可能
実際のフィードバック画面を見てみましょう。
XDのフィードバック機能はシンプルでわかりやすい
XDを使ったフィードバックがどんな感じなのか、サンプル画面を元に紹介します。
XDで共有したURLにアクセスするとコメントを自由にマッピングして記録することができます。例では3箇所のフィードバックを登録しました。マッピングは自由に位置が決められるため、細かい修正指示も可能です。画面右にコメントが表示され、誰がいつフィードバックしたかも明確。マッピングされた番号にマウスを乗せると該当のコメント箇所がハイライトされ、さらにクリックするとスクロールされて表示されます。
同じユーザーなので少々わかりづらいですが、コメントに対しての返信はこのように入れ子で表示され、各フィードバックに対してやりとりが可能。コメントした内容を編集したり、adobeアカウントでログインしていれば「@」を使ってメンションできる機能もあります。（ログインしていなければゲストとしてコメントが可能）
フィードバックを「解決」させることで表示されているフィードバックが非表示になるため、全て解決させるともらったフィードバックを対応したということになります。非表示になっているだけなので、あとから再度表示させたり、未解決ステータスに変更させることもできます。
このようにフィルター設定が可能なので、解決済みか未解決かで切り替えが可能。他にもフィードバック投稿した人、投稿した時間等によってフィルタリングできます。（個人的にはあまり使わない）
基本的にはこのように多くの機能があるわけでもないとてもシンプルな画面。フィードバックを送ってもらうだけであれば十分です。利用側の様々なリテラシーが想定されるため、逆に機能がありすぎると、使えない、使いにくいという課題が発生する可能性があります。学習コストが低い点もとても重要です。
フィードバックは手間なく効率的に漏れなく行いたい
サイト制作や画面UI・UXは一人で完結ということは少なく、関係者のフィードバックをもらいながら完成へもっていくことがほとんどです。そういった場合は今回ご紹介したXDの共有機能を使ってフィードバックをやりとりすると、双方の手間が減り、言った言わないがなくなり、簡素化と効率化に繋がります。
フィードバックを依頼する側、またはフィードバックを行う側で「便利だ」と感じる部分は多少異なるかもしれませんが、XDであればデメリットよりもメリットが上回ると思います。
フィードバックによるやりとりでお困りであれば、Adobe XD是非一度試してみてください。スタータープランなら無料で利用できるようです。
コメントを残す