駆け出しフリーランスWebデザイナーのためのWordPress学習ガイド
WordPressを独学で学び始めよう思っても、プログラミングの知識が必要だと聞いたり、解説サイトのコードを見たりして、ハードルが高いと感じた方も多いと思います。
プログラミングの知識ゼロ、WordPressを使ったことのない状態からでも始められる、WordPress制作の学習方法を紹介します。
WordPress対応Webデザイナーになろう
Webデザインに興味を持ち、プロのWebデザイナーを目指して学習を始めると、多くの方が早い段階で「WordPress」という名前に出会うことになるでしょう。Web制作の現場では欠かせないこのツールですが、学び始める前に、その膨大な機能やプログラミングの必要性に圧倒されてしまうかもしれません。実際、テーマのコードやプラグインの設定を目にすると、自分にはまだ早いと感じたり、難しそうだと躊躇してしまったりする方も少なくありません。
この記事では、初心者でも無理なく学び進められるように、WordPress制作の学習方法・順序を紹介します。WordPressの基礎から、プロとして仕事を得られるようになるまでの3ステップに分けて解説します。更に、後半では基本的なWordPress制作スキル獲得後、プロのWebデザイナーとして活動するために必要なことも紹介していきます。一つずつクリアしていけば、WordPress制作スキルを身につけることができ、プロとしての一歩を踏み出せますよ。
WordPress学習の3STEP
Web制作の条件としてWordPressのスキルが求められることが多いため、これからWordPressを学びたいと考えている方も多いでしょう。この記事では、駆け出しフリーランスWebデザイナーがWordPressを使って実際にサイトを作成・リリースし、仕事を得られるレベルになるためのステップとポイントを紹介します。
1. WordPressの基本機能を理解する
WordPressとはどんなものか、クライアントに聞かれた時にも説明できるように、概要や基本的な操作方法を知りましょう。
WordPressの特徴・利点を把握する
WordPressは世界で最も利用されているCMS（コンテンツ管理システム）であり、直感的な操作でサイトの作成や管理ができる強力なツールです。ブログだけではなく、コーポレートサイトやメディアサイト、ECサイトなど幅広い制作に活用できます。
WordPressはオープンソースで無料で使用でき、プラグインやテーマによって自由にカスタマイズできる柔軟性が最大の特徴です。また、記事・ページ作成などがノーコードでできることからも、クライアントの需要が高いです。
ローカル環境にWordPressをインストールする
次に、WordPressのインストール方法と初期設定を学びましょう。
WordPressは下図のような仕組みで動いているので、ダウンロードしてきたファイルをブラウザで開いても、全く機能しません。そこで、ローカル環境、自分のPCの中だけでWordPressを動作させる準備をする必要があります。
ローカル環境にWordPressをインストールすることで、自分のPCの中だけで安全にサイト制作を練習できます。これにより、WordPressの操作を試したり、カスタマイズをしたりと、自由に試行錯誤ができる環境が整います。
ローカル環境の構築には「Local ( Local by Flywheel ) 」や「XAMPP」「MAMP」などのツールを使用します。初心者でサクッとWordPressのローカル環境用意したい方は「Local」がオススメです。ローカル環境構築とWordPressインストールが一気に出来ますよ。
Localが上手く動かなかった、後々WordPress以外でもデータベースを使いたい（Node.jsの学習をする、など）方は、「XAMPP」もしくは「MAMP」の利用がおすすめ。こちらはデータベース作成→WordPressインストールと段階的に作業していく形になるので、Webサーバー上にWordPressをインストールするための練習にもなります。
無料講座
WORDPRESS基礎講座【前編】
（※ Macでよく使われるMAMPを使った環境構築）
無料講座
XAMPPで作るWordPress開発環境講座
（※ Windows 向け）
WordPress管理画面を把握する
まずは、WordPressの管理画面を把握することが大切です。管理画面のダッシュボードは、サイト全体の管理を行う中心的な場所であり、ここから投稿やページの作成、テーマやプラグインの管理など、さまざまな操作を行います。
各メニューの役割、どの操作がどこから行えるのかを、大体把握しておきましょう。使っているうちに勝手に覚えていく部分も多いので、ガチガチに覚えようとしなくてOK。遊んでみるくらいの感覚で、気軽に触ってみましょう。
WordPress管理画面の機能と使い方【初心者向け】
https://saishono.blog/how-to-use-dashboard/
WordPressで記事を投稿してみる
実際にWordPressで記事を投稿してみましょう。投稿作成画面では、タイトルや本文を入力し、カテゴリやタグを設定することができます。メディア（画像や動画）を挿入する方法や、公開設定を調整する機能などを学びましょう。これから行うテーマのカスタマイズ・テーマ制作などでも、投稿やページを使って表示確認をするので必要になります。
【初心者向け】ワードプレス管理画面の使い方（投稿・ページの違いなど）
https://www.xserver.ne.jp/blog/about-wordpress/
2. WordPressサイトの基本カスタマイズ
テーマの適用とカスタマイズ
WordPressのテーマとは、Webサイト全体のデザインやレイアウトを決める「テンプレート」のようなものです。テーマを変更すると、サイトの見た目が大きく変わり、例えば色やフォント、ページの配置などが一新されます。テーマは無料や有料のものがあり、インストールするだけで簡単にサイトのデザインを変更できます。
テーマの選定とインストール
WordPressを使うのが初めての方、コーディングにあまり自身がない方は、まず既存のテーマを利用して、サイトの外観を自分好みにカスタマイズするスキルを身につけるのがオススメです。実際のお仕事でも、小規模な制作ではオリジナルテーマ開発は無し（既存テーマのカスタマイズのみ）というケースが結構あります。
練習で使うのであれば、無料テーマをインストールしてみると良いでしょう。
テーマは何を使っても良いですが、下記の「Cocoon」は公式のマニュアルも手厚く、利用者が多いため公式以外のカスタマイズ関連情報も多いので、進めやすいと思います。
Cocoon | WordPress無料テーマ
https://wp-cocoon.com/
子テーマを作成してカスタマイズ
既存のテーマを直接カスタマイズすると、テーマのアップデート時に変更内容が失われる可能性があります。これを避けるために、子テーマを作成し、その上でカスタマイズを行いましょう。子テーマを使うことで、アップデートに影響されずにカスタマイズを維持できます。
子テーマを作ったら、まずは取っつきやすいCSSから編集してみましょう。
子テーマ内にあるstyle.cssで、背景色やフォントサイズの変更など、簡単なデザインの変更から始めるのがおすすめです。
WordPressの子テーマとは？作り方を解説【初心者必見】
https://www.webdeki.com/column/5501/
プラグインのインストール・活用
WordPressのプラグインとは、サイトに新しい機能や機能を追加するための「拡張機能」のことです。例えば、専門的な知識がなくてもお問い合わせフォームを設置したり、SEO対策を強化ができます。プラグインのインストールはボタンひとつで使えるため、初心者でも簡単にサイトの機能を強化できます。
Contact Form 7でお問い合わせフォームを作成
お問い合わせフォームを簡単に作成できる「Contact Form 7」というプラグインを使ってみましょう。このプラグインを使えば、コードを書かずにフォームを設置でき、訪問者からの問い合わせをスムーズに受け取ることができます。
【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう
https://form.run/media/contents/website-lp-creation/contact-form-7/
ちなみに、ローカル環境の場合だと、Wordpressのメール送信テストが出来ません。
Localを使用している方は付属しているMailHogという機能を、XAMPPやMAMPの方は「WP Mail SMTP」などのプラグインを利用する必要があります。
[WordPress] ローカル環境でメールの送受信テスト Local
https://cocotiie.com/wordpress-local-mail/
「WP mail SMTP」を使い、ローカル環境でWordPressのメール送信テストをする方法
https://hisa-himi.site/coding/wordpress/wp-mail-smtp/
SEO対策用プラグインの導入
SEO（検索エンジン最適化）は、サイトの検索順位を上げるために重要です。
WordPressサイトも基本的なSEO対策は必要、そのためのプラグインもたくさんあります。利用者数が多い「 All in One SEO」もしくは「Yoast SEO」を導入して、必要な設定の確認など予行練習をしておくと良いでしょう。
Yoast SEOの使い方・設定方法をかんたん解説【図解】
https://wpmake.jp/contents/plugin/yoast-seo/
3. より高度なWordPressサイト制作・公開
ここまで学んだことを活かして、実際に公開するサイトを作成してみましょう。ポートフォリオサイトや、友人や家族のための簡単なウェブサイトを作るのも良い練習になります。
PHP・テンプレートタグを使ったカスタマイズ
WordPressはPHPで動いているため、本格的なカスタマイズにはPHPの基礎知識と、テンプレートタグ（WordPress固有のタグや関数）の理解が必要になります。プログラミングに自信がなくても、少しずつ慣れていくことが大切です。まずは簡単なコードから始めて、徐々に複雑な機能を追加できるようになると良いでしょう。
慣れてくると、自分で完全にカスタマイズしたテーマを作成できるようになります。これにより、デザインや機能に制限されることなく、自由にサイトを設計・開発するスキルが身につきます。サイトをより効果的にカスタマイズするためにも、PHPとテンプレートタグを使って、より自由にサイトをデザインするスキルを磨きましょう。
テンプレートファイルを理解する
テンプレートファイルは、WordPressテーマの中で各ページのレイアウトや構造を定義しているファイルです。例えば、header.phpはサイトのヘッダー部分、single.phpは投稿ページのデザインを担当しています。投稿ページにある、投稿日時やサイドバーの位置を変えたかったらsingle.phpファイルを編集するわけです。
全部覚える必要はありませんが、主要なテンプレートファイルと優先順位は把握し、必要時に調べられるようにしておきましょう。
WordPressの表示ページ順位。テンプレート階層と優先順位早見表。
https://wordpress-web.and-ha.com/template-hierarchy/
※ 既存テーマでカスタマイズをする場合、各ファイルの編集は必ず子テーマ側で行いましょう。子テーマにないファイルは、親テーマからテンプレートファイルをコピーすればOK。
他のテンプレートファイルの編集方法ですが、編集したいテンプレートを親テーマから子テーマにコピーし、子テーマにコピーした方のテンプレートを編集してカスタマイズするだけです。
WordPressの動作的には、子テーマに存在するテンプレートは子テーマのものが読み込まれ、存在しないものは親テーマのものが読み込まれます。
テンプレートファイルの編集
テンプレートファイルを編集することで、サイトの外観や配置を自由にカスタマイズできます。
その時に必要となるのが、テンプレートタグ（WordPress固有のタグや関数）。ただし、これは覚えようとしなくて良いです。ファイルに書かれているタグと表示画面を見比べると何となく分かるものが多いですし、わからないものは検索をかければ大体でてきます。
以下のような基本・頻出コードを紹介しているサイトさんが結構あるので、活用させていただきましょう。表示させたいものの逆引き的な使い方もできて便利です。
はじめてのWordPressカスタマイズ！よく使う基本コード
https://hon-dana.org/wordpress/wp-basic-code/
なお、公式の日本語版リファレンスは現在ありません（翻訳進行中とのこと）。
英語版はWordPress Developer Resources、Theme Handbookの“Theme Basics”下の項目から確認ができます。
Theme Basics – Theme Handbook
https://developer.wordpress.org/themes/basics/
functions.phpにコードを追加
テーマのfunctions.phpファイルは、WordPressサイトに独自の機能を追加するための特別なファイルです。このファイルにPHPコードを追加することで、サイトにカスタム機能を実装できます。簡単なPHPコードを少しずつ書いてみることで、サイトの機能を柔軟に拡張するスキルが身につきます。
例えば、管理画面に特定のオプションを追加したり、ブログ記事に最終更新日を表示させたり。いきなり自分で調べつつゴリゴリ書こうとすると難易度が一気に上るので、見本コード付きのサイトを参考にやってみてください。編集前のバックアップ、マストです！
最初にやっておきたいfunctions.phpの基本設定
https://qiita.com/makkie/items/edbde858f5daa3522114
WordPressのfunctions.phpとは？編集例と反映されない場合の対処法
https://wakka-inc.com/blog/764/
実際のサイトをリリースする
ドメイン・レンタルサーバーの取得
サイトをインターネット上で公開するためには、まず独自のドメイン名とレンタルサーバーを取得する必要があります。ドメイン名はWebサイトの住所のようなもので、「お名前.com」などのサービスを利用して取得できます。
レンタルサーバーは、Webサイトのデータを保存し、インターネット上に公開するための場所で、「Xserver」「さくらのレンタルサーバ」などのサービスがよく使われます。これらを設定することで、自分のWebサイトを公開する準備が整います。
下記講座では、さくらのレンタルサーバでドメイン・サーバーを契約し、WordPressサイトを公開するまでの流れを解説しています。
無料講座 / ログイン不要
Xserverでも「サーバー」と「ドメイン」両方をまとめて契約できます。
ドメインとサーバーは別々のサービスを使っても問題ありませんが、同系列のほうが更新・支払いなどの管理は楽だと思います。
エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方
https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php
WordPressをサーバーにアップロード
ローカル環境で作成したWordPressサイトを、インターネット上で公開するためにレンタルサーバーに移行します。この移行方法には2つの主な方法があります。
- WordPress移行プラグインを使って簡単にサイトを移行する方法です。
- FTPソフトを使ってローカル環境からサーバーにファイルを手動でアップロードする方法
移行プラグインを使った方が、早く楽に設定できます。
代表的なプラグインとしては「All-in-One WP Migration」があります。
Local の WordPress を本番環境に移行する簡単な方法
https://www.satokobo.net/1338
ただし、容量制限があってフル移行できなかったりするケースもあり、FTPソフトで手動更新する場合もあります。コードの修正や更新時にもFTPは使うので、こちらの方法も押さえておくと良いでしょう。
WordPressにFTPでファイルをアップロードする方法
https://fox-wp.com/how-to-use-ftp-to-upload-files-to-wordpress/
サイトの最終調整と公開
サーバーにアップロードした後、サイトが正しく表示されているか確認し、必要に応じて微調整を行います。リンクが正しく機能しているか、画像が適切に表示されているかなど、細部を確認しましょう。
すべてのチェックが完了したら、サイトを正式に公開します。
これで、世界中のユーザーがあなたのサイトにアクセスできるようになります。
サイト速度を改善するキャッシュプラグインの導入
サイトの表示速度は、ユーザーエクスペリエンスに大きな影響を与えます。「WP Super Cache」や「W3 Total Cache」といったキャッシュプラグインを導入して、サイトの表示速度を最適化しましょう。
ローカル環境で導入すると動作が重くなったり、更新が反映されなかったり、という問題が起こる可能性があるので、こちらはレンタルサーバー側のWordPressにだけ入れておくのがおすすめです。
初心者のためのWP Super Cacheのインストールと設定方法
https://estival.jp/beginner-guide/wp-super-cache-for-beginners/
フリーランスとしての活動を開始する
サイトを公開したら、それを活用して仕事を得る準備を始めましょう。
クライアントからの信頼を得る下地を整えたり、自分のスキルをより向上させる努力も必要です。
自分を売り込む
ポートフォリオサイトを活用する
自分のスキルをアピールするために、ポートフォリオサイトをしっかりと充実させましょう。これまでに作ったサイトや提供できるサービスをわかりやすく掲載して、自分の実力を見てもらえるようにしましょう。
ポートフォリオサイトにブログを設置して、Webコーディングに関する知識や経験を記事として発信するのも有効です。これによって、自分の専門性をアピールできるだけでなく、SEO効果も期待できるので、サイトへの訪問者も増えるかもしれません。
フリーランスマーケットプレイスに登録
「Lancers」や「クラウドワークス」といったフリーランスマーケットプレイスに登録して、小さな案件から取り組んで実績を積んでいきましょう。少しずつ経験を重ねることで、大きなチャンスにもつながります。
【未経験・初心者OK】Webデザインのクラウドソーシングサイトおすすめ7選！現役デザイナーが厳選
https://desacari.net/web-design-crowdsourcing/
提案書や見積もりの作成
クライアントに自分のスキルや提供するサービスをわかりやすく伝えるために、提案書や見積書を作成しましょう。これによって、クライアントにプロフェッショナルな印象を与えることができます。
フリーランスのための【1時間で書く】提案書作成の6ステップ
https://biz.moneyforward.com/blog/16588/
SNSを活用した自己PR
TwitterやInstagramなどのSNSを使って、自分の作品や日々の学習内容を発信してみましょう。これにより、潜在的なクライアントへのアピールができるだけでなく、同業者とのネットワーク作りにも役立ちます。
【フリーランスのSNS運用】案件受注のためのコツもご紹介！
https://www.internetacademy.jp/it/management/it-basic/sns-freelance.html
継続的な学習とスキルアップ
WebデザインやWordPressの世界は常に変化しています。
常に新しい技術を学び続けることで、フリーランスとしての価値をさらに高めていきましょう。
最新技術やトレンドを意識する
Web技術は常に進化しているため、最新の技術やトレンドを学ぶことが非常に重要です。信頼できる情報源を見つけて、定期的に新しい知識を取り入れる意識が必要です。業界の変化に柔軟に対応し、スキルを常にアップデートしていきましょう。
WordPressも、大規模バージョンアップが定期的に行われ、非推奨になるテンプレートタグなどが結構あります。新しい機能や、現在推奨されるコードの書き方などを、定期的にチェックしていきましょう。
得意なところを伸ばしていく
従来のWordPress制作・WordPress案件と言うと、基礎から始めて、PHPの本格的な学習という流れが主体でした。
しかし、最近はフルサイト編集（サイトエディター）が搭載されたことで、デフォルトテーマをベースに、ほぼノーコードでも自由度の高いWordPressサイトが作成できるようになっています。コーディングやフロントエンドのような方向でのスキルアップではなく、デザインを中心にスキルを伸ばしたい方は、こちらのチャレンジしても良いかもしれません。
WordPressフルサイト編集の使用方法（徹底解説）
https://kinsta.com/jp/blog/wordpress-full-site-editing/
Web制作会社さんでも「イチからオーダーメイド制作はしない」というところもあります。下記ブログ記事は、賛否両論あるかと思いますが、考えさせられる内容であり、個人的には納得できるお話でした。
https://creascien.jp/swell-creascien/
カスタマイズに多少コーディング知識が必要になる部分もありますが、がっつりコードを書いてのテーマ制作をやっていくのか、フルサイト編集ベースで制作をやっていくのか、どちらに力を注ぐか考えてみると良いと思います。
コミュニティに参加する
WordPressやWebデザインに関するオンラインフォーラムやコミュニティに参加して、他のプロフェッショナルとの交流を深めるのも大切です。仲間との情報交換で、新しい発見があるかもしれません。
思ったようなWordPressサイト制作力が身につくと、Webデザインの可能性が大きく広がります。
学習を進めると困難に直面することもあるかもしれませんが、調べながら頑張ってみてください。失敗や躓きも成長につながる、どころではなく、学習段階で沢山な失敗をしていると仕事での対応力が身につきます（実体験です）。
WordPressをマスターし、あなたのデザインの世界をさらに広げましょう！
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
9月22日まで