• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / ウェブデザインのフィードバックをAdobe XDの共有機能で行う

ウェブデザインのフィードバックをAdobe XDの共有機能で行う

池田祐太郎 | 2021年5月17日 公開 コメントを書く

ウェブサイトを制作する際、構成(ワイヤーフレーム)を作成し、それをもとにデザインを行い、ウェブページを作成というのがおおまかな流れです。

このデザインを作る作業には、以下の作業が含まれます。

  • 前行程で作成した構成を元にデザイン制作
  • クライアントへ提出
  • クライアントは確認しこうして欲しいああして欲しい等のフィードバックを送る
  • フィードバックを元に修正し再度提出
  • フィードバック確認し問題なければデザイン完了、次工程へ

クライアントがフィードバックの作業に慣れているかいないかでどの程度スムーズに進むか大きく差がでます。そこで、クライアントにとっても、制作側にとっても比較的取り組みやすく、手間がかからない方法として、Adobe XDの共有機能を使ったフィードバックフローをご紹介します。

目次

  • 1 ウェブデザインのフィードバックとは?
  • 2 フィードバックを送る方法ともらう際の課題
  • 3 Adobe製品を使っていればXDがおすすめ
  • 4 XDのフィードバック機能はシンプルでわかりやすい
  • 5 フィードバックは手間なく効率的に漏れなく行いたい

ウェブデザインのフィードバックとは?

  • テンプレートをベースに行うためデザインとして作成するのはバナー等のみ
  • 構成を作成せずデザインから入る
  • 最初に構成を作成しその後デザインにとりかかる

制作方法にも色々あると思いますが、上記いずれにしてもクライアント向けにウェブサイトを制作、納品という場合はどこかでクライアントに確認依頼とそれに対する変更や調整の要望をもらう作業が発生します。この作業をフィードバックと呼びます。

「クライアントからフィードバックが送られてきたらデザイン修正を行う」「フィードバック対応した修正デザインをクライアントへ送る」というような感じで使います。

基本的にデザイン段階のためまだ実際のウェブサイトにはなっていませんので、細かいテキストの言い回しや文言の変更は次工程のウェブページ制作後でも対応可能なことが多いですが、このフィードバック作業を行うことでウェブサイトの基本デザインを決めていきます。

フィードバックを送る方法ともらう際の課題

「デザインできましたので確認お願いします」としてデザインのフィードバック依頼を送る方法は色々あります。

  1. 画像やPDFに書き出してメールやチャット等に添付して送る
  2. 印刷した上で、提出する・ミーティングで説明する
  3. 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を使ったフィードバックがどんな感じなのか、サンプル画面を元に紹介します。

Adobe XD上でフィードバックを行った簡易サンプル

XDで共有したURLにアクセスするとコメントを自由にマッピングして記録することができます。例では3箇所のフィードバックを登録しました。マッピングは自由に位置が決められるため、細かい修正指示も可能です。画面右にコメントが表示され、誰がいつフィードバックしたかも明確。マッピングされた番号にマウスを乗せると該当のコメント箇所がハイライトされ、さらにクリックするとスクロールされて表示されます。

コメントに対して返信をした例

同じユーザーなので少々わかりづらいですが、コメントに対しての返信はこのように入れ子で表示され、各フィードバックに対してやりとりが可能。コメントした内容を編集したり、adobeアカウントでログインしていれば「@」を使ってメンションできる機能もあります。(ログインしていなければゲストとしてコメントが可能)

各コメントを解決させていくことで、対応するべきフィードバックが明確になる

フィードバックを「解決」させることで表示されているフィードバックが非表示になるため、全て解決させるともらったフィードバックを対応したということになります。非表示になっているだけなので、あとから再度表示させたり、未解決ステータスに変更させることもできます。

コメントのフィルタリングが可能

このようにフィルター設定が可能なので、解決済みか未解決かで切り替えが可能。他にもフィードバック投稿した人、投稿した時間等によってフィルタリングできます。(個人的にはあまり使わない)

基本的にはこのように多くの機能があるわけでもないとてもシンプルな画面。フィードバックを送ってもらうだけであれば十分です。利用側の様々なリテラシーが想定されるため、逆に機能がありすぎると、使えない、使いにくいという課題が発生する可能性があります。学習コストが低い点もとても重要です。

フィードバックは手間なく効率的に漏れなく行いたい

サイト制作や画面UI・UXは一人で完結ということは少なく、関係者のフィードバックをもらいながら完成へもっていくことがほとんどです。そういった場合は今回ご紹介したXDの共有機能を使ってフィードバックをやりとりすると、双方の手間が減り、言った言わないがなくなり、簡素化と効率化に繋がります。

フィードバックを依頼する側、またはフィードバックを行う側で「便利だ」と感じる部分は多少異なるかもしれませんが、XDであればデメリットよりもメリットが上回ると思います。

フィードバックによるやりとりでお困りであれば、Adobe XD是非一度試してみてください。スタータープランなら無料で利用できるようです。

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:xd

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

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

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

同一ページでMW WP Formのフォームを切り替える方法
2023年8月29日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
CSSを1行ごとに整形する作業をChatGPTにしてもらう
2023年8月9日
タグ: ChatGPT, css
カテゴリー: TIPS
ChatGPTの「Code Interpreter」によってデータサイエンティストの職が奪われる?
2023年7月26日
タグ: ChatGPT
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  5. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  6. WordPress で PHP エラーメッセージを非表示にしたい時

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」というエラーの解決方法
  • WordPress保守あるある:プラグインを更新したらエラー表示
  • WordPressのアップデートはどのタイミングで行うのが正解か
  • 同一ページでMW WP Formのフォームを切り替える方法
  • WordPressの不要なプラグインは残していいのか、それとも削除したほうがいいのか

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP Photoshop php SEO SNS ssh Sublime Text UpdraftPlus Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 効率化 最適化

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.