クライアントへの納品・引き渡しの進め方｜納品物のまとめ方・マニュアルの作り方・アフターサポートの設定

はじめに
1. 納品前に確認すること
- 1.1 クライアントとの最終確認
- 1.2 クライアントに渡すものの全体像
2. ログイン情報のまとめ方
- 2.1 ログイン情報シートの作り方
3. 操作マニュアルの作り方
4. Google Analyticsのアクセス権限を渡す
5. アフターサポートの設定
6. 納品時のメールの書き方
7. 継続案件につなげるコツ
8. 実践チェックリスト
まとめ

はじめに

前回の記事では納品前チェックリストと安全なサーバー移行・本番公開の手順を解説しました。今回はクライアントへの納品・引き渡しの進め方を解説します。サイトが完成して本番公開できても「何をどう渡せばいいかわからない」「納品後にクライアントから問い合わせが多くて大変」という悩みは副業案件でよく聞きます。納品物のまとめ方・わかりやすいマニュアルの作り方・アフターサポートの設定まで丁寧に解説します。

1. 納品前に確認すること

1.1 クライアントとの最終確認

納品前にクライアントに確認する事項：

① 公開するURLの確認
   → ドメインは決まっているか
   → wwwあり・なしどちらで統一するか
   → サブドメインが必要か（blog.example.comなど）

② 公開日時の確認
   → いつ公開するか
   → 公開前にクライアントに最終確認してもらうか
   → 公開のタイミングでSNS投稿などの予定はあるか

③ 引き渡す権限の確認
   → サーバーのFTPアカウントを渡すか
   → 管理画面のログイン情報を渡すか
   → ドメインの管理権限はどちらが持つか

④ アフターサポートの範囲の確認
   → 何ヶ月間サポートするか
   → 追加修正は有料か無料か
   → 緊急時の連絡方法はどうするか

→ これらを事前に確認して
  認識のズレをなくしておく

1.2 クライアントに渡すものの全体像

納品物の全体像：

① ログイン情報一覧
   → サーバー（FTP）のID・パスワード
   → 管理画面（WordPress等）のID・パスワード
   → ドメイン管理会社のログイン情報
   → Google Analytics・Search Consoleのアクセス権限

② 納品ファイル一式
   → 完成したHTML・CSS・JS・画像ファイル
   → WordPressテーマファイル（カスタムテーマの場合）
   → データベースのバックアップ（SQLファイル）

③ 操作マニュアル
   → 管理画面の使い方
   → お知らせ投稿の方法
   → 画像の差し替え方法

④ 保守・運用に関する情報
   → 更新が必要なプラグイン・ライブラリの情報
   → 定期バックアップの方法
   → 問い合わせがあった際の対応方法

⑤ アフターサポートの説明
   → サポート期間・内容・料金
   → 連絡先・対応時間

2. ログイン情報のまとめ方

2.1 ログイン情報シートの作り方

ログイン情報は以下の形式でまとめて渡す。

【Webサイト情報シート】
作成日：2024年3月15日
制作者：○○（あなたの名前）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ サーバー（FTP）情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
サーバー会社：さくらインターネット
コントロールパネルURL：https://secure.sakura.ad.jp/
ユーザー名：example-user
パスワード：（別途お伝えします）
FTPホスト：example.sakura.ne.jp
FTPユーザー名：example-user
FTPパスワード：（別途お伝えします）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ ドメイン情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ドメイン会社：お名前.com
管理画面URL：https://www.onamae.com/
ユーザーID：○○○○○○
パスワード：（別途お伝えします）
ドメイン更新日：毎年3月15日（自動更新設定済み）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ WordPress管理画面
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
管理画面URL：https://example.com/wp-admin/
ユーザー名：admin-example
パスワード：（別途お伝えします）
権限：管理者

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ Google Analytics
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
アクセス権限付与済みメールアドレス：
client@example.com（管理者権限）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ Google Search Console
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
アクセス権限付与済みメールアドレス：
client@example.com（オーナー権限）

※ パスワードは安全のため別の方法でお伝えします
   （対面でお伝えするか・パスワード付きZIPで送付）

💡 パスワードはメールに直接書かない： パスワードはメール本文に書かずに・対面でお伝えするか・LastPassやBitwarden経由で共有するか・パスワード付きZIPに入れてメールとは別の手段（SMS・電話）でパスワードを伝える方法が安全です。

3. 操作マニュアルの作り方

3.1 マニュアルの基本方針

わかりやすいマニュアルの3原則：

① 画像（スクリーンショット）をたくさん使う
   → テキストだけでは伝わりにくい
   → 「赤枠で囲んでここをクリック」が
     最もわかりやすい

② 操作する手順を番号で書く
   → ①→②→③の順番で操作する
   → 手順が前後しないよう明確にする

③ 難しい言葉を使わない
   → 「管理画面」「ダッシュボード」「メタ情報」
     などの専門用語をなるべく使わない
   → クライアントに合わせた言葉で書く

