【XDが最強】webデザインの修正指示出し・コメント確認ツール3選｜フィードバックを円滑に

Nakata

こんにちは。
WordPressやConcrete5によるwebサイト制作、webディレクションを行っていますMarketing Wizardの中田です。

webデザイン制作をやっていると
デザイン確認の段階で、フィードバックやコメント、修正箇所の指示など
クライアントとのコミュニケーション、およびチーム内での伝達をどのようにすれば良いか
悩むところではないでしょうか。

またクライアントによっては、複数回修正対応をしないといけない場合があったり
「あれ、この箇所ってどのように変わったんだっけ？デザイナーの元々の意図は…？」
と、バージョンによる管理もしないといけないケースも出てきます。

そこで今回は
「クライアント・チーム内で視覚的にデザイン修正点を確認でき、整理できるツール」
を3点（+α）ご紹介いたします。

1:ワイヤーフレーム制作から修正コメントフィードバックまで！Adobe XDが最強

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

最強だったのはやっぱりXD。

動作が軽い（ただし共有リンクがやや重ため）
ローカル上でも動作する（アプリなので）
ワンクリックで共有リンクを作成できる
誰がコメントしたのか、人ごとに確認できる
コメントに対して返信をすることが可能
ピン設置によるコメントのみならず、アートボード上で図形などリッチな表現による伝達が可能

と、以下に紹介するツールでの機能はひと通り備えています。

基本的にはAdobe製品は、Adobe Creative Cloudに加入している必要がありますが、
Adobe XDはスタータープランなら無料で導入可能です。

公式のスタータープラン説明によると

アクティブな共有プロトタイプ数、1
アクティブな共有デザインスペック数、1

とのことで、1つのプロジェクトに限れば共有も可能。

具体的なデザインフィードバック手順としては、
カンプデザインがpng/jpg形式である場合、上メニューの「ファイル」から「読み込み」で画像ファイルを読み込むことが可能。
ショートカットキー: cmd + shift + i ( importのi )

後は、アートボードのサイズを還付デザインのサイズにフィットさせて
右上の「共有」ボタンから「プレビュー用に共有」を選択すれば
プレビュー用リンクが作成されます。

共有リンク先ページにて、箇所をピンで指定してのコメントが可能となります。
ユーザーによる識別は自動的に行われます。

参考記事 : ネット上で確認・修正指示がかんたんに、Adobe XDの使い方 | 株式会社BISCOM ｜山梨県甲府市のWeb制作・Webデザイン・ホームページ作成

たまーーーにクライアントによっては「共有リンクが重くて開けない」という方もいらっしゃるので
その場合は、下のAUN（あうん）というデザイン修正指示ツールをご利用ください。

2: webページデザインの修正指示・コメントをクライアントから簡単に貰うなら！安心の日本語国産ツール「AUN」（あうん）

AUN[あうん]｜登録不要の修正依頼・指示ツール

安心の国産。日本語です。

シンプルなので、操作を迷うことがない
学習コストがほぼゼロなので、ITリテラシーに関わらずどんなクライアントにも共有できる
ユーザー登録せずに、すぐに利用可能
無料版だとweb上での保存期間が7日間
PDF形式でエクスポート可能。コメントのみcsv形式でもエクスポート可。
URLを送るだけで共有できます。パスワード設定も可能なのでセキュリティ面も安心。

修正箇所をドラッグ&ドロップで指定して、そこにコメントを書いていく方式。「済」などのスタンプを押すことも可能。

修正指示がほしいwebページのURLを指定すると、該当ページ全体のスクリーンショットでフィードバック画面を作成してくれます。
コメント内容の確認のみであれば、スマートフォンからも閲覧可能。
ただし、スマートフォンからコメント箇所の追加や編集をすることはできません。

画像のアップロード、フィードバック画面の読み込みがやや遅いか？という印象ですが、あまり気にならない程度。
共有リンクに関しては、XDより軽いはずです。

PDF抽出すると、コメント箇所が最下部にまとめて表示となるので少し面倒です。コメントのみのcsvエクスポートと併せて利用するのが吉。
この点、デスクトップが散らかりがちであまり好ましくはないですね…
有料版は個人プランが月額3000円からとなっています。

3: 細かい部分までクライアントが指示出し可能。タスク管理機能も秀逸な「MONJI」

High speed up your creative business [MONJI]

