近年、ウェブ開発の現場で注目を集めているヘッドレスCMS。その中でもその高機能さで注目されている「Storyblok」を紹介したいと思います

Storyblokの実力は、ガートナー社のカスタマーズチョイス調査においても高い評価を受けています。数多くのヘッドレスCMSが存在する中、Storyblokが唯一選ばれたサービスとなりました。

Storyblokは「ストーリーブロック」と発音しますが、「Block」ではなく「Blok」なのは、単にドメインが取れなかったからだとCEO自らがイベントで語っておりました。

さて、Storyblokは単なるヘッドレスCMSとしての機能を超えた、シンプルなヘッドレスCMSと比べてかゆいところに手が届く機能を備えており、その利便性を気に入った多くの企業や開発者に支持されています。

そんなStoryblokの特徴を2つ取り上げてご紹介したいと思います。

目次
Storyblokの特徴1: ビジュアルエディタ
Storyblokの特徴2: ブロックライブラリ
Storyblokが向いている場合とそうでない場合
まとめ

Storyblokの特徴1: ビジュアルエディタ

まず、Storyblokの最大の特徴として、ビジュアルエディタを標準装備している点が挙げられます。これにより、コンテンツのプレビューが非常に容易になりました。URLを指定するだけで、リアルタイムでのビジュアルプレビューが可能となり、その変更点を即座に確認できます。

画面の中央にプレビュー画面が大きく表示されています。画面の右側がコンテンツやブロックのCMSとしての編集画面です。この右側の部分に文字を追加したり変更したりすると、プレビュー画面にその変更がリアルタイムで表示されます。

タブレット向けやモバイル向けもボタン一つで表示を切り替えることができます。編集中の情報を保存したりデプロイしたりせずにリアルタイムで確認できるのは大きなアドバンテージだと言えます。

このためにはプレビューのためのURLを指定するのですが、ローカルホスト上も指定可能ですので、開発中のサイトでも確認作業がスムーズに行えるのは大きな利点です。

Storyblokの特徴2: ブロックライブラリ

次に、コンポーネント化されたページのパーツ管理機能があります。これにより、ページ内で使用する各パーツをコンポーネントとして管理し、柔軟にページを構築することができます。また、ブロックライブラリを利用することで、様々なプロジェクトの要件に合わせたカスタマイズや拡張が行えます。ページを構成する要素をブロックとして登録し、それを組み合わせてページを作成する流れは、開発の効率化に大いに貢献しています。

ページを構成する要素をテンプレート内に組み合わせておけます。例えば、キャンペーン向けのLPがあったとします。そのページは以下のような要素で構成されるとしましょう。

•タイトル文字
•サブタイトル
•キャッチコピー
•タイトル画像
•ロゴ
•お問い合わせのボタン
•コールトゥアクションのボタン

こうした要素を組み合わせたページを用意しておけば、CMSの管理画面からこれらのブロックの内容を編集したり、ブロックの構造を組み替えたり組み合わせたりすることができます。そしてプログラム側ではページの要素を大枠だけ定義しておくことで、ページ内部の要素に関してはエディターやデザイナーがかなりの自由度でコンテンツを管理できます。例えば、ボタンの位置を組み替えるためにエンジニアの手を借りる必要はない形でサイトが設計できるのです。

Storyblokが向いている場合とそうでない場合

Storyblokは高度なカスタマイズ性と再利用性を持つヘッドレスCMSであるため、常に新しいコンテンツを追加し続ける必要があるサイトに役立ちます。例えば、大量の商品情報を扱うEコマースサイトにおいても、その強力なCMS機能を活かしやすいでしょう。北欧のアパレル大手Marc O’poloはStoryblokのイベントでよくケーススタディとして取り上げられますが、実際にサイトを確認してみると、商品ページなどのカスタマイズが非常に高度であることが読み取れます。

Storyblokはこうした特徴により、高度にコンポーネント化したページを自由にさわりたい場合、LPやキャンペーンページなどの速やかに作成するニーズがある場合、技術ドキュメントのようにバージョンアップに合わせた陳腐化が起こりやすいコンテンツの制作、などに向いていると言えるでしょう。コンテンツのアップデートが頻繁であるなら、リアルタイムで編集中の内容がどのようにページに影響を与えるかをすぐに確認できるのは非常に便利だと感じるはずです。ブロックライブラリによってページの構成要素を組み合わせる自由度が高いことも満足度の高さに繋がっています。

一方、Storyblokがそう向いていないケースとしては、短期間に一度限りのイベントやキャンペーンサイトの作成の場合などが考えられます。こういった場合、Storyblokのような高機能なCMSを利用する代わりに、シンプルな静的ウェブサイトジェネレーターで済ませてしまうほうが効率的かもしれません。また、単なるコンテンツを格納するデータベースを必要とするだけなのであれば、別のヘッドレスCMSを選択したほうが良いのかもしれません。

まとめ

Storyblokの大きな特徴であるビジュアルエディタとブロックライブラリをご紹介しました。もちろんStoryblokは、ヘッドレスCMSとしての基本的な機能も持ち合わせており、シンプルなコンテンツを配信する基盤としても普通に使用できます。しかしこれらの特徴を活かせるプロジェクトで活用することで、その優位性を役立てることができます。

Storyblokではチームでのコラボレーションや、様々なフロントエンドでの使いやすさなど他にも多くの特徴があります。今後もその機能やサービスが進化していくことでしょう。ヘッドレスCMSの導入を検討している方は、一つの選択肢としてStoryblokも検討してみるのはいかがでしょうか。

最後まで読んでくださり、ありがとうございました

株式会社ヒューマンサイエンスは、他社にはない、「ドキュメント制作のノウハウ」×「最新のWeb開発技術（Jamstack）」を用いて、Webコンテンツとプラットフォームのソリューションをご提供します。

関心がある方は、ぜひこちらまでお問い合わせください！
株式会社ヒューマンサイエンス
https://www.science.co.jp/document/jamstack.html

また、11/21（火）に「次世代Webマニュアルで実現！
～モダンフロントエンド×ドキュメントで構築する管理更新フロー～」というセミナーを開催します。
無料セミナーとなっておりますので、ご興味のある方はぜひご参加ください。
https://www.science.co.jp/news/35586/