未経験からWeb/UI/UXデザイナーを目指すのに WordPressのスキルは必須なの？

詳しく見ていきましょう。

はじめに

WebデザイナーやUI/UXデザイナーになるためのスキルとかを調べていると、“WordPress”という単語を時々見かけるかと思います。

WordPressはザックリ言うと、専門知識がなくてもWebサイトが作れるソフトウェアなのですが、
馴染みのない方にとってはなんかイマイチピンと来なかったりするのではないでしょうか？
（「専門知識がなくてもサイトが作れる」と言うわりに、PHPとかMySQLみたいな馴染みのない単語が出てきますし…）

ぼくの経験上、WordPressを習得しなくても未経験からWebデザイナー、UI/UXデザイナーに転職することはできます。（WordPressのカスタマイズとかをメインビジネスにしている会社は別ですが…）

ただ個人的には、時間があればぜひWordPressをいじってクレメンスと思っています。

特にイチからHTMLとCSSをガリガリ書いてサイトを作っているような方は、
WordPressのような”動的なサイト”（後ほど説明します）に触れることで見えている世界がほんの少し変わるんじゃないかなと思います。

ということでこのページでは、未経験からWebデザイナー、UI/UXデザイナーを目指す人向けにWordPressの仕組みやデザインカスタマイズのやり方をザックリと説明し、
WordPressをいじることで得られるメリットについてまとめてみました。

WordPressとは？

概要をザックリと

まずはWordPressの概要について説明します。
WordPressとは、オープンソースのCMS（コンテンツ管理システム）のことです。

・・・と言われても「？」かと思うので、もう少しかみ砕いて説明すると、次のような感じになります。

要するに、記事系のサイトをサクサク作れる、（基本）無料で使えるし改造しても怒られないソフトウェアがWordPressです。

そしてWordPressの大きな魅力の1つが、この”改造”です。

世界中誰でも、WordPressを自由にカスタマイズして自分オリジナルのサイトに仕上げることができます。ミニ四駆みたいな感じです。

カスタマイズするときはプラグインと呼ばれる、ミニ四駆で言うパーツのようなものがたくさんあるので、
目的に合ったプラグインを探してインストールします。

プラグインを使わず自力でカスタマイズをすることもできますが、この場合は専門知識が必要です。

基本的に、デザイン周りを自由にカスタマイズしたいときはHTMLとCSS、
システム周りを自由にカスタマイズしたいときはPHPやJavascriptといったプログラミング言語が必要になってきます。

WordPressのしくみ

WordPressの仕組みは、HTMLとCSSをガリガリ書いてサイトを作る場合との対比でとらえるとわかりやすいかもしれません。

まずHTMLとCSSガリガリの場合、Webサイトを作る手順は次のようになるかと思います。

図で説明するとこんな感じです。

一方、WordPressでWebサイトを作るときはちょっと手順が異なり、次のようになります。

図で説明するとこんな感じです。

ダウンロードしたソフトウェアにはPHPという開発言語で作られたプログラムが入っていて、こいつが働くことでWebサイトが作られていきます。

管理画面から記事を書くとPHPが働き、MySQL（マイ・エスキューエル）というデータベースシステムにその記事内容が蓄積されます。

逆にユーザーがページを訪れたときは、PHPのプログラムが働いてMySQLから記事の中身を引っ張り出してきてページを作り、ユーザーに表示しています。

「このURLだからこの記事…」というように、ユーザーの要求に応じてプログラムが働き、都度HTMLページを生成して見せています。

管理画面について

WordPressの管理画面はこんな感じ↓です。

なんだか項目がいろいろあって難しそうですね…。
情報が多くて目移りしてしまいますが、基本としては次の5つの項目をおさえておけばひとまず大丈夫です。

そしてこちら↓が”投稿”から記事編集をしている様子です。

Wordを使うかのように記事を書き込むことができ、HTMLとCSSの知識がなくてもある程度直感的にページを作ることができます。

デザインについては、”外観”の“テーマ“というところからデザインテンプレートを選ぶことができます。

ノウハウがけっこうある！

上でも述べましたが、WordPressはオープンソースのソフトウェアです。

オープンソースの特徴として、世界中のエンジニアが自分たちの使いやすいようにカスタマイズしたり修正したりし、そのナレッジをシェアし合うという世界観があります。

ですので、バグの修正情報やカスタマイズの方法とかもググればかなり情報を手に入れることができます。

WixやJimdoとは似て非なるもの！

専門知識がなくてもWebサイトを作れるサービスとして、WixやJimdoといったWebサイト作成サービスの存在が挙げられます。
（冒頭で挙げたWordPress.comも同様です）

Webサイト作成サービスは、とにかく簡単にWebサイトを作れるのがウリです。

WordPressでサイトを作る場合、サーバーとかドメインを自分でセッティングしなければならず、けっこう大変です。

WixやJimdoはサーバーやドメイン、分析ツールなどを運営会社の方で用意してくれるので、もろもろの面倒な設定を大幅にカットし、サクサクっとWebサイトを立ち上げることができます。

一方で、カスタマイズ性は圧倒的にWordPressの方が上です。

WixやJimdoはオープンソースではないので、ソースを自由にいじることができず、各サービスで用意された範囲内でのカスタマイズにとどまります。

また、WordPressの場合はサーバーや分析ツールなども自分で自由に選び、使うことができます。

WordPressでのデザイン変更について

HTMLとCSSのスキルがあれば、Wordpressでもある程度デザインのレイアウトを変更することが可能です。

ただし、HTMLとCSSをガリガリ書いてイチからサイトを作るのと違い、いくつか注意点があるので、そこを解説します。

