WEBサイト校正のやり方とツール｜公開前に確かめることと、URLで赤入れする手順

01WEBサイトの校正で確かめること

WEBサイトの校正とは、公開する前のページを見て、文字・見た目・動きにまちがいがないかを確かめ、直してほしい所を制作の担当者に伝える作業です。紙のチラシと違い、パソコンとスマホで見た目が変わり、リンクやフォームのように「押して動くか」も確かめる必要があります。

確かめることは、大きく次の3つに分けると、もれが出にくくなります。

このうち、時間がかかるのは「見つけた直しを、正しく伝えて、直ったかを確かめる」所です。次の章で、よくある困りごとを見ていきます。

紙・PDF・オンラインでの赤入れのやり方の違いは、別の記事で説明しています。

校正の意味や仕事の流れは、校正とはの記事で説明しています。

WEBサイトの校正で使えるアカポンの機能は、WEBサイトの校正の機能のページで紹介しています。

02WEBサイトの校正でよくある困りごと

WEBサイトの校正は、画面写真を撮って書き込み、メールやチャットで送るやり方がまだ多く使われています。このやり方では、次のような困りごとが起きやすくなります。

• どこの話か伝わらない：「上から3つ目の画像の下」のような書き方では、ページが長いほど場所がずれて伝わります。画面写真をつなぎ合わせる手間もかかります。
• 赤字が何か所にも分かれる：担当者、上司、お客さまの赤字が、メール・チャット・Excelに分かれて届きます。どれが最新の指示か、だれの指示かが分かりにくくなります。
• スマホの幅が見落とされる：パソコンの画面だけで校正して、スマホで見た時の文字の折り返しや画像の切れに、公開後に気づくことがあります。
• 直ったかの確認がもう一度大変：直したページを、前の赤字と1つずつ見比べて確かめる必要があります。ここで直し漏れが残りがちです。

これらは、ページそのものに赤入れできて、関わる人全員が同じ画面を見られる校正ツールを使うと、まとめて減らせます。

03WEBサイトの校正ツールの種類と選び方

「校正ツール」と呼ばれる物には、役割の違う3つの種類があります。1つですべてを確かめるのではなく、目的に合わせて組み合わせるのが近道です。

文章やコードのチェックは、ツールがまちがいを見つけてくれます。一方で「この画像を差し替えてほしい」「スマホでは改行の位置を変えたい」といった、人が決める直しは、ページに赤入れして伝えるしかありません。この「伝えて、直ったかを確かめる」所を受け持つのが、3つ目の種類です。

ページに赤入れするツールを選ぶ時に見る所

1. URLを入れるだけで取り込めるか：画面写真を撮ってつなぐ手間がなくなります。
2. スマホの幅で取り込めるか：パソコンとスマホで、別々に赤入れできると見落としが減ります。
3. 公開前のページを取り込めるか：テストサイトのベーシック認証や、会員ページのログインに対応しているかを確かめます。
4. 社外の人が、登録しないで赤入れできるか：お客さまや制作会社に、アカウントを作ってもらわずに済みます。
5. 直した版と見比べられるか：前の版の赤字を見ながら、直ったかを確かめられると、直し漏れが減ります。

ほかの校正ツールとの比べ方は、校正ツールの比較の記事にまとめています。

04アカポンでWEBサイトを校正する手順

アカポンは、URLを入れるだけでWEBページを上から下まで撮影し、そのまま赤入れできる校正ツールです。ここでは、ページを取り込んでから、直ったかを確かめるまでの流れを説明します。

1. ［WEBサイトのURLを校正する］を選ぶ

   プロジェクトの中で「データをUpload」の窓を開き、［WEBサイトのURLを校正する］を押します。URLを入れる欄と、表示の幅を選ぶ欄が出ます。

   

2. URLを入れ、表示の幅を選んで撮影する

   校正したいページのURLを入れ、表示の幅を選んで［キャプチャする］を押します。撮影が終わると、別のタブで校正画面が開きます。ファイル名とページ名には、そのページのタイトルが入ります。

   

3. 直したい所を囲んで、赤入れを書く

   画面をダブルタップするか、上の［コメントモード］を押して、赤入れできる状態にします。直したい所をドラッグで囲むと入力の窓が出るので、直してほしい内容を書いて［保存］を押します。右の一覧にカードが増え、ページに番号が付きます。

   ペンで手書きもできます。参考の画像や原稿のファイルは、1ファイル100MBまで、10ファイルまで添付できます。

   

4. 制作の担当者やお客さまに見てもらう

   社内の人はプロジェクトに招待し、制作会社など他社の人は外部として招待すると（外部の招待はStandardプラン以上）、全員の赤入れが1つのページに集まります。アカポンを使っていない人には、［⚡ アクション］→［赤入れ共有URL］でURLを出して送ります。受け取った人は、ログインしないまま赤入れと返信ができます。

   

