パワポ・チャットのデザイン修正指示から卒業しよう

課題が生じやすい、デザイン修正プロセス

ウェブ制作では、デザインのチェックと修正指示は欠かせません。

社内での制作段階やクライアントの確認で、何度もデザインレビューと修正が繰り返されるのが一般的です。

しかし、実際には、フィードバックとコード・デザイン修正のサイクルがスムーズに進まないことがよくあります。

結果として、プロジェクトの遅れやタスクの対応漏れが生じたり、必要以上の時間やコストがかかったりと、多くの問題が起こってしまいます。

よく課題に挙がるのは、プレゼンや表計算ツールを使ったデザインフィードバックです。

パワーポイントやGoogleスプレッドシート、エクセルやGoogleシートを使ったデザイン修正の指示出しは、よく行われています。

確かに、パワポやエクセルは、普段使い慣れているツールで使いやすく、追加の費用もかかりません。

しかし、次のような課題がよく聞かれます。

• タスク全体、または個別タスクの進捗わかりにくく、対応漏れが起こりやすい。
• プロジェクトの完了が納期ギリギリになってしまう、または公開日が遅れてしまう。
• 見えない業務量の増加も含め、無用な対応コストや時間がかかってしまう。

従来のパワポ修正指示では、タスク管理が難しい

よくあるデザインレビューでは、テストアップされたウェブページのスクリーンショットを撮り、パワーポイントに貼り付けてコメントを書き込みます。

このパワーポイントファイルをデザイナーやコーダーに共有し、修正を依頼します。

一方で、Revoolのようなツールでは、コメント付きの画面キャプチャをそのままタスク化し、メンバーで共有してプロジェクト管理することが可能になります。

パワーポイントやGoogleスプレッドシートでも、修正依頼の内容をわかりやすく伝えることはできます。しかし、何度もチェックと修正を繰り返すプロセスには向きません。

パワーポイントのスライドを継ぎ足していくのか、複数のファイルを作成することになるためです。

こうなると、修正タスクとしてうまく進捗管理することができません。

タスク一覧をどう確認するのか、タスクが何件あって、どのタスクが完了し、どのタスクが進行中なのか。また、大事なタスクが漏れていないか、確認することが難しいのです。

ウェブ制作やアプリ開発では、レビューページが何十ページ、何百ページあることもあります。どのページへのコメントなのか、どのように管理したらよいでしょう。

紙への印刷、PDFへの手書き指示も、また難しい

クライアントの担当者がパソコンやネットをうまく使えない場合があります。

パワーポイントやPDFをうまく開けないこともあります。

この場合、ウェブサイトを印刷し、紙を郵送または営業が持参して説明、クライアントに手書きで修正指示を書きこんでもらうようなケースもあります。

また、制作会社やディレクター個人の好みによっては、ページにタブレット上で手書きの指示を書き込み、PDF化して制作チームに修正依頼を出すこともあるでしょう。

確かに、紙に印刷して確認することで誤字などの細かなミスに気付くことができる面もあります。

一方で、印刷や手書きによる指示は、デザイナーやコーダーによる転記ミスや誤字脱字の原因となってしまうことも確かです。

また、プロジェクトが遅れがちで納期に追われやすいウェブ制作のプロセスでは、紙でのやりとりには時間がかかることも課題に挙げられます。

もともとデジタルでダイナミックなウェブページは、そのまま確認してレビューできるのが理想です。

figma、Backlog、Slackも、ウェブ制作のタスク管理が難しい

ウェブのデザイン制作では、figmaやAdobe XDなどのデザインツールがよく使われています。

一方、社内のコミュニケーション、チャットのやりとりはSlackやChatwork、プロジェクト管理はBacklogやTrelloなどが代表的なツールでしょう。

1. figmaなど、デザインツールでの課題

ウェブディレクターとデザイナー兼コーダーの小さな制作チームでは、figma内でデザインレビューやフィードバック修正を完結させることはできます。

ただ、サーバーにテストアップされ、JavaScriptやCSSアニメーション、マウスホバーによる動的効果など生きたサイトコンテンツのレビューはしづらくなってきます。

figmaにもコメント機能がありますが、「解決済み」のフラグしかなく、一覧性や検索性も高くないため、タスク全体の進捗管理には向きません。

また、ディレクターとコーダー、デザイナー、営業、クライアントなど、プロジェクトメンバーが増えてきたらどうでしょう。figmaに全員アクセスできるか、使いこなせるかなど、課題がいろいろと出てきます。

2. Backlogなど、プロジェクト管理ツールでの課題

