Webデザイナーに必要なWordPressのスキルが身につく勉強法

この授業では次のような方におすすめです。

この授業を受けると、これらの疑問を解消し、WordPress案件の仕事をすることができるようになります。

どうぞ最後までご覧になってください。

CMSとは何か

CMSとは、コンテンツ管理システム（Contents Management System）の略でWebコンテンツを管理するシステムのことを指すのがほとんどです。

（他にもDAMというデジタルアセット管理のシステムや、CCMSというコンポーネントコンテンツの管理システムもあって、これらを総称してCMSと呼ぶこともあります。）

このコンテンツ管理システムの「コンテンツ」とは、Webページのことだったり、ブログ記事のことだったりいろいろありますが、今あなたがみているこの記事も「コンテンツ」に当てはまります。

古い方法でWebサイトを構築するのであれば、静的HTMLで普通にコーディングして公開すれば言い訳ですが、もしも100件くらい記事があって、全ページのヘッダーメニューを変える場合どうすればいいと思いますか?

この場合、100件のHTMLファイルを編集していくとなると大変です。

CMSは、ヘッダーやフッター、サイドバー、そしてコンテンツ部分などを別パーツとして保存してPHPを使って表示するページ（コンテンツ）によってパーツを入れ替えて適切な表示をさせます。

Webデザインが楽になるCMS!4つのメリットや選ぶポイントを解説この授業は次のような方におすすめです。 ・専門知識がないんだけれどWebサイトを作りたい方 ・Webサイトを作りたいんだ...

WordPressとは

WordPressとはCMSの一種で、オープンソースで公開されているブログシステムのことを言います。

Webサイトを作るための専門的な知識がなくても、ブログのような感じで画像や文章を入力することで、本格的なWebサイトを作ることができます。

WordPressにはいろいろな機能が搭載されているのですが、インストールして利用することは無料でできます。

そして、「プラグイン」という追加プログラムをインストールしてカスタマイズすることで、機能を拡張することができます。

WebデザイナーにWordPressのスキルは必要?

 

WordPressにはPHPの知識が必要ですが、PHPは、エンジニアの領域なので、必要ないようにも思えますが、どうして特に最近はWebデザイナーにWordPressのスキルがあった方がいいのか、次のポイントについてお話していきます。

仕事が取りやすくなり収入が増える

WordPressで作られたWebサイトは、世界のWebサイトの3分の1を占めていることもあって、WordPressを使ったWebサイトの構築案件も多くなってきています。

WordPressの構築スキルを身につけることでデザインなしのサイト構築案件も単発で受けることができるようになるので、取り組める仕事の量が増えて、仕事が取りやすくなります。

Webデザイナーとしてのキャリアが広がる

WordPressサイトの構築には、PHPの知識や、データベースの知識が必要になります。

エンジニアに転職まではしなくても、エンジニアのスキルも身につけたWebデザイナーになると、仕事のキャリアが広がります。

WordPressでできる5つのメリット

ブログのように簡単に記事が書けて更新ができる

コーディングの知識がなくてもブログのような感覚で簡単にページを作ったり更新をすることができます。

おしゃれなデザインのテンプレートが豊富にある

何千種類以上のカスタマイズオプションの中から自分の目的に合ったテーマ（デザインテンプレート）が見つかります。

カスタマイズが自在で目的に合った機能を追加できる

「プラグイン」と言う、機能を拡張するプログラムを利用することで、Webサイトの目的に合った機能を追加することができます。

例えば、ECサイトに必要な「カート機能」「カード決済」やスポーツジムに必要な「予約システム」や「会員システム」などの機能も追加することができるなど、いろいろなサイトの構築が可能です。

複数人でサイト運営ができる

記事の更新は外部のライターに依頼して、管理者は社内の運用担当者のみといった風に、Webサイト運営に複数人が関わる場合にも、トラブルを防いで快適にサイト運営をすることができます。

SEOに有利なWebサイトが簡単にできる

