【知っておくべき】Web制作の納品方法まとめ｜案件トラブル回避にも

案件には『納品』がつきものですが、学習段階だと意外と覚える機会が少なく、実案件で初めて経験する方が多いです。

実際、スクールでWeb制作を勉強したフリーランスのコーダーの中にも、こんな声が結構ありました。

Webデザインであればデザインカンプ（JPG・PNG・PDF・XDプレビューなど）とデザインデータ（Photoshop・Illustrator・XD・Figmaなど）を渡して終了ですが、コーディング業務ではサイト公開作業（＝納品）を受け持つことも珍しくありません。

どんな案件が来ても柔軟に対応できるよういろんな納品方法を紹介していきます！

一般的なWeb制作のワークフロー

上記はあくまで一般的な流れです。

案件によっては一つ一つの項目の中身が変化してくるので、ある程度全体的な流れを把握しておく必要があります。

Webデザイナーだったら『デザイン』以外にも『ヒアリング』『調査・分析』で競合と差別化してコンセプトを固めますし、コーダーでしたら『コーディング』以外に『公開』の方法（これが当記事の本題）を知っておくと『要件定義』に合わせて融通を利かすことができます。

納品方法

データ（ファイル）納品

HTML、CSS、画像などのファイル一式をzipで圧縮して相手に渡すだけです。

渡し方のイメージはこんな感じ▼

zipを渡した後に修正が発生すると、再度圧縮してまた送らないといけないという二度手間がありますが、サーバーへのアップロードは相手がやってくれるので、納品時の手軽さはピカイチです。

現在はWordPress案件が非常に多いので、今この方法は少ないかもしれません。

FTP納品

FTPソフトを使ってサーバーにアップロードする方法です。

データ納品とは異なり、自分でサーバーへアップロードしサイトに反映するところまでやります。

FTPソフトで接続する必要があるため、事前に相手からFTP情報を支給してもらいます。

ちなみに、筆者が愛用しているFTPソフトは『FileZilla 』です！（10年間使ってます）

FileZillaの使い方

FileZillaの画面を開き、左上にあるサーバーが並んでいるようなアイコンをクリックし、『サイトマネージャー』を開きます。

左下の『新しいサイト』ボタンをクリックし、いただいたFTP情報（ホスト名・ユーザー名・パスワード）を入力します。

入力した情報は、右下の『接続』ボタン・『OK』ボタンのどちらを押しても保存されます。

相手サーバーの接続方式によって設定を変えましょう。
例えば、SFTP接続の場合、『プロトコル』→「SFTP」、『ログインタイプ』→「鍵ファイル」を選択して、鍵ファイルのディレクトリを入力する必要があります。

接続できたら、指定のディレクトリ（フォルダの場所）にファイルをアップロードすれば本番アップ完了です！

左側のリストが自分のPC（ローカル）、右側のリストがサーバー（リモート）なので、右側にファイルをドラッグ&ドロップすればアップロードできます。

誤ってサーバー上のファイルを削除したり、違うディレクトリにアップロードし上書きしてしまった場合、復元はできないのでしっかり確認しましょう。

WordPressサイトの納品

プラグイン『All-in-One WP Migration 』でエクスポート・インポートし移行することがほとんどです。

データベースの知識がある方は『phpMyAdmin』を使ってテスト→本番へ上手に移行しますが、これはデザイナーやコーダーにはかなり難易度もリスクも高くてなかなか手が出せません；

プラグインやデータベースの他にも、本番環境にBasic認証をかけるかメンテナンスモードにして直接コーディングするという方法もあります。

この方法ならリスクも少なく、Basic認証またはメンテナンスモードを解除するだけで公開完了なのでとても楽チンです！

相手の本番環境にWordPressがインストールされているか

インストール作業を必要とする場合、相手からデータベース情報（データベース名・ユーザー名・パスワード・ホスト名）をいただく必要があります。

また、フリーランスの方であればインストール作業分の料金もお見積もりに含めたほうがいいです。

さとみ

テストアップ完了しました〜本番環境に反映しますね。

クライアント

あ、WordPress入れてないんでインストールお願いします。

さとみ

え、あ、ではデータベース情報ください…
（インストール代行料金もらってない…）

テスト環境は相手に用意してもらえるか

ローカル環境の構築にも工数がかかるため、できるだけご用意いただきたいもの。

新規サイト制作であれば、本番環境にBasic認証をかけるかメンテナンスモードにして作業してよいかを確認すると工数削減につながります。

さとみ

ローカルでしかテスト環境用意できないので、そちらでテスト環境用意いただくことは可能ですか？もしくは、本番にBasic認証かけてもよければ公開作業がスムーズですよ。

クライアント

じゃあ後者で。

ローカル環境でのテストアップの場合、テストサイトを確認できなくても問題ないか

ローカル環境構築ツール『Local （旧：Local by Flywheel）』には制作したサイトを外部に共有する機能がありますが、共有している間はLocalを起動し続ける必要がありCPU負荷がかかります。

※『MAMP』には共有機能はありません

エクスポートファイルを渡す→相手が社内用テストサイトにインポートして確認してくれる、ということもあるため、無理にLocalで共有する必要はありません。（筆者は実際にこのパターンがありました！）

さとみ

ローカルのテスト環境だとブラウザで確認していただくことができないんですけど、それでもいいですか？

クライアント

それはやだなぁ。弊社のテストサイトに反映したいんで、『All-in-One WP Migration』でエクスポートしてもらえます？

さとみ

御意。

ちゃんとFTP接続できるか動作チェック

テンプレートファイルのみ本番アップしたい場合などは、プラグインを使用せずFTP納品で完結できます。

どのみち、FTP接続ができていないとコーディングが不便なので、これは結構重要です！

「FTP情報が正しいのになぜか繋がらない」という事例はよくあります。
どうしても接続できなければ、プラグイン『File Manager 』で管理画面からファイル操作しましょう。

納品時に起こるトラブル

どの項目も、しっかりチェックしていれば予防可能です！

特に、上書き・削除系は大クレームになり損害賠償を求められるケースもありますので要注意です。

後の祭りにならないよう、アクションを起こす前に事前確認しておきましょう！

【案件が初めての方】納品の練習方法

具体的には、自分のサイトを一つ作ってみることです。

独自ドメインを一つ持っておけばポートフォリオサイトとしても活用できるので、コーディングの際にアップロードなどの操作練習をすれば自信がついてきます。

また、サブドメインでテスト環境用のサイトを用意することで、ローカル環境でテストアップする必要がなくなるのも利点です。

お客様のサーバーで練習のための操作をするわけにはいきませんからね；

個人的におすすめなのは、『シン・レンタルサーバー  』『ロリポップ！  』あたりです。

シェアNo1と謳われている『エックスサーバー  』も捨てがたいですが、同じシステムを使用している上に低価格のシン・レンタルサーバーを推します！

＼2024年5月20日(月) 12:00まで『全額返金保証キャンペーン』実施中／

＼2024年5月6日(月) 23:59まで『全額返金保証キャンペーン』実施中／

まとめ

WordPressはシェア率が約50%でWebサイトの2つに1つがWordPressなので、FTP納品とWordPress納品は覚えて帰りましょう◎

バックアップはこまめにね！