こんにちは、現在フリーランスのWeb制作者として5年ほど活動しているしょーごと申します
これまでに納品した案件数は200近くはあります。
この記事をご覧の方は、おそらくweb制作を勉強中の方々が多いと思いますが、納品方法って結構謎じゃないですか？
コーディングして作るところまでは勉強したけど、実際の案件はどうやって納品するの？
って思われてる方が多いと思います。
私自身もそうで、当時はほとんど情報もなかったので自分で案件をこなしながらその場で頑張ってキャッチアップしていきました。
この記事を見ていただくことで、web制作における「ほとんど全ての納品方法」を理解していただくことが可能です。
また、全ての納品方法を紹介した後に
実案件前にやっておくと納品時のいい練習になる方法
も紹介しますので、
ぜひ最後までご覧ください。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
この記事のYouTube版
この記事の評判
Webサイトの仕組み
Web制作で作るサイトの納品にあたっては、まず「Webサイトがどう仕組みで公開されているか」知っておいたほうがいいです。
- サーバー
- ドメイン
- ファイル群（HTML.CSS.JS,PHP.WordPressなど）
これらでWebサイトは成り立っています。
先方がどこまで用意しているかで、納品までに行う手順も変わってきます。
基本的に「①サーバー」「②ドメイン」が既に用意されている前提で納品方法を解説していきます。
どれも用意されていないことは、下請けの案件では基本ないかと思います（制作会社やディレクターではなく、お客さんと直でやり取りする場合は大抵はこちらで取得からやらないといけないですが）
web制作の納品方法まとめ
①ファイル納品
これが一番イメージが湧きやすいかと思います。また一番簡単な方法でもあります。
具体的なイメージとしては、
- 納品するフォルダを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の中」にファイルやフォルダを入れていくことになります。
超えなければならない壁
間違って関係ないファイルを消してしまいお客さんのサイトにダメージを与えてしまう可能性があるなど、
サーバーの中のファイルをいじるのはハイリスクではありますが、アップロードまで一括で行う案件も普通にありますので、ここは乗り越えなければならない壁ということになります。
この辺りは言葉では説明しづらいのですが、このあと具体的な練習方法をお伝えしますので、実際に手を動かしてもらうのが一番いいかなと思います。
③WordPress案件の場合
ここからデータベースも入ってくるので少し話がややこしくなりますが、非常に重要な場所になりますので、ぜひ最後まで付いてきてください。
大きく２つに分かれます。
①先方でWP環境を用意している場合→ローカルでWordPressサイトを作成しマイグレーションしてそのまま納品
- まずお客さん側でWordPress環境を用意しているか確認する（ドメイン・サーバーが紐付いており、かつサーバーにWordPressを入れている、または既にサイト自身は公開されている、本番環境と呼ぶ）
- ローカル環境で開発し、プラグイン「All in one WP Migration」で「エクスポート」
- 本番環境のWordPress管理画面でも「All in one WP Migration」を導入し、エクスポートしたファイルを「インポート」する
- 動作確認して完了
多分このままだと意味がわからないと思うので、少しずつ説明していきます。
そのためにまずはWordPressサイトの仕組みを知る必要があるので、簡単に説明させていただきます。
WordPressのサイト表示をこの図を使って解説すると、
まず私たちがサイトにアクセスすると、WordPress内部のPHPがデータベースに保存されている投稿情報などを取得します。
同時にテーマファイルにアクセスしてサイトの見た目の部分を取得し、それらの情報を合わせてユーザーに返すことで、サイトを表示させています。
つまり、WordPressサイトはこれまでのHTMLサイトと違い、データベースをサーバーに用意し、WordPressと紐付けする必要があるということです。
流れとしては、本番サイトに上げる前に、
- 自分のパソコンでローカル開発環境を構築しサイトを作り
- そのテーマファイルとデータベースを本番環境に移す
というのが大まかな流れとなります。
この場合先方がWordPress環境もデータベースもすでに用意してくれているので、本番環境は一から用意する必要はありません。
この場合私たちが具体的にやることは意外に単純です。
具体的な流れ
まずは、ローカル環境でWordPressサイトを開発しますが、
環境としてはlocal by flywheelかMAMPのどちらかを使って開発することがほとんどです。
これらのツールを使うと手軽に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ツールでファイル一式をサーバーに置かなくてはなりません。
ただ、エックスサーバー 
やConoHa WING(コノハウィング) 
などの著名なサーバーであれば、WordPress簡単インストールなどでWordPress環境の構築が1クリックで終わったりもするので、
まずはそれができるかどうか調べてみるのがいいかと思います。
ConoHa WING公式サイト
https://www.conoha.jp/wing/ 
Gitで納品の場合
ダントツで難易度が高くて、web制作で御目に掛かる頻度は少ないけど出会うと詰む可能性が高い納品方法になります。
私も実案件でいきなりのブランチ運用で一回失敗しています（泣）
Gitについてここでは詳しく説明はしませんが、簡単に言うと
「ソースコード管理ツール」
みたいなもので、
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は「すぐ案件に利用する」ような、緊急性の高い分野ではないですが、余裕のあるうちにしっかり準備をしておかないと、後悔する分野になりますので、ぜひ！
実案件前の納品練習方法
みなさんぶっちゃけこう思いませんでしたか？
なるほど、わからん
これは当たり前だと思います。
ここからは「実案件前に絶対やっておくべき納品練習」について解説します。
端的にいうと、
「自分のポートフォリオサイトを作成し、レンタルサーバーにアップロードする」
または
WordPressブログを開設する（このサイトのような）
です。これを行うことで、
- ドメインとサーバーの関係性がわかるようになる
- 自分でサイトを公開するまでにFTPツールを触ることになる
- WordPressサイトを本番に公開する手順も学ぶことができる
これらのメリットがあります。
私自身も自分のポートフォリオサイトをサーバーに上げるためにドメインやサーバーとの紐付けなど、
色々調べつつやって、時には「サイトを壊すことも乗り越えながら」学ぶことができたので、ぜひ学習を一通り終えたら挑戦して見てください。
Web制作の勉強って、コーディングばっかり行われるので、サーバー・ドメインでみんな詰むんですよね。
サーバー・ドメインについて
レンタルサーバーは、個人的には有料のものを１つ契約しておくことをお勧めします。
テスト環境にも使えますし、
Web制作で怖いのは、たとえ実装できたとしても、納品方法でつまずき時間が取られて、
余裕があったはずの納期がじわじわ削られるのはあるあるということなんです。
ぜひ今紹介した方法を行って欲しいなと思います。
ConoHa WING公式サイト
https://www.conoha.jp/wing/
以前サーバーへのサイトのアップロード方法を全力解説しているので、ぜひ御覧ください。
Webサイトの公開練習ができる教材
ちなみに、私が公開しているコーディング演習課題では基本的にサーバーにアップロードしていただくため、ここの練習を行うことが可能です。
実務で必須のセルフチェックを徹底して学べる他、二回のレビューも付いています。
FTPなども利用すれば、本番さながらの「演習」になるはずです。
コーディング課題を過去にこなされた方なら、今回の解説はそこまで難しくなかったかと思います。
＼無料課題から鬼レベルまで！／
デイトラにもGit講座が!!
私が一番おすすめしているスクール「デイトラ」のWeb制作コースでも、Gitパートが追加されました！
ドメインを契約してサーバーにアップロードして、メンターに見てもらう工程も学べるのでおすすめです。
私も卒業課題などをレビューしています。
＼無料動画も複数あり／
実務での進め方・納品についてもう少し詳しく知りたい方
Web制作の実案件での流れなどを以下の記事にまとめています。
Web制作の案件獲得について
以下の記事に案件の獲得方法についてまとめています。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
