【CMSって何？】CMSを使ったホームページの作り方

みなさんこんにちは。プロクラスの中山です。
ちょっと前まで京都は連日雪が降り続いていましたが、平穏な日々に戻りました。（でも超寒い…）

今日は私の大好きなCMSについてのお話です。 😳

CMSって何なの？なぜホームページにCMSを使うの？普通のホームページとどう違うの？

「WordPress（ワードプレス）」もCMSですし、他にも同じようにホームページを作ることができるシステムがたくさん世の中に存在します。

HTMLでホームページを作っているWeb デザイナーさんや、会社やお店のホームページを新しく作りたいという方などから「プロクラスでWordPressの使い方を教えてほしい！」というお問い合わせがガンガン増えてきています。

私がWordPress大好きすぎてWordPressのブログばっかり書くからSEO対策（検索したときに表示される順位を上げる対策）の効果が出てきた、のでしょうか。

1日でホームページが完成するWordPress講座はこちら

CMSとは？

CMSとは、Contents Management System（コンテンツマネジメントシステム）の略です。コンテンツ（画像やホームページの中の文章など）を、マネジメント（管理）してくれるシステムです。

つまりどういうこと？という感じですね。

通常の場合、ホームページを作るためにはHTMLやCSSを打ってページを作らないといけないのですが、CMSを入れることによって管理画面で内容を編集すれば簡単にHTMLの文字を書き換えることができるようになったり、画像を追加したり、ページを追加したり削除したりできるようになるというわけです。

つまりCMSとは…ホームページの運営を楽にしてくれるシステム、という感じです！
Webに詳しくない人でも情報発信ができるようになるって素晴らしいと思いませんか？

何ができるの？CMSでホームページを運用するメリット

①共通パーツを一括管理！

ヘッダーやフッター、サイドメニューなどのホームページの共通パーツを一括管理してくれたりするので、ページが多いサイトの管理が楽になります。
メニューが変わったときなどに全ページの共通パーツのHTMLを書き換えるなんて大変ですから、とても便利です。
（これだけならCMSを使わなくても、ちょっとしたプログラムを使うだけで共通のパーツを読み込むこともできます）

②管理画面でラクラクホームページ更新！

管理画面から内容を編集したり新しい記事を追加することができるので、会社の広報担当やWeb担当の人が簡単にホームページを活用して情報を発信できるようになります！

毎回ちょっとした修正をWeb制作会社に依頼してお金を払う必要がなくなるので管理コストを下げられますね。

③簡単便利な「ブログシステム」でお知らせ投稿ができる

現在主流の「WordPress」や「Movable Type」はブログのシステムが最初から使えるようになっています！

ブログ記事を投稿したら新しいものから順番にならんだ記事の一覧がトップページに出てきて、カテゴリごとの記事の一覧ページが生成されて、など複雑なことを自動でしてくれるので、ブログサイトだけではなく企業のホームページでは新着情報（お知らせ）などにもよく利用されています。

自分でカテゴリーの設定や一覧の表示などをHTMLやプログラムで作るのは大変ですからね…。

CMSのデメリット

①CMSが使えるサーバーが必要

データベースに記事の内容などを登録していくため、それらが使えるサーバーが必要となります。レンタルサーバーの一番安いプランでは使えない、みたいなこともあるのでプランの内容を要確認です！

②CMSが向かないサイトもある

ぺライチのランディングページやあまり更新しないページ数の少ないサイトなら、特にCMSによるメリットがないのでわざわざCMSシステムの導入は不要かと思います。
パーツを分けたりHTMLファイルをCMSタグに加工したりして導入コストをかけなくても、HTMLを扱える人がささっと書き換えるだけの方が更新時のコストや時間が早くて安上がりなこともあります。

③多少のプログラミングの知識が必要

自分の好きなようにホームページをデザインしたい場合は、プログラミングの知識が必要になる場合があります。
記事の一覧を表示するシステムは該当する記事を自動で読み込むのが基本なので、「この一覧にはこの記事だけ表示したくない」、「この記事の時だけは表示する内容を変えたい」などイレギュラーな内容がある場合はちょっとややこしいプログラムの記述が必要だったりもします。
もちろんその分ホームページの制作にかかる時間も増えますので、制作費用を決めるためには細かい要件を先に決めておく必要があります。

CMSを使ったホームページの作り方

CMSが用意しているデフォルトのデザインテンプレートを使用することも可能ですが、デザイナーの方や会社のホームページを作りたいという方がCMSを使いたいという場合はオリジナルのデザインで制作されると思いますので、その場合を説明いたします。

①HTML・CSSで普通のサイトを作る
②HTMLを「ヘッダー」「フッター」「サイドバー」などのパーツごとにばらばらにする
③HTMLにCMSのタグを埋め込んで管理画面で入力した内容を読み込んでくれるようにカスタムする
④バラバラにしたパーツを呼び出すタグを入れて、つなげて表示できるようにする
⑤CMSにデザインテンプレート（テーマ）としてアップロードする
⑥管理画面からページを生成していく

多少の順番の前後はありますが、説明するとだいたいこんな感じの作業になります。（そうでないCMSもあるかもしれませんが）
ピンとこないですよね。一度やってみないと「つまりこういうことか！」というのがわかりにくいかもしれません…

プロクラスでは「WebデザイナーのためのWordPress入門講座」で上記の実践講座をやっていますので、ぜひチャレンジしにきてください！関西や京都に住んでいる方は京都の教室で、そうでない方はオンラインレッスンで全国どこからでも受講いただけます。
一日でCMSのテーマ制作を体験できますよ！

