• Skip to main content
  • Skip to primary sidebar

まほウェブ

魔法使いのwebマーケティング

現在の場所:ホーム / webデザイン/コーディング / 【XDが最強】webデザインの修正指示出し・コメント確認ツール3選|フィードバックを円滑に

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

By Wizard-Nakata 投稿日: 2019年10月14日 最終更新: 2019年10月16日

 

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

 

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

デザインフィードバック

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

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

 

目次

  • 1:ワイヤーフレーム制作から修正コメントフィードバックまで!Adobe XDが最強
  • 2: webページデザインの修正指示・コメントをクライアントから簡単に貰うなら!安心の日本語国産ツール「AUN」(あうん)
  • 3: 細かい部分までクライアントが指示出し可能。タスク管理機能も秀逸な「MONJI」
  • その他のフィードバックツール・デザインモックアップツール
    • チーム内で共有するなら、バージョン管理からレスポンシブ対応(画面幅別) の指示出しツール「symu」
    • デザイン・動画のレビュー・リテイク管理ツール| KaleiDA-reView
    • モックアップツールによるデザインレビュー|InVision(インビジョン)
    • webデザインのみならず、広く広告物について管理・フリーハンドで修正指示|Brushup(ブラッシュアップ)
  • デザインフィードバック・修正指示出しツールを利用して、効率的な制作を

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

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-あうん

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

 

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

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

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

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

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

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

 

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

monji

High speed up your creative business [MONJI]

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

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

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

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

 

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

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

以下、

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

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

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

 

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

symu

Symu.co – display your design in a web browser

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

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

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

KaleiDA-reView

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

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

モックアップツールによるデザインレビュー|InVision(インビジョン)

invision

InVision | Digital product design, workflow & collaboration

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

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

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

 

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

brushup

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

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

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

 

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

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

基本的には

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

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

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

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

この記事をシェアする:

  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)

関連

カテゴリー: webデザイン/コーディング タグ: web制作, XD, ツール, フィードバック

お気軽にコメントをくださいませ!

 

本記事はあなたのお役に立てましたでしょうか?
ひとことでもコメント欄からご感想をいただければ、モチベーションに繋がります。

また「本記事には書かれていなかったけれど、他の点について知りたい」というご質問や、誤っている箇所などあればご指摘もお待ちしております。

メールアドレスが公開されることはありません。
なんでもお気軽にコメントくださいませ。

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

最初のサイドバー

Marketing Wizard : Nakata

" Webマーケティングで魔法をかける "
東京都にて活動しています、SEOと会員サイト制作に強みのあるweb屋フリーランスです。

【経歴】
神戸大学法学部卒→政府系金融機関。その後、大阪のインバウンド向け広告代理店に勤務した後、2014年4月から個人事業主として活動開始。
約5年間にわたり、旅行・観光のプランニング&手配代行サービスを運営しておりました。

独力でサイトを立ち上げ、100%Webからの集客とリピーター戦略で安定した成長と売上を確保。
当時の経験を活かし、現在は「Web屋」として奮闘中。
Web制作ではConcrete5を活用した会員サイト構築を強みとしています。

制作・Webマーケティング・顧客管理の技術を通じ
ひとり起業家・小規模事業の方のお力になりたく思っています。
特に企画ヒアリング・設計・SEOが得意です。

本ブログでは主として、少ないリソースでも活きる「No-Code」でのweb制作・開発方法をはじめ
web集客方法、便利ツール、SEOテクニックについてご紹介させていただきます。

サイト内検索

最近の投稿

  • エックスサーバーにSSH接続できない!”Permission Denied” 3大の原因 2021年1月8日
  • 仮想端末tmuxを利用してSSHセッションを維持する方法 2020年12月30日
  •  NextCloud構築はsnapコマンドで一発!インストール方法 2020年12月8日
  • WordPressエディタ入力時のデフォルトフォントサイズを変更する2つのステップ 2020年11月12日
  • concrete5 で掲示板アドオンはあるか?その他シンプルな実現方法 2020年11月7日

カテゴリー

  • CMS一般
  • concrete5
  • EC/ショッピングカート
  • No-Code
  • SEO
  • Strikingly
  • webデザイン/コーディング
  • webマーケティング一般
  • WordPress
  • サーバー
  • フリーランス論/仕事術
  • ライティング

タグ

2019 concrete5 Conoha conohavps contactform7 CSS E-A-T googleサイト google公式ガイドライン Instagram instapage kusanagi LP mamp No-Code nofollow owncloud podcast seoライティング ssh strikingly tmux vps Webサイトビルダー web制作 wordpress エックスサーバー エッセンシャル思考 エラー対応 クラウドストレージ スライド セミナー ツール データベース ナレッジパネル パーマリンク ブログ プラグイン ペライチ ライティング 事例 本 構造化マークアップ 社内ポータル 著者情報

Anchorでpodcastラジオ音声配信もしています

Webマーケティングやスモールビジネスに役立つ方法をpodcastラジオ音声配信しています。

魔法使いのWebマーケティングRadio  • A podcast on Anchor

「ながら聴き」も可能な内容ですので、ぜひお楽しみください。

web制作・SEO・メディア運用のご案内

webサイト制作・CMS導入・
SEOコンサルティング・広告運用・
メディア運用の依頼など
ご相談、ご依頼を承ります。

サービス内容およびポートフォリオ
(制作実績)

webに関するお悩みを
企画・制作・運用まで
なんでもお気軽に
ご相談くださいませ。

 

対応CMS等
WordPress・Concrete5・STUDIO・Strikingly

お気軽にご相談ください

webサイトの制作・分析からSEO・広告運用まで。

お問い合わせはこちらから。

ぜひお気軽にご相談ください。

Twitterでwebマーケティングに効くお役立ち情報を呟いています

ツイート

©2018 Marketing Wizard・まほウェブ・魔法の使いのwebマーケティング・逆転のスモールビジネス