皆さん、こんにちは！本田祐樹です。

最近では副業とパラレルキャリアが流行っていて本業以外でのお仕事をしていく人が増えてきましたね。

フリーランスや副業の仕事として多くなってきているのの1つにWeb制作があるます。

皆さんもYouTubeを見ていると広告に流れていませんか？
最近ではホームページ制作やプログラミングのスクールの広告が増えてきています。
私の会社もIT事業をやっているのでエンジニアやクリエイターの方たちと一緒に仕事をすることが多いです。

そこで本日はエンジニアやクリエイターは様々な方からのご意見を参考に「初心者がWordPressを使ってWeb制作の案件をこなす方法」についてお話していきます。

「プログラミングスクールを卒業したけど自分がフリーランスになるレベルか分からない」
「いざ初受注を獲ってみたけど、納品方法や打ち合わせなどプログラミング以外に分からないことがあることに気付いた」
「副業でWordPress案件をやりたいけど、少ない時間でこなせるか不安。納品遅れなどのトラブルは起こしたくない」

そんな駆け出しエンジニアの方や、独立志望の方の参考になれば嬉しいです。

ちなみに私はエンジニアではないので記載内容に間違いがあったら、、、笑って許してくださいm(_ _)m

フリーランス・副業でWordPressを使った案件を受けるために学習しておくこと

まずはWordPressを使ってホームページを作る時は、どういう流れで行っているか把握しておくことが大事です。

一度あなたのホームページを作ってみるのが一番おすすめなので、まだ作ったことがない方がいれば作ってみましょう！
いきなりお客さんのホームページを作るのはリスクがありますからね。

作ったものはあなたのポートフォリオとしても使うこともできるので、無駄にはならないですよ＾＾ｂ

やること①サーバーにWordPressのインストールできるようになる
ホームページを作るためにWordPressをインストールします。
そのためにはレンタルサーバーの契約やドメインの登録が必要です。
契約する会社によって機能や手順、費用が色々違うので調べてみてください。

個人的におすすめのレンタルサーバーはXserverです。ドメインも一緒に購入できますしキャンペーンも頻繁にやっているのでぜひ！

お客さんによってはここの環境構築も任されることになりますので、インストールまでの流れをしっかり把握しておきましょう！

②WordPressの管理画面の操作補法を知っておく
インストールが終われば次はホームページの設定です。
どのお客さんにでも対応できるように一通りの機能には触れておいてた方がいいです。

固定ページや投稿ページはホームページを作成した後もお客さんにも触れていただくと思いますので、いつ聞かれても説明もできるように特に慣れておきましょう！

よく案件であるのが、ブログやニュース（お知らせ）を別々で投稿・管理したいという要望がありました。
標準のWordPressでは投稿機能は1種類なので、カスタム投稿という設定を設けたりしないといけません。
こちらも是非使いこなせれるようにしておきましょう！

③デザインをテーマにする方法を知っておく
WordPressを使ったホームページでは「テーマ」というものがあり、見た目を変えるためのデザインの土台の役割になっています。

目的や用途に合わせてデザインをカスタマイズできるように、どんなテーマがあるのかは一度時間を作って網羅的に調べておくと良いでしょう。

またテーマというものは有料版・無料版があり自由にインストールすることができるのですが、インストールしたテーマに対して皆さんなりに自由にカスタマイズして使用することもできます。（子テーマ対応とも呼ぶ）

ただし子テーマ対応だとインストール元のバージョンに左右されるなどして、お客さんが求めているデザインをしっかり実現することができないこともあったりします。

「どんな要望にも対応したい」ということでしたら、テーマをインストールするのではなく「自分でオリジナルのテーマを作る」ということで実現できます。

ただしオリジナルのテーマを作るにはプログラミングが必須になるのでデザイナーの方は大変かもしれません。

理想は自分で作ることですが、知り合いにプログラマーがいればお金を払って作ってもらっても良いですね。

④HTMLをWordPressに反映できるようにする
先ほどお伝えしたオリジナルのテーマで行う作業の流れを説明します。