WordPressでのスタイリングの仕組みとは？

HTMLとCSSをガリガリ書いてサイトを作る場合、HTMLファイルを作成した後、それをスタイリングするCSSファイルを作成します。

たとえばぼくの場合、HTMLファイル１つに対してCSSファイルを１つ作成し、ページごとにスタイリングを行っています。
デザインを変更したいときは、対象のHTMLファイルとCSSファイルを調整すればOKです。
（下の図を参照。正直、あまり良いやり方ではないかもしれませんが…）

一方でWordpressでは、ページごとにHTMLファイルが存在しているわけではありません。

上でも述べたように、Wordpressはユーザーからのリクエスト（＝指定してきたURL）をもとに、MySQLというデータベースから情報を引っ張ってきて、その場でHTMLのページを作り見せています（こういうのを動的ページと言ったりします）。

この「情報を引っ張ってきて、その場でHTMLのページを作り見せ」る作業は、主にPHPというブログラムがやってくれています。
（ですので、WordpressのフォルダをのぞいてみるとPHPのファイルばかりが目につくはずです）

そして、デザインについてはおおむねStyle.cssというスタイルシートにまとめて管理されています。
PHPが作り上げたHTMLページに対してStyle.cssがデザインを指定してあげているようなイメージです。

ですので、このStyle.cssをいじればページのデザインを変えることができます。

WordPressでデザインをいじるときの手順とコツ

では実際の手順を見ていきます。Wordpressでデザインをいじるときの手順をまとめると、次のようになります。

それぞれについて見ていきましょう。

1. 管理画面からclass(もしくはid)を付与する

管理画面の記事投稿画面とかに、classを付与できる枠があったりするので、そこからclassを書き込みます。

またはHTML編集モードに切り替えて直接class(もしくはid)を書き込むこともできます。

2. Style.cssの一番後ろにコードを追記する。できれば子テーマを使う

1.で設定したclass（もしくはid）に対してスタイルを指定していきます。

「外観」→「テーマの編集」からStyle.css（下図の赤枠）を選択し、一番下の行にスタイルを追記します。記入が終わったら、「ファイルを更新」ボタンを押します。

3. キャッシュをクリアして確かめる

編集した内容を確かめようとページを見ても、あれれ何も変わっていない…ということがよくあります。

これはキャッシュ（前回見たサイトを次回以降すぐに表示するために、ブラウザがサイトの表示内容を覚えておく機能）が原因になっていることが多いです。

このキャッシュをクリアしてリロードすると、ちゃんと編集した内容が反映されたりするので、試してみてください。

4. よくわからなくなったら、クロームの検証機能を使う

どんなclassを付与していたか分からなくなったり、スタイルがこんがらがって状況がわからなくなったら、クロームの検証機能で確かめると良いです。

検証モードでは画面上でHTML、CSSを編集することができ、その場でデザインをいじって確認することもできます。どのようなCSSにするか考えたいときに便利です。

PHPファイルは直接いじらない

WordPressには複数のPHPファイルが入っていて、これが働くことでサイトが機能していますが、
PHPの知識がないようでしたら、基本的にこれらPHPファイルはいじらない方が無難です。

変にいじってPHPがエラーになると、WordPressの画面がまっ白になり、操作ができなくなります。

もしまっ白にしてしまったら、FTPツールというものでWebサーバーにアクセスし、いじってしまったPHPファイルを元に戻せば大丈夫です。
（バックアップをとっていなかったらお陀仏ですが…）

せっかくならWordPressをいじっておこう！

冒頭でも述べましたが、WordPressを習得していなくても未経験からWebデザイナー、UI/UXデザイナーに転職することは可能です。

が、個人的には時間に余裕があればWordPressはいじっておいた方がいいと思っています。
理由は次の2つです。

それぞれについて見ていきます。

WordPressはシェア率が高いので、体験しておくと話がしやすい

単純にシェア率が高いので、仕事をしているとWordPressが絡んだ話も出てくることでしょう、という内容です。

例えばクラアイアントからWordPressで作られたサイトのデザイン変更依頼が来た時に、
WordPressでのデザイン調整の雰囲気をあらかじめ知っていれば、その場でより具体的、現実的な提案、判断ができ、
クライアントからの信頼も高まるでしょう。

“動的ページ”の持つデザインの制約が、なんとなくわかる

WordPressのように、プログラムで自動的にコンテンツを表示しているようなページを動的ページといいます。
（一方でHTMLとCSSだけで作られたような、プログラムが働いていないページを静的ページといいます。）

で、この動的ページですが、デザインを調整するにあたって若干クセというか特徴があります。

例えば、そうですね…。
このページ↓の赤枠のサムネイル（左上）だけ表示しないようにしたいとしましょう。

一見、HTMLの該当箇所を削除し、CSSをちょっと調整すれば終わる、超簡単な作業のように思えます。

しかしこのサムネイルですが、「Webデザイナー、UIデザイナー、UXデザイナーの違いと仕事内容」という記事ページを作成した際にプログラムで自動的に生成されており、
これだけを非表示にするには、プログラム（ここではPHP）を編集し表示条件を変えなければならず、わりと手間がかかります。

現在ぼくは事業会社のUI/UXデザイナーとして働いていますが、
こうした動的ページの事情をわかってくると、サイトのデザイン案件を進めるのがめちゃくちゃ楽になりました。

WordPressをいじっていると多少そのあたりの雰囲気を味わえるので、入社してからが少し楽になるんじゃないかなあと思います。

まとめ

以上でWordPressのお話はおしまいです！