BACK

入社1年目がCMSに挑戦した話

稲垣 翼
2025-06-19
xfacebookline

はじめに

はじめまして!フロントエンドエンジニア2年目の稲垣です。

今回は新卒エンジニアとして配属後、多種多様な案件を経験した中でかなりやりがいのあったCMSについて記事を書こうと思います。

ところで、記事を見ていただいているみなさん。CMSに対して、なんとなく「テンプレートを複製できる便利なもの」というイメージを持っていませんでしょうか。ひよこエンジニアの僕は、トレーナーからCMS案件アサインのお話を受けた時、頭が「??」でした。

そのような右も左も東西南北もわからない状態で初のCMS案件を経験し、自分の中でCMSに対する考えがかなり変わったので、共有させてください!

CMSとは

CMSとは、「Contents Management System」の略称で、名前の通りWebサイト上のコンテンツを管理するシステムです。
コンテンツを管理できるシステムといっても抽象的すぎるので、構造を理解するための図を作ってみました。

undefined

上記の図を見ていただければ分かるように、CMSの造りは意外にもシンプルで、CMSの管理画面上でユーザーがテキストや画像を簡単に操作・入稿し、ページを作成していくという構造をしています。

僕も初めて「CMS」と聞いたときは複雑な構造を想像していたのですが、上記の内容を要約すると、類似的なページや再利用性のあるコンポーネントの複製を容易に実装できるというのがCMSの最大の強みになると感じています。
実際にCMSを使ってみて、この再利用性とCMSのUIに特筆したメリットを挙げてみました。

CMSのメリット

非エンジニア向けの優しい設計

CMSで構築されたWebサイトは多数のコンテンツの組み合わせで構成されているため、専門的な技術知識がない人でも、簡単にWebページを作成することができます。

サイト公開後の運用コストを削減

CMSは得意先がコンテンツを自由に組み合わせて運用していくことが可能なため、他のプロジェクトと比較して、公開後に必要な実装者のリソースが少なくなるかもしれません。

特に「非エンジニア向けの優しい設計」という点に関しては、実際にCMSのユーザーインターフェースに触れる上でかなり実感しました。
「Web制作」と一概に言うと、かなり専門的な印象を持たれる方が多いかと思いますが、CMSのUIの多くはドラッグ&ドロップを提供するなど、スキルセットに捉われない、優しい画面構成になっています。

CMSの種類

サービス毎の比較

undefined

CMSは大きく「従来型CMS」と「ヘッドレスCMS」の2種類存在します。これらのメリット・デメリットを比較し、上記の表にまとめてみました。

「従来型CMS」は、フロントとバックが一体型のCMSで、コンテンツ管理と表示を1つのシステムで完結させることができます。対して、「ヘッドレスCMS」は名前の通り「ヘッド(フロント)」が存在せず、フロントとバックで役割が分担されています。

「フロントが存在しない」ということは実装者側でフロントを作る必要があるので、作業工数は多くかかってしまいます。しかし、その分フロント側で実現できる実装の幅が広がるので、表示画面の自由度はかなり高くなります。

アイスタのお仕事では新規でCMSを使う際にはmicroCMSが候補として多い印象です。余談ですが、microCMSは日本で作られた「ヘッドレスCMS」なので、日本語のドキュメントが充実しており、かなり実装者フレンドリーなサービスでもあります!

「従来型CMS」と「ヘッドレスCMS」

さて、前述したように、従来型CMSとヘッドレスCMSの違いを一言で言うと「CMSがフロント領域を担うか否か」の違いなのですが、この差によって実現可能なことと不可能なことに沢山の違いが生まれます。文章では伝わりづらいかと思うので、図に起こしてみました。

undefined

まず、「従来型CMS」はCMSがバックとフロントの領域を統合して担っています。ユーザーが入力した情報をCMS側でフロントに伝達し、それを一つのWebページとして出力することができます。これは案件全体の費用感としてはかなりメリットで、大幅に実装工数を削減することができます。
しかし前述したメリットの反面、CMS側でコンテンツのデザインのバリエーションを決められてしまうので、“オリジナリティが出しにくい”というデザイン面ではかなり大きなデメリットがあります。

次に、上記の図右にある「ヘッドレスCMS」の特徴としては、CMSの領域はバックのみで、フロント領域と分離している点が挙げられます。このサービスにより、ユーザーが入力した情報はそのままフロントにつなぎ込まれ、デザインやシステム仕様などにオリジナリティを含んで実装することが可能になりました。

サイト制作においてオリジナリティをそこまで求めていないユーザーや制作費用をなるべく抑えたい方にとって、「従来型CMS」はかなり魅力的です。対して、「自社を目一杯アピールできるサイトを作りたいから、汎用的なサイトではなく個性あふれるサイトを依頼したい..!」と思う方もいると思います。そのようなニーズによって生み出されたサービスが、「ヘッドレスCMS」です。

おわりに

今回の記事では、CMSの概念的なお話を、稲垣の経験談からお伝えしました。
ぜひ本記事を見てくださっている皆さまも、CMSを触ってみて一緒に楽しく開発していきましょう!

執筆者
稲垣 翼
2024年 博報堂アイ・スタジオ新卒入社。
フロントエンドエンジニアとしてコーポレートサイト制作、実装ディレクションなど、さまざまな制作領域に奮闘中。最近は部屋のインテリアに凝ったり、ライフスタイル関連のVlogに興味がある。

OTHER PAGES