HTML、CSSだけでも何かしらサイトは作れるのですが、ホームページやECサイトになるとWordPressに組み込むことをしないとです。
大まかな流れとしては以下の感じです。

（Ⅰ）HTMLで作成したファイル（～.html）をWordPressで使用するファイル（～.php）に変換する。（例）index.html⇒index.php
これだけならめちゃくちゃ簡単ですね＾＾

（Ⅱ）ヘッダーやフッター、サイドバーなど各ページで同じように表示する共通部分を切り分ける。
HTMLには全てのデザインがコーディングされているのですが、役割ごとに複数のPHPファイルに分割するんですね。

ファイルを変換する時は拡張子だけでなくファイル名にも注意をしてください。
例えば以下のようにファイル名にはそれぞれの役割があります。

page.php：固定ページを表示するためのファイル
archive.php：ブログの一覧を表示するためのファイル
single.php：ブログを表示するためのファイル
index.php：どれにも該当しない画面を表示するためのファイル

もっと詳しく知りたい人は「WordPress　テンプレート階層」で調べるとWordPressの公式サイトで確認してみましょう。

（ⅲ）次に（Ⅱ）で分割した各ファイルにPHPのコードを埋め込んでいくことで、Webサイトに色んな機能を持たせることになります。
よく使われるのはこちらの機能です。

the_post()：WordPressのデータベースからページを指定する時に使う
the_title()：ページのタイトル名を取得する時に使う
the_content()：ページの本文を取得する時に使う
the_permalink()：ページのURLを取得する時に使う
the_post_thumbnail()：ページのアイキャッチ画像を取得する時に使う

こんな感じが作業の流れになるのですが、細かいお話は私では語れないので教材やネット記事を参考にしてください！

⑤サイトのアップロード方法を理解しておく
作成したサイトは①で紹介したレンタルサーバーにアップロードをしないといけません。
ファイルをサーバーにアップロードするときにはFTPというツールを使ってサーバーにアップロードすると思いますので、この機会にFTPツールの使い方も覚えておいてください。
どうやらFileZillaというものが有名なFTPツールのようです。

⑥プラグインを使えるようになる
「これで終了！」と思いきや、最後にやることがあります。
WordPressでは「プラグイン」と言って、色んな便利機能をアップロードしたサイトに追加することができます。
例えばホームページを作る際によく使われるプラグインはこちらです！

Contact Form 7：メールでのお問い合わせフォームを作る時に使う
BackWPup：ファイルのバックアップの時に使う
All in one SEO：SEOの対応が必要な時に使う
Smart Slider 3：トップページでよく使われるスライドショーを作る時に使う
Custom Post Type UI：カスタム投稿機能でブログ以外のお知らせ投稿などを作る時に使う
EWWW Image Optimizer：画像を圧縮させ、ホームページの処理速度を上げる時に使う

うーん、英語になってくると難しく見えますね～

上記で紹介したプラグインは制作案件では頻出のものらしいので、調べれば何かしら使い方が分かるんじゃないかと思います。

WordPressを使った案件の進め方を教えます（ヒアリングから納品まで）

Webサイトを作るときには以下の流れに沿って行うことがほとんどです。
まずは作業の流れを確認しましょう。
ここでの流れは１からホームページを作る時の流れをお伝えします。

・ヒアリング
まずはお客さんとの打合せです。
私たちにどのようなお仕事をして欲しいのかを改めて確認するとても大事な工程です。

ここで認識がずれると先々の作業でも内容がずれてきます。
最後にはお客さんが求めていたことが全く完成することだってあります。

私はエンジニアではないのですが、打ち合わせに参加することがあります。
ITは難しく見えがちですが、結局のところお客さんとの打ち合わせ内容って業界に関わらず似たようなことをしてますよ。

サラリーマンとしてお勤めの会社で皆さんがやられている経験もぜんぜん活かすことができるでしょう。

ちなみにホームページの場合だとヒアリングする事が多い内容は次のようなことです。

①ホームページを作る目的（なぜ作るのか）
②作るホームページのテーマやコンセプト
③ホームページに載せる画像やテキストは誰が行うか
④納品方法
⑤納期
⑥費用

