Blog

制作と日々のこと

【非エンジニア】はじめて学ぶ“storyblok” vol.2 Storyblok開発に必要なスキル

2025/06/09

storyblok学習ブログ、前回からの続きです。
今日から知識的な部分を少しずつ記録していきます。

目次

  1. ヘッドレスCMSとは？
  2. Storyblokの特徴
  3. 開発に必要なスキルは？
  4. 私に必要なスキルは？
  5. React？ Vue？
  6. まとめ

ヘッドレスCMSとは？

とは言え、まず知りたいのは「ヘッドレスCMSって何？」ということ。

丁寧に解説されたコンテンツはたくさんあるのでさらりとまとめさせてもらうと、バックエンドとフロントエンドが独立したCMSということらしい。

バックエンドは裏側で動いているシステム、フロントエンドはユーザーが見る・触れる部分（見た目）のことで、ヘッドレスCMSはあくまでもデータを渡す係。
管理画面で作成・編集したものを、APIを利用してフロントエンドに表示させましょう、ということみたいです。

Storyblokの特徴

では、StoryblokはどんなヘッドレスCMSなのか？特筆したい特徴としては以下の2点。

  1. ビジュアルエディタ
    他のヘッドレスCMSではあまり一般的でない、ビジュアルエディタが搭載されているヘッドレスCMSだそう。コンテンツを管理画面でノーコード的に構築できて、サイト管理者が非エンジニアでもコンテンツの作成がしやすいのが特徴！
  2. コンポーネントベースの設計
    Storyblokでは、「画像」＋「テキスト」＋「ボタン」などの再利用可能なコンポーネント（ブロック）として管理します。この構造により、ページをレゴのように柔軟に組み立てることができて、開発者にとっても拡張性の高い設計が可能！そしてそのためのコンポーネントの追加がしやすいそう。

つまりStoryblokは、

  • 「ビジュアルに編集したい」
  • 「でもフロントエンドは自由に作りたい」
  • 「チームで効率よく運用したい」

を叶えてくれる、ノーコードとコーディングの良いとこ取りをしたような設計のようです！

開発に必要なスキルは？

ここで、サイト管理者としてのスキルはそれほど高いものは必要ないということが分かりました。では開発者に必要なスキルはどのようなものがあるでしょう？

具体的にはこちら

  1. HTML/CSS
    言わずもがな、フロントエンドにまず一番に必要なコーディング知識ですね。
  2. JavaScript（ReactやVue）
    先述のコンポーネント作成に必要になりそうです。
  3. ホスティング知識（VercelやNetlify）
    ヘッドレスCMSの最大の特徴である『データを渡す』というフェーズで必要になります。

私に必要なスキルは？

それでは今回のStoryblok移行案件で、私に必要なスキルは何になるでしょう？
前回のブログから、参加する制作で現時点で分かっていることは以下。

  • リニューアル（storyblok移行）案件
  • これまでも当サイトは別のプラットフォームでのコンテンツ作成担当として参加してきた
  • リニューアル後のデザインは完成済
  • メインで構築するエンジニアさんは他にいらっしゃる
  • 私は公開時のコンテンツ作成や、公開後のコンテンツ作成が中心になりそう

注目したいのはここ
『私は公開時のコンテンツ作成や、公開後のコンテンツ作成が中心になりそう』

と言うことは、ここまでの情報から、メインで構築するエンジニアさんが準備してくださるコンポーネントを利用して、ビジュアルエディタでコンテンツ作成するのみであれば、今のスキルでも十分になりそう＾＾

と思ったのですが！
これまでも数年お付き合いさせてもらってきて、その経験上なんとなく予想できるんですよね。

「たぶん私もコンポーネント作成する場面訪れる・・・！」

React？ Vue？

と言うことで、コンポーネント作成に必要なJavaScriptのフレームワークを学習することにしました。
ReactかVueが必要らしいけど、どっちが良いんだろう・・・？

ChatGPTに尋ねてみたところ

  • Reactの方が「柔軟で自由」だが「覚えることが多い」
  • Vueは「構造がシンプル」で「HTML/CSS経験者にやさしい」
  • HTML/CSSの知識があるなら、Vueの方が取りかかりやすい

とのこと。Vueでも十分Storyblokのフレームワークを自由に作成することはできるようです。
といういことで、Vueの学習を始めることにしました！

ちなみに、これも前回のブログでも書きましたが私のJavaScriptの理解は10段階中3程度なので、そのこともCPTに相談。VueがJSの難しいところを隠してくれるから大丈夫だよ！とのこと（涙）

フレームワークを開発してくださる皆さまに感謝・・・！

学習、頑張るぞー＾＾

まとめ

今回のまとめです。

  • ヘッドレスCMSとは、バックエンドとフロントエンドが独立したCMS。管理画面で作成したコンテンツをAPIを利用してフロントに表示させる役割を担ってくれている。
  • Storyblokはノーコードとコーディングの良いとこ取りなシステム。エンジニアと非エンジニアどちらにとっても使いやすいCMS。
  • Storyblokサイトの開発において必要なスキルは
    • HTML/CSS
    • JavaScript（ReactやVue）
      →コンポーネント作成に必要
    • ホスティング知識（VercelやNetlify）
      →データをフロントに渡すフェーズで必要

次回はStoryblokの管理画面を見てみましょう！
ゆるりとした更新ですが、次回もお楽しみに。

【非エンジニア】はじめて学ぶ“storyblok”

〉vol.1　まえがき
〉vol.2　Storyblok開発に必要なスキル

※ 一連のシリーズで記録している内容は、筆者の学習におけるメモのようなものです。間違った記載もあるかもしれませんので、参考にされる場合はご自身でも調べていただいた上でご活用ください。