こんにちは、めさめさです。
Webデザイナーという仕事が世間での広まりを見せるに従い、その業務担当範囲も様々に広がってきました。Webデザインを学んだことがある or 学んでいる人なら一度は聞いたことがあると思いますが、WordPressって聞いたことはありますでしょうか?
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4838022_m-1024x683.jpg)
WordPressはオープンソースのCMS(Contents Management System)の一種なんですが、最近はこのWordPressを利用したサイト制作もWebデザイナーの業務範囲に含まれていたりして、その存在感を日々増しています。
WordPressは何やかんやで超便利な存在(※後述)で、Web制作者にとっては要するに神みたいな存在なんですが、全貌を知るまでは「実際にWebデザイナーのスキルとしてWordPressは本当に必要なのか」とか「どうやって勉強すれば良いのか」「勉強するにしても、何ができたら一人前なのか」っていうことを色々と考えていました。
ググっても意外とその辺りはボカされていて「WordPress勉強しろ!」ぐらいにしか書いてないんですよね、、、
なので今回の記事では、WebデザイナーにとってWordPressを学習するメリットと、具体的な学習範囲について解説していきたいと思います。
この記事を最後まで読んでいただければ、具体的な目標を持ってWordPressの学習を進められるようになりますよ!
そもそも、WordPressって何なん?
CMSやらWordPressが初耳 or あまり知らないって人もいると思うので、まずはここから簡単に解説していきますね。
CMSについて
CMSとは、Contents Management System(コンテンツ管理システム)の略称となります。Webコンテンツを管理するシステム(WMS:Web Management System)のことを指すことがほとんどですが、DAM(Digital Asset Management)と呼ばれるデジタルアセット管理のシステムや、CCMS(Component Contents Management System)と呼ばれるコンポーネントコンテンツの管理システムなどを総称してCMSと表現することもあります。
サイバーテックより引用
このコンテンツ管理システムでいうところの「コンテンツ」とは、Webページであったりブログの記事であったりと様々です。今皆さんが見ているこの記事も「コンテンツ」に該当します。
古典的な方法でWebサイトを構築するなら静的htmlで普通にコーディングして公開すれば良いのですが、もし100件ぐらい記事がある状態から「全ページのヘッダーメニューを変更」することになったら、あなたはどうしますか?
この場合は100件のhtmlファイルを編集していくしか方法がないのですが、正直やってられないですよね。
CMSはヘッダーやフッター・サイドバー、そしてコンテンツ部分を別パーツとして保存しておいて、PHPという言語を用いて表示するページ(コンテンツ)によってパーツを入れ替え、適切な表示ができるようにするモノです。ちなみに、htmlファイルでページを切り替えるサイトを静的サイトといい、PHPでパーツを制御してWebページをその都度動的に生成するサイトを動的サイトと呼びます。
サイト構築(特にブログやメディアサイトなど)の経験が無いとイマイチ凄みが伝わらないんですが、それはもう凄いモノなのです。
WordPressについて
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/bc56c7d15f3df3c2558ea1b84723ef46-1024x576.jpg)
さて、ここまでご説明しましたCMSにも色んな種類がありまして、WordPressはあくまでもその一種な訳です。
WordPressの他に有名なCMSといえば、bacerCMS / BlueMonkey / hubspotCMSなどが挙げられます。無料のものやMA(マーケティングオートメーション)ツールとセットになったものなど、本当に色々存在しています。
WordPressは特にCMSの中でのシェアが大きく、その数なんと世界の約1/3のWebサイトがWordPressで構築されていると言われています。
WordPressはオープンソースのCMSなので、プラグイン(WordPressに機能を追加するもの)の開発も活発で、MAツールのようなものから本格的なECサイトの構築まで行える優れたCMSといえます。
WebデザイナーにWordPressのスキル・知識は必要?そのメリットは?
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4810848_m-1024x684.jpg)
前項で少し触れましたが、WordPressサイトの構築にはPHPというプログラミング言語の知識が必要です。PHPは(フロント/バックエンド)エンジニアの領域であるので、一見すると必要ないようにも思えます。
では何故、最近はWebデザイナーにとってWordPressのスキルが重要視されているのか、ポイントを絞って解説していきます。
①単純に仕事が取りやすくなる and 収入UP
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4722891_m-1024x683.jpg)
世界の約1/3のWebサイトがwordpressで作られていることもあり、WordPressによるサイト構築案件も年々数が多くなっています。企業のWebデザイナー求人情報にも、求めるスキルにWordPress構築が含まれている場合もあります。
WordPressサイトの構築スキルを学ぶことで、デザイン無しのサイト構築案件も単発で拾えるようになる為、取り組める仕事の量は本当に増えます。
仕事が増えることは収入アップにも繋がりますし、実際にクラウドソーシングの案件一覧を見ても、WebサイトデザインよりもWordPressサイト構築案件の方が報酬は高めです。
②キャリアの幅が広がる
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4786854_m-1024x683.jpg)
WordPressサイト構築にはPHPの知識であったり、場合によってはデータベースの知識が必要になってきます。Webデザイナーの業務範疇からは逸脱することにはなりますが、正しい技術を習得することでエンジニアへの転職の道も開けるでしょう。
エンジニア転職を考えないまでも、「エンジニアに匹敵するスキルも身につけたWebデザイナー」であれば、それだけで強い人材です。Webデザイナーとしての転職の際にも、必ず役に立つスキルと言えますね。
WordPressサイト構築の大まかな流れ
ここまでは、WordPressサイト構築に関するスキル習得で得られるメリットについてご紹介しましたが、WordPressサイト構築の大まかな流れや、それに必要なスキル内容も気になります。
以下順番に解説していきますので、参考にしてみてください。
① Webサイト設計・Webデザイン技術
CMS/WordPressサイトと言えど、Webサイトであることには変わりありませんし、比較的に大規模サイトになる事が多いため、デザイン開始前のサイト要件設定、ワイヤーフレーム設計が特に重要になると言えます。
適当なサイト設計のまま構築まで進むと後戻りが難しくなりますから、慎重かつ確実性を重視して進めるようにしましょう。
② Webデザインスキル
言わずもがな、サイト設計が完了したら必ずデザインに落とし込みましょう。
ワイヤーフレーム設計の段階では気が付かなかった問題点に気づくきっかけになります。デザインを通して、ユーザーにとって使いやすいWebサイトを作成することが大切です。
一方、既存のWordPressテーマを使ったサイト制作の場合は、デザインの段階が省かれることも少なくありません。カスタマイズ機能という、ボタン一つでサイトのレイアウトや色を変更できる場合が殆どなので、この辺りもWordPressの強みと言えますね。
ちなみに既存のWordPressテーマを使っての制作案件は、全体的に単価が低いことも特長です(後述)。
③ HTML / CSSコーディング
サイトデザインが仕上がったら、いよいよWebサイト実装の開始です。
案件の仕様にもよりますが、オリジナルのWordPressテーマを作成する場合は、いきなりPHP実装を行うのではなくHTML/CSSコーディングを行い、まずは各ページ表示に必要なパーツを作成するのが一般的です。
コーディングの内容は一般的なものと変わらず、HTMLで骨格を作り、CSSでレイアウト・装飾を整えていきます。
④ PHPファイル化し、オリジナルテーマを作成する
作成したHTMLファイルを元に、WordPressの規格に適合するようにPHPファイル化を進めます。作成した投稿・ブログページを一覧ページに表示させる機能などが、このタイミングで実装されることになります。
案件によっては少なめのファイル総数で済むこともありますが、大規模サイトや将来的な拡張を見越したサイトでは膨大なファイル数となることもあります。
プラグインとの連携の想定や、複雑な動作設定など、考えることは山程あります。
Webサイト設計に比べて、2番目ぐらいにはキツい仕事ですね。追い込まれます。
⑤テスト環境でテスト&修正、本番環境にて公開
一通りWordPressテーマの作成が終わったら、テスト用のサーバー or ローカル環境にて動作確認を行います。
頭の中ではちゃんとできているつもりでも、実際に動かしてみると顕在化する問題も出てくることでしょう。適宜修正を行い再度テスト→問題なければ本番環境のサーバーへアップロードし、公開します。
以上がWordPressサイト構築までの大まかな流れです。
「WordPress出来ます問題」について
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/LGTM_dandast5_TP_V-1024x540.jpg)
時々クラウドソーシングでWordPressを使ったWebサイト構築の案件を外注したりするのですが、特に初心者さんとかの提案で以下のような文言が届く事がしばしばあります。
「WordPress出来ます」
んー、、、間違ってはいないんですが、そうではないんです。
実はこのWordPress出来ます問題が前から気になっていて、特に初心者さんとかは気を付けた方が良いと思いました。
少し脱線になるんですが、是非とも読んでもらえると嬉しいです。
WordPressが出来るには、2通りの意味がある
①既存のWordPressテーマを使ってWebサイトを作成できる
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/befd76dc83d659c079aaf5e295175e83-1024x576.jpg)
引用:JIN(ジン)|真の使いやすさを追求したWordPressテーマ
まず一つ目の意味です。
世の中便利なもので、WordPressの外観を形成するテーマが無料だったり有料だったりで配布・販売されています。
有名どころで言えばこのブログを作る際に使用した「JIN」や、他にも「DIVER」「STORK」「SANGO」などなど…。目的に合わせて最適なテーマを選択すれば、あっという間に誰でもWebサイトが作れてしまいます。
そう、誰でもです。デザイナーも何も関係ありません。
だけどWordPressで記事を投稿したり、タイトルやロゴ画像を設定したり出来るだけで「WordPress出来ます」と言ってしまってる人がいますが、それはデザイナーじゃなくてもできる話です。
それで「WordPress出来ます」は恥ずかしいので、やめておきましょう。
これはWebデザインスクールも同じことで、カリキュラムにWordPressが含まれているからと言って、必ずしもオリジナルテーマが作成できるとは限らないのです。基本的な操作方法を学んだだけでも「WordPressが出来るようになりました」と言える世の中なので。
②オリジナルのWordPressテーマを作成して、ゼロからWebサイトを作成できる
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4599537_m-1024x683.jpg)
Webデザイナーの筆者としては、こちらが本当の意味で「WordPressが出来る」ことだと考えています。
もちろん既存のテーマでも良いですが、クライアントのニーズが必ずしも満たされる訳ではありませんし、満たされることの方が少ないです。それ故ゼロからWordPressサイトの構築が出来る方が、他の事業者より優位に立てますし、クライアントに選ばれる理由にもなります。
先程も少し触れましたが、上記の理由でオリジナルテーマと既存テーマの案件との間には天と地ほどの報酬額の開きがあります。
なので、これからWordPressの勉強を考えているWebデザイナーさんは是非とも、「顧客の求めるニーズに合ったサイト環境を、完全オリジナルデザインでゼロから作成する」ことを目標に勉強を進める方が良いですよー。
WordPressが出来ると言う為の勉強法は?
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/4636359_m-1024x683.jpg)
WordPressが出来る、という意味での具体的な目標は定まったところで「実際にはどんな風に勉強すれば良いの?」と疑問に思われる方が殆どだと思います。
そこで最適と思われる勉強方法をいくつかピックアップしたので、参考にしてみてください!
①スクールでWordPressテーマの作成に必要な基礎技術を学ぶ
最も定番な勉強方法はスクールでの学習です。
WordPressテーマ作成 / ウェブデザインなどに関わる技術を学べるスクールは数多ありますが、その中でも一番おすすめしたいのは「デジタルハリウッド STUDIO by LIG」です!
日本有数のWeb制作・マーケティングにおける超一流企業であるLIGさんが監修しているスクールになります。
現役Webデザイナーとしてこれほどおすすめなスクールは無いので、下記の記事から是非確認してみてくださいね!
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/bb5839ed90e1944fa0311dd6fbd15b70-320x180.png)
②無料サービス・ブログでWordPressを学ぶ
The WordPress Press | 世界一わかりやすいWordPress
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/afdaf358a6a81a0072be6589331a6179-1024x576.jpg)
引用:The WordPress Press | 世界一わかりやすいWordPress
筆者一番のおすすめは、このWordPress tips系ブログ「世界一わかりやすいWordPress」を見ながらの学習です。
ゼロからWordPressテーマを作るすべての工程が、完全無料で公開されています。ブログ名の「世界一わかりやすい」の通り、本当に分かりやすいです。
HTML/CSSを学んでからじゃないとWordPressは学べないという方もいますが、このブログではなんと「コーディングをした事が一度もない人」を想定して、テーマ制作の基本から解説してくれています。
目的別に記事のカテゴリーが分かれていて、
- WordPressのインストール方法から、記事投稿・プラグイン解説などの基本編「BASIC」
- ゼロからWordPressオリジナルテーマ(見本データダウンロード可)をつくる「THEME」
- さらに発展した内容の「LIBRARY」
の3つが用意されています!
書籍化されててもおかしくないレベルの解説なので、WordPressの学習を考えている方は是非チェックしてみてください!
ドットインストール
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/8b2a5018c6b22dd3bb1b8ab16d891a3f-1024x492.png)
引用:ドットインストール
無料で学ぶもうひとつの手として、ドットインストールで公開されているWordPress講座の視聴があります。
ただし、こちらは公開から7年以上経っていて古くなっており、後半の動画を視聴するには有料会員になる必要があります。
あくまでも補助的な使い方をおすすめします。
まとめ
以上、WebデザイナーがWordPressの技術・知識を身につけるべき理由と、具体的な目標レベルについての解説でした。
特にフリーランスなどWebデザイナーとして独立を目指されている方にとっては、WordPressの学習が自身のキャリアを広げる大きな要因になることが、お分かり頂けたかと思います。
もしWordPressの学習に興味がありましたら、本記事でご紹介した学習方法がおすすめなので、是非皆さんも試してみてください!
最後までお読みいただき、ありがとうございました!
その他のおすすめWebデザインスクールはこちら!
以下の記事では、WordPressのスキルも学べるその他のWebデザインスクールの内、厳選の3校をご紹介しています。
是非参考にしてみてくださいね。
![](https://webdesigner-begins.com/wp-content/uploads/2021/05/YOSX9827_TP_V-1-320x180.jpg)
【超おすすめ】Webデザインスクールに興味のある方へ!
![](http://image.moshimo.com/af-img/1797/000000030706.jpg)
完全オンラインのWebデザインスクールをお探しの方へ
完全オンラインのWebデザインスクールはこちらがおすすめです!
デジハリONLINE WEBデザインコース
![](http://image.moshimo.com/af-img/2262/000000041803.jpg)
- クリエイティブ業界に9万人以上の卒業生を輩出する講義を完全オンラインで
- 受講満足度は脅威の93.6%。
- 学習中の質問は、回数無制限で受付。zoom個別相談(予約制)で、対面サポートも実施中
- 専用のSNSや交流会を通じて、完全オンラインでもモチベーションアップ!
- クリエイティブ業界に深いパイプを持つ「デジハリ」だから、就職も安心!