こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。
読者の悩み
- WordPress案件に対応するには、何を学習すればいいの？
- WordPress案件を獲得するためのステップが知りたい。
WordPressサイトのコーディングは、単純なコーディング案件よりも高収入を得ることができ、案件数も多いので、フリーランスや副業として対応できると収入面も安定します。
ただ、どこまで勉強すればWordPress案件に対応できるのか、不安になる人が多いです。
実際に僕も初学時は、不安から色んな情報をインプットしてましたが、今振り返ると無駄な学習も多く、かなり効率悪かったなと思います。
本記事では、WordPress案件を獲得するための効率的な学習ステップをまとめました。
本記事の信頼性
- フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
- WordPressを使ったWeb制作を数多く経験（2年で約6０件）
- Web制作会社にてディレクターの経験もあり
WordPressで仕事をするために勉強するべきこと【必要なものだけ】
WordPress案件を仕事にするために勉強すべきことは大きく3点あります。
１つずつ説明しますね。
STEP1：HTML/CSSの基礎を学ぶ
まずはHTML/CSSの基礎について学びます。
無料の学習サービスを利用して、最低限のコーディングスキルを身につけましょう。
学習サービスの良いところは、体系的に基礎を学べるところです。
TERUコーディングって何？から学ことができます。
コーディングスキルは、ネットで適宜調べながら実践することで身につけることもできますが、早い段階で１度は体系的に基礎から学びましょう。
遠回りに見えますが、体系的に学ぶことで理解が深まり、成長速度も速くなるので効率的です。
なので、まずはProgate（プロゲート）など学習サービスをどんどん活用していきます。
具体的には、下記のサービスを利用してみるのがオススメです。
デザインデータからのコーディング方法
最低限のコーディングスキルを学んだ後は、デザインデータからのコーディング方法を身につけましょう。
なぜなら、実作業でコーディングを行う場合、デザインデータを基に作業を行うからです。
デザインデータからのコーディングは、案件作業するための必須スキルです。
デザインデータで多いのは下記の3パターンです。
- PSDデータ（Photoshop）からのコーディング
- XDデータ（Adobe XD）からのコーディング
- FIGデータ（Figma）からのコーディング
この3種類に対応できれば8割がた案件に対応可能です。
※残り2割はイラストレータ
複数のAdobeソフトを利用する場合、Adobe CCを契約することで費用を節約できます。
さらに、Adobe CCを通常価格よりもお得に購入したい場合は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。
既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。
デザインデータからコーディングする具体的な方法は下記の記事を参考にしてください。
おすすめのコーディング練習教材
デザインデータを基にしたコーディングの練習ができる教材を紹介します。
- Codejump（コードジャンプ）
- 模写修行
Codejump（コードジャンプ）は、コーディングの基礎学習が終わった人向けに、模写コーディングやデザインデータを基にしたコーディングの練習をサポートしてくれるサイトです。
「入門編」から「上級編」まで難易度別にコーディング練習できる教材を提供してくれています。
基本的に、各課題ごとにデザインデータ（XD）とサイト仕様、実際の案件を想定した単価設定がされているため、実際の仕事をイメージしやすいと思います。
TERU実践編以外は全て無料で提供されています。
模写修行は、デザインデータ（Figma/XD）と仕様書を基に、自分でコーディングに挑戦する実践的な練習教材を提供しているサービスです。
基本的に練習教材を有料（1,000円~3,000円）で購入しますが、いくつか無料で提供されている教材もあります。
現役エンジニアの方が作られたサービスで、サンプルコードやWEB上での解説など初心者の方にとって手厚いサポートがされています。
TERU個人的には、実案件に一番近い形でコーディングが練習できる教材だと思っています。
コーディング以外に必要なスキル
案件作業に対応するには、コーディング以外のスキルも必要になります。
なぜなら、コーディングでサイトの見た目や動きを作った後、インターネット上にサイトを公開する作業が必要になるからです。
具体的には、「ファイル操作（ダウンロード/アップロード）」や「レンタルサーバーの環境設定」のスキルが必要になります。
- SSL設定（http→https）
- 独自ドメインの紐付け
- WordPressのインストール
レンタルサーバーに関するスキルは、WordPress環境が利用できるレンタルサーバーを自分で契約して触ってみるのがオススメです。
※どのレンタルサーバでも月額1000円程で契約できます。
下記の記事にて詳細に解説していますので、ぜひ参考にしてみてください。
案件によっては、コーディングだけの場合もありますが、サイト公開まで含めて依頼される案件も多いです。
TERU案件を依頼する側から考えても、サイト公開まで丸っと依頼できるのは助かります。
STEP2：WordPressの基礎を学ぶ
HTML/CSSの基礎を身につけたら、次にWordPressの学習に入ります。
結論として、WordPressを仕事にするためには、オリジナルテーマの開発が必須です。
なぜなら、ほとんどの案件作業が既存テーマでは対応できず、オリジナルテーマを開発する必要があるからです。
一番有効な勉強方法は、コーディングで練習したサイトをWordPress化する事です。
HTML/CSSで作成した静的サイトをWordPressの管理画面使って更新できるサイトにすることです。
WordPress化することで、コーディングの知識がない人でも管理画面から簡単にサイト更新を行うことが可能です。
WordPress化するためには、オリジナルテーマの開発方法を学ぶ必要があります。
テーマ開発の情報はネット上にも数多くありますが、体系的に網羅されたサイトは少ないので有料教材で学習するのがオススメです。
基礎的な知識から高度なカスタマイズまで網羅的に学習でき、一般的な受託案件の対応であれば下記の講座を学習するだけで十分対応できます。
TERU僕も上記の教材を利用しました。
STEP3：WordPressのよくあるカスタマイズを学ぶ
テーマ開発ができるようになったら、制作案件でよく使うカスタマイズを学びましょう。
コーポレートサイトやLPサイトなど、一般的な受託案件で使用するカスタマイズ方法は、ある程度決まっています。
具体的によくあるカスタマイズ方法は下記の3点です。
もちろん上記以外にもカスタマイズは数多くありますが、使用頻度が少ないカスタマイズについては、案件で出てきたタイミングで調べて学べば問題ありません。
TERU問題解決能力は副業やフリーランスで仕事をする上で必須です。
スライダー機能の追加
スライダー機能、メインビジュアルや商品紹介など、案件作業で使用頻度が多い機能の一つです。
スライダー機能の作成方法は、大きく2パターンあります。
- プラグインを使った方法
- JavaScriptライブラリを使った方法
「MetaSlider」というプラグインを利用します。
利用方法はすごく簡単で、出力方法もショートコード を貼り付けるだけです。
具体的な設定方法は、以下のサイトが参考になります。
・Meta Sliderの設定と使い方：スライダーの設置
SwiperというJavaScriptライブラリを使用します。
数行コードを記載するだけで利用可能です。
具体的な設定方法は、以下のサイトが参考になります。
・Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説
シンプルなメインビジュアルのスライダーはプラグイン（MetaSlider）を利用して対応すれば問題ないと思います。
ただ、Swiperが使えれば、WordPressを使わないサイトやスライダーの細かい設定に対応可能なので身につけておくのがオススメです。
お問い合わせ機能の追加
お問い合わせ機能は、コーポレートサイトに必須の機能なので対応できるようにしておきましょう。
お問い合わせ機能の作成方法も大きく2パターンあります。
- プラグインを使った方法
- Googleフォームを使った方法
「Contact Form 7」もしくは「MW WP Form」というプラグインを利用します。
どちらにお問い合わせ機能の有名なプラグインです。
カスタマイズ性が高くデザインを自由に変更できます。
具体的な設定方法は、以下のサイトが参考になります。
・初心者向け！Contact Form 7の基本やおすすめの使い方まとめ
・【画像解説】MW WP Formの使い方を初心者向けに解説
Googleの無料で利用できるサービスの一つで、簡単に問い合わせフォームを作成できます。
フォームの項目はカスタマイズ可能だが、デザインはある程度型が決まっています。
具体的な設定方法は、以下のサイトが参考になります。
・【初心者でも分かる】Googleフォームの基本を徹底解説！無料で簡単にアンケートフォームを作成しよう
簡易なLPサイトやブログの問い合わせにはGoogleフォームで問題ないと思います。
コーポレートサイトでは、デザインやブランドイメージを統一するためにプラグイン使った方法が多いです。
ちなみに本ブログの「お問い合わせ」はGoogleフォームを利用しています。
TERU30分程度で作成できました。
カスタム投稿の実装
カスタム投稿は、WordPressにデフォルトで用意されている「投稿」機能とは別で、コンテンツを動的追加していく機能のことです。
一般的なコーポレートサイトでは、デフォルトの投稿は「お知らせ」として使い、その他の更新コンテンツ（「業務内容」、「実績」等）でカスタム投稿を利用する場合が多いです。
カスタム投稿の具体的な利用方法については下記の記事で説明しています。
WordPress案件を獲得するために、無駄を省くことが重要
ここでは、僕の経験を踏まえて、今振り返るとWordpress初学時に勉強する必要なかったなと思うスキルを2つ説明します。
どのスキルもあって困ることは無いですが、効率よくWordpressで仕事することを考えた時に身につける優先順位が低いものになります。
- 既存テーマの操作
- 頻出が少ないプラグイン機能
1つずつ説明しますね。
既存テーマの操作
既存テーマのカスタマイズ無しパターンですが、コーディングがないので全て管理画面からの操作になります。
正直、誰でも簡単にできる為、案件作業としてはほとんど無いです。
半日も操作すれば誰でもできるようになるので、管理画面からの操作をやり込んで覚えるようなことはやめましょう。
※なんとなく大枠で理解するレベルで大丈夫です。
とにかく学習の優先順位は下げましょう。
頻出が少ないプラグイン機能の学習
頻出が少ないプラグイン機能の学習も初学時には必要ないと思います。
具体的に以下のようなプラグインです。
- 多言語化対応プラグイン
- 会員機能プラグイン
- 予約機能プラグイン
僕もWordWordPress学習しはじめの頃は、もっと知りたいと色々と手を出して、多言語化対応プラグイン（Bogo）や予約機能プラグイン（Booking Package）を自分のローカル環境にインストールして学習してましたが、今振り返ると案件で利用する機会がほとんどありませんでした。。
※僕の感覚ですが、上記のような機能が必要なサイト案件は５０件に１件ぐらいです。
制作費用も１００万近くになってくるので駆け出しのフリーランスで対応する機会は少ないです。
案件受注した時に調べて学んで行くやり方で全然問題ありません。
WordPressの関連記事
WordPressの案件作業を行う場合、開発環境を準備する機会は多いです。
僕が普段WordPress案件を行う際に利用しているツールの紹介です。
今回は、WordPressで仕事をするために勉強するべき事と初学者の間違った勉強について説明しました。