基本的には、上で説明したXDあるいはAun（あうん）でほとんどのケースは事足りると思いますが
細かく指示を出したかったり、修正に関して「タスク化」することで
実装までの管理をしたい場合には、こちらの「MONJI」の出番かもしれません。

MONJIは、英語版AUN（あうん）のようなwebページに特化したフィードバックツール。
ユーザ登録不要ですぐに使うことができます。

記号や図形を使って細かい指示出しを行うことができる分、操作は少しコツがいりそう。
画面右側に常駐する形でタスク（修正コメント）を見ることが可能。
優先度、締め切りをコメントにつけることができ、修正に関するタスク管理の意味合いも強めです。

細かい部分まで指示出し出来そう。英語でも問題なく、リテラシーのあるクライアントであれば送付しても大丈夫かも。

その他のフィードバックツール・デザインモックアップツール

基本的には上記3つのツールで対応が可能と思われますが
運用体制、ルールやクライアントによっては他のツールも検討する余地はあるかもしれません。

以下、

バージョン管理
レスポンシブ別フィードバック
モックアップ作成
動画など、他アセットとの一元管理

という特徴をそれぞれもつツールをご紹介いたします。

※ちょっぴり辛口なコメントもあります

チーム内で共有するなら、バージョン管理からレスポンシブ対応（画面幅別）の指示出しツール「symu」

Symu.co – display your design in a web browser

バージョン管理機能あり。
iPadやiPhoneなど、画面幅を切り替えてレスポンシブに対応したコメントが可能。
英語のみ。クライアントに送付するにはやや気が引けますが、シンプルかつ多機能でまとまっているため、チーム内で共有するのには非常に良さそう。

参考記事 : 進行中のデザインをクライアントも私もあれこれコメントつけあいながら確認できるサービス

デザイン・動画のレビュー・リテイク管理ツール| KaleiDA-reView

フィードバックに関するダッシュボード、プラットフォームという印象。
修正指示そのものはもちろん、フィードバックに関するドキュメントの一元化、チーム内のタスク管理まで。
日本語、国産ツール。

モックアップツールによるデザインレビュー｜InVision（インビジョン）

InVision | Digital product design, workflow & collaboration

レビュー専用、というツールではありません。
簡単にデザインを行うことができる、デザインモックアップツールのような位置づけです。
（Invision Studioとして有名）

デザイン修正・フィードバックという観点では、フリーハンドすぎて「どこにコメントしたか」が分かりづらい印象もあります。
箇所を指定するのがやや面倒かもしれません。
英語のみ。クライアントに送付するには少し気が引けてしまいます。

参考記事 : InVison(インビジョン)の使い方まとめ！デザインレビューが恐ろしいほど捗ります！ – ウェブ企画ラボ

webデザインのみならず、広く広告物について管理・フリーハンドで修正指示｜Brushup（ブラッシュアップ）

Brushup（ブラッシュアップ）- 制作物のフィードバックに生産性を

Brushupは、webページ・デザインのみにとどまらず
動画や広告物、ドキュメンタリーなどのアセットに対して、フリーハンドで指示出し・修正指示を行えるツール。
inVision同様、フリーハンドで書くことが可能です。
プロジェクト管理、タスク管理をすることができます。

ただ…、ユーザー登録が面倒です。（フォーム必須入力項目が多い）
またwebページに限定されていない分、使い方が分かりづらく、直感的なUIではない印象を持ちました。

デザインフィードバック・修正指示出しツールを利用して、効率的な制作を

いかがでしたでしょうか。
今回は、デザインフィードバック・修正指示出しができるツールを
3つ+αという形でご紹介させていただきました。

基本的には

一般的なクライアントからの修正指示、またはチーム内でフィードバックツールを用いるのならAdobe XD
ITリテラシー面が不安なクライアントからデザインフィードバックをもらうのならaun（あうん）
その他、チーム内でバージョン管理や、デバイス画面幅ごとのフィードバックを行いたいならその他のツール

という使い分けで良いと思います。

また、今回ご紹介したのはあくまで修正指示出し、フィードバックツール。
実際にクライアントにデザインを提出する際には、なるべく対面、それが難しければテレビ会議を使うなど
「生の声」を拾ってデザインに対する温度感も合わせて考慮していくのが、より良い制作物とするうえで大切になってくると思います。

そのうえで、効率的な制作ワークフローとするために、今回ご紹介したフィードバック・指示出しツールを活用してみてください。