マニュアルに含める内容（WordPress）：
→ ログイン方法
→ お知らせ（投稿）の追加・編集・削除
→ 固定ページの編集
→ 画像のアップロード・差し替え
→ メニューの変更
→ お問い合わせ内容の確認方法
→ バックアップの取り方（プラグインを使う場合）

3.2 マニュアルの構成例

【Webサイト操作マニュアル】
○○株式会社様向け
作成日：2024年3月15日
制作：○○（あなたの名前）

━━━━━━━━━━━━━━━━━━━━━━━━━━
目次
━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 管理画面へのログイン方法
2. お知らせを投稿する方法
3. お知らせを編集・削除する方法
4. 画像を差し替える方法
5. お問い合わせ内容を確認する方法
6. パスワードを変更する方法
7. よくある質問・困ったときは

━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 管理画面へのログイン方法
━━━━━━━━━━━━━━━━━━━━━━━━━━

① ブラウザで以下のURLにアクセスしてください
   https://example.com/wp-admin/

   ［スクリーンショット：ログイン画面］

② 「ユーザー名」に「admin-example」を入力してください

③ 「パスワード」に別途お伝えしたパスワードを入力してください

④ 「ログイン」ボタンをクリックしてください

   ［スクリーンショット：ダッシュボード画面］

→ このような画面が表示されたらログイン成功です

━━━━━━━━━━━━━━━━━━━━━━━━━━
2. お知らせを投稿する方法
━━━━━━━━━━━━━━━━━━━━━━━━━━

① 左側のメニューから「投稿」→「新規投稿を追加」
  をクリックしてください

   ［スクリーンショット：メニュー部分に赤枠］

② 「タイトルを追加」の部分にお知らせのタイトルを入力してください

   ［スクリーンショット：タイトル入力欄に赤枠］

③ 下の入力エリアに本文を入力してください

④ 右側の「カテゴリー」から適切なカテゴリーを選んでください
   ・「お知らせ」：通常のお知らせ
   ・「重要なお知らせ」：緊急・重要な内容

⑤ 右上の「公開」ボタンをクリックしてください

   ［スクリーンショット：公開ボタンに赤枠］

→ サイトのお知らせ一覧に掲載されます

3.3 マニュアルのファイル形式

マニュアルの納品形式：

① PDF形式（推奨）
   → 見た目が崩れない
   → 印刷もしやすい
   → Wordやパワーポイントで作ってPDF書き出し

② Googleドキュメント
   → 更新が簡単
   → クライアントと共有しやすい
   → スマートフォンでも見やすい

③ Notion
   → 目次が自動生成される
   → 画像や動画も入れやすい
   → リンクで共有できる

④ 動画マニュアル
   → Loomなどの画面収録ツールで録画
   → テキストより直感的に理解しやすい
   → 難しい操作の説明に特に有効

→ PDFとGoogleドキュメント（または動画）の
  両方を用意するとより親切

4. Google Analyticsのアクセス権限を渡す

クライアントにGoogle Analyticsの
閲覧権限を付与する手順：

① Google Analytics（analytics.google.com）にログインする

② 左下の「管理」（歯車アイコン）をクリックする

③ 「アカウントのアクセス管理」をクリックする

④ 右上の「＋」ボタンをクリックして
  「ユーザーを追加」を選択する

⑤ クライアントのGmailアドレスを入力する

⑥ 権限を選択する
   → 管理者：すべての設定を変更できる
   → 編集者：レポートの閲覧・一部の編集ができる
   → 閲覧者（推奨）：レポートの閲覧のみ

⑦ 「追加」をクリックする

→ クライアントのGmailアカウントで
  Google Analyticsにアクセスできるようになる

注意：
→ クライアントのGoogleアカウントが必要
→ 「管理者」権限を渡すと
  すべての設定を変更できてしまうので注意
→ 通常は「閲覧者」または「編集者」で十分

5. アフターサポートの設定

5.1 サポート範囲の決め方

アフターサポートの範囲を明確にする：

無料サポート期間（一般的な目安）：
→ 公開後1〜3ヶ月間

無料サポートに含めること（例）：
→ 公開後に発覚した不具合の修正
→ ブラウザの表示崩れの修正
→ 軽微な文言の修正（数回まで）
→ 操作方法についての質問対応

有料（追加費用）になること（例）：
→ デザインの大幅な変更
→ 新しいページの追加
→ 機能の追加・仕様変更
→ 契約外の内容への対応

サポート対応時間（例）：
→ 平日10:00〜18:00
→ 土日祝は対応しない
→ 緊急の場合は別途相談

連絡方法：
→ メール
→ チャット（Slack・LINEなど）
→ 電話（緊急時のみ）

5.2 アフターサポートの案内文の例

【アフターサポートについて】

この度はWebサイト制作をご依頼いただき
ありがとうございました。