タスク管理ならば、Backlogのようなプロジェクト管理ツールの得意とするところです。

必要なメンバーをプロジェクトに招待し、メンバー間でメッセージやファイルのやりとりをすることができます。

ただ、Backlogのウェブ制作のタスク管理を行うには、スクショの撮影、画像のアップロードが必要になります。

キャプチャ画像を大量にアップしてタスク化するには、向いているとは言えません。

3. Slackなど、チャットツールでの課題

チャットツールは、すでにメンバーが日々使用しており、関係者だけでチャンネルやルームを作成してやりとりできるため、コミュニケーションには抜群の使いやすさがあります。

修正指示のキャプチャ画像もスレッドに投稿し、コメントをつけて共有するのも簡単です。

Slackのようなツールが苦手なのは、プロジェクト管理やタスクの進捗管理です。タスクを一覧で確認したり、ステータスを管理することができません。

トピックごとにチャットのスレッドに情報が散在し、見落としや対応の遅れも生じやすいでしょう。

デザイン修正指示ツールで、従来の課題を解決しよう

これまで見たように、デザインチェックとページ修正で利用されているツールやプロセスには、多くの課題があります。

そんな課題を解決するために生まれたのが「デザイン修正指示ツール」です。ウェブ修正依頼ツール、デザインレビューツール、オンライン校正ツールと呼ばれることもあります。

デザイン修正指示ツールには、次のような特長があります。

• パワポ、プロジェクト管理、チャットなど複数ツールに頼らなくてよい。
• ツール上でタスクが一元的に管理・見える化され、対応漏れや遅れが生じにくい。
• メンバー間のコミュニケーションがスムーズになり、伝言ゲームや勘違いが生じにくい。

デザイン修正指示ツールをうまく使うことで、ウェブデザインのレビュー作業がスムーズになります。

タスクのステータス共有が効率化され、コミュニケーションのミスや漏れが減らせます。結果としてウェブ制作プロセスが効率化し、制作物の品質の向上とコスト削減につながるのです。

また、クライアントや営業、ディレクター、デザイナーやコーダー間のストレスを減らすこともできます。優れた制作は、リラックスしたチームワークでこそ実現できるはずです。

制作がスムーズに進めば、クライアントとも余裕をもって進捗を確認できます。制作チームが納期に追われてしまい、焦って無理な残業をしたり、ミスの見落としや対応漏れが発生したりことも防ぎやすくなります。

ツール活用で生まれた余裕は、デザインのさらなるブラッシュアップにも、メンバーの業務負担の削減にも生かすことができます。

よりよいウェブ制作を実現するために、デザイン修正指示ツールでチェックバックのプロセスを進化させてください。

従来のデザイン修正指示ツールのしくみ

Revoolが生まれる前から、いくつものデザイン修正指示ツールがありました。

インストールなし・ユーザー登録なしで手軽に使えるものもあり、多くのウェブ制作会社や事業会社の制作担当を助けています。

従来ツールには、レビュー対象ページの取得方法によって、大きく分けて2つの方式があります。

• A. 画面キャプチャ型
• B. スクレイピング型

画面キャプチャ型は、日本製・日系ツールで一般的な方式です。

一方、スクレイピング型は、海外製ツールの先進的なツールで採用されている方式です。

それぞれの方式の特徴を見ていきましょう。

A. 画面キャプチャ型のデザイン修正指示ツール

画面キャプチャ型ツールでは、入力されたURLをもとにレビュー対象のページを追加します。

対象のウェブページ全体のスクリーンショットを自動で撮影し、保存されたキャプチャ画像上にデザイン修正指示やフィードバックコメントを追加していくしくみです。

このキャプチャ型ツールには、次のようなメリットがあります。

• ツールやコメントのしくみがシンプルで、直感的に操作しやすい。
• ページ全体の画面キャプチャにより、ページのどこにコメントされたか、わかりやすい。
• 静的なキャプチャ画像の性質上、データの保存や共有がしやすい。

一方で、画面キャプチャ型ツールには、次のようなデメリットもあります。

• 画面全体のキャプチャ撮影や事前処理のため、ページ追加の待ち時間が長い。大量ページの追加はさらに時間がかかる。
• PC表示、タブレット・モバイル向けのレスポンシブ表示のページをそれぞれキャプチャする時間と手間がかかる。
• テストアップなど制作中ページが更新されると、元の画面キャプチャが古くなってしまう。

