MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer

【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer

公開日:2019年02月09日
最終更新日:2019年05月28日
オンスタ運営
エンジニア
ホーム > 全記事一覧 > 制作 > エンジニア > 【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
このエントリーをはてなブックマークに追加
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer

こんばんは!炎のエンジニアこと石原です!

人が社会の中で生きていく上で必須になるコミュニケーション
Webサイトを作る上でも、チームの中でのコミュニケーション、クライアントさんとのコミュニケーションは制作物のクオリティを左右する重要事項です。

例えば、コーディング完了後、デザイナーにチェックしてもらう時。 サイトの校正作業を行う時。 クライアントさんに確認してもらう時。

紙に印刷して、チェックしたり、 スクリーンショットを取って、PDFにしてチェックしたり...

どんだけ時間がかかるんだ!!

そう思っていました。ハイテクな時代にローテクなやり方。なんとかならんものか.....

意見を共有することにコストがかかりすぎる...

僕は探しました。課題を解決出来るツールはないものか、と。

そして。そしてついに見つけたのです!!!

そう。PageProoferをね。

 

今回はそんなチェック時にかなり便利な、弊社でも導入しているフィードバックツール【PageProofer】をご紹介します!

Pageproofer とは

Pageproofer - Visual Bug Tracker & Visual Feedback ToolBrowser

Pageproofer は、Webサイトに直接コメントを書き込むことができるようになるフィードバックツールです。

百聞は一見に知らず。簡単なデモですがご覧ください。

https://www.youtube.com/watch?v=Kwv4HjcbWVU

Webサイトに対してPageprooferから発行したscriptタグを設置することで、右下のペンアイコンから直接書き込みが可能となります。

CMSだと導入も一瞬ですね。また、ブックマークレットからも導入可能です。

Pageproofer の主な機能

Pageprooferでは、主に以下の概念が存在します。

  • サイト : Pageprooferを導入するサイトを登録する必要があります。
  • アカウントオーナー : 組織の管理者。決済アカウント。
  • ユーザー : 組織のメンバー。アカウントオーナーが招待します。
  • ノート : Webサイトに対しての書き込み。
  • コメント : ノートに対するコメント。

Pageprooferでは主にこんな機能が用意されています。

Webサイト側で出来る操作

Webサイトをチェックする上で必要な機能はほぼほぼ揃っています。

  • サイトに直接ノートを書き込むことができます。
  • サイトに書き込まれているノートに対して、コメントの返信が可能です。
  • ノートに対してステータスが設定可能です。
          ToDo、In Progress、Complete, Closed の4つのステータスが用意されています。
  • ノートに対してファイルやスクリーンショットを添付することが可能です。
  • ノートを書き込んだ時点で、ブラウザの詳細(ユーザーエージェント、デバイス、画面サイズ)やDOMのセレクタの情報も一緒に保存されます。
  • レスポンシブWebデザインに対応しています。

 

ダッシュボードから出来る操作

ダッシュボードでは、設置するサイトを登録したり、ノートに対して一覧を表示したり、管理面でもよく考えられています。

  • 看板型式で、ステータスごとにノートを確認可能です。
  • 簡単にノートのステータスをドラッグ&ドロップで変更することができます。

Pageproofer を導入した効果

実際にGrowGroupでは約半年前にPageprooferを導入し運用してきました。 その上でメリット・デメリットをご紹介します。

 

メリット

 気軽にフィードバック

Webサイトに対して直接書き込めるようになったことで、チェックにかかる時間が大幅に削減されました。

 確実にフィードバック

ブラウザ情報なども自動でノートに保存されますし、チェックポイントはDOMに紐づくため、エンジニア側も正確にフィードバックを受け取れるようになりました。

 フィードバックのフィードバック

ノートに対してもコメントが書き込めるため、より修正のやりとりが短縮されました。 修正事項に対して何のことかわからない時は、その場でコメントするだけ。 メールを起こす必要も、通知する必要もありません。

 原稿のやりとりも!

ノートに対してファイルを添付することもできるため、原稿のやりとりや、画像のやりとりなども、より気軽に簡単に指示できるようになりました。

 

デメリット

デメリットはあまりないように感じますが、 強いて挙げるとすると、

  • Pageprooferにログインしていないと書き込みができない
    • だれでも書き込めるようにするには上位プランの契約が必要
  • すべて英語

ぐらいでしょうか。

まとめ

最初は社内のチーム内で使っていましたが、最近はお客さんにもアカウントを渡して直接チェックしてもらったりなどいろんな可能を試しています。

駆け足になりましたが、実際に導入して非常に効果を感じられたツールです。 お試し期間もあるので、是非試してみてください! 以上です!

関連コンテンツ

【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
エンジニア
公開日: 2016年11月14日
最終更新日: 2019年05月28日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2019年05月28日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
エンジニア
公開日: 2017年02月01日
最終更新日: 2019年07月04日
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。