こんにちは、現在フリーランスエンジニアとして2年ほど活動しているしょーごと申します。
最近駆け出しの方のレビューをすることが多くなってきましたが、修正点をお伝えする際に
- 文章だと分かりにくい
- スクショで画像共有はめんどくさい
- スライドを別途作成はもっとめんどい
など最善手が見つからずにいました。
しかし、今回ご紹介する「MarkUp」はこの問題をことごとく解決するツールだったので、ご紹介させていただきます。
- コーディングを外注される予定の方
- ディレクターの方
コーディングの表示のレビューが行えるようになる
デザインデータ（画像）のレビューが行える
web制作をやっていれば遅かれ早かれレビューする機会というのは必ずやってきます。
そのために「レビューするにはこういう便利ツールが有るのか」と知っておくことはそれだけで武器になりますので、ぜひ最後までお読みいただければと思います。
MarkUpは何ができるツールなのか？
MarkUpは「Web制作でのサイト表示やデザインをコメントでレビューできるツール」になります。
画像のように、レビューしたい場所に好きにコメントを残すことができますし、
共有URLを発行して、秒速でレビューページを共有することができます。
また、レビューをクリアして解決された問題はResolvedに入れることで、どの問題が未解決で、その問題が解決したのかも共有可能です。
まだまだかゆいところに手が届く機能が盛り沢山なので、この便利な「MarkUp」の使い方を詳細に解説していきます。
レビューツールMarkUpの使い方
MarkUpのセットアップ
まずは拡張機能をダウンロードしてください。
https://chrome.google.com/webstore/detail/markup-for-chrome/llbkdcpbiogplgmefnkbgcdfiopfphbc
その後、拡張機能をクリックして会員登録をすませます。
その後、レビューしたいサイトを開くのですが、今回はこの弊ブログにレビューしていこうと思います。
サイトを取り込みコメントする
レビューしたいサイトを開いたら拡張機能で「Create MarkUp」をクリックします。
そしたらレビュー用のページが立ち上がります。
ここで好きな場所にコメントを入れることができます。例えば以下のような感じ。
MarkUpが優れているのは「リッチエディター並みの機能」でコメントが書けるところかなと思います。
リンクや太字、リストなど、見やすいコメントを書きやすいです。
また、コメントは編集も破棄も可能です。
また、MarkUpはページを画像化するのではなく、そのまま生成しているので、「検証ツールで確認しつつレビュー」ができます！
これならレスポンシブの挙動レビューがしやすくていいですね！
試しに４つほど、レビューコメントを投稿してみました。
他のページもそのままレビュー可能！
このMarkUpの特に素晴らしいところは「下層など他のページも別途取り込む必要なしにそのままレビューできるところ」です。
画面下のCommnet/Browseの部分の、Browseをクリックし、移動したいページに移動します。
その後、レビューしたい場所を見つけたら、またCommentに戻し、コメントを入れることができます。
スマホ、タブレットもレビュー可能
画面下のアイコンより、そのままスマホ、タブレットのレビューも可能です。
多ページのレビュー遷移が楽！
レビューしたページが増えた時の画面遷移が気になるかもですが、コメントをクリックすれば、該当ページに同時に飛べるので、
このコメント、どのページだったっけ？
となることがありません。
ページが遷移し、⑤コメントを入れた場所に自動スクロールします。
神。
MarkUpで作成したレビューを共有する
レビューをあらかた作成したら、最後にこれを共有していきましょう。
これがとても簡単で、まずは右下の「Share」をクリックします。
すると、共有リンクを発行することができます。
Your project invite linkのリンクを相手に共有すればOKです。
レビュー後の修正作業の流れ
レビュアーにレビューを受けた実装者側はその後修正を行いますが、コメント欄でリプライが残せるので、
実装者はレビュアーに「修正完了しました！」などのリプライをすることが可能です。
もし、その問題が解決したら、Resolvedとします。
これでこのレビューはResolvedに入り、クローズとなります。
MarkUpではサイト全体のコメントがサイドバーに表示されるので、多量のページにコメントがあっても、
全体で今どの問題が残っているか容易に確認できるのも神ポイントです。
これで一連のレビューの流れが終わりましたので、流れをまとめてみます。
- レビューをしたいサイトでMarkUp→Create MarkUp
- レビューしたい場所にコメントを入れる
- URLを共有する
- コメントでやり取りし、解決したらResolvedにする
MarkUpのその他の機能
BASIC認証保護下のページもレビュー可能
このようなBASIC認証保護下のページもレビューすることができます。
レビューページの保管期限がない
恐らくですが、ありません。通常レビューサービスは無料だと「7日間のみ」のような制約があるのですが、
MarkUpではそのような記述は見当たらないため、ないものと思われます。
長期に渡るプロフェクトにおいては、これは非常にありがたいですね。
サイト単位で管理できる
拡張機能の「MarkUp」の部分をクリックするとサイト別の一覧ページに飛びます。
複数サイトを管理できるので、複数プロフェクトが走っていて多数レビューが必要な場合も、管理が楽になりますね！
共有リンクのパスワード保護がない
共有リンクが外部に漏れると、見られてしまうリスクがあります。これは他のレビューサービスも同様ですが、案件の場合リンクの共有は慎重に行うようにして、
終了したプロジェクトのレビューは順次クローズしていくべきでしょう。
削除自体は簡単に行なえます。
デザインもレビュー可能
MarkUpは画像をアップロードすることも可能なので、画像としてかき出したデザインであればレビュー可能です。
これは一覧画面より開始できます。
ただし、画像の場合は「高解像度」でないと、ズームしたときに画質の粗さで文字が潰れたりするので、そこだけ注意ですね。
デスクトップ、タブレット、スマホでそれぞれコメント管理されていますので、ここがごっちゃになることはありません。