WordPressの仕組みをデザイナー向けに解説｜更新できるサイトはこう動く

Web制作の案件を見ていると、「WordPress」の文字が何度も出てきます。求人にも「WordPress経験者歓迎」とありますよね。

WordPressは、コードを書かずにサイトを更新できる仕組み（CMS）の代表です。実は、いま読んでいるこの「まめぶろぐ」もWordPressで動いています。
この記事では、WordPressの仕組みと部品、デザイナーがどう関わるのかを解説します。インストール手順は扱いません。まず仕組みが分かれば十分です◎

WordPressの正体はCMS（更新できるサイトの仕組み）

CMSはContent Management Systemの略で、サイトの中身（記事・画像）を管理画面から更新できる仕組みのことです。WordPressは世界でいちばん使われているCMSで、W3Techsの調査では世界のWebサイトの4割超がWordPress製です（数字は調査時点で変わります）。

前のレッスンまでのコーディングと何が違うのか。ページの作られ方が根本から違います。

WordPressは、記事の中身と見た目の型を別々に保存しておき、ページを表示するたびに組み合わせて出力します。だから記事を100本書いても、見た目の型は1つ直せば全ページに反映されます。ここがCMSの価値です。

WordPressを構成する4つの部品

中身は4つの部品に分かれています。名前だけでも覚えておくと、案件の会話が読めるようになります。

• 本体（コア）：WordPressそのもの。無料で公開されていて、誰でも使える
• テーマ：サイト全体の見た目の型。着せ替えのように切り替えられる
• プラグイン：あとから足す機能。お問い合わせフォーム、SEO対策、バックアップなど
• データベース：記事・画像・設定の保管場所

デザイナーに関係が深いのはテーマです。サイトの配色・フォント・レイアウトはテーマが決めています。「WordPressのデザイン案件」の実体は、多くの場合テーマを作る・整える仕事です。
まめぶろぐはSWELLという国産テーマを土台に、独自の調整を重ねています。

ブロックエディタ：記事は積み木のように書く

WordPressの記事編集画面はブロックエディタといいます。段落・見出し・画像・表がそれぞれ1個のブロックで、積み上げて記事を作ります。

デザイン基礎で学んだ知識は、ここでそのまま使えます。見出しの階層はジャンプ率の話ですし、ブロックの並べ方は近接と整列の話です。ツールが変わっても原則は変わりません。

ブロックの実体はHTMLです。たとえば段落ブロック1個は、データ上ではこう保存されます。

<!-- wp:paragraph -->
<p>こんにちは</p>
<!-- /wp:paragraph -->

HTMLのレッスンで見たタグが、ここでも顔を出しました。管理画面の裏側では、学んだ仕組みがそのまま動いています💡

WordPress.orgとWordPress.comの違い

調べ始めると必ずぶつかる混乱ポイントです。名前は似ていますが、別物です。

Web制作の現場で「WordPress」と言えば、ほぼ.org側（自分のサーバーに設置するほう）を指します。この記事の説明も.org側の話です。サーバー（サイトのファイルを置いておくコンピュータ）は、サーバー・ドメインと公開のレッスンで詳しく扱います。

デザイナーがWordPressを知っておく理由

理由は2つあります。

1つ目は、案件の量。企業サイト・ブログ・オウンドメディア（企業が自社で運営する情報発信サイト）の多くがWordPressで動いているので、Webデザインの仕事はWordPress案件に出会う確率が高いです。

2つ目が本質です。WordPressのデザインは「更新され続ける前提」で作ります。カンプの時点で完璧でも、公開後に運営者が長いタイトルの記事を足したら崩れる。そんな設計は実務では通用しません。文字数が増えても、画像の縦横比が変わっても崩れない設計。これがCMS時代のデザイン力です。

ミニ実践：好きなサイトがWordPressか判定する

WordPress製のサイトには、見分けられる痕跡があります。パソコンで5分でできます。

1. よく読むブログか企業サイトをChromeで開く
2. ページの何もない場所を右クリックして「ページのソースを表示」を選ぶ
3. 検索（WindowsはCtrl+F、MacはCmd+F）で wp-content と打つ
4. ヒットしたらWordPress製。wp-contentはWordPressがテーマや画像を置くフォルダ名です
5. 3サイトほど試して、当たり率を数えてみる

まめぶろぐで試すと、もちろんヒットします。答え合わせにどうぞ。
ソース表示は初めてだと文字の洪水に見えますが、探すのは1単語だけ。この「ソースから痕跡を読む」動きは、実務の調査でもよく使います。

よくある質問

WordPressは何のために使うのですか？

コードを触らずにサイトを更新し続けるためです。ブログ、企業サイト、オウンドメディア、ネットショップまで作れます。
「作って終わり」ではなく「更新し続ける」サイトに向いています。逆に、更新のない1枚もののLPなら、WordPressを使わない選択も普通にあります。

WordPressの料金はいくらかかりますか？

本体は無料です。かかるのは周辺の費用で、レンタルサーバーが月数百円〜1,500円ほど、ドメインが年1,000円台が相場です（料金は変わるので契約先の最新情報を確認してください）。
有料テーマを買う場合は1〜2万円前後が目安です。無料テーマだけでも運営はできます。

「WordPressはやめたほうがいい」と言われるのはなぜですか？

自由な分、管理が自分持ちだからです。本体・テーマ・プラグインの更新を怠ると、不正アクセスの入口になります。世界中で使われている分、攻撃の対象にもなりやすいです。
更新を続ける、信頼できるテーマとプラグインだけ入れる、バックアップを取る。この3つを守れば、過度に恐れる話ではありません。

HTMLやCSSを知らなくても使えますか？

記事を書いて公開するだけなら、知らなくても使えます。テーマを入れれば見た目も整います。
ただ、テーマの微調整や崩れの修正ではHTMLとCSSの知識が要ります。「読める」水準があるだけで、対応できる範囲が大きく広がります。

次に学ぶこと

今回のポイントをまとめます。

• WordPressは更新できるサイトの仕組み（CMS）の代表。まめぶろぐもWordPress製
• 部品は本体・テーマ・プラグイン・データベースの4つ。デザイナーの主戦場はテーマ
• 記事はブロックエディタで書く。ブロックの実体はHTML
• WordPressのデザインは更新されても崩れない設計が前提

次のレッスンは「ノーコードツール」。WordPressよりさらにコードから離れて、デザインツールの操作だけでサイトを公開する道具の話です。

あわせて読みたい

ノーコードのWeb制作はどこまでできる？STUDIO・Wixとコーディングの使い分けここまで、コーディングで作る方法と、WordPressで更新する仕組みを見てきました。実はもう1つ、コードを1行も書かず…

あわせて読みたい

HTMLの基本構造とタグの読み方（デザイナーのための入門）コーダーから「ここの見出しはh2でいいですか？」と聞かれて、返事に詰まる。Webデザインの仕事を始めると、この場面が必ず…

コースの全体像はデザイン基礎コースの目次から確認できます。