こんにちは、現在フリーランスのWeb制作者として3年ほど活動しているしょーごと申します
これまでに納品した案件数は200近くはあります。
この記事をご覧の方は、おそらくweb制作を勉強中の方々が多いと思いますが、納品方法って結構謎じゃないですか？
って思われてる方が多いと思います。
僕自身もそうで、当時はほとんど情報もなかったので自分で案件をこなしながらその場で頑張ってキャッチアップしていきました。
この記事を見ていただくことで、web制作における「ほとんど全ての納品方法」を理解していただくことが可能です。
また、全ての納品方法を紹介した後に
実案件前にやっておくと納品時のいい練習になる方法
も紹介しますので、
ぜひ最後までご覧ください。
この記事の反響
web制作の納品方法まとめ
①ファイル納品
これが一番イメージが湧きやすいかと思います。また一番簡単な方法でもあります。
具体的なイメージとしては、
- 納品するフォルダをzip形式で圧縮してslackやchatworkなどクライアントとやりとりしているツールでそのまま投げるか
- ギガファイル便でzipフォルダをアップロードして、そのURLを共有することが多い
と思います。
ファイル納品は修正が入った時にいちいちzipにしてまた送り直さなきゃいけないところが大変かなと思いますが、
サーバーを一切いじる必要がなく、アップロード作業は先方がやってくれるので納品自体は非常に楽ではあります。
この部分は「フォルダをzipにする方法」を知っていれば特に対策は必要ないかと思います。
②FTPツールを使ってサーバーに納品
先ほど紹介したファイル納品は、クライアントが自分でサーバーにアップロードする前提ですが、
FTPツールを使った納品は、自分でサーバーにアップロードしてサイトに反映させるところまでが納品になります。
FTPってなんぞと思われると思いますが、File Transfer Protocolというサーバーとのファイルのやりとりに使われる通信方式をFTPと呼びまして、
それを行うツールを「FTPツール」と呼ぶんですね。
個人的なオススメは「FileZilla」で、私は独立当初からずっとこれを使っています。
FTPソフトを使った仕事での流れ
仕事上での具体的な流れとしては、
まずクライアントからFTP情報（ホスト名、ユーザー名、パスワード）をもらいます。
Web制作会社と仕事をする際には、先方から送ってくれる場合が多いですが、知人案件やwebに疎い担当者の場合は別途相談する必要があります。
その後ツールにいただいたFTP情報を入力し、サーバーに接続します。
その後、サーバーの指定の場所にファイルを入れれば、本番環境にサイトが反映されるということになります。
間違って関係ないファイルを消してしまいお客さんのサイトにダメージを与えてしまう可能性があるなど、
サーバーの中のファイルをいじるのはハイリスクではありますが、アップロードまで一括で行う案件も普通にありますので、ここは乗り越えなければならない壁ということになります。
この辺りは言葉では説明しづらいのですが、このあと具体的な練習方法をお伝えしますので、実際に手を動かしてもらうのが一番いいかなと思います。
③WordPress案件の場合
ここからデータベースも入ってくるので少し話がややこしくなりますが、非常に重要な場所になりますので、ぜひ最後まで付いてきてください。
大きく２つに分かれます。
①先方でWP環境を用意している場合→ローカルでWordPressサイトを作成しマイグレーションしてそのまま納品
多分このままだと意味がわからないと思うので、少しずつ説明していきます。
そのためにまずは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をダウンロードしてきて、FTPツールなどでファイルを配置する
（著名サーバーの場合WordPress簡単インストールがあるので、②③は飛ばせます） - 後はいつも通りローカルのデータをマイグレーションして反映
特にややこしいのが②のサーバーの管理画面よりWordPressのデータベースを作成するところですね。
まずサーバーの管理画面に入るために、IDとパスワードなどを聞かなくてはなりません。
ここはサーバーの管理会社によっても違ってきます。
その後、ほとんどのサーバー会社の場合WordPressサイトとの紐付けのマニュアルがネットにあるので、そちらを参考に行えば大丈夫だと思いますが、
その次はWordPressをダウンロードして、FTPツールでファイルをサーバーに置かなくてはなりません。
ただ、Xserverやmixhost、桜インターネットなどの著名なサーバーであれば、WordPress簡単インストールなどでWordPress環境の構築が1クリックで終わったりもするので、
まずはそれができるかどうか調べてみるのがいいかと思います。
ConoHa WING公式サイト
https://www.conoha.jp/wing/ 
Gitで納品の場合
ダントツで難易度が高くて、web制作で御目に掛かる頻度は少ないけど出会うと詰む可能性が高い納品方法になります。
私も実案件でいきなりのブランチ運用で一回失敗しています。
Gitについてここでは詳しく説明はしませんが、簡単に言うと
「ソースコード管理ツール」
みたいなもので、
web制作会社よりもシステム開発会社と仕事をすると使う頻度が高いツールなのかなと思います。
具体的にはRailsやLaravelなどのサーバーサイドエンジニアと仕事をする場合は100%このパターンです。
システム開発ではフロント側がHTMLコードを書いて、できたところから都度サーバーサイド側でシステムを組み込んでいく開発形式が一般的なため、
できた部分から都度共有できて、変更箇所もすぐ反映されるGitは複数人でのプロジェクトでは非常に使い勝手が良いためです。
web制作会社でも、フリーランスへのLP制作などの一人で回る案件の発注では使うことを要請しませんが、社内では大規模なコーポレートサイト開発などだと
チーム開発が普通なので、ソースコード管理に普通に使っています。
WordPress案件ではなく、HTML,CSSmJavaScriptのフロントコーディングの案件に使われることが多いです。
gitを使った具体的な納品までのフローは詳細に解説するとめちゃくちゃ長くなってしまうので、ここでは割愛しますが、
代わりにおすすめの勉強本を紹介しておきます。
わかばちゃんと学ぶ Git使い方入門
この本はとても噛み砕いて説明してくれる上に、実際に手を動かす形式で学べるのでおすすめです。
この本でもメインで使うことになる「sourcetree」というツールがとても便利なので、本を終えたらまずは個人プロジェクトで小さく使ってみるのがいいかなと思います。
ソースコード管理とともに、バージョン管理ツールでもあるので、例えば修正前の状態にファイルを戻したい時も、
Gitで管理していれば簡単に「以前の状態」に戻すことができますし、エンジニアとして就職するにしても、
今ではどこの企業も「Gitを使ったチーム開発の経験」を求めきており、もはや「エンジニアの必須教養」と化しているのと、
今後フリーランスのチーム化が進むにつれてこういったツールの導入は避けられないのではないかと個人的には思っているので、
早いうちに使えるに越したことはないです。
（追記）Gitが、おもしろいほどわかる基本の使い方33 改訂新版
この記事を執筆後にこちらの教材を発見したのですが、この本めちゃクチャいいです！
- sourcetree使用でコマンドは最低限
- わかばちゃんより一歩進み、実際のチーム開発に耐えうる深掘り感
実際の案件では「コマンド」か「sourcetree」かの指示はないのでやりやすい「sourcetree」で勉強を進めるのが一番効率がいいのですが、
なかなか「コマンド操作」以外の教材が見つからないんですよね。
その中でこの教材はデザイナーなど「非エンジニア」がGit開発を学ぶことも想定しているので、
sourcetreeを前提に、少しコマンドも入れ込みながら学習が進んでいきます。
さらに、チーム開発でのコンフリクト対応やGithub Flowなど、現場のブランチ運用まで教えてくれるので、
もう一歩Gitの理解を深めたい方に、めちゃおすすめできます。
Gitは「すぐ案件に利用する」ような、緊急性の高い分野ではないですが、余裕のあるうちにしっかり準備をしておかないと、後悔する分野になりますので、ぜひ！
実案件前の納品練習方法
ここからは実案件前にやっておくと納品練習になる方法をご紹介します。
端的にいうと、
「自分のポートフォリオサイトを作成し、レンタルサーバーにアップロードする」
または
WordPressブログを開設する（このサイトのような）
です。
自分でサイトを公開するまでにFTPツールを触ることになるし、WordPress化した場合はWordPressサイトを本番に公開する手順も学ぶことができるし、
僕自身も自分のポートフォリオサイトをサーバーに上げるためにドメインやサーバーとの紐付けから
調べつつやって色々学ぶことができたので、ぜひ学習を一通り終えたら挑戦して見てください。
サーバー・ドメインについて
レンタルサーバーは、個人的には有料のものを１つ契約しておくことをお勧めします。
実装できたとしても、納品方法で躓き時間が取られて余裕があったはずの納期がじわじわ削られるのはあるあるなので、
ぜひ今紹介した方法を行って欲しいなと思います。
ConoHa WING公式サイト
https://www.conoha.jp/wing/
公開練習ができる教材
ちなみに、私が公開しているコーディング教材では基本的に無料サーバーにアップロードしていただくため、ここの練習を行うことが可能です。
Web制作完全独学ロードマップ
今からWeb制作を学ぶ場合の我思う「Web制作学習の理想のロードマップ」を無料公開しています。
Web制作の流れ完全解説
納品方法はWeb制作流れの3つあるフェーズの内、「制作フェーズのラスト」でしかありません。
明るみに出づらいWeb制作の流れを解説しています。
おすすめのWeb案件獲得場所
クラウドソーシングはいまや「低単価」「短納期」「高倍率」案件ばかり。
以下のような求人媒体はある程度のスキルレベルは求められますが、競合は少なく単価はかなり高いです↓
おすすめです！
途中経過報告について
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- XD,PSDデザインからのコーディング
- 2回の表示確認特典
- ポートフォリオOK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
さらに、まとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