代表的なCMS

CMSにはいろいろな種類があり、それぞれに特徴・個性があります。
今回はWeb制作会社としてホームページを作る時に使用することが多い代表的なCMS2つをご紹介します。

WordPress【ワードプレス】

WordPress（WP）は世界で最も大きなシェアを占めるCMSです。

★WordPressのメリット

多くの人が利用しているため情報量が多く、わからないことを調べたときにほぼ解決方法を見つけることができます。また、プラグインの数も豊富なので、ほぼできないことはないと言っても過言ではない、と思います。

【動的CMS】のため情報をリアルタイムに表示でき、サクサク制作することができます。
レンタルサーバーの多くは「簡単インストール」機能で自動設置でき、手軽に無料で導入できるのも魅力です。

★WordPressのデメリット

動的CMSはページが表示されるたびにデータベースへアクセスしてWebページを表示する仕組みとなっています。そのため、サーバーに負荷がかかって表示が遅くなることも。（普通の規模のホームページでそんなに問題が起きることはないのですが）

また、WordPress本体ファイルの更新が頻繁にあったり、静的CMSに比べるとセキュリティに気を遣う必要があったりします。

1日でホームページが完成するWordPress講座はこちら

Movable Type【ムーバブルタイプ】

Movable Type（MT）は大規模な企業のサイトなどに使用されることが多いCMSです。

★Movable Typeのメリット

WordPressと違い【静的CMS】のため、データベースに登録した内容をHTMLファイルにして保存してくれます。そのため、ページを表示するたびにデータベースに情報を呼び出しに行く必要がないため表示が早くなります。WebサーバーとCMSサーバーを分けることができるため、セキュリティが高くなるので大企業のサイトで使用されることが多いのが特徴です。複数のウェブサイトを管理するのにも向いています。

★Movable Typeのデメリット

なんといっても、制作する人に負担なのが再構築という名の地獄。
登録したデータを呼び出してHTMLファイルを生成することを「再構築」といいます。記事を一つ投稿しただけでHTMLファイルを吐き出すまで毎回いちいち10秒くらい待たないといけないのがものすごいストレスになります。サイトの規模が大きくなると再構築にかかる時間も増えるので、一行の修正のためにめちゃくちゃ無駄な時間がかかったりします。

また、お金がかかるのでちょっと導入のハードルが高いのもポイント。（個人用無償ライセンスもあります）
使っている人が少ない分わからないことを調べても不親切なドキュメントしかなかったり情報量が少なく、また古い情報が多かったりします。

WordPressとMovable Typeのタグ比較

例えば、ホームページの管理画面から投稿した記事のタイトル、投稿した日にち、記事のカテゴリー、本文を表示しようと思います。

・管理画面

こちらはMovable TypeでもWordPressでもほとんど同じです。（バージョンによって見た目は変わります）

↑Movable Typeの管理画面。

↑WordPressの管理画面。

・テンプレートファイルの中身

下記のようなHTMLに記事の内容を呼び出す場合ですが、CMSによって記述するタグが異なります。

<h1>ホームページを更新しました！</h1>
<p>投稿日：2017年２月１日</p>
<p>カテゴリー：ブログ</p>
<p>いつもプロクラスをご利用いただき、…記事の本文</p>

★WordPressの場合

<h1><?php the_title(); ?></h1>
<p>投稿日：<?php the_time(‘Y年m月d日’); ?></p>
<p>カテゴリー：<?php the_category(); ?></p>
<?php the_content(); ?>

★Movable Typeの場合

<h1><$MTEntryTitle$></h1>
<p>投稿日：<$MTEntryDate format=”%Y年%m月%d日”$></p>
<p>カテゴリー：<$MTCategoryLabel$></p>
<$MTEntryBody$>

使用する基本的なタグはWordPressでもMovable Typeでも似たようなものですね。
中のファイル構造などはだいぶ違いますが、基本的には一つのCMSを理解すれば他のCMSでもだいたい使い方が理解できるようになります。

初心者がCMSを使うには？おすすめのCMS

どのCMSでも使いこなすためにはHTMLに加え、ある程度のプログラミングの知識が必要となります。でも使っていたらなんとなく「いつも同じタグ使ってるなー」というのがわかるようになります。
なので、まずは初めての方は導入しやすいWordPress(ワードプレス)でいろいろ触ってみるのがおすすめです。

なぜWordPressが導入しやすいか？それはWebでわからないことを調べたときの情報量が多いからです。
初めての時は調べながら作ることになると思うので、WordPressの方が効率よく理解を深めることができます。

そして、無料で簡単に導入できるので、練習用のサーバーがあればいつでも好きに触ってみることができるから。

まずはCMSにはどんな機能があるのか、管理画面でどうやってホームページを更新するのか、WordPressに触れてみてください。

Movable Typeは使用する必要がある時に勉強する、でもいいと思います。

私もはじめはWordPressしか使っていなかったのですが、Movable Typeを使用しているお客様のホームページ更新をしているうちに気がついたらMovable Typeでも一通りのことができるようになっていました。
「再構築」という作業が独特なので、WordPressなどの【動的CMS】とは仕組みがちょっと違うということは勉強しないといけないですけどね。

プロクラスでは全く初めての人でもWordPressの機能をフルに使ってまるごとホームページを作れる授業を用意しているので、興味はあるけど一歩を踏み出せないという方はぜひ一度お問い合わせください。
たった数分でお問い合わせフォームの設置が完了したりするのでテンションが上がりますよ！
【簡単ホームページ制作！はじめてのWordPress】講座詳細