第1章 Lesson 5 ／ 読了 約14分

HTML / CSS / JavaScript と CMS — 難しそうなところを例えで理解する

この記事でわかること

  • HTML・CSS・JavaScript の役割
  • CMS とは何か
  • 「CMS=安くなる」ではない
  • 業者と話せる CMS 用語

Web担当者をしていると、HTML・CSS・JavaScript・CMS — このあたりの言葉は、日常的に業者との会話で必ず飛び交います。 HTML などを書けるようになる必要はありません。 ただ、会話がしやすいように、それぞれが「何のためにあって、何ができて、何ができないか」を理解しておきましょう。

1. Web サイトを人物に例えて理解する

HTML とか CSS とか、結局はコードやシステムのお話になるので、厳密にお話しすると馴染みのない話になってしまい、理解しにくいかと思います。 そのため、Web サイトを 「人物」 に例えて説明していきます。 Web担当者としては、この例えから、ざっくりと概念を理解できれば十分です。

2. HTML とは — 中枢となる「人」そのもの

HTML の役割

HTML(HyperText Markup Language)は、サイトの 中身 を作る言語です。 具体的には、文章のどこが「見出し」で、どこが「段落」で、どこに「画像」が入るか、を構造的に作り上げています。 各要素にタグと呼ばれる印を付けて、「これは見出しですよ」「これは画像ですよ」とブラウザに伝えて表示させています。 サイトとは、その HTML の集まりであることが基本です。(HTML 以外にも PHP などがありますが、それはまた別のお話です。)

HTML を「人」に例える

本レッスンでは HTML を 「人」 に例えておきます。 いわば HTML とは素の部分であり、中枢であり、中心部分です。 HTML が人であることを前提に、CSS や JavaScript についても説明します。

HTML を見る方法

ブラウザで HTML の中身を簡単に確認する方法があります。 HTML を見たいページの画面内(画像などがない部分)で右クリックするとメニューが開くので、その中の「ページのソースを表示」を押すと、ブラウザの別タブで HTML のコードが表示されます。 一見、難しそうなプログラムが書かれているように見えますが、よく見ると意外とシンプルで、「あ、この部分ってページにも書いてあった」と気づく箇所が多数あります。 それくらい、HTML の中身はページの中枢になっているのです。

3. CSS とは — 見た目を飾る「服装」

CSS の役割

CSS(Cascading Style Sheets)は、サイトの 見た目 を決める言語です。 文字の色、余白、文字の大きさ、要素の並び方、レイアウト、装飾 — このあたりを担当します。 HTML が中身、CSS が見た目、と覚えてください。

「同じ人でも、服装で印象が変わる」

人物に例えると、CSS は服装です。 同じ人でも、スーツを着るのとカジュアルな服を着るのでは、第一印象が全然違いますよね。 Web サイトでも同じことが起きます。 WordPress を使っていれば、テーマ(=デザインのセット)を変えるだけで、同じ記事が別のサイトのように見えます。 中身(HTML)は同じなのに、見た目(CSS)で印象が変わる。 この「中身と見た目を分けられる」のが、Web の強みです。

どこまで自分でやって、どこから業者に頼むか

色の調整やテーマ選びくらいなら、担当者が CMS の管理画面からできます。 でも、レイアウトの大幅な改造、複雑なアニメーション、複数デバイスへの最適化は、業者領域です。 第1章 Lesson 1 でも書いたとおり、ここを担当者が自分で頑張ると、本業が止まります。 「色の変更」「画像の差し替え」までを自分で、それ以上は業者に依頼、というのが現実的な線引きです。

4. JavaScript とは — 「特技や能力」

JavaScript の役割

JavaScript は、やり取り上、省略されて JS と表記したり言ったりすることが多く、サイトに 動きや機能 を加える言語です。 画像のスライダー、フォームの入力チェック、ハンバーガーメニューの開閉、チャットボット、ポップアップなどを、JS で動かすことができます。 正確には CSS でも一部、可能な機能もありますが、JS の方が緻密で複雑な対応が可能です。 このようなことから、これまでの例に例えると、JavaScript はその人物に与える特技や能力のようなものだと言えます。

パフォーマンスの押し売りは迷惑

JS は、まさに特技やパフォーマンスのように、見せられると「おぉ!」と思うような動きを見せてくれます。 そのため Web サイトとしても「豪華!」「かっこいい!」と思われやすいのは確かです。 ただし、パフォーマンスも押し売りされると鬱陶しいと思いませんか? Web サイトでも同様です。 見せる側は「派手に見せたい!」と思うかもしれませんが、見る側は不必要だと感じていることも多々あります。

必要とされる特技で勝負する