公開後のサポートについてご案内します。

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 無料サポート期間
━━━━━━━━━━━━━━━━━━━━━━━━━━
公開日より3ヶ月間（2024年6月15日まで）

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 無料サポートの内容
━━━━━━━━━━━━━━━━━━━━━━━━━━
・公開後に発見された不具合の修正
・ブラウザ・デバイスの表示崩れの修正
・操作方法についてのご質問対応
・軽微な文言の修正（月3回まで）

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 追加費用が発生するもの
━━━━━━━━━━━━━━━━━━━━━━━━━━
以下は別途お見積りとなります：
・新しいページの追加
・デザインの大幅な変更
・新機能の追加
・サポート期間終了後の対応

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 連絡先・対応時間
━━━━━━━━━━━━━━━━━━━━━━━━━━
メール：your@email.com
対応時間：平日10:00〜18:00
（土日祝はお休みをいただいています）

ご返信は通常1〜2営業日以内にいたします。

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 継続サポートプランについて
━━━━━━━━━━━━━━━━━━━━━━━━━━
無料期間終了後も継続してサポートをご希望の場合は
月額○○円の保守契約プランをご用意しています。

・WordPressプラグインの更新
・月1回のバックアップ確認
・月3回までの軽微な修正対応

ご希望の方はお気軽にご相談ください。

5.3 よくある納品後のトラブルと対処法

納品後によくある問い合わせと対応：

① 「管理画面にログインできない」
   → パスワードの入力ミスが多い
   → パスワードリセット手順をマニュアルに書く
   → 一緒にログインして確認する

② 「画像のアップロードができない」
   → ファイルサイズが大きすぎる場合が多い
   → 「2MB以下にしてください」と案内する
   → Squooshなどの圧縮ツールを紹介する

③ 「スマートフォンで見ると崩れている」
   → 機種・OSバージョン・ブラウザを確認する
   → 再現できればバグとして修正する
   → 再現できなければキャッシュクリアを案内する

④ 「お問い合わせメールが届かない」
   → スパムフォルダを確認してもらう
   → 実際にテスト送信して確認する
   → PHPMailerの設定を確認する

⑤ 「サイトが表示されない」
   → サーバーの障害かドメインの問題が多い
   → サーバー会社の障害情報を確認する
   → ドメインの有効期限を確認する
   → 自分でもアクセスして状況を確認する

6. 納品時のメールの書き方

【納品時のメールの例】

件名：【納品のご連絡】○○様Webサイト公開のお知らせ

○○様

お世話になっております。
Web制作担当の△△でございます。

この度はWebサイトの制作をご依頼いただき
誠にありがとうございました。

本日、Webサイトの公開が完了いたしましたので
ご連絡申し上げます。

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 公開URL
━━━━━━━━━━━━━━━━━━━━━━━━━━
https://www.example.com

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ お渡しするもの
━━━━━━━━━━━━━━━━━━━━━━━━━━
本メールに以下を添付・共有しております：
・Webサイト情報シート（ログイン情報）
・操作マニュアル（PDF）
・アフターサポートのご案内

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ ご確認のお願い
━━━━━━━━━━━━━━━━━━━━━━━━━━
公開したサイトをご確認いただき
ご不明な点や修正事項がございましたら
お気軽にご連絡ください。

また、操作マニュアルをご一読いただき
管理画面へのログインをお試しください。

━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 今後のサポートについて
━━━━━━━━━━━━━━━━━━━━━━━━━━
公開後3ヶ月間（〇月〇日まで）は無料サポート期間です。
ご不明点やご質問はいつでもご連絡ください。

引き続きどうぞよろしくお願いいたします。

━━━━━━━━━━━━━━━━━━━━━━━━━━
△△（あなたの名前）
メール：your@email.com
対応時間：平日10:00〜18:00
━━━━━━━━━━━━━━━━━━━━━━━━━━

7. 継続案件につなげるコツ

納品後の関係を大切にすることで
次の仕事につながる：

① 定期的に連絡を取る
   → 「サイトの調子はいかがですか？」と
     2〜3ヶ月に1回メールする
   → Google Analyticsのレポートを共有する
   → 季節ごとの更新提案をする

② 追加提案をする
   → 「ブログを始めるとSEOに効果的です」
   → 「LINE公式アカウントと連携しませんか」
   → 「スマートフォンアプリの導入はいかがですか」

③ 紹介をお願いする
   → 「もし周りにWebサイトでお困りの方が
     いらっしゃいましたらご紹介いただけますか」
   → 紹介いただいた場合は紹介料や
     割引を提供するとよい

④ 保守契約を提案する
   → WordPressの更新・バックアップ管理
   → 月額定額でサポートを続ける
   → 安定した収入につながる

→ 1件の案件を大切にすることが
  副業を継続させる鍵になる

8. 実践チェックリスト

✓ ログイン情報を一覧にまとめてクライアントに渡しているか

✓ パスワードはメール本文に直接書かず安全な方法で渡しているか

✓ 操作マニュアルにスクリーンショットと手順番号を入れているか

✓ Google AnalyticsとSearch ConsoleのアクセスをクライアントのGmailに付与しているか

✓ アフターサポートの期間・内容・料金・連絡方法を文書で伝えているか

✓ 無料サポートの範囲と有料になる範囲を明確に分けているか

✓ 納品メールに公開URL・添付物・今後のサポート内容を含めているか

✓ 継続保守プランの案内を納品時に行っているか