WordPressの基本的な構造はSEO向けにできている上、プラグインによってもSEO対策を強化することができるので、SEOに強いサイトを簡単に作ることができます。

無料・有料のテーマが用意されているのですが、多くのテーマはSEO対策をある程度行った状態で配布されているので、それを利用することで、Webデザインにかかる作業時間が短縮できる上に効率的なSEO対策ができます。

そして、「Jetpack」と言う無料で使えるSEO対策のプラグインもWordPressからダウンロードすることができます。

WordPressの構築の流れ

①Webサイトの設計とWebデザインの技術

CMSを使ったWordPressサイトですが、Webサイトであることに変わりはありませんし、大規模なWebサイトになることが多いです。

なので、デザインを始める前のサイト要件設定やワイヤーフレーム設計が特に重要になります。

Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説この授業は次のような方に是非受けてもらいたいです。 ・Webサイト制作のためにワイヤーフレームを作ることになった方 ・ワ...

②Webデザインのスキル

Webサイト設計ができたら必ずデザインに落とし込みましょう。

ワイヤーフレーム設計をしているときには気がつかなかった問題点に気づくことができます。

ユーザーにとって使いやすいWebサイトを作ることが大切です。

また、WordPressのテーマを利用したサイト設計の場合は、デザインの段階が省かれることも多いです。

③HTMLやCSSなどののコーディング

サイトデザインができたら、Webサイト実装を開始します。

案件にもよりますが、オリジナルのワードプレステーマを作る場合は、いきなりPHP実装ではなく、まずはHTMLやCSSのコーディングを行って、まずは各ページに表示するのに必要なパーツを作成するのが一般的です。

Webデザイナーはコーディングの知識があった方が有利な理由についてこの記事は次のような方に向けて書いています。 ・そもそもコーディングとはなんなのかを知りたい ・Webデザイナーにコーデ...

【Webデザイン初心者】のためへWebデザインに欠かせないHTMLこの授業は次のような方におすすめです。 ・Webデザイン初心者で、HTMLの基礎について知りたい方 ・HTMLを初歩から...

Webデザイン初心者の方のためにCSSの基本について解説しました!この授業は次のような方におすすめです。 ・コーディングをすることになった新人Webデザイナーの方でCSSについてを知りたい方 ...

Webデザインに動きをつけるJavaScriptの基礎と学習サイトこの授業は次のような方にぜひ受講してほしいです。 ・Webサイトに動きをつけるJavaScriptについて知りたい方 ・...

④PHPファイル化とオリジナルテーマの作成

作ったHTMLファイルを元に、PHPファイル化を進めていきます。

作成した投稿やブログページを一覧ページに表示させる機能はこのタイミングで実装します。

案件によっても違いますが、大規模なWebサイトなどになると、膨大なファイルの数になることもありえます。

⑤テストと修正をしてからOKなら公開する

WordPressテーマの作成が一通り終わったら、テスト用のサーバー、またはローカル環境で動作確認を行います。

実際に動かしてみると問題点も出てくることが多いです。

テストと修正を繰り返して、問題がなければ本番環境のサーバーへアップロードして後悔します。

初心者デザイナーの「WordPressできます」には注意

クラウドソーシングにはWordPressを使ったWebサイト構築の案件も多いのですが、特に初心者さんからの提案で、「WordPressできます」と言う文言が見受けられることがあります。

ここのところの問題にちょっと触れていきたいと思います。

「WordPressできます」には次の2種類の意味があります。

既存のWordPressテーマを使ってWebサイトを作れる

WordPressの外観を形成する有料・無料のテーマがあるのですが、有名なものでは「JIN」や「DIVER」「STORK」「SANGO」といったものがあります。

目的に合ったテーマを使うことで誰にでも簡単にWebサイトを作ることができます。

しかし、それだけでWordPressができますという人がいるのですが、それは恥ずかしいのでやめましょう。