ウェブサイトをページ単位の大きな画像として扱う性質上、少数ページに丁寧にコメントする使い方には向いていますが、絶えず更新される生きたウェブページのデザインレビューには使いにくいかもしれません。

B. スクレイピング型のデザイン修正指示ツール

スクレイピング型ツールでも、キャプチャ型ツールと同様に、ユーザーが入力したURLをもとにレビュー対象のページを追加します。

スクレイピング型ツールでは、対象ページのコンテンツを画像で取得する代わりに、ソースコードを読み取り、ツール独自のタグやスクリプトの挿入、関連ファイルの保存などの事前処理をした上で、ツール上に表示します。

基本的には、レビュー対象ページと同様に表示されるため、ページ画面のレビュー箇所にコメントを追加していくことができます。

主に海外製の先進的なデザイン修正指示ツールに多い方式で、海外では、Design Feedback Toolsと呼ばれています。

再現されるページの見た目はレビュー対象ページそのものですが、実際には一度処理されたページソースを利用しています。

このスクレイピング型ツールには、次のようなメリットがあります。

• 実際のページ同様のコンテンツ表示や動的効果が再現された、レビューページのリアルさ。
• CSSが有効のため、PC・タブレット・モバイル表示の切替がワンクリックで簡単にできる。
• ユーザー認証の必要なウェブアプリなど、高度なウェブコンテンツもレビューができる。

一方で、スクレイピング型ツールには、次のようなデメリットもあります。

• スクレイピングやコードの事前処理のため、ページ追加の待ち時間が長い。
• コンテンツのレイアウトや動的効果など、実際のページを完全に再現できないことがある。
• レビュー対象ページが更新されると、元の取得ページソースが古くなってしまう。

ウェブサイトをスクレイピングするため、ソースコードの独自処理による待ち時間の長さが気になったり、一部のウェブサイトでは表示に不具合が出たりすることがあります。

従来ツールの課題を解決する、Revoolの特長とは

Revoolが解決する、これまでのデザイン修正指示ツールの課題は3つです。

• ツールの独自処理により、レビュー対象ページの追加に時間がかかり、大量のページをスムーズにレビューできない。
• キャプチャ撮影やスクレイピングのしくみ上、取得データが古くなり、更新され続けるページに対応できない。
• マウスホバー、スクロールによる動的効果など、ダイナミックなコンテンツをレビューページで完全に再現できない。

画面キャプチャー型ツールでは、レビューページは画像ベースのため、一度取得したページ表示は動きません。そのため、トップページで大きな画像が入れ替わるイメージスライダー、メニューアイコンを押すと現れるトップメニュー、マウスホバーによるボタンアニメーションなど、動的な効果を再現できません。

また、スクレイピング型ツールでは、スクリプトやファイル、フォントなどの外部スクリプトを複雑に読み込むような高度なページの場合など、ページ表示を完全に再現できないことがあります。

さらに、いずれのツールもデータを取得して処理するしくみのため、新規ページの追加に時間がかかってしまいます。

従来の課題を解決する、RevoolのLIVEレビューモード

Revoolでは、これまでのツールの課題を解決するため、独自のレビュー方式を採用しています。

生きたウェブサイトをそのまま読み込み、修正依頼をしたい箇所のみ画面キャプチャできるLIVEレビューモードです。

このLIVEレビューモードにより、Revoolには、次のような特長があります。

• 直接レビュー対象ページを読み込む方式のため、完全なページコンテンツとしてレビューできる。
• 事前のデータ取得がないため、ページ追加の時間が不要で、取得データが古くなる問題も起こらない。
• ビューポイントによるレスポンシブ表示をワンクリックで切替、デバイスごとの表示ページをレビューできる。
• 複数ページを自由に行き来し、ビューを切り替えてレビューを行うだけで、ページURLとビューが自動で保存される。
• ページ全体ではなく、必要な修正箇所のみキャプチャ・タスク化されるため、効率よく確認・修正対応ができる。

このような機能によって、Revoolはツール自体の動作が軽く、ときに数百それ以上のページとなるウェブサイトでも、効率よくレビュー作業を行うことができます。

従来のデザイン修正指示ツールは、ページ全体を読み込み、修正コメントが追加できるため、多くのユーザーにとってわかりやすく、使いやすいツールと言えます。1ページに細かな修正を数多く行う場合にも、便利なツールです。

一方、Revoolは、サイトの内のページを行き来しながら、数多くのページにまたがる修正コメントをデバイス別・URL別に管理するのに向いています。

それぞれのツールの個性を生かして、ウェブ制作やアプリ開発の効率化に役立ててください。