今後のホームページを制作していくのであればヒアリングシートを作成して、今後のホームページ制作でも使えるようにしておくとよいですよ＾＾ｂ

・デザイン
お客さんとヒアリングが完了すれば実際に載せるホームページの内容を考えて行きましょう！
デザインを考えるときはプログラミングはどこまで対応をするのか、それともノーコードで対応するのかで再現できるデザインが変わってきます。
逆に言うとプログラミングのスキルによっては作ることができるデザインも限られてくるんじゃないかな？とも思ってます。
自分の持っているスキルで対応できるデザインから考えてみると良いかもしれませんね。

・コーディング
コーディングと言って、デザインの内容をネット環境で閲覧できるようにHTML、CSSを使ってプログラミングしていきます。


・テスト
コーディングが終われば動作の確認です。
エラーの確認やデザインの崩れがないかなどを確認してきましょう！
最近では色々な端末でホームページを見る人が増えてきましたので、実際に見る人が使うと思われる端末（ブラウザや画面サイズ）を把握しておきましょう。

・納品
納品方法はお客さんによっていくつか種類が分かれると思います。

パターン①コードやデザインを提出
Web制作会社に対して納品する時はことの提出方法が多いと思います。
こちらではサーバーへはアクセスが禁止されているため、後はWeb制作会社にてカスタマイズをしてもらいます。
納品方法としてはこちらが一番楽ですね。

②サーバーに直接アップロード
直接エンドユーザーとやり取りをしてホームページを制作する場合は、こちらの提出方法が多いです。
WordPressで対応するということは、エンドユーザー側にてブログなどの更新をしてもらうことになると思います。
WordPressの使い方がわからない人だった場合は管理者画面の使い方なども伝える必要があるかもしれません。
そのあたりもきちんとヒアリングをしておいてくださいね＾＾ｂ

フリーランス・副業でWordPress案件を受けるときのトラブル3選

最後にWordPressの案件を受けた時によく起きるトラブルについてまとめておきます。

①WordPressの更新
WordPressや使用しているテーマやプラグインは常にアップデートされて行きます。

本来、アップデートは定期的にするべきなのですが、無闇にお客さんのホームページをアップデートのはよくありません。
今使っている機能が、もしかしら上手く動作しないことがあります。

もしアップデートをする場合は、事前にホームページのバックアップを行ってからアップデートをして動作の確認をしていきましょう！
アップデートで問題があった場合は、元の環境に戻して問題を把握しプログラムの修正を行うか、アップデートをせずに今の状態でホームページを運用するかの判断が必要です。

②バックアップ
プログラムが変わったりするとホームページが表示できなくなったりします。
問題が起きた場合は、問題が起きていた前の状態に戻す必要があるので定期的なバックアップはしておくとよいでしょう＾＾ｂ

お客さんにバックアップをしていただくのか、運用保守としてあなたがバックアップをするのかは事前に決めておいてくださいね。

③認識のズレ
ホームページを制作する上で関係するメンバーが多ければ多いほど認識がずれやすくなります。伝言ゲームで結果が変わっている感じですねw

お客さんが求めている結果とずれるというのは仕事として成立しません。認識がずれないように定期的にお客さんやチームメンバーへ状況を伝えたり確認をするようにしていきましょう。

確認が必要な物は早く連絡したり、打合せしたものについては議事録を残すのも効果的です。

あくまで私の感想ですが、Webサイト制作って簡単そうに見えて沢山の作業があります。
そのため人によっては「副業では時間的に厳しいのではないか」と思われるかもしれません。

フリーランスの人と比べると作業ができる時間が少ないので不利ではありますね。
とはいえ周りの人を見ていると副業でも案件をやり切っている人はいるようです。
逆に言うと限られた時間を無駄にしないように、出来る予習・対策は今のうちから取り組んでおけば副業でも可能なんだと思いますよ。

この辺でだいぶと長くなってきたので今日は終わりにしたいと思います。
いや～専門外のことをそれっぽく話すのも大変ですねw

まあとはいえ私も勉強になるのでIT関連のお話も定期的にしていきたいと思います^^

それではまた！