オリジナルのWordPressテーマを作ってゼロから作成できる

既存のテーマを使ってWebサイトを作ってもいいのですが、クライアントのニーズが満たされることは必ずしもとは限りませんし、満たされることは少ないです。

こういった理由でオリジナルテーマと既存のテーマとの間では報酬額に大きな開きがあります。

そのため、これからWordPressの勉強をしようと思っているのであれば、クライアントが求めるものにあったサイト環境を、完全にオリジナルのデザインで最初から作成することを目標にして勉強を進めていくのがおすすめです。

本当の意味でWordPressできますと言えるようになるために

学習サイトで学ぶ

学習サイトは、パソコンをみて勉強することになるので、WordPressを勉強しながら操作すると言うように、並行して学びやすいところがメリットです。

また、スマートフォンを使うことで、隙間時間を利用して勉強することができます。

世界一わかりやすいWordPress

一番のおすすめは、この世界一わかりやすいWordPressと言うブログを見ながら学習することです。

WordPressテーマを作る全工程がわかりやすい上に、完全無料で公開されています。

このブログでは、一度もコーディングをしたことがない人を想定にして、WordPressテーマ制作の基本から詳しく解説されています。

書籍化もされているので、WordPress学習を考えている方は、このブログをブックマークに入れて、いつでも学習できるようにしておきましょう。

ドットインストール

WordPressを無料で学ぶもう一つの手はドットインストールでWordPress講座の試聴をすることです。

ただ、公開されてから7年以上で古くなっていますし、後半の動画をみるには有料会員登録をする必要もあります。

本で学ぶ

WordPressを学べる本はたくさん出版されていますが、本を使った勉強は、1冊で幅広く知識を学ぶことができますし、情報が集約されているので、後から復習しやすいところがメリットです。

いちばん優しいWordPressの教本

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書

 

勉強会に参加して学ぶ

勉強会に参加すると、講師に不明点を質問できたり、勉強仲間ができるといったメリットがあります。

最近では、オンラインでのワードプレスの勉強会も増えてきていて、近くで勉強会がない場合などにおすすめです。

Webデザイン初心者におすすめセミナーの3つと選び方のポイント5つこの授業は次のような方におすすめです。 ・これからWebデザインの仕事をしていきたい初心者の方 ・自分に合ったWebデザ...

プログラミングスクールで学ぶ

WordPressを学ぶには、経済的に余裕がある場合には、プログラミングスクールで学ぶこともおすすめです。

しかし、スクールのカリキュラムによっては、WordPressの基本操作しか教えてくれないところもあるので注意が必要です。

ゼロから WordPressテーマ作成を教えてくれるスクールを紹介しておくね。

TechAcademy（テックアカデミー） WordPress講座

TechAcademyでは WordPress講座も行われています。

完全オンラインで受講することができ、ゼロから WordPressテーマを作成できるようになるカリキュラムです。

現役エンジニアから学ぶならテックアカデミー

 

WordPressができるようになるための8ステップの勉強法

①まずWordPressで何をやりたいかを明確にする

目的によって勉強の方向性も変わってきますが、考えられる目的として多いのが次の3つです。

最後に挙げたような、Webサイトの運営をしてブログ記事の作成をしたい場合には、デザインに特別なこだわりがないようであれば、プログラミングの勉強は必要ありません。

②WordPressに必要な言語の基礎を身につける

覚えておくべき言語は次の3つです。

Webサイトに必須のHTMLとCSS

 

HTMLは、Webサイトに表示するコンテンツを記述する言語す。

Webサイトの骨格を作っていくのはHTMLで、 WordPressを作るのに欠かせないスキルです。

そして、Webサイトの見た目を整えるのはCSSと言う言語です。

CSSはHTMLとセットで使われていて、Webサイトやテーマを作成する上で、CSSの勉強も必須です。

【Webデザイン初心者】のためへWebデザインに欠かせないHTMLこの授業は次のような方におすすめです。 ・Webデザイン初心者で、HTMLの基礎について知りたい方 ・HTMLを初歩から...

JavaScriptで動きをつける

 

オリジナルテーマの作成だけが目的であればジャバスクリプトは必要ありませんが、将来的にスキルアップすることも考えて、基礎は学んでおいた方がいいです。

Webデザインに動きをつけるJavaScriptの基礎と学習サイトこの授業は次のような方にぜひ受講してほしいです。 ・Webサイトに動きをつけるJavaScriptについて知りたい方 ・...

WordPressの基礎を組み立てるPHP

 

PHPはウェブ開発で需要が高い言語なので、Web制作を仕事にしたいのであれば、しっかり勉強しましょう。

WordPressの多くの部分はPHPで作られていて、テーマをカスタマイズする時にもPHPの基礎知識が必要になります。

③WordPressの基礎を理解する

Webサイトの運営だけが目的の場合でも、WordPressの基本的な使い方の勉強は必要です。

また、テーマのカスタマイズだけが目的でも、練習用の環境を作る時などには、構築手順を頭に入れておいた方が良いです。

④WordPressをする環境を作る

WordPressの基礎知識を学んでモノにしたら、実践するための環境構築を行いましょう。

とはいっても、最初から本番環境で実践するのは、おすすめできません。

まずは、作業用のパソコンの中に、練習用のローカル環境を構築して慣れていくようにしましょう。

ローカル環境は、第三者からみられる危険性も少ないのでおすすめです。

⑤WordPressで作られた優れたサイトを模写する

慣れるまでは、Webサイトの模写をたくさんして、コツを掴むのがおすすめです。

模写をしてプロが作ったWebサイトを自分で再現することで、魅力的なデザインを作るポイントも学ぶことができます。

最初はシンプルなものの模写から始めて、少しずつ複雑なWebサイトに挑戦していくと良いでしょう。

Webデザインの練習に効果的な模写の6つの流れと注意点について解説この授業は次のような方におすすめです。 ・模写をしてWebデザインのどのようなことを学べるか知りたい方 ・Webデザイン...

日本のWordPressのリンク集

⑥WordPressでオリジナルのサイトを作る

 

具体的には、次の3つの手順で進めていきましょう。

⑦自作で作ったWordPressを運用してみる

記事を作成して投稿したり、デザインのカスタマイズなどを行って、Webサイトを充実させていきましょう。

特にWordPress制作を仕事にしていきたい方にとって、ここは重要なステップです。

Webサイトやテーマを使う顧客の立場を考えることで、客観的に自分の成果物を見ることができて、使いづらい部分などにも気がつきます。

⑧WordPressの案件にチャレンジする

WordPressでの制作や運用スキルが身に付いたら、自分のスキルを確認することも兼ねて、簡単なWordPress制作の案件にチャレンジしてみましょう。

実際の仕事の流れを把握することもできますし、実績作りにもなります。

日本最大級のクラウドソーシング「クラウドワークス」

 

WordPressで作ったWebサイトの公開をするために必要な3つの作業

Webサイトを一般公開するには、実際のWebサーバーを利用することが必要です。

ドメインとは、インターネット上の住所を人が認識しやすいように体系化したもののことをで、具体的には、URLで「https://」の直後に付ける文字列を指します。

無料で取得できるドメインもありますが、所有権や利用条件等の確認が避けられませんし、仕事で使う場合には、有料の独自ドメインを取得した方が安全性は高いです。

WordPressのカスタマイズについてのおすすめ記事

まとめ

WordPressができます、と言えるようになるまでは、WordPressの有料テーマを使って作るのではなく、オリジナルのテーマを1から作れるようになる必要があることがわかりましたね。

そして、それを無料で学べる学習サイトについてもご紹介しました。

オリジナルのWordPressテーマが作れるようになったら、報酬も多くなります。

あなたもこの授業で学んだことを実践してみてください。

私たちは頑張るあなたを応援しています。