Web制作（コーディング・ホームページ）の納品方法は初めての方なら戸惑う場面です。Zipファイルを渡して終わりのことはほとんどなく、サーバーにFTPで送信するか、Gitを使う場面もあるかと思います。
特にWordPressの納品方法はサーバーと複雑に絡んで苦戦しがち。
そこで本記事では、これまでに納品したWebサイト数が300近くある筆者が納品方法を徹底解説します。この記事を見ていただくことで、web制作における「主要な納品方法」を理解していただくことが可能です。
また、全ての納品方法を紹介した後に
実案件前にやっておくと納品時のいい練習になる方法
も紹介しますので、ぜひ最後までご覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Web制作納品方法のYouTube動画版
Web制作納品方法記事の評判
Webサイトの仕組み
Web制作で作るサイトの納品にあたっては、まず「Webサイトがどう仕組みで公開されているか」知っておいたほうがいいです。特にWeb制作を独学されている方は抜けがちな知識です。
- サーバー
- ドメイン
- ファイル群（HTML.CSS.JS,PHP.WordPressなど）
これらでWebサイトは成り立っています。
先方がどこまで用意しているかで、納品までに行う手順も変わってきます。
基本的に「①サーバー」「②ドメイン」が既に用意されている前提で納品方法を解説していきます。
どれも用意されていないことは、下請けの案件では基本ないかと思います（制作会社やディレクターではなく、お客さんと直でやり取りする場合は大抵はこちらで取得からやらないといけないですが）
web制作の納品方法まとめ
- ファイル納品→zipファイル
- FTPツールを使ってサーバーに納品
- WordPressでの納品
- Gitで納品
①ファイル納品
「ファイル納品」は一番イメージが湧きやすいかと思います。また一番簡単な方法でもあります。
具体的なイメージとしては、
- 納品するフォルダをzip形式で圧縮してslackやchatworkなどクライアントとやりとりしているツールでそのまま投げるか
- ギガファイル便でzipフォルダをアップロードして、そのURLを共有することが多い
と思います。
ファイル納品は修正が入った時にいちいちzipにしてまた送り直さなきゃいけないところが大変かなと思いますが、
サーバーを一切いじる必要がなく、アップロード作業は先方がやってくれるので納品自体は非常に楽ではあります。
この部分は「フォルダをzipにする方法」を知っていれば特に対策は必要ないかと思います。
これは確かに簡単なんですが、正直令和時代にこの納品方法は実際はかなり少数です。制作会社から依頼されるとしても、次の「②サーバーへアップロード」が大半かと思います。
②FTPツールを使ってサーバーに納品
先ほど紹介したファイル納品は、クライアントが自分でサーバーにアップロードする前提ですが、
FTPツールを使った納品は、自分でサーバーにアップロードしてサイトに反映させるところまでが納品になります。
ファイル納品の場合はサイトを公開するのは相手
FTPの場合は、こちらでサーバーにファイルを入れる所まで行う（ドメイン・サーバーを相手が準備している前提、下請けでは大体準備されてる）
FTPってなんぞと思われると思いますが、File Transfer Protocolというサーバーとのファイルのやりとりに使われる通信方式をFTPと呼びまして、
それを行うツールを「FTPツール」と呼ぶんですね。
個人的なオススメは「FileZilla」で、私は独立当初からずっとこれを使っています。
FTPソフトを使った仕事での流れ
仕事上での具体的な流れとしては、
まずクライアントからFTP情報（ホスト名、ユーザー名、パスワード）をもらいます。
Web制作会社と仕事をする際には、先方から送ってくれる場合が多いですが、知人案件やwebに疎い担当者の場合は別途相談する必要があります。
その後ツールにいただいたFTP情報を入力し、サーバーに接続します。
その後、サーバーの指定の場所にファイルを入れれば、本番環境にサイトが反映されるということになります。
見方は「左が自分のPCのディレクトリ一覧、右が接続先サーバーのディレクトリ一覧」になっていて、サーバーから自分のPCにファイルをダウンロードすることも可能です。
もしHTMLサイトを公開するのであれば、大抵は右側の「公開ドメイン直下のpublic_htmlの中」にファイルやフォルダを入れていくことになります。
超えなければならない壁
間違って関係ないファイルを消してしまいお客さんのサイトにダメージを与えてしまう可能性があるなど、
サーバーの中のファイルをいじるのはハイリスクではありますが、アップロードまで一括で行う案件も普通にありますので、ここは乗り越えなければならない壁ということになります。
この辺りは言葉では説明しづらいのですが、このあと具体的な練習方法をお伝えしますので、実際に手を動かしてもらうのが一番いいかなと思います。
FileZillaの詳細な使い方は以下の記事で解説していますので、是非実案件前に触っておくことを強くおすすめします！！
③WordPress案件の場合
ここからデータベースも入ってくるので少し話がややこしくなりますが、非常に重要な場所になりますので、ぜひ最後まで付いてきてください。
ここからの説明は少し難しいので、先に以下の記事を読んでおくとスムーズに理解できます。
納品方法は大きく２つに分かれます。
①先方でWP環境を用意している場合→ローカルでWordPressサイトを作成しマイグレーションしてそのまま納品
- まずお客さん側でWordPress環境を用意しているか確認する（ドメイン・サーバーが紐付いており、かつサーバーにWordPressを入れている、または既にサイト自身は公開されている、本番環境と呼ぶ）
- ローカル環境で開発し、プラグイン「All in one WP Migration」で「エクスポート」
- 本番環境のWordPress管理画面でも「All in one WP Migration」を導入し、エクスポートしたファイルを「インポート」する
- 動作確認して完了
多分このままだと意味がわからないと思うので、少しずつ説明していきます。
そのためにまずはWordPressサイトの仕組みを知る必要があるので、簡単に説明させていただきます。
WordPressのサイト表示をこの図を使って解説すると、
まず私たちがサイトにアクセスすると、WordPress内部のPHPがデータベースに保存されている投稿情報などを取得します。
同時にテーマファイルにアクセスしてサイトの見た目の部分を取得し、それらの情報を合わせてユーザーに返すことで、サイトを表示させています。
つまり、WordPressサイトはこれまでのHTMLサイトと違い、データベースをサーバーに用意し、WordPressと紐付けする必要があるということです。
WordPressのデータベースはどこにあって、どういう構造なのでしょうか？
大抵のサーバーには「phpMyAdmin」というデータベース管理ツールがあり、ここからWordPressのデータベースを除くことができます。
データベース内には多くの「テーブル」が存在していますが、今回は「記事データ」が入っている「wp_posts」を見てみます。
「wp_posts」の記事データの中で、例えば記事の文章は「post_content」に入っています。
<?php the_content(); ?>とエディターに入力すると、この記事の本文が表示されます。 この記事もHTMLで一から書いているのではなく、post_contentから情報を取得して表示させているわけです。
流れとしては、本番サイトに上げる前に、
- 自分のパソコンでローカル開発環境を構築しサイトを作り
- そのテーマファイルとデータベースを本番環境に移す
というのが大まかな流れとなります。
この場合先方がWordPress環境もデータベースもすでに用意してくれているので、本番環境は一から用意する必要はありません。
この場合私たちが具体的にやることは意外に単純です。
具体的な流れ
まずは、ローカル環境でWordPressサイトを開発します。
具体的なローカル環境としては、「Local」か「MAMP」のどちらかを使って開発することがほとんどです。
最近だとStudio by WordPrese.comもおすすめですね。
これらのツールを使うと手軽にWordPressのテーマファイルとデータベースの作成と紐付けを行うことができます。
その後「All In One Wp Migration」というプラグインで、テーマファイルとデータベースをまるっと本番環境に移し替えます。
言葉だけ聞くと難しそうですが、このプラグインの使い方自体はとても簡単です。
後は本番環境のWordPressの管理画面に入るために、事前にWordPressのIDとパスワードをもらっておけばOKですね。
これだけで終了です。
今回は省いてますが、実案件ではバグを防ぐために、いきなり本番環境に上げる前に、本番に極力近い構成の「テスト環境」を用意し、それで問題なければ本番に公開することを行うことが多いです（自分のサーバーを使うなどする）
めんどくさいのはこの次の場合になります。
②先方でWordPress環境を用意していない場合→ローカルで開発してサーバーにデータベースとWPダウンロードして移行
- 本番環境が全くないこと、こちらで全て行うことをクライアントから確認
- ドメイン・サーバーを取得してもらう（代行でも良い）
- それと平行してローカル環境でサイト開発をする
- ドメイン・サーバーの紐付けを行い、WordPressを本番環境にインストールする
- ローカルのWordPressをプラグインで本番環境へ
- 公開！
たまに先方で全くWordPress環境を用意していないことがあります。これは相手に「Webの知見が全くないとき」によくある状態です。
わからないので、全部お願いします〜
というケースですね笑
その場合の手順としてはこのようになります。
- 通常通りローカルで開発
- サーバーの管理画面よりWordPress用のデータベースを作成する
- WordPressをダウンロードしてきて、FTPツールなどでファイルを配置する
（著名サーバーの場合WordPress簡単インストールがあるので、②③は飛ばせます） - 後はいつも通りローカルのデータをマイグレーションして反映
特にややこしいのが②のサーバーの管理画面よりWordPressのデータベースを作成するところですね。
まずサーバーの管理画面に入るために、IDとパスワードなどを聞かなくてはなりません。
ここはサーバーの管理会社によっても違ってきます。
その後、ほとんどのサーバー会社の場合WordPressサイトとの紐付けのマニュアルがネットにあるので、そちらを参考に行えば大丈夫だと思いますが、
その次はWordPressをダウンロードして、FTPツールでファイル一式をサーバーに置かなくてはなりません。
ただ、エックスサーバー 
やシン・レンタルサーバー 
などの著名なサーバーであれば、
WordPress簡単インストールなどでWordPress環境の構築が1クリックで終わったりもするので、
まずはそれができるかどうか調べてみるのがいいかと思います。
シン・レンタルサーバー公式サイト
https://server.xfree.ne.jp/ 
ConoHa WING公式サイト
https://www.conoha.jp/wing/ 
④Gitで納品の場合
ダントツで難易度が高くて、web制作で御目に掛かる頻度は少ないけど出会うと詰む可能性が高い納品方法になります。
私も実案件でいきなりのブランチ運用で一回失敗しています（泣）
Gitについてここでは詳しく説明はしませんが、簡単に言うと
「ソースコード管理ツール」
みたいなもので、
web制作会社よりもシステム開発会社と仕事をすると使う頻度が高いツールなのかなと思います。
Gitは「バージョン管理のシステム」のことです。
これを便利に使えるようにしたGithubなどのコード共有サービスを活用すれば、一つのサイトを複数人で開発できます。
これがGitを利用する理由です。
各人が「ローカルリポジトリ(自分のPC)」で開発し、完成したら「リモートリポジトリ」にアップロードすると、本番サイトに反映されます。
最近はWeb制作の現場にも浸透してきています。
RailsやLaravelなどのサーバーサイドエンジニアと仕事をする場合は100%このパターンです。
システム開発ではフロント側がHTMLコードを書いて、できたところから都度サーバーサイド側でシステムを組み込んでいく開発形式が一般的なため、
できた部分から都度共有できて、変更箇所もすぐ反映されるGitは複数人でのプロジェクトでは非常に使い勝手が良いためです。
web制作会社でも、フリーランスへのLP制作などの一人で回る案件の発注では使うことを要請しませんが、社内では大規模なコーポレートサイト開発などだと
チーム開発が普通なので、ソースコード管理に普通に使っています。
WordPress案件ではなく、HTML、CSS、JavaScriptのフロントコーディングの案件に使われることが多いです。
gitを使った具体的な納品までのフローは詳細に解説するとめちゃくちゃ長くなってしまうので、ここでは割愛しますが、
代わりにおすすめの勉強本を紹介しておきます。
改訂2版 わかばちゃんと学ぶ Git使い方入門
この本はとても噛み砕いて説明してくれる上に、実際に手を動かす形式で学べるのでおすすめです。
この本でもメインで使うことになる「sourcetree」というツールがとても便利なので、本を終えたらまずは個人プロジェクトで小さく使ってみるのがいいかなと思います。
ソースコード管理とともに、バージョン管理ツールでもあるので、例えば修正前の状態にファイルを戻したい時も、
Gitで管理していれば簡単に「以前の状態」に戻すことができますし、エンジニアとして就職するにしても、
今ではどこの企業も「Gitを使ったチーム開発の経験」を求めきており、もはや「エンジニアの必須教養」と化しているのと、
今後フリーランスのチーム化が進むにつれてこういったツールの導入は避けられないのではないかと個人的には思っているので、
早いうちに使えるに越したことはないです。
令和はGit体制に移行した制作会社・フリーランスチームが多くあるので、制作界隈でも基礎教養になっていきそうです。
（追記）Gitが、おもしろいほどわかる基本の使い方33 改訂新版
この本は「2冊目」としてめちゃクチャいいです！
- sourcetree使用でコマンドは最低限
- わかばちゃんより一歩進み、実際のチーム開発に耐えうる深掘り感
実際の案件では「コマンド」か「sourcetree」かの指示はないのでやりやすい「sourcetree」で勉強を進めるのが一番効率がいいのですが、
なかなか「コマンド操作」以外の教材が見つからないんですよね。
その中でこの教材はデザイナーなど「非エンジニア」がGit開発を学ぶことも想定しているので、
sourcetreeを前提に、少しコマンドも入れ込みながら学習が進んでいきます。
さらに、チーム開発でのコンフリクト対応やGithub Flowなど、現場のブランチ運用まで教えてくれるので、
もう一歩Gitの理解を深めたい方に、めちゃおすすめできます。
Gitは「すぐ案件に利用する」ような、緊急性の高い分野ではないですが、余裕のあるうちにしっかり準備をしておかないと、後悔する分野になりますので、ぜひ！
Gitはポートフォリオ作成の段階で取り入れておくのがおすすめ。
自信がない人へ：実案件前の納品練習方法
みなさんぶっちゃけこう思いませんでしたか？
なるほど、わからん
これは当たり前だと思います。
ここからは「実案件前に絶対やっておくべき納品練習」について解説します。
端的にいうと、
「自分のポートフォリオサイトを作成し、レンタルサーバーにアップロードする」
または
WordPressブログを開設する（このサイトのような）
です。これを行うことで、
- ドメインとサーバーの関係性がわかるようになる
- 自分でサイトを公開するまでにFTPツールを触ることになる
- WordPressサイトを本番に公開する手順も学ぶことができる
これらのメリットがあります。
私自身も自分のポートフォリオサイトをサーバーに上げるためにドメインやサーバーとの紐付けなど、
色々調べつつやって、時には「サイトを壊すことも乗り越えながら」学ぶことができたので、ぜひ学習を一通り終えたら挑戦して見てください。
Web制作の勉強って、コーディングばっかり行われるので、サーバー・ドメインでみんな詰むんですよね。
サーバー・ドメインについて
レンタルサーバーは、個人的には有料のものを１つ契約しておくことをお勧めします。
テスト環境にも使えますし、
Web制作で怖いのは、たとえ実装できたとしても、納品方法でつまずき時間が取られて、
余裕があったはずの納期がじわじわ削られるのはあるあるということなんです。
ぜひ今紹介した方法を行って欲しいなと思います。
シン・レンタルサーバー公式サイト
https://server.xfree.ne.jp/
ConoHa WING公式サイト
https://www.conoha.jp/wing/
以前サーバーへのサイトのアップロード方法を全力解説しているので、ぜひ御覧ください。
Webサイトの公開練習ができる教材
ちなみに、私が公開しているコーディング演習課題では基本的にサーバーにアップロードしていただくため、ここの練習を行うことが可能です。
実務で必須のセルフチェックを徹底して学べる他、二回のレビューも付いています。
FTPなども利用すれば、本番さながらの「演習」になるはずです。
コーディング課題を過去にこなされた方なら、今回の解説はそこまで難しくなかったかと思います。
＼無料課題から鬼レベルまで！／
デイトラにもGit講座が!!
私が一番おすすめしているスクール「デイトラ」のWeb制作コースでも、Gitパートが追加されました！
ドメインを契約してサーバーにアップロードして、メンターに見てもらう工程も学べるのでおすすめです。
私も卒業課題などをレビューしています。
＼無料動画も複数あり／
Webサイト制作の納品方法に関するよくある質問
WordPressでの納品とは？
WordPressでの主な納品方法は以下の通りです。基本はプラグインですが、部分的にFTPでサーバーにアクセスしてファイルの出し入れをすることもあります。
- All-in-One WP Migrationなどのプラグインを使用
- ローカル環境からエクスポートしたファイルを本番環境にインポート
- データベースやメディアファイルも含めて移行可能
- テーマファイルやプラグインをFTPでアップロード
- データベースは別途エクスポート/インポート
- BackWPupなどのプラグインでバックアップを作成
- 本番環境で復元
ホームページの納品とは何ですか？
ホームページの納品とは、制作会社やフリーランスがクライアントに完成したWebサイトのデータを引き渡すことです。
通常HTMLやCSS、画像ファイルなどのサイト構成に必要なファイル一式をサーバーにアップロードするか、圧縮ファイルで提供します。これにより、クライアントはウェブサイトを公開・運用できるようになります
FTP納品とは何ですか？
FTP納品とは、Webサイト制作者がFTPツールを使用して、完成したサイトのファイル一式を直接クライアントのサーバーにアップロードする納品方法です。HTMLやCSS、画像などのファイルをサーバーの指定ディレクトリに転送し、サイトを公開可能な状態にします。クライアント側の手間を省き、即時反映できる利点があります
まとめ：Web制作の納品方法は事前に練習できる！
今回紹介した納品方法を以下にまとめます。
- ファイル納品→zipファイル
- FTPツールを使ってサーバーに納品
- WordPressでの納品
- Gitで納品
コーディングできる人は多いけれど、実際にWebサイトを公開できなかったり、サーバー・ドメインの段階でつまづく人は多いです。
私も駆け出しフリーランスをサポートする中で一番多かった質問が
サイトのサーバーとドメインの紐付けとWordPress環境構築から頼まれたんですが、わかりません…!!
というものでした。
Web制作学習の王道パターンは以下のようなものです。
私の公開している「学習ロードマップ」ではあえて
サイトをコーディングしたあと公開まで行ってもらい、添削を受けて合格をもらう
これを取り入れています。
「実案件の納品→検品」までの疑似体験することができます。
逆にこれを怠ると、実案件で結構大変な思いをすることになるためです。
納品方法に不安がある人は、ぜひ課題に取り組んでみてください。
＼無料課題から鬼レベルまで！／
実務での進め方・納品についてもう少し詳しく知りたい方
Web制作の実案件での流れなどを以下の記事にまとめています。
Web制作の案件獲得について
以下の記事に案件の獲得方法についてまとめています。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。2025年も案件獲得や転職に成功した人が多数出ています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
しょーごログのコーディング課題後に、ニートから最大月収100万を稼げる用になった方のインタビュー記事も参考になるはずです。
ご寄付を頂けると今後の更新の励みになります！