JS の使い方の基本姿勢は「派手な動きより、目的を達成する動きを」です。 たとえばコーポレートサイトのトップに、スライダー(画像が次々と切り替わる動き)を入れることがよくあります。 華やかに見える反面、訪問者がどの画像も読み切れずに離脱しがちです。 「動かさない」という選択肢が正解のケースは、実は多いのです。

JS でこんなことをすれば「ユーザーにとって便利」という視点を忘れないようにしましょう。

HTML を「人」、CSS を「服装」、JavaScript を「特技」に例えて、三者の役割の違いを古書風にまとめたインフォグラフィック

5. CMS とは — 「簡単アバター工場」

CMS とは

CMS(Content Management System)は、サイトの中身を、これまでの HTML/CSS/JavaScript を書かなくても、誰でも操作できるような簡単な 管理画面から更新できる 仕組みです。 Microsoft の Word で作るくらいの感覚で Web ページを作成することができてしまいます。 これまでの例に合わせると表現が少し飛躍しますが、HTML も CSS も JavaScript も一定のフォーマットに沿って、どんどん製造できてしまうアバター工場のようなものです。

CMS の代表例

CMS にはいくつかのプラットフォームがあるので、代表的なものをいくつかご紹介させていただきます。

  • WordPress：世界・国内ともに最も普及している CMS で、プラグインで機能拡張できる柔軟性が強みです。WordPress はサーバにインストールすることで利用できることから、インストール型の CMS プラットフォームと分類されます。普及率が高く利用率も高いことから、セキュリティの甘い部分があると狙われやすいという面もあるので注意が必要です。
  • MovableType：国内企業のインストール型の CMS プラットフォームです。日本で根強い人気があり、使用している企業も多数あります。WordPress よりも仕組み的にセキュリティが高く、大手企業でも利用しています。
  • Drupal：これもインストール型の CMS プラットフォームですが、上記の 2 つとは異なり、各データパーツをレゴブロックのように組み立てて利用できるため、より複雑な設計を可能にしています。そのため大規模な Web サイトや高機能性を求める Web サイトで利用されています。
  • SaaS 型(STUDIO、Wix、Shopify など)：サーバにインストールする必要がなく、SaaS としてサイト構築・運用できる CMS です。インストールが不要で、サービス契約するだけで即時利用できるようになるという利点がある一方で、CMS とサーバが一体化しているので、サーバを引っ越ししたいときやリニューアルを行いたいときに、データの移行などができず、身動きがとりづらくなるという特徴もあります。
  • ヘッドレス CMS(microCMS、Contentful 等)：ヘッドレス CMS は情報を登録する機能(データベース)だけを利用するようなイメージで、表示自体は別途サーバに用意された Web ページで行います。表示画面にヘッドレス CMS で登録した情報を呼び出しているような形です。情報を自由に扱いやすく、カスタマイズ性の高い Web サイトに仕上げやすいことから、昨今で急速にシェアを伸ばしています。例に挙げている microCMS、Contentful は SaaS 型ですが、サーバインストール型のヘッドレス CMS もあります。

CMS のメリット

CMS の魅力は、大きく言うと 2 つです。 1 つ目が、業者を介さずに自社で更新できるので、更新のスピードが速いという点。 2 つ目が、管理画面が用意されているので、HTML を書けない人でも簡単に更新できるという点です。 「お知らせをすぐ出したい」「記事ページを毎週更新したい」という現場では、CMS のメリットが活かしやすくなります。

6. 「CMS 化」のデメリット

自社で簡単に Web サイトを更新できるという観点から、CMS を導入したがる企業は非常に多いです。 そしてそれを助長するように、安易に CMS を導入させる業者も多いです。 しかし、安易に CMS を導入したことで、結果的に失敗してしまうというケースもあります。 CMS には デメリットもあることを理解 し、後悔しないように気をつけましょう。

安価の代償、望まないテンプレート化

安価に導入しやすいという観点から WordPress が利用されるケースが多いのですが、WordPress はテンプレート化された範囲での制作になりやすく、自由度が下がります。 カスタマイズすることで自由度を上げることも可能ではありますが、その場合は、CMS では更新できなくなるか、CMS で更新できるようにするためにコストを払う必要性が出てしまうことがあります。 自由と不自由にコストが紐づいてしまう関係 にあり、テンプレート化された範囲でやり切れるようなコンテンツであれば、安価に CMS を最大活用できることもありますが、そのあたりを理解せずに導入すると「こんなはずではなかった」となるので注意が必要です。

自社で更新できる=利益ではない

