Webデザイン

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

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

・WordPressとはどんなものなのかを知りたい

・WordPressを学ぶためにはどんなふうに勉強すれば良いのかを知りたい

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

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

目次
  1. CMSとは何か
  2. WordPressとは
  3. WebデザイナーにWordPressのスキルは必要?
  4. WordPressでできる5つのメリット
  5. WordPressの構築の流れ
  6. 初心者デザイナーの「WordPressできます」には注意
  7. 本当の意味でWordPressできますと言えるようになるために
  8. WordPressができるようになるための8ステップの勉強法
  9. WordPressで作ったWebサイトの公開をするために必要な3つの作業
  10. WordPressのカスタマイズについてのおすすめ記事
  11. まとめ

CMSとは何か

先生
先生
WordPressについて話す前にまずCMSとはなんなのかについてを先にお話しするね。

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

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

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

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

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

先生
先生
ここで役立つのがCMSなんだ。

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

HTMLファイルでページを切り替えるサイトのことを静的サイトPHPでパーツを制御してWebページをその都度動的に作るサイトのことを動的サイトと呼びます。

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

WordPressとは

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

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

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

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

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

Ann Hによる写真: https://www.pexels.com/ja-jp/photo/11022636/

 

先生
先生
結論を言うと、WebデザイナーはWordPressのスキルを持っていた方が良いよ。

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

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

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

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

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

先生
先生
Webデザインの求人でもWordPress構築のスキルを求められることが多くなってきているんだ。

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

デザイニャー
デザイニャー
仕事が増えることによって収入も増える、クラウドソーシングの案件の一覧を見ても、WordPressサイトの構築案件は、Webサイトデザインよりも報酬が高めになっているようだニャン。

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

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

先生
先生
Webデザイナーの業務とは少し違ってくるんだけれど、正しい技術を身につけることで、エンジニアの仕事もできるようになるんだ。

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

デザイニャー
デザイニャー
転職の際にも有利になりそうだニャン。

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

先生
先生
WordPressができるメリットは、次の5つだよ。

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

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

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

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

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

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

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

先生
先生
文字を入力したり画像を挿入するだけで、簡単にWebサイトを更新できるのがWordPressの人気の理由だよ。

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

先生
先生
WordPressにはデザインが豊富に揃っていたり、さまざまな機能がついているんだ。

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

デザイニャー
デザイニャー
テーマを自分のブログにインストールすることで、簡単に自分が思ったようなWebサイトを作ることができるんだニャン。

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

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

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

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

先生
先生
WordPressはユーザー管理機能も充実していて、「管理者」「編集者」などの役割に応じた権限も設定することができるんだ。

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

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

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

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

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

WordPressの構築の流れ

先生
先生
ここではWordPressの構築の大まかな流れと必要なスキルについて順番にお話ししていくね。

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

②Webデザインのスキル

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

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

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

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

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

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

先生
先生
適当なサイト設計で構築を進めていくと、後戻りが難しくなるので、慎重に確実に進めていくようにしよう。
Webサイト制作に欠かせないワイヤーフレームのポイントを詳しく解説この授業は次のような方に是非受けてもらいたいです。 ・Webサイト制作のためにワイヤーフレームを作ることになった方 ・ワ...

②Webデザインのスキル

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

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

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

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

デザイニャー
デザイニャー
ボタン一つでサイトのレイアウトや色を変更できるカスタマイズ機能がついているところも、WordPressの便利なところだニャン。

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

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

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

先生
先生
コーディングの内容は普通と変わらなくて、HTMLで骨格を作ってからCSSでレイアウトや装飾を整えていくと言うものだよ。
Webデザイナーはコーディングの知識があった方が有利な理由についてこの記事は次のような方に向けて書いています。 ・そもそもコーディングとはなんなのかを知りたい ・Webデザイナーにコーデ...
Webデザインに動きをつけるJavaScriptの基礎と学習サイトこの授業は次のような方にぜひ受講してほしいです。 ・Webサイトに動きをつけるJavaScriptについて知りたい方 ・...

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

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

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

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

先生
先生
プラグインとの連携の想定をしたり、複雑な動作を設定するなど、考えることがたくさんあるから、ここはファイトだよ!

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

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

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

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

先生
先生
これがWordPressサイト構築の大まかな流れだよ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザイニャー
デザイニャー
本当の意味でのWordPressできますと言えるようになるためには、どんな風に勉強していったら良いのかニャン?

先生
先生
そのための勉強法の例を4つご紹介するよ。

・学習サイトで学ぶ

・本で学ぶ

・勉強会に参加して学ぶ

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

学習サイトで学ぶ

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

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

先生
先生
学習サイトでWordPressについて学ぶには、次の2つがおすすめだよ。

・世界一わかりやすいWordPress

・ドットインストール

