Uncategorized

web制作のレビューツール「MarkUp」の使い方紹介【超おすすめ】

web制作レビューツールMarkUpの使い方解説

こんにちは、現在フリーランスエンジニアとして2年ほど活動しているしょーごと申します。

最近駆け出しの方のレビューをすることが多くなってきましたが、修正点をお伝えする際に

  • 文章だと分かりにくい
  • スクショで画像共有はめんどくさい
  • スライドを別途作成はもっとめんどい

など最善手が見つからずにいました。

しかし、今回ご紹介する「MarkUp」はこの問題をことごとく解決するツールだったので、ご紹介させていただきます。

この記事の想定読者
  • コーディングを外注される予定の方
  • ディレクターの方
この記事で学べること

コーディングの表示のレビューが行えるようになる

デザインデータ(画像)のレビューが行える

web制作をやっていれば遅かれ早かれレビューする機会というのは必ずやってきます。

そのために「レビューするにはこういう便利ツールが有るのか」と知っておくことはそれだけで武器になりますので、ぜひ最後までお読みいただければと思います。

MarkUpは何ができるツールなのか?

MarkUpは「Web制作でのサイト表示やデザインをコメントでレビューできるツール」になります。

web制作レビューツールMarkUpの使い方解説

画像のように、レビューしたい場所に好きにコメントを残すことができますし、

web制作レビューツールMarkUpの使い方解説

共有URLを発行して、秒速でレビューページを共有することができます。

また、レビューをクリアして解決された問題はResolvedに入れることで、どの問題が未解決で、その問題が解決したのかも共有可能です。

web制作レビューツールMarkUpの使い方解説

まだまだかゆいところに手が届く機能が盛り沢山なので、この便利な「MarkUp」の使い方を詳細に解説していきます。

レビューツールMarkUpの使い方

MarkUpのセットアップ

まずは拡張機能をダウンロードしてください。

https://chrome.google.com/webstore/detail/markup-for-chrome/llbkdcpbiogplgmefnkbgcdfiopfphbc

その後、拡張機能をクリックして会員登録をすませます。

その後、レビューしたいサイトを開くのですが、今回はこの弊ブログにレビューしていこうと思います。

https://shogo-log.com/

サイトを取り込みコメントする

レビューしたいサイトを開いたら拡張機能で「Create MarkUp」をクリックします。

そしたらレビュー用のページが立ち上がります。

web制作レビューツールMarkUpの使い方解説

ここで好きな場所にコメントを入れることができます。例えば以下のような感じ。

web制作レビューツールMarkUpの使い方解説

MarkUpが優れているのは「リッチエディター並みの機能」でコメントが書けるところかなと思います。

リンクや太字、リストなど、見やすいコメントを書きやすいです。

また、コメントは編集も破棄も可能です。

web制作レビューツールMarkUpの使い方解説

また、MarkUpはページを画像化するのではなく、そのまま生成しているので、「検証ツールで確認しつつレビュー」ができます!

これならレスポンシブの挙動レビューがしやすくていいですね!

web制作レビューツールMarkUpの使い方解説
画像化されると検証で覗けないので、地味に便利

試しに4つほど、レビューコメントを投稿してみました。

web制作レビューツールMarkUpの使い方解説

他のページもそのままレビュー可能!

このMarkUpの特に素晴らしいところは「下層など他のページも別途取り込む必要なしにそのままレビューできるところ」です。

しょーご
しょーご
従来のツールだとページ一枚一枚URL入れて取り込まなゃだったのですが、ブラウジングできるのでレビューしたいページに即コメントを入れられます、挙動はWordPressのカスタマイズ画面に近いかな

画面下のCommnet/Browseの部分の、Browseをクリックし、移動したいページに移動します。

その後、レビューしたい場所を見つけたら、またCommentに戻し、コメントを入れることができます。

web制作レビューツールMarkUpの使い方解説

スマホ、タブレットもレビュー可能