前述したとおり、CMS を導入する場合、不自由のリスクを背負うこともあります。 そのようなリスクがある前提で「本当に自社で更新し続けますか?」と考えてみてください。 確かに CMS は自社で簡単に更新できるシステムです。とはいえ、操作が簡単であれば更新が簡単なのかと言えば、そういうわけでもありません。 何を、どんな風に、どういうやり方で更新すべきなのかという表現の最適化を、自社でコントロールしなければいけません。ただ、それを大きな負担に感じる企業も多いのです。 結果的に、自社での更新に手間がかかって更新しなくなっていってしまう、または CMS を使って業者に更新させるという結果に陥ってしまうこともあります。 自社でやれれば費用にならないから利益的だと考えてしまうと、誤った判断になってしまうこともあるので要注意です。

ほぼ更新しないというケース

「自社で更新できたらいいなぁ」という感覚だけで CMS を入れてみたものの、実際はほぼ更新しないというケースも少なくありません。 上述のとおり、結局は自社で更新するにしてもそれなりに労力は必要なので、何も更新しないということも多々あります。 まったく更新しないのであれば、ただ CMS の制約に縛られるだけのデメリットにしかなりません。 年に数回程度しか更新しないのであれば、いっそのこと業者に更新を依頼する方がよっぽど安く済むということもあるので、「本当にしっかりと自社で更新していくつもりなのか」という観点は非常に重要になります。

見落としがちなメンテナンス費用

WordPress の場合、テーマやプラグインの随時アップデートが必要となります。 アップデートのやり方を失敗すると、サイトの表示がおかしくなったり、最悪の場合、サイトが表示されなくなるということもあります。 上述のとおり、WordPress はしっかりとアップデートしないとセキュリティリスクが高まってしまいます。 アップデートしても不具合を起こすかもしれない、アップデートしなければハッカーなどにサイトを改ざんされるかもしれない、という板挟みにあってしまいます。 結果的に、メンテナンスを業者に依頼することになり、別途メンテナンス費用が発生して、お得感がなくなってしまうこともあるのです。

CMS のメリットの誤認

「CMS のメリット」として 承認フロー / 更新履歴の管理 / 更新権限の分離・分担 / 複数人での管理・運用 があります。 確かに CMS によってはこれらの機能が備わっていて、大きな組織や大規模サイトでは必要な機能として重宝することもあります。 ただし、これらの機能は必ずしも CMS でなければいけないわけではないので、これらを実現したいから CMS を利用するというのは検討が足りていないと言えます。

例えば、各機能にはそれぞれ代替手段があります。

「これらを CMS でシステム化したいから CMS を導入する」という判断は、運用が小規模なら ただの過剰投資 になります。

CMS が本当に 固有の価値を発揮するのは「記事コンテンツ系」 です。 メタデータ・タグ・カテゴリ・絞り込み・関連記事レコメンド・公開期間管理、大量記事の検索・並び替え・運用効率化 — これらが必要な場面、つまりオウンドメディア・ニュース・ブログ・商品データベースなどです。 それでも、コーポレートサイトのお知らせが月数件なら、静的更新で十分です。

7. 「CMS」の採用判断軸

実務で必要になる判断は、次の 5 軸でスコアリングするとシンプルになります。

  • 判断軸 1:更新頻度(週何回?月何回?)
  • 判断軸 2:更新者数(担当者 1 名?複数人?業者経由?)
  • 判断軸 3:予算(初期構築 + 月額保守の合計)
  • 判断軸 4:セキュリティ許容度(CMS は脆弱性更新の運用が必須)
  • 判断軸 5:表現自由度(独自デザインの希望度)

月に数回しか更新しないコーポレートサイトなら、静的サイトのほうが向きます。 管理画面のメンテナンスもプラグインの更新も不要、セキュリティリスクも下がります。 一方、毎週ブログを公開するメディア型なら、CMS が圧倒的に楽です。 両極端の中間で迷ったら、「3 年運用したときの総コスト」を出して比較してください。 初期費用だけ見ると CMS が安く見えますが、運用費を含めるとひっくり返ることもあります。

テンプレート：CMS 要否判定シート(5 軸版)

8. CMS で利用されがちな用語

最後に、業者との会話で出てくる用語をご紹介します。 サイトの作りの用語 と 運用作業上の用語、この両方を押さえておくと、業者との初打ち合わせで「話の通じる人だ」と思ってもらえるはずです。

サイトの作りの用語

運用作業上の用語

  • ステージング：本番にデプロイする前に動作確認する練習環境
  • 本番：訪問者が実際に見る公開環境
  • デプロイ：ステージングや手元の環境から本番に反映する作業
  • ロールバック：デプロイ後に問題が出たとき、前の状態に戻す作業
  • バックアップ：データを別の場所にコピーして保管する作業
  • リリース：新機能やコンテンツを公開すること
  • マージ：複数の変更を 1 つにまとめる作業
  • 公開フラグ：ページが公開状態か非公開状態かを切り替える設定
用語集
テンプレート