従来のデザイン修正指示ツールのしくみ
Revoolが生まれる前から、いくつものデザイン修正指示ツールがありました。
インストールなし・ユーザー登録なしで手軽に使えるものもあり、多くのウェブ制作会社や事業会社の制作担当を助けています。
従来ツールには、レビュー対象ページの取得方法によって、大きく分けて2つの方式があります。
A. 画面キャプチャ型
B. スクレイピング型
C. ハイブリッド型(Revool)
画面キャプチャ型は、日本製・日系ツールで一般的な方式です。
一方、スクレイピング型は、海外製ツールの先進的なツールで採用されている方式です。
それぞれの方式の特徴を見ていきましょう。
A. 画面キャプチャ型のデザイン修正指示ツール
画面キャプチャ型ツールでは、入力されたURLをもとにレビュー対象のページを追加します。
対象のウェブページ全体のスクリーンショットを自動で撮影し、保存されたキャプチャ画像上にデザイン修正指示やフィードバックコメントを追加していくしくみです。
このキャプチャ型ツールには、次のようなメリットがあります。
- ツールやコメントのしくみがシンプルで、直感的に操作しやすい。
- ページ全体の画面キャプチャにより、ページのどこにコメントされたか、わかりやすい。
- 静的なキャプチャ画像の性質上、データの保存や共有がしやすい。
一方で、画面キャプチャ型ツールには、次のようなデメリットもあります。
- 画面全体のキャプチャ撮影や事前処理のため、ページ追加の待ち時間が長い。大量ページの追加はさらに時間がかかる。
- PC表示、タブレット・モバイル向けのレスポンシブ表示のページをそれぞれキャプチャする時間と手間がかかる。
- テストアップなど制作中ページが更新されると、元の画面キャプチャが古くなってしまう。
ウェブサイトをページ単位の大きな画像として扱う性質上、少数ページに丁寧にコメントする使い方には向いていますが、絶えず更新される生きたウェブページのデザインレビューには使いにくいかもしれません。
B. スクレイピング型のデザイン修正指示ツール
スクレイピング型ツールでも、キャプチャ型ツールと同様に、ユーザーが入力したURLをもとにレビュー対象のページを追加します。
スクレイピング型ツールでは、対象ページのコンテンツを画像で取得する代わりに、ソースコードを読み取り、ツール独自のタグやスクリプトの挿入、関連ファイルの保存などの事前処理をした上で、ツール上に表示します。
基本的には、レビュー対象ページと同様に表示されるため、ページ画面のレビュー箇所にコメントを追加していくことができます。
主に海外製の先進的なデザイン修正指示ツールに多い方式で、海外では、Design Feedback Toolsと呼ばれています。
再現されるページの見た目はレビュー対象ページそのものですが、実際には一度処理されたページソースを利用しています。
このスクレイピング型ツールには、次のようなメリットがあります。
- 実際のページ同様のコンテンツ表示や動的効果が再現された、レビューページのリアルさ。
- CSSが有効のため、PC・タブレット・モバイル表示の切替がワンクリックで簡単にできる。
- ユーザー認証の必要なウェブアプリなど、高度なウェブコンテンツもレビューができる。
一方で、スクレイピング型ツールには、次のようなデメリットもあります。
- スクレイピングやコードの事前処理のため、ページ追加の待ち時間が長い。
- コンテンツのレイアウトや動的効果など、実際のページを完全に再現できないことがある。
- レビュー対象ページが更新されると、元の取得ページソースが古くなってしまう。
ウェブサイトをスクレイピングするため、ソースコードの独自処理による待ち時間の長さが気になったり、一部のウェブサイトでは表示に不具合が出たりすることがあります。
C. 従来ツールの課題を解決する、ハイブリッド型のRevool
Revoolが解決する、これまでのデザイン修正指示ツールの課題は3つです。
- ツールの独自処理により、レビュー対象ページの追加に時間がかかり、大量のページをスムーズにレビューできない。
- キャプチャ撮影やスクレイピングのしくみ上、取得データが古くなり、更新され続けるページに対応できない。
- マウスホバー、スクロールによる動的効果など、ダイナミックなコンテンツをレビューページで完全に再現できない。
画面キャプチャー型ツールでは、レビューページは画像ベースのため、一度取得したページ表示は動きません。そのため、トップページで大きな画像が入れ替わるイメージスライダー、メニューアイコンを押すと現れるトップメニュー、マウスホバーによるボタンアニメーションなど、動的な効果を再現できません。
また、スクレイピング型ツールでは、スクリプトやファイル、フォントなどの外部スクリプトを複雑に読み込むような高度なページの場合など、ページ表示を完全に再現できないことがあります。
さらに、いずれのツールもデータを取得して処理するしくみのため、新規ページの追加に時間がかかってしまいます。
Revool独自開発のLIVEレビューモードの特長とは
Revoolでは、これまでのツールの課題を解決するため、独自のレビュー方式を採用しています。
生きたウェブサイトをそのまま読み込み、修正依頼をしたい箇所のみ画面キャプチャできるLIVEレビューモードです。
このLIVEレビューモードにより、Revoolには、次のような特長があります。
- 直接レビュー対象ページを読み込む方式のため、完全なページコンテンツとしてレビューできる。
- 事前のデータ取得がないため、ページ追加の時間が不要で、取得データが古くなる問題も起こらない。
- ビューポイントによるレスポンシブ表示をワンクリックで切替、デバイスごとの表示ページをレビューできる。
- 複数ページを自由に行き来し、ビューを切り替えてレビューを行うだけで、ページURLとビューが自動で保存される。
- ページ全体ではなく、必要な修正箇所のみキャプチャ・タスク化されるため、効率よく確認・修正対応ができる。
これらの特長は、画面キャプチャ型とスクレイピング型の特長を併せ持つ、ハイブリッド型です。
このような機能によって、Revoolはツール自体の動作が軽く、ときに数百それ以上のページとなるウェブサイトでも、効率よくレビュー作業を行うことができます。
従来のデザイン修正指示ツールは、ページ全体を読み込み、修正コメントが追加できるため、多くのユーザーにとってわかりやすく、使いやすいツールと言えます。1ページに細かな修正を数多く行う場合にも、便利なツールです。
一方、Revoolは、サイトの内のページを行き来しながら、数多くのページにまたがる修正コメントをデバイス別・URL別に管理するのに向いています。
それぞれのツールの個性を生かして、ウェブ制作やアプリ開発の効率化に役立ててください。