5. 直したページを撮り直して、新しい版にする

   制作の担当者がページを直したら、［⚡ アクション］→［バージョン更新］で同じURLを撮り直します。前の版と同じページの、次の版（Ver.02）として入ります。

6. 前の版と見比べて、直ったかを確かめる

   上の帯のバージョン（01 ▼）を押し、比べたい2つの版に✓を入れて［Show version］を押すと、左右に並びます。右の【コメントツール】で前の版を選ぶと、画面は新しい版のまま、前の版の赤入れを一覧に出せます。頼んだ直しが入っているかを、1件ずつ確かめられます。

伝わる赤入れの書き方

ページの上に赤入れしても、書き方があいまいだと、制作の担当者は迷います。「何を」「どう直すか」を1件に1つずつ書くのがこつです。

1つの赤入れに直しを2つ以上書くと、片方だけ直って残ることがあります。直しごとに分けておくと、版を見比べる時にも1件ずつ確かめられます。

アカポンは、無料のプランでもWEBサイトの撮影と赤入れを試せます。無料ではじめる › ヘルプ：バージョンを見比べる ›

05スマホの幅・テストサイト・うまく映らない時

スマホの幅で撮影する

表示の幅は4つから選べます。パソコンとスマホの両方を校正する時は、同じURLを幅を変えて撮影し、［ページ追加］で同じファイルに入れておくと、見比べやすくなります。

公開前のテストサイトや、会員ページを撮影する

［ID・PASSが必要なサイト］を開き、ログイン情報（IDとパスワード）を入れると、ログインしないと見られないページも撮影できます。テストサイトのベーシック認証にも対応しています。入れた情報は保存でき、ほかのメンバーには見えません。

ログイン付きWEBサイト（IDとパスワードが要る会員ページなど）の撮影は、Standardプランは10ファイルまで、Proプラン以上は無制限です。Free・Lightプランでは使えません。ベーシック認証のページの扱いは、ヘルプと料金ページでお確かめください。

うまく映らない時

［追加オプション］で、ページに合わせた設定を選びます。スクロールに合わせて画像を読み込むページは「遅延読み込みに対応」、パララックスのようにスクロールで動くページは「特殊なページに対応」を試してください。JavaScriptなどでアクセスを止めているページは、うまく撮影できないことがあります。

何ページもまとめて撮影する

サイト全体を校正する時は、［複数のURLをまとめてキャプチャする］で、URLを貼り付けて30ページまでまとめて撮影できます（Proプラン以上）。同じURLは1つにまとめます。

06公開前に、人の目で見ておきたい所

撮影したページは、その時の見た目を写した物です。リンクの行き先やフォームの送信は、撮影したページでは動きません。赤入れで見た目と文字を固めたら、最後は本物のブラウザで次の所を確かめます。

• リンクとボタン：すべてのリンクとボタンを押して、行き先が正しいか。電話番号のリンクがスマホでかけられるか。
• フォーム：テストで送信して、確認のメールが届くか。入力をまちがえた時の案内が出るか。
• スマホの実機：iPhoneとAndroidで、文字の大きさや、ボタンの押しやすさに問題がないか。
• ページの情報：ブラウザのタブに出るタイトル、SNSで共有した時の画像と説明文が、ページに合っているか。

このうち、気づいた直しをアカポンで赤入れしておけば、見た目の直しと同じ流れで、まとめて直ったかを確かめられます。

07WEBサイトの校正に役立つ記事

公開前のチェックと、制作会社への伝え方の記事です。

• WEBサイト公開前のチェックリスト：文字・見た目・動きで確かめる項目
• ホームページ・LPの修正指示の出し方：制作会社に伝わる項目と例文
• 修正が直ったかを確かめる方法：前の版と比べて、直し漏れを防ぐ
• 社外との修正のやり取りをまとめる方法：メールでの赤字のやり取りをやめる

08よくある質問

09まとめ

WEBサイトの校正は、文字・見た目・動きの3つに分けて確かめると、もれが減ります。文章やコードのまちがいはチェックツールに任せ、人が決める直しは、ページに直接赤入れして伝えるのが近道です。アカポンなら、URLを入れるだけでページを撮影し、スマホの幅や、ベーシック認証つきのテストサイトにも赤入れできます。お客さまにはURLを送るだけで見てもらえ、直した版と並べて直ったかも確かめられます。画面写真とメールでの校正に時間がかかっている時は、試してみてください。

WEBサイトの校正で使えるアカポンの機能は、WEBサイトの校正の機能のページで紹介しています。