CMSとHTMLの違いとは?最適なWebサイト構築のために知っておきたいこと
目次を閉じる
- CMSとHTMLの違い
- マークアップ言語であるHTML
- HTML・CSSでのWebサイト構築
- システムであるCMS
- CMSでのWebサイト構築
- CMSとHTMLの使い分け
- HTMLが向いているWebサイトの要件
- CMSが向いているWebサイトの要件
- Webサイト構築の目的を明確にする
- CMS活用のメリットとは
- CMSのメリット
- CMSのデメリット
- Webサイト構築にCMSを活用する
- HTMLサイトからCMSへ移行可能か
- セキュリティ面で不安が残るCMS
- 静的HTMLとは
- CMSから静的HTMLを書き出す
- 静的HTMLに対応するCMS
- Movable Type
- WordPress
- Concrete5
- 用途に応じたCMS・HTMLの使い分けが重要
- 関連記事
- BOXILとは
CMSとHTMLの違い
Webサイト構築を行う際に、よく耳にする言葉として「CMS」と「HTML」があります。どちらも、Webサイト構築に欠かせないものであるという点では同様ですが、言葉の意味するところはまったく異なるものなのです。
この違いを認識せずにWebサイト構築を行おうと考えても、企業内IT部門や制作会社と意思の疎通が取れず、プロジェクトが遅々として進まなくなってしまうおそれがあるでしょう。
それでは、CMS・HTMLとはどのようなものなのか、基本的な解説を行うとともに、それぞれの使い分けや共存の方法などを紹介していきます。
マークアップ言語であるHTML
まず「HTML」ですが、これはHyperText Markup Language(ハイパーテキストマークアップランゲージ)の略称であり、ここからもわかるように、ハイパーテキストを使った「マークアップ言語」という、コンピューターに文書構造を理解させるための「言語」です。
HTMLは、タグといわれる文字列(<>など)を使う必要があり、記述を行うには「HTMLという言語」を習得しなければなりません。逆にそれさえ理解してしまえば、テキストエディタのみで記述可能なため、Webページ作成のハードルは低いともいえます。
しかし、HTMLではタイトルや段落を含む文書構造は指定できますが、フォント指定や文字の大きさなどの装飾はできないため、CSS(Cascading Style Sheets)というスタイルシートを組み合わせることで、ブラウザで表示した際の見栄えを改善できます。
現時点では、これらの言語も時代に合わせて仕様の拡張が行われており、それぞれ最新の「HTML5」「CSS3」が主流になりつつあります。
HTML・CSSでのWebサイト構築
ここまでの解説でおわかりのように、「言語」であるHTML・CSSができることは「Webブラウザに表示させるためのページを作成すること」です。
実際にこれを一般に公開するためには、Webサイトの構造(ディレクトリ)を組み上げ、ユーザーリクエストにしたがってページ表示ができるようHTMLページを配置したうえで、FTPソフトという専用ツールで公開サーバーにアップロードする必要があります。
このため、ユーザーリクエストによって表示されるのは「単一のHTMLページ」となり、下図のような構成となっている場合、サイドバー部分に変更を加えたいケースでは、すべての関連ページを変更する必要が生じます。
システムであるCMS
CMSは、Content Management Systemの略称であり、HTMLが「Webページを記述するための言語」なのに対して「Webサイト全体を管理し、コンテンツ追加を容易にするシステム」であり「コンテンツ管理システム」と呼ばれます。
HTMLを使用してWebサイトを構築する場合「HTML・CSSでのコンテンツ記述」「ディレクトリ構造を理解したFTPアップロード」が必要になります。しかし、CMSの場合「ブラウザによるサイト管理」「ブラウザからのコンテンツ作成」が可能となり、これによって専門知識を身につけることなく、だれでもサイト管理やコンテンツ作成ができます。
次の記事では、CMSについてより詳しく解説しています。
CMSでのWebサイト構築
CMSによって構築されるWebサイトは、HTMLではなく「PHP」という言語が使用されることが多くなっており、ユーザーリクエストによって表示されるWebページは、下図のような構造を持つようになります。
つまり、ヘッダー・フッター・サイドバーそれぞれが専用ファイルを読み出して表示するようになっており、コンテンツ追加の際は「index.php」部分のみ、コンテンツが蓄積されます。
よって、サイドバーに変更を行いたい場合でも、すべてのページを変更する必要はなく「sidebar.php」の変更のみで作業が完了するのです。
CMSとHTMLの使い分け
このように、CMSとHTMLでは言葉の意味こそまったく別のものですが、どちらを使用してWebサイトの構築を行うかという意味では、比較対象となることがわかります。
しかし、ここまでの解説では、簡単にだれでもWebサイトの構築・更新が可能なCMSに対し、専門知識が必要となるHTMLという図式が成り立ち、HTMLでWebサイトを構築する意味や優位性が見いだせない方もいらっしゃるでしょう。
ところが、現在でも世界の約半数のWebサイトがHTMLで作成されており、CMSの普及が進んでいながらも、優位性は大きく崩れていないのです。
HTMLが向いているWebサイトの要件
HTMLが優位性を保っている理由は、自由度の高いWebページを作成できるということ、物理的に存在するページを表示するという性格を持つため、ブラウザに表示されるスピードが速いという点にあります。
このため、習得の難しさや更新の煩雑さという点を考慮にいれつつ、次のような要件を持つWebサイト構築を行う際に、HTMLが優位になるということがいえます。
- Webページが少ない(コンテンツ更新の必要性が低い)
- 独自デザインの凝ったページが必要
- 表示速度のスピードが最優先
- セキュリティ面の強化
- アクセス集中といった高負荷に耐えられるサイト構築
CMSが向いているWebサイトの要件
これに対して、更新の容易さやスピーディさ、簡単なサイト管理に強みを発揮するCMSの場合、次のような要件を持つWebサイト構築に最適だといえます。
- Webの専門知識を持つ人材がいない
- Webページが多い
- コンテンツの更新が多い(オウンドメディアなど)
- 更新の手間をできる限り削減したい
- 利用目的が明確(ブログ、eコマースなど)
Webサイト構築の目的を明確にする
このように見ていくと、自由度の高いオリジナリティあるデザインを採用し、さまざまな展開を視野に入れられるが、ページ更新頻度は高くない「会社概要や製品ページのみ」のコーポレートサイトのようなHTMLでの構築が向いているといえ、更新頻度の極端に高い「オウンドメディア」構築にはCMSでの構築が向いているといえるでしょう。
どちらもメリット・デメリットを持ち合わせており、それを見極めたうえで、サイト構築の目的に応じた手法を選択することが必要です。
CMS活用のメリットとは
それでは、近年普及が進んでいるCMSには、どのようなメリットが存在するのか、ここまででもCMSが持つ優位点をいくつか挙げてきましたが、デメリット面も含めて整理しておきましょう。
CMSのメリット
コンテンツ作成や更新がだれでもできるため分業が可能
ここまで何度が触れてきましたとおり、Webブラウザによる更新が可能なCMSは、文書を作成するのと同じ感覚でコンテンツ作成が可能です。
そのため、特別な知識を必要とせず、だれでもコンテンツの作成・更新が可能になり、カテゴリーごとに担当を決めるといった、分業体制を確立することでスピーディーでタイムリーな情報発信ができます。
Webサイト全体に統一感を持たせられる
すでに解説したように、CMSのコンテンツ作成・更新は「index.php」部分のみに対して行われます。このため、サイト全体に統一感を出せられます。豊富なテーマを活用することによってイメージの変更も簡単に行えます。
ページリンク切れを防げる
HTMLページを作成してアップロードする際には、ディレクトリ構造を考慮したリンク設定が必要になりますが、これが思わぬページリンク切れをもたらすケースがあります。
しかし、Webサイト全体を一元的に管理するCMSでは、こうしたリンク切れの心配がなくなり、結果的にユーザーの信頼感を得られます。
SEOに強いサイトが構築できる
現代の検索エンジンでは、推奨されるWebサイトの構造がガイドラインとして公表されていますが、多くのCMSは、これに準拠した構造を持っています。
このため、複雑なSEO対策を講じなくとも、作成したコンテンツが検索上位に表示される可能性が高くなります。
豊富なプラグイン・アドオンなどによる拡張機能
Web知識が豊富でない場合でも簡単に管理できるよう、CMSはある程度、柔軟性が犠牲にされている場合が多くなります。
しかし、サードパーティーからリリースされるプラグイン・アドオンなどを追加することにより、基本機能以外の拡張機能をもたらせることも可能になっており、多くのプラグインが無償提供されています。
CMSのデメリット
作成したコンテンツをはじめ、バックアップが必要
HTMLで作成するWebページは、基本的にローカルで作成したものを公開サーバーへアップロードします。
このため、少なくともローカル環境にバックアップが残りますが、ブラウザで直接コンテンツ作成・編集を行うCMSでは、バックアップが残りません。サーバーに万一のことがあった場合に備え、データは常にバックアップしておく必要があるでしょう。
サイト構築の初期費用が高額になりがち
ライセンス無料のオープンソースCMSを活用すれば、用意すべきは公開サーバーだけとなるはずですが、企業独自のオーダーにあわせてカスタマイズを行うといった考慮すると、初期費用自体はHTMLで構築するよりも高額になる傾向があります。
これは、自由度と柔軟性の低いCMSを企業要件にあわせるために、コア部分のカスタマイズが必要になることがほとんどであり、最初から自由度が高いHTMLに比べ、工数が大幅に増えてしまうためです。
Webデザイナーだけでは対応できない領域も
プラグインをはじめ、機能拡張を豊富に持つCMSですが、すべてに対応できるような柔軟性を持てるわけではありませんし、場合によってはセキュリティ面での不安も残ります。
サイトのテーマから逸脱するようなページを作成することも基本的にはできず、社内のWebデザイナーだけでは要望に対応しきれない可能性が大きくなります。
Webサイト構築にCMSを活用する
こうしたメリット・デメリットがありながらも、多くの企業が積極的にCMS導入に向かっているのは、なによりもマーケティング施策に有効なツールだから、ということが挙げられます。
ここからは、いくつかのパターンにわけ、CMSを導入もしくは有効活用するためのヒントを紹介します。
HTMLサイトからCMSへ移行可能か
古くからWebサイトを運営している企業では、HTMLによって構築された内容を現在まで引き継いでいるかもしれません。こうしたケースで「更新頻度を上げたい」「簡単にコンテンツ作成したい」という要望を実現するため、CMSへの移行が検討されることが多くなります。
もちろん、現存のサイトをそのままCMSへ移行することもできますが、コーポレートサイト内にブログとしてCMSを組み込むという手法もあるので、状況に応じて最適な方法を選択しましょう。
セキュリティ面で不安が残るCMS
CMSでは、Webブラウザを使用した管理や更新が基本となるため、時間と場所を選ばない管理・更新が可能な一方、どこからでもアクセスできる状態のため、セキュリティ面では不安が残り、この点で導入に踏む切れないという企業があるかもしれません。
もちろん、権限設定やパスワードなどでセキュリティ強化は可能ですが、特にメジャーなCMSでは、それ自体のぜい弱性が指摘されることもあり、対策を施すことは必要です。
静的HTMLとは
こうした問題を解決するのが「静的HTML」に書き出す手法です。
多くのCMSは「動的サイト」となっており、ユーザーのリクエストに対して「データベースに登録されたコンテンツを読込み、Webページを生成する」という動きをしています。
CMSのページ表示が遅めなのはこれが理由のひとつですが、「動的サイト」に対して「静的HTML」とは、物理的に存在する「動かないHTMLページ」のことをいいます。
HTMLページの表示速度が速い理由でもありますが、そのほかにブラウザからの編集もできないため、セキュリティリスクを最小にできるというメリットを持っています。
CMSから静的HTMLを書き出す
こうした特性を利用し、動的サイトであるCMSから、コンテンツを静的HTMLに書き出して公開し、編集機能自体は非公開にするという手法がとれれば、CMSのセキュリティリスクを劇的に改善できるでしょう。
静的HTMLに対応するCMS
静的HTMLの書き出しを可能とするCMSには、拡張機能の追加によって実現可能なタイプと、最初から静的HTMLを書き出すことが前提となっているタイプにわかれます。
ここからは、代表的なCMSをいくつか紹介しましょう。
Movable Type
Movable Typeは、オープンソースとしてスタートしつつも、現在は商用パッケージとして提供されているCMSです。多くのCMSが使用しているPHPではなく、Perlを言語として使用するのが特徴であり、コンテンツを静的HTMLとして書き出すことが前提となっているため、表示スピードの速さや強固なセキュリティ環境を実現しています。
大企業のコーポレートサイトをはじめ、活用されることが多く、独自のMTタグといわれる記述法で、HTMLのように柔軟なサイト構築が可能となります。
WordPress
WordPressは、ブログ用のCMSとして圧倒的な世界シェアを誇り、完成度の高さから愛用者の多いオープンソースCMSです。これがもたらすメリットとして、万単位にもおよぶプラグインが公開されており、必要に応じて追加することによって充実したマーケティング機能の搭載も可能なほか、静的ファイルの書き出しにも対応します。
ソースコードが無償のほか、プラグインも多くは無償となっていることから、導入コストを押さえられるのもメリットであり、中堅規模のコーポレートサイトにも対応可能な堅牢性も併せ持っています。
Concrete5
Concrete5は、直感的なブラウザの操作で、だれでも簡単にWebサイトの管理、コンテンツ作成ができる、オープンソースのCMSです。ブロック単位でのドラッグ&ドロップで、ページ作成を行う手軽さに加え、細かいアクセス権限設定などでセキュリティ面も強化、プラグインの拡張機能により、静的ページの生成も可能です。
気になるローカライズですが、Concrete Japanのボランティアによって日本語化も行われており、サポート面でも不安はありません。
次の記事では、CMSの世界・日本シェアから主要製品の比較ができます。
用途に応じたCMS・HTMLの使い分けが重要
現在では最新の「HTML5」が主流となりつつあり「CSS3」とあわせ、柔軟で自在なページ作成に、依然としてアドバンテージを持つHTMLですが、CMSの持つ「即時性」という、時代に合致したコンテンツ作成もまた魅力的です。
本文でも紹介したように、HTMLサイトにCMSをブログとして組み込むという例も多く、構築するWebサイトの目的や用途に応じ、それぞれを最適な状態で使い分けていくのが重要だといえそうです。
関連記事
BOXILとは
BOXIL(ボクシル)は企業のDXを支援する法人向けプラットフォームです。SaaS比較サイト「BOXIL SaaS」、ビジネスメディア「BOXIL Magazine」、YouTubeチャンネル「BOXIL CHANNEL」を通じて、ビジネスに役立つ情報を発信しています。
BOXIL会員(無料)になると次の特典が受け取れます。
- BOXIL Magazineの会員限定記事が読み放題!
- 「SaaS業界レポート」や「選び方ガイド」がダウンロードできる!
- 約800種類のビジネステンプレートが自由に使える!
BOXIL SaaSでは、SaaSやクラウドサービスの口コミを募集しています。あなたの体験が、サービス品質向上や、これから導入検討する企業の参考情報として役立ちます。
BOXIL SaaSへ掲載しませんか?
- リード獲得に強い法人向けSaaS比較・検索サイトNo.1※
- リードの従量課金で、安定的に新規顧客との接点を提供
- 累計1,200社以上の掲載実績があり、初めての比較サイト掲載でも安心
※ 日本マーケティングリサーチ機構調べ、調査概要:2021年5月期 ブランドのWEB比較印象調査