画面下のアイコンより、そのままスマホ、タブレットのレビューも可能です。

web制作レビューツールMarkUpの使い方解説

多ページのレビュー遷移が楽!

レビューしたページが増えた時の画面遷移が気になるかもですが、コメントをクリックすれば、該当ページに同時に飛べるので、

実装者さん

このコメント、どのページだったっけ?

となることがありません。

web制作レビューツールMarkUpの使い方解説
試しに⑤のコメントをクリックしてみると…?

ページが遷移し、⑤コメントを入れた場所に自動スクロールします。

神。

web制作レビューツールMarkUpの使い方解説
これですぐに該当場所を確認できます

MarkUpで作成したレビューを共有する

レビューをあらかた作成したら、最後にこれを共有していきましょう。

これがとても簡単で、まずは右下の「Share」をクリックします。

すると、共有リンクを発行することができます。

Your project invite linkのリンクを相手に共有すればOKです。

しょーご
しょーご
Invite people to this projectは試したことがないですが、恐らく相手のメールアドレス宛にリンクをsendするのだと思います。いきなり送られても困惑するので、ぶっちゃけ共有リンクをslackに貼るなどでいいかなと。

レビュー後の修正作業の流れ

レビュアーにレビューを受けた実装者側はその後修正を行いますが、コメント欄でリプライが残せるので、

実装者はレビュアーに「修正完了しました!」などのリプライをすることが可能です。

web制作レビューツールMarkUpの使い方解説
自分で自分を招待したのでわかりにくいですが^^;

もし、その問題が解決したら、Resolvedとします。

これでこのレビューはResolvedに入り、クローズとなります。

MarkUpではサイト全体のコメントがサイドバーに表示されるので、多量のページにコメントがあっても、

全体で今どの問題が残っているか容易に確認できるのも神ポイントです。

デスクトップ、タブレット、スマホでそれぞれコメント管理されていますので、ここがごっちゃになることはありません。

これで一連のレビューの流れが終わりましたので、流れをまとめてみます。

  1. レビューをしたいサイトでMarkUp→Create MarkUp
  2. レビューしたい場所にコメントを入れる
  3. URLを共有する
  4. コメントでやり取りし、解決したらResolvedにする

MarkUpのその他の機能

BASIC認証保護下のページもレビュー可能

このようなBASIC認証保護下のページもレビューすることができます。

レビューページの保管期限がない

恐らくですが、ありません。通常レビューサービスは無料だと「7日間のみ」のような制約があるのですが、

MarkUpではそのような記述は見当たらないため、ないものと思われます。

あくまで推測になります

長期に渡るプロフェクトにおいては、これは非常にありがたいですね。

サイト単位で管理できる

web制作レビューツールMarkUpの使い方解説

拡張機能の「MarkUp」の部分をクリックするとサイト別の一覧ページに飛びます。

web制作レビューツールMarkUpの使い方解説

複数サイトを管理できるので、複数プロフェクトが走っていて多数レビューが必要な場合も、管理が楽になりますね!

共有リンクのパスワード保護がない

共有リンクが外部に漏れると、見られてしまうリスクがあります。これは他のレビューサービスも同様ですが、案件の場合リンクの共有は慎重に行うようにして、

終了したプロジェクトのレビューは順次クローズしていくべきでしょう。

削除自体は簡単に行なえます。

web制作レビューツールMarkUpの使い方解説
web制作レビューツールMarkUpの使い方解説

デザインもレビュー可能

MarkUpは画像をアップロードすることも可能なので、画像としてかき出したデザインであればレビュー可能です。

これは一覧画面より開始できます。

web制作レビューツールMarkUpの使い方解説
web制作レビューツールMarkUpの使い方解説
web制作レビューツールMarkUpの使い方解説

ただし、画像の場合は「高解像度」でないと、ズームしたときに画質の粗さで文字が潰れたりするので、そこだけ注意ですね。