目次
そもそもヘッドレスCMSとは？
ヘッドレスCMSとは、フロントエンド機能を持たないバックエンドのみのCMSのこと。
表示画面が無いことを「頭が無い」と表現するのはなかなかユニークですね。
ヘッドレスCMS自体が登場したのは2010年ごろ。スマートフォンの普及に伴い、PC以外のデバイスに対応したサイトの需要が高まったことが要因とされています。
ヘッドレスCMSの長所・短所とは？
- 「ヘッドレス」ゆえに高速
表示画面の機能を持たずデータはjson形式でやり取りされるため、Webサイトの表示速度改善に役立ちます。 - APIで多種多様なデバイスに対応できる
Webサイトに特化した従来のCMSに対し、ヘッドレスCMSは様々な媒体とAPIで通信が可能。
アプリやデジタルサイネージなどにも活用が可能となっています。 - セキュリティが堅牢
外部接続が前述のAPIに限定されるため、外部からの攻撃リスクが低減できます。 - UIの自由度が高い
WordPressなど通常のCMSと比較しても、柔軟なデータの出しわけやUI設計ができます。
これも表示画面がない「ヘッドレス」ならではの利点です。
ヘッドレスCMSの短所
- WordPressほどの拡張機能はない
下書き保存や公開予約など、CMSを使う側にとって便利な機能がまだまだ少ないのが現状。 - 開発する側の技量が問われる
自由度が高いぶん、使いこなせるかどうかはクリエイターの手腕にかかってきます。
設計時には考えうるパターンを全て考慮する必要がある上に、実装の際にはバックエンドの知識が必要なケースも。
では、WordPressとどう使い分けるといい？
WordPress＝コストを抑えたい/簡単に作りたいとき
WordPressの利用は基本無料。無料で使えるテンプレートやプラグインも豊富で、知識の少ない方でも使いやすいです。
ヘッドレスCMS＝自由に作りたい/セキュリティを強化したいとき
柔軟にUIUXを構築したい場合はヘッドレスCMSに軍配が上がります。
さらに、近年はセキュリティ面の安全性でヘッドレスを選ぶケースも多いようです。
ではでは、ヘッドレスCMS自体どのソフトを選ぶといい？
操作・サポート面で国産ソフトを選びたいなら「microCMS」
非エンジニアでも直感的な操作が可能なヘッドレスCMS。
国産なぶんUIやカスタマーサポートが日本語対応しており、使いやすいです。
データ管理で選びたいなら「HeartCore」
画像や動画をはじめ、さまざまなデジタルアセットを一元管理できるのが特徴のヘッドレスCMS。
もちろんデータの検索や編集も可能。
大規模なサイトに向いています。
価格と自由度で選びたいなら「Strapi」
誰でもソースコードをいじれるOSS（オープンソースソフトウェア）であるヘッドレスCMS。利用料金も基本的には無料です。
他CMSと異なりホスティング（サーバーを用意すること）は自分で行わなくてはいけませんが、プラグインが豊富でサイトに応じて自在にカスタマイズできる点が特徴です。
実務でヘッドレスCMSと関わったケース
感想
コーポレートサイトの改修案件において、
自社製品の詳細情報やスペック表の表示にヘッドレスCMS「Strapi」を用いることとなりました。
デザイナー視点の所感としては「想定より複雑な入力が可能」な点。
製品によって表示するスペック情報がかなり変化し画像表示なども行うケースだったのですが「ここは仕方なく静的実装で」という箇所も少なく進行できました。
情報の入力画面も日本語対応しており、クライアントにとっての使いやすさも担保されていると感じています。
併せて、WordPressを用いたデザイン業務も担当した際よりもデザインの自由度は確かに高いです。今回のように、表示する情報が製品ごとに大きく異なる案件ではヘッドレスCMSは有用と感じました。
気をつけたいポイント
反面、設計段階でディレクターチームと「この場合はどう表示するのか・どうデザインするのか」をしっかり擦り合わせる必要があり、自分自身で設計を行う際には特段注意すべきポイントであると実感しました。
入力画面に関しても情報のグルーピングを行わないと入力時あっちこっちに移動する手間が発生してしまうので気をつけたいポイントです。
また一般的なデザインの際にも言えるポイントですが「この欄は最大で何文字はいるのか」「文字数を超えた時の処理はどうするか」「「画像が入る際の処理はどうするか」のもしもの場合をことさら想定しなくてはいけません。
さいごに
ヘッドレスCMSはバックエンドメインともあり、デザイナーが直接触る機会はあまりないのが現状。
しかし「どんな機能があってどうデザインすれば実装しやすいか」をインプットすることは最良のプロダクトに欠かせない要素。学んでおいて損はないですね。
