FIRST CHTools

FIRST CH TOOLS / 画像 / 74 SCREEN REVIEW BOARD

画面レビューボード

サイト改修の確認用に、画面キャプチャをページ・画面幅・改善前/改善後で並べて見比べます。気になる所には番号ピンでメモを置けます。できたボードは画像ごと1枚のHTMLに書き出せるので、相手はダブルクリックで開くだけです。画像はお使いの端末の中で扱い、どこにも送りません。

ここに画面キャプチャをまとめてドラッグ&ドロップ またはクリックして選択／⌘V・Ctrl+V で貼り付け（PNG / JPEG / WebP・複数可）

ファイル名を ページ名_画面幅_before/after にしておくと自動で振り分けます（例: top_375_after.png）。違っていたら下の一覧で直せます。

BOARD

書き出し

How to Use

  1. 画面キャプチャを入れる改善前と改善後のキャプチャをまとめてドロップします。ファイル名からページ・画面幅・改善前後を読み取り、読めなかった所は一覧で選び直せます。まず触ってみるなら「見本の画面で試す」を押してください。
  2. 見比べてメモを置くページのタブと画面幅を切り替え、「左右に並べる」「スライダー」「全幅を並べる」で見比べます。「ピンを置く」を押して画面をクリックすると、番号付きのメモを書けます。
  3. 書き出して渡す「HTMLで書き出す」で、画像もメモも入った1つのファイルができます。メールやチャットで送れば、相手はダブルクリックで同じボードを操作できます。紙やPDFで渡すなら「印刷・PDFに保存」を使います。

About This Tool

サイトの改修を確認するとき、キャプチャをスライドやチャットに貼っていくと、どのページの・どの幅の・直す前と後のどちらなのかがすぐに分からなくなります。このボードは画像ごとにその3つを持たせ、ページはタブ、幅はボタンで切り替えて、同じ条件の改善前と改善後を必ず隣に並べます。スライダーでは2枚を重ねて境目を動かせるので、余白や文字の大きさのわずかな違いも追えます。「全幅を並べる」では各幅を画面幅に同じ縮尺を掛けた大きさで横に並べるので、スマホとPCで情報の順番が崩れていないかを一度に見渡せます。

書き出したHTMLには画像を埋め込み、表示の仕組みもファイルの中に入れてあります。インターネットにつながっていなくても開け、外部へ通信しない設定と検索エンジンに載せない指定（noindex）も入れています。画像が多いとファイルは大きくなるので、書き出す前に大きさを表示します。メールで送れない大きさなら、WebPでの圧縮し直しと縮小を選んでください（Retinaのキャプチャは画面幅の2倍の画素があるため、「画面幅の2倍まで」でも見た目はほぼ変わりません）。

URLを入れて自動で撮る機能、サイトを巡回して全ページを集める機能はありません。どちらもサーバー側の処理が要り、ほかのサイトをブラウザの中から読みに行くこともできないためです。キャプチャはお使いのブラウザの開発者ツール（ページ全体のスクリーンショット）などで撮ってください。撮った画像に背景や枠を付けるなら スクリーンショット枠装飾、操作の流れを動画で見せるなら 画面録画＋クリック自動ズーム が使えます。

見比べて見つかった改善を、サイトの作り直しごと任せたい場合は First CH のホームページ・LP制作 でご相談を受けています。

Other Tools