世界一わかりやすいWordPress

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

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

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

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

ドットインストール

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

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

本で学ぶ

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

先生
先生
WordPressを学べるおすすめの本は次の2冊だよ。

いちばん優しいWordPressの教本

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

 

勉強会に参加して学ぶ

先生
先生
各地で行われているWordPress勉強会に参加するのも良い勉強法だよ。

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

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

先生
先生
WordPress勉強会を調べることができる記事を見つけたからリンクしておくね。

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

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

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

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

TechAcademy(テックアカデミー) WordPress講座



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

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

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

 

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

先生
先生
WordPressができるようになるには次の8ステップの勉強法をおすすめするよ。

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

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

③WordPressの基礎を理解する

④WordPressをする環境を作る

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

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

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

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

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

先生
先生
まず、 WordPressで何をやりたいのかと言う目的を明確にしよう。

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

・Webサイト制作やカスタマイズの仕事をやってみたい

・オリジナルのテーマを作って仕事をしたい

・Webサイトの運営をしてブログ記事の作成をしたい

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

先生
先生
その場合は、 WordPressの基本操作やライティングについて勉強しよう。

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

先生
先生
やりたいことを決めたら、 WordPressで使用する言語の基礎を身につけよう。

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

・Webサイトに必須のHTMLとCSS

・JavaScriptで動きをつける

・WordPressの基礎を組み立てるPHP

Webサイトに必須のHTMLとCSS

Pixabayによる写真: https://www.pexels.com/ja-jp/photo/screengrab-270404/

 

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

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

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

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

JavaScriptで動きをつける

Markus Spiskeによる写真: https://www.pexels.com/ja-jp/photo/2004161/

 

先生
先生
JavaScriptは、ポップアップ表示など、Webサイトに動的な動作をつけたい場合に使うプログラミング言語だよ。

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

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

WordPressの基礎を組み立てるPHP

RealToughCandy.comによる写真: https://www.pexels.com/ja-jp/photo/11035390/

 

先生
先生
PHPは、Webサーバー上で動作する、Webサイトに必要なデータを取得したり加工を行うプログラミング言語だよ。

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

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

③WordPressの基礎を理解する

先生
先生
プログラミング言語の基礎を学んだら、 WordPressの基礎固めをしよう。

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

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

④WordPressをする環境を作る

先生
先生
WordPressのスキルを身につける近道は、実践を重ねていくことが一番だよ。

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

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

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

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

先生
先生
WordPressのローカル環境を構築するには、次のソフトウェアの導入がおすすめだよ。

・XAMPP

・Local by Flywheel

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

先生
先生
練習のためのローカル環境を構築したら、いよいよ実際にWebサイトを作ってみよう。

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

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

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

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

日本のWordPressのリンク集

先生
先生
ここで日本国内の優秀なワードプレスのリンク集をご紹介しておくね。

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

Tranmautritamによる写真: https://www.pexels.com/ja-jp/photo/251225/

 

先生
先生
Webサイトの模写で学んだら、オリジナルのWebサイトを作ってみよう。

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

・Webサイトのデザインを制作

・HTMLやCSS、JavaScriptでコーディング

・WordPressに組み込む

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

先生
先生
オリジナルのWebサイトができたら、実際に運用してみよう。

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

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

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

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



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

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

先生
先生
クラウドワークスランサーズなどのクラウドソーシングサイトを利用して、WordPress制作案件にチャレンジしてみるのも良いよ。

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

 

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

先生
先生
ここでは、自作したWebサイトを公開するために必要な3つの作業についてお話するね。

①Webサーバーの契約

②ドメインの取得

③WordPressで上①、②を使うための設定

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

先生
先生
Webサーバーを提供する会社からレンタルするのが一般的だよ。

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

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

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

先生
先生
WordPressのカスタマイズについて良い記事を見つけたのでご紹介しておいくね。

まとめ

先生
先生
この授業では次の47個のことについてお話ししてきたよ。

・CMSとは何か

・WordPressとは

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

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

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

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

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

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

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

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

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

・WordPressの構築の流れ

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

②Webデザインのスキル

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

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

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

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

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

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

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

・学習サイトで学ぶ

・世界一わかりやすいWordPress

・ドットインストール

・本で学ぶ

・いちばん優しいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)

・勉強会に参加して学ぶ

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

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

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

・Webサイト制作やカスタマイズの仕事をやってみたい

・オリジナルのテーマを作って仕事をしたい

・Webサイトの運営をしてブログ記事の作成をしたい

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

・Webサイトに必須のHTMLとCSS

・JavaScriptで動きをつける

・WordPressの基礎を組み立てるPHP

③WordPressの基礎を理解する

④WordPressをする環境を作る

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

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

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

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

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

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

・日本のWordPressのリンク集

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

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

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

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

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