![Storyblok CMS: 開発者向け完全ガイド [2026年版]](/_next/image?url=https%3A%2F%2Fmedia.techsy.io%2Ftechsy-io%2Fhero-203-1200x630.webp&w=3840&q=75)
Storyblok CMS: 開発者向け完全ガイド [2026年版]
Storyblokは、コンテンツ編集者が実際に編集内容を視覚的に確認できる数少ないヘッドレスCMSの一つであり、この単一の機能が開発者と編集者の関係性全体を変えてしまいます。シリーズCで8,000万ドルの資金調達を行い、2026年3月にワークフロー自動化機能をリリースした後、Storyblokが本当に優れている点、不足している点、そして次のプロジェクトに適しているかどうかを理解する価値があります。
Storyblokとは?
Storyblokは、2017年にオーストリアのリンツでDominik Angerer氏(CEO)とAlexander Feiglstorfer氏(CTO)によって設立された、組み込みのビジュアルエディターを備えたヘッドレスCMSです。Bloksと呼ばれるコンポーネントベースのアーキテクチャを採用し、RESTおよびGraphQL APIを通じてコンテンツを配信します。Adidas、Tesla、Oatlyなどで採用されており、シリーズCラウンドを通じて総額1億3,800万ドルの資金を調達しています。
ヘッドレスCMSはコンテンツとフロントエンドを分離し、APIを通じてコンテンツを管理し、React、Vue、またはAstroアプリがそれを消費します。この部分はContentful、Sanity、Strapi以及其他のすべてのヘッドレスオプションで同じです。Storyblokを他と異なるものにするのは、ビジュアルエディターです。
私たちは異なるヘッドレスCMS(このブログを動かしているSanityを含む)上で4つの本番用ウェブサイトを運用しています。実務経験から見たStoryblokの比較は以下の通りです:ビジュアルエディターは、開発者とコンテンツチーム間の往復作業を確実に減らします。編集者がフォームを入力して「これはどう見えるのか?」と尋ねる代わりに、実際のページを確認できます。これはマーケティング上の謳い文句ではなく、真のワークフロー改善です。
コアアーキテクチャは2つの概念に分解されます:Stories(ページまたはコンテンツエントリー)とBloks(ヒーローセクション、機能グリッド、CTAなどの再利用可能なコンポーネント)。開発者はBlokスキーマを定義し、編集者はそれらをStoriesにドラッグ&ドロップします。コンテンツはContent Delivery APIを通じてフロントエンドに到達します。
AdidasやTesla以外の特筆すべき顧客には、Virgin Media O2、dm-drogerie markt、Oatly、Spendesk、Paniniが含まれます。Storyblokが他の主要なオプションと比較してどう位置づけられるかについて詳しく知りたい場合は、ヘッドレスCMS比較記事をご覧ください。
Storyblokのビジュアルエディターはどのように動作するのか?
Storyblokのビジュアルエディターは、iframe内でフロントエンドを読み込み、各コンポーネント上に編集可能な領域を重ねて表示します。コンテンツ編集者は、訪問者が正確に見るもののライブプレビューを確認でき、すべてのBlokでクリックして編集する機能を利用できます。これには、フロントエンドアプリケーションに設定されたStoryblokBridge JavaScriptライブラリが必要です。
これが、Contentfulのフォームベースのアプローチ、Sanityのコードとしてのスキーマアプローチ、またはStrapiの管理パネルとは一線を画す機能です。それらのCMSは編集者にフィールドを持つフォームを提供しますが、Storyblokは編集者に実際のページを提供します。
iframeアーキテクチャ
内部での動作原理は以下の通りです:編集者がStoryblokダッシュボードでStoryを開くと、ビジュアルエディターはiframe内にフロントエンドアプリケーションを読み込みます。Storyblokは各Blokのデータに_editableプロパティを注入し(下書きコンテンツのみ)、StoryblokBridge JavaScriptライブラリが変更を監視します。編集者がコンポーネントをクリックすると、ブリッジが親のStoryblokウィンドウと通信し、正しいフィールドエディターを開きます。
その結果どうなるか?編集者はヒーローセクションを直接クリックして見出しを編集できます。新しい証言Blokを料金セクションの下にドラッグできます。変更がプレビューに即座に反映されるのを確認できます。「保存してステージングサイトを確認する」というループは不要です。
注意点:ビジュアルエディターは公開済みコンテンツではなく、下書きコンテンツでのみ機能します。プレビューURLは、下書きデータを取得するアプリのバージョンを指す必要があります。セットアップ中にこれが盲点となることがあります。
StoryblokBridgeの設定
Next.js App Routerプロジェクトでの典型的な設定例です。@storyblok/reactがインストールされている必要があります:
// app/components/StoryblokProvider.js
"use client";
import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
import Hero from "./bloks/Hero";
import FeatureGrid from "./bloks/FeatureGrid";
import CallToAction from "./bloks/CallToAction";
storyblokInit({
accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
use: [apiPlugin],
components: {
hero: Hero,
feature_grid: FeatureGrid,
call_to_action: CallToAction,
},
});
export default function StoryblokProvider({ children }) {
return children;
}次に、レイアウトをプロバイダーで囲み、StoryblokStoryコンポーネントを使用してライブ編集を有効にします:
// app/[...slug]/page.js
import { StoryblokStory } from "@storyblok/react/rsc";
import { fetchStory } from "@/lib/storyblok";
export default async function Page({ params }) {
const story = await fetchStory(params.slug?.join("/") || "home");
return <StoryblokStory story={story} />;
}StoryblokStoryコンポーネントはブリッジ接続を自動的に処理し、iframeリスナーを登録し、Bloksに_editable属性を適用し、ビジュアルエディターでのクリック編集を有効にします。これを手动で配線する必要はありません。
Storyblokのコンポーネントアーキテクチャ(BloksとStories)
Storyblokは2つのコアコンセプトを使用してコンテンツを整理します:Stories(ページまたはコンテンツエントリー)とBloks(ヒーローセクション、機能グリッド、CTAなどの再利用可能なコンポーネント)。開発者はStoryblokダッシュボードでBlokスキーマを定義し、編集者はBloksをStoriesにドラッグ&ドロップしてページを作成します。
LEGOのようなものだと考えてください。Storiesは基盤となるプレート、つまり構築中のページです。Bloksは個々のブロック、ヒーローセクション、証言カード、料金表などです。各Blokタイプが持つフィールド(見出し、画像、CTAテキスト)を定義し、編集者がそれらを組み合わせます。
Stories:コンテンツエントリー
Storyblok内のすべてのページ、記事、またはコンテンツエントリーはStoryです。Storiesはフォルダ構造(ファイルシステムのような)内に存在し、各StoryにはURLにマップされるスラグがあります。Storyの本体はBloksで構成されており、本質的にはコンテナです。
Storiesは非ページコンテンツも保持できます。「site-settings」という名前のStoryを持ち、ナビゲーションリンク、フッターテキスト、ソーシャルメディアURLを保存することができます。この柔軟性は、Sanityでシングルトンドキュメントを使用する方法と似ています。
Bloks:再利用可能なビルディングブロック
Bloksには2種類あります:ネスト可能なものとコンテンツタイプ(ルートレベル)のものです。コンテンツタイプBloksはStoryのトップレベルスキーマ(「Page」や「BlogPost」など)を定義します。ネスト可能Bloksは、編集者がStoryの本体にドラッグするコンポーネント、ヒーローセクション、画像ギャラリー、FAQアコーディオンなどです。
各Blokにはフィールドを定義するスキーマがあります。これらはStoryblokダッシュボードの「Components」で作成します(コード内ではない点が、Sanityのコードとしてのスキーマアプローチとの大きな違いです)。
実践的なコンテンツモデリング
Management APIを通じて定義した場合、Hero Blokスキーマは以下のようになります:
{
"component": {
"name": "hero",
"display_name": "Hero Section",
"schema": {
"headline": { "type": "text", "required": true, "pos": 0 },
"subheadline": { "type": "textarea", "pos": 1 },
"background_image": { "type": "asset", "filetypes": ["images"], "pos": 2 },
"cta_text": { "type": "text", "pos": 3 },
"cta_link": { "type": "multilink", "pos": 4 }
},
"is_root": false,
"is_nestable": true
}
}そして、このBlokを描画するReactコンポーネント:
// components/bloks/Hero.jsx
import { storyblokEditable } from "@storyblok/react/rsc";
export default function Hero({ blok }) {
return (
<section {...storyblokEditable(blok)} className="hero">
<div className="hero-content">
<h1>{blok.headline}</h1>
{blok.subheadline && <p>{blok.subheadline}</p>}
{blok.cta_text && (
<a href={blok.cta_link?.cached_url} className="cta-button">
{blok.cta_text}
</a>
)}
</div>
{blok.background_image?.filename && (
<img
src={blok.background_image.filename}
alt={blok.background_image.alt || ""}
/>
)}
</section>
);
}storyblokEditable(blok)呼び出しが、ビジュアルエディターでのクリック編集を有効にするものです。これがないと、コンポーネントは正常に描画されますが、編集者がフィールドを編集するためにクリックすることができません。忘れやすく、デバッグが面倒です。
Storyblok API:REST vs GraphQL vs Management
Storyblokは3つのAPIを提供します:Content Delivery API(REST、ほとんどのプロジェクトで推奨)、GraphQL API(読み取り専用、選択的なフィールド取得が必要な場合に有用)、およびManagement API(移行や一括更新などのプログラムによるコンテンツ操作用)。Storyblokは新規プロジェクトに対してRESTを推奨しています。
多くのヘッドレスCMSガイドはAPI層を完全に省略しています。これは誤りです。選択するAPIはビルド時間、キャッシング戦略、レート制限の余裕に影響します。
Content Delivery API (REST)
これが主要なAPIであり、90%の時間で使用するものです。フィルタリング、ソート、ページネーション、Stories間のリレーション解決をサポートします。レート制限は寛容で、有料プランでは50リクエスト/秒です。
// Fetching a story via the Content Delivery API
const response = await fetch(
`https://api.storyblok.com/v2/cdn/stories/home?version=draft&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
console.log(story.content); // Your Bloks dataGraphQL API
GraphQL APIは読み取り専用で、異なるレート制限(毎秒100複雑度ポイント)があります。強力な型付けが必要で、完全なStoryペイロードが必要ない場合に有用です。必要なフィールドのみをリクエストできます。
{
PageItem(id: "home") {
name
slug
content {
_uid
component
headline
subheadline
}
}
}Management API
Management APIはStoryblokスペース上のCRUD操作(Storiesの作成、コンポーネントスキーマの更新、アセット管理、移行の実行)を処理します。CI/CDパイプライン、一括コンテンツ更新、またはStoryblok周辺のカスタムツール構築に使用します。
どのAPIを使用すべきか?
| 基準 | Content Delivery (REST) | GraphQL | Management |
|---|---|---|---|
| ユースケース | サイト用のコンテンツ取得 | 選択的フィールドクエリ | コンテンツ操作、移行 |
| 読み/書き | 読み取り専用 | 読み取り専用 | 読み + 書き |
| レート制限 | 50 req/sec (有料) | 100 points/sec | 3 req/sec |
| 適している用途 | ほとんどのプロジェクト | 大規模なコンテンツモデル | DevOps、CI/CD |
| Storyblokの推奨 | はい、デフォルトの選択肢 | 特定のニーズ向け | 自動化のみ |
ほとんどのNext.js、Nuxt、またはAstroプロジェクトでは、storyblok-js-clientまたは公式SDKを使用したREST Content Delivery APIで必要なすべてを処理できます。コンテンツモデルが複雑で、不要なフィールドが多い深いネスト構造を取得している場合は、GraphQLを検討してください。
2026年のStoryblok価格設定
Storyblokの価格は無料のStarterプランから始まります。有料プランはGrowth(5ユーザー)で月額$99から始まります。上位ティアにはGrowth Plus、Premium(中堅市場向け)、Elite(無制限)が含まれます。新しい価格設定は2026年4月7日に発効し、既存の月額サブスクライバーには60日間の猶予期間が設けられました。
現在の価格ティアの内訳は以下の通りです:
| プラン | 価格 | ユーザー数 | APIコール数 | 主な機能 |
|---|---|---|---|---|
| Starter | 無料 | 1 | 25K/月 | 1スペース、コミュニティサポート |
| Growth | $99/月 | 5 | 100K/月 | カスタムロール、ワークフロー |
| Growth Plus | $189/月 | 10 | 250K/月 | 高度なワークフロー、タスク |
| Premium | カスタム | フレキシブル | カスタム | SSO、SLA、専任サポート |
| Elite | カスタム | 無制限 | 無制限 | FlowMotion、プレミアムSLA |
Storyblokはまた、Growth Plusの45日間無料トライアルを提供しており、これはContentfulの30日間トライアルやSanityの使用量ベースの無料ティアと比較して異常に寛容です。
価格に対する率直な意見:Storyblokは規模が大きくなると高額になる可能性があります。代理店からのRedditスレッドでは、プロジェクトの成長に伴う価格上昇(より多くのユーザー、より多くのAPIコール、マルチサイト設定のためのより多くのスペース)が一貫して言及されています。予算に制約がある場合、Strapiの無料セルフホスティングオプションやPayloadのオープンソースモデルは、独自のインフラストラクチャを管理するコストをかけて、より多くの柔軟性を提供します。
サイドプロジェクトやプロトタイプには、無料のStarterプランが機能します。2〜5人のコンテンツ編集者を擁する本番プロジェクトの場合、月額$99のGrowthプランは競争力があります。それ以上の場合、Storyblokの営業チームからカスタム見積もりを取得してください。公開されている価格は物語の一部しか語っていません。
2026年の新機能:FlowMotion、Blueprints、およびAI
2026年、Storyblokは3月31日にFlowMotion(n8nに基づいた500以上の統合を備えたワークフロー自動化レイヤー)を立ち上げました。Blueprintsは2025年7月にリリースされ、フレームワーク固有のスターターを備えたガイド付きプロジェクトセットアップを提供します。AI機能には、AI Translate(34以上の言語)、コンテンツブレインストーミング用のIdeation Room、およびAI SEOツールが含まれます。
他のStoryblokガイドはいまだにこれらの機能をカバーしていません。実際に提供されているものは以下の通りです。
FlowMotion:ワークフロー自動化
FlowMotionは、コンテンツ運用のボトルネックに対するStoryblokの回答です。ローンチ発表によると、マーケターの75%がコンテンツ調整タスク(関係者への通知、翻訳のトリガー、ソーシャルメディア投稿のスケジュールなど)に週6時間以上費やしています。
FlowMotionは管理されたn8n(オープンソースのワークフロー自動化ツール)に基づいて構築され、500以上の統合に接続します。コンテンツイベント(作成、更新、承認、翻訳、スケジュール、公開)にトリガーを設定すると、FlowMotionがワークフローを自動的に実行します。想像してみてください:編集者がブログ記事を公開すると、FlowMotionは自動的に10言語へのAI翻訳をトリガーし、Slack経由でソーシャルメディアチームに通知し、Twitter/X投稿をスケジュールします。
これはEnterprise/Eliteのアドオンであるため、小規模なチームはアクセスできません。しかし、複数の市場やチャネルでコンテンツを管理する組織にとって、これは大幅な時間節約になります。
Blueprints:ガイド付きプロジェクトセットアップ
Blueprintsは、Storyblokプロジェクトの初期セットアップという実際の痛点を解決します。2024年の調査では、シニア開発者の24%が初期CMSプロジェクトのセットアップに数時間ではなく数日かかると回答しています。
Storyblokは2つのBlueprintティアを提供します:
- Core Blueprint: 最小限のセットアップ。フレームワーク(Next.js、Nuxt、またはAstro)を接続し、スペースを作成し、基本的なスターターをデプロイします。クリーンな状態から始めたい開発者に適しています。
- Business Blueprint: 本番環境対応のセットアップ。事前構築されたコンポーネント、設定済みのコンテンツモデル、VercelまたはNetlifyへのデプロイを含みます。「30分でローンチ」に近い体験です。
フレームワークを選び、CoreまたはBusinessを選択すると、Storyblokはデプロイパイプラインを備えた接続されたGitHubリポジトリを作成します。ゼロから始めるのと比較して、ボイラープレートセットアップの時間を確実に節約できます。
AI機能:Translate、Ideation Roomなど
StoryblokのAI機能は、Bring Your Own Provider(独自のプロバイダーを持参)アプローチを採用しています。OpenAIまたはGoogle Gemini APIキーを接続すると、Storyblokはそれを以下のために使用します:
- AI Translate: エディター内で直接コンテンツを34以上の言語に翻訳します。重要なコンテンツのプロフェッショナルな翻訳の代わりにはなりませんが、下書きや内部コンテンツには優れています。
- Ideation Room: コンテンツアイデアのための協力的なAIブレインストーミング。編集者は必要なものを説明し、AIがアウトライン、見出し、下書きを生成します。
- AI Alt Text: 画像の自動altテキスト生成。
- AI SEO: コンテンツに基づいたメタタイトルと説明の提案。
独自のキーを持参するモデル意味着你控制成本并避免在AI定价上被供应商锁定。Storyblok还正在开发一个名为“Concept Room”的功能,旨在将构思与可视化内容规划相结合。
Storyblokでの国際化
Storyblokはフィールドレベルの翻訳を通じてi18nを処理します。つまり、言語ごとにドキュメント全体を複製するのではなく、1つのStoryに各言語の翻訳済みフィールドを持たせます。これはドキュメントレベルの翻訳を使用するContentfulやSanityとは根本的に異なり、規模が大きくなるにつれて重要になります。
なぜフィールドレベルの翻訳が勝つのでしょうか?10言語のマーケティングサイトを考慮してください。ドキュメントレベルのi18n(Contentful、Sanity)では、ページごとに10の別々のドキュメントが必要になります。レイアウトを変更?10のドキュメントを更新する必要があります。Storyblokのフィールドレベルアプローチでは、1つのStoryだけです。構造は同じままで、テキストフィールドのみが言語バリエーションを持ちます。レイアウトを一度変更すれば、10言語すべてが更新されます。
AI Translateはこれをさらに高速化します。編集者は母国語でコンテンツを書き、「Translate」をクリックすると、AIが接続されたOpenAIまたはGeminiプロバイダーを使用して他の言語を入力します。34以上の言語をサポートしています。
翻訳済みコンテンツを取得する方法は以下の通りです:
// Fetching a story in German
const response = await fetch(
`https://api.storyblok.com/v2/cdn/stories/home` +
`?version=published` +
`&language=de` +
`&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
// story.content now contains German translations
// Untranslated fields fall back to the default languagelanguageパラメータがすべての作業を行います。未翻訳のフィールドは自動的にデフォルト言語にフォールバックするため、不完全な翻訳によってページが壊れることはありません。
Storyblok vs 代替手段
私たち自身のプロジェクトですべての5つのCMSをテストした後、プロジェクト決定に実際に重要な機能での比較は以下の通りです:
| 機能 | Storyblok | Sanity | Contentful | Strapi | Payload |
|---|---|---|---|---|---|
| ビジュアルエディター | クラス最高のWYSIWYG | カスタマイズ可能なStudio | フォームベース | 管理パネル | 管理パネル |
| オープンソース | いいえ (SaaSのみ) | 部分的 (Studio) | いいえ | はい (v5) | はい (v3) |
| セルフホスティング | いいえ | いいえ | いいえ | はい | はい |
| i18nアプローチ | フィールドレベル | ドキュメントレベル | ドキュメントレベル | プラグインベース | 組み込み |
| コンテンツモデリング | Bloks (ダッシュボードUI) | コードとしてのスキーマ (TS) | コンテンツタイプ (UI) | Content-Type Builder | コレクション設定 (コード) |
| API | REST + GraphQL | GROQ + GraphQL | GraphQL + REST | REST + GraphQL | ローカル + REST + GraphQL |
| 無料ティア | はい (制限あり) | はい (寛容) | はい (制限あり) | はい (セルフホスト) | はい (セルフホスト) |
| 理想的な用途 | マーケティング + 開発チーム | 開発重視のチーム | エンタープライズコンテンツ運用 | 予算意識の高い層 | Next.jsネイティブアプリ |
Storyblokを選ぶ場合: プロジェクトに開発者と、変更を視覚的に確認する必要がある非技術的なコンテンツ編集者の両方が関与している場合。ビジュアルエディターは比類なく、フィールドレベルのi18nは多言語サイトにおいてクラス最高です。
Sanityを選ぶ場合: チームが開発者中心で、最大のスキーマの柔軟性を望む場合。SanityのコードとしてのスキーマアプローチとGROQクエリ言語はより多くの制御を提供しますが、編集者はフォームベースのUIを得るだけで、ビジュアルプレビューではありません。全貌についてはSanityガイドをお読みください。
StrapiまたはPayloadを選ぶ場合: セルフホスティングまたはオープンソースの制御が必要な場合。Storyblok、Sanity、Contentfulのいずれも、CMSを独自のサーバーで実行することは許可していません。StrapiとPayloadは可能です。詳細についてはStrapiガイドまたはPayloadガイドを確認してください。
Contentfulを選ぶ場合: エコシステムの成熟度、広範なマーケットプレイス統合、確立された開発者ツールを重視するエンタープライズ環境にいる場合。Contentfulガイドをお読みください。
スコアリングと実世界でのプロジェクト推奨を含む完全な比較については、完全なヘッドレスCMS比較をご覧ください。
Storyblokを使用しないべき場合
すべてのCMSには、特定のプロジェクトにとっての致命的な欠点があります。Storyblokのものは以下の通りです:
セルフホスティングが必要な場合。 StoryblokはSaaSのみであり、オンプレミスオプション、Dockerイメージ、自己管理型デプロイメントはありません。組織がデータ主権またはオンプレミスホスティングを要求する場合、セルフホスティングプロジェクト向けのPayloadまたはStrapiを検討してください。
コードとしてのスキーマを望む場合。 Storyblokコンポーネントスキーマはコードベースではなく、ダッシュボードUIで定義されます。Management APIを通じてエクスポートおよびインポートできますが、信頼できる情報源としてGitリポジトリ内に存在しません。バージョン管理されたスキーマがチームにとって重要である場合、SanityとPayloadの両方がコードファーストのコンテンツモデリングを提供します。
規模拡大時に予算制約がある場合。 Storyblokの価格は中小規模のチームに適しています。しかし、多数の編集者を擁する複数のブランドで15以上のスペースを実行している場合、コストが増加します。セルフホストされたStrapiまたはPayloadは、CMSライセンスコストを完全に排除します。
チーム全員が開発者である場合。 ビジュアルエディターはStoryblokのプレミアム機能です。チームの誰もビジュアルプレビューを必要とせず、誰もがJSONの編集やフォームベースのUIの使用に快適である場合、使用しない機能に対して支払っていることになります。
直接データベースアクセスが必要な場合。 Storyblokはストレージレイヤーを完全に抽象化しています。Postgres接続、SQLクエリ、直接データアクセスはありません。プロジェクトがカスタムデータベースクエリまたはデータベースレベルでの他のデータソースとの結合を必要とする場合、Payload(MongoDB/Postgres上に構築)がそれを提供します。
複数のCMS across で構築した経験から、Storyblokは開発者とコンテンツ編集者が同じプロジェクトで協力する場合に輝きます。チーム全員が開発者である場合、ビジュアルエディターのプレミアム料金を支払う価値はありません。
Storyblokの始め方
Blueprintsを使用すれば、ゼロから動作するStoryblokプロジェクトへの最速のパスは約30分、使用しない場合は1時間です。手順は以下の通りです:
ステップ1:サインアップ。 storyblok.comで無料アカウントを作成します。Starterプランは、開発およびプロトタイピングに十分な、25K APIコール/月の1スペースを提供します。
ステップ2:Blueprintを選択するか、空白から開始。 事前構成されたプロジェクトが必要な場合は、Blueprint(最小限の場合はCore、本番環境対応の場合はBusiness)を選択します。ゼロから構築したい場合は、空のスペースを作成します。
ステップ3:フロントエンドを接続。 Storyblokには、Next.js、Nuxt、Astro、SvelteKit、Remix、Angular、Gatsby用の公式SDKとスターターがあります。Next.js App Routerプロジェクトの場合:
npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/reactステップ4:ビジュアルエディターのプレビューURLを設定。 Storyblokスペースの設定で、プレビューURLをローカル開発サーバー(例:https://localhost:3000/)に設定します。ビジュアルエディターにはHTTPSが必要なので、next dev --experimental-httpsまたはmkcertなどのツールを使用してください。
ステップ5:最初のBlokを定義し、Storyを作成。 Storyblokダッシュボードの「Components」に移動し、bodyフィールドを持つ「Page」コンテンツタイプを作成し、次にネスト可能な「Hero」Blokを作成します。「Page」コンテンツタイプを使用して最初のStoryを作成します。Hero Blokをドラッグします。ビジュアルエディターでの描画を確認します。
フレームワーク固有のクイックスタートガイドについては、Storyblokはサポートされているすべてのフレームワークのセットアップチュートリアルを含むテクノロジーズページを維持しています。フロントエンドのフレームワーク間で迷っている場合、トレードオフについてはNext.js vs Remix比較を、デプロイプラットフォームの決定についてはVercel vs Netlifyガイドを参照してください。
FAQ
Storyblok CMSとは何ですか?
Storyblokは、2017年にオーストリアのリンツで設立された、組み込みのビジュアルエディターを備えたヘッドレスコンテンツ管理システムです。コンテンツモデリングのためにBloksと呼ばれるコンポーネントベースのアーキテクチャを使用し、RESTおよびGraphQL APIを通じてコンテンツを配信します。Storyblokは、ウェブサイト、アプリ、マルチチャネルコンテンツ配信のためにAdidas、Tesla、Oatlyなどの企業で使用されています。
Storyblokは無料で使用できますか?
はい、Storyblokは1ユーザー、1スペース、月間25,000 APIコールを含む無料のStarterプランを提供しています。有料プランは、5ユーザーのGrowthティアで月額$99から始まります。Storyblokはまた、Growth Plusの45日間無料トライアルを提供しており、これはほとんどの競合他社のトライアル期間よりも寛容です。
Storyblokのビジュアルエディターはどのように動作しますか?
Storyblokビジュアルエディターは、iframe内にフロントエンドアプリケーションを読み込み、各コンポーネント(Blok)上に編集可能な領域を重ねて表示します。コンテンツ編集者はページ要素を直接クリックして編集し、変更をリアルタイムで確認できます。iframeをStoryblok編集インターフェースに接続するには、フロントエンドコードにStoryblokBridge JavaScriptライブラリが必要です。
StoryblokはContentfulより優れていますか?
優先事項によります。Storyblokは優れたビジュアルエディターとフィールドレベルの国際化を提供し、多言語コンテンツを管理するマーケティングチームにとってより優れています。Contentfulはより成熟したエコシステム、より大規模な統合マーケットプレイス、そして深いエンタープライズ導入を持っています。両方ともSaaSのみで、類似した価格構造を持っています。
Storyblokはどのフレームワークをサポートしていますか?
Storyblokは、Next.js、Nuxt、Astro、SvelteKit、Remix、Angular、Gatsby用の公式SDKとスターターテンプレートを提供しています。React SDK(@storyblok/react)とVue SDK(@storyblok/vue)は、2つの最も人気のあるエコシステムをカバーしています。Blueprintsは現在、ガイド付きプロジェクトセットアップのためにNext.js、Nuxt、およびAstroをサポートしています。
Storyblokをセルフホストできますか?
いいえ。StoryblokはセルフホスティングまたはオンプレミスオプションのないSaaS専用プラットフォームです。データ主権、コンプライアンス、またはコストの理由でセルフホスティングがプロジェクトの要件である場合、完全なセルフホストデプロイメントをサポートする代替手段としてStrapi(オープンソース、Node.jsベース)またはPayload CMS(オープンソース、Next.jsネイティブ)を検討してください。
StoryblokのFlowMotionとは何ですか?
FlowMotionは、2026年3月31日にリリースされたStoryblokのワークフロー自動化機能です。管理されたn8nに基づいて構築され、500以上の統合に接続し、翻訳トリガー、関係者への通知、クロスプラットフォーム公開などのコンテンツ運用を自動化します。FlowMotionはEnterprise/Eliteアドオンとして利用可能であり、GrowthまたはGrowth Plusプランには含まれていません。
Storyblokは国際化をどのように処理しますか?
Storyblokはフィールドレベルの翻訳を使用します。つまり、1つのStoryに各フィールドの翻訳バリエーションが含まれ、言語ごとにドキュメント全体を複製しません。このアプローチは、多くの言語を持つサイトにおいて、ドキュメントレベルのi18n(ContentfulおよびSanityで使用)よりも拡張性に優れています。AI Translateは、独自のOpenAIまたはGemini APIキーを使用して34以上の言語をサポートします。
誰がStoryblokを使用していますか?
Storyblokの顧客リストには、Adidas、Tesla、Oatly、Virgin Media O2、dm-drogerie markt、Spendesk、Paniniが含まれます。このプラットフォームは、マルチマーケットコンテンツ運用を管理するエンタープライズ組織と、非技術的なコンテンツチームを強化するためにビジュアルエディターを必要とする成長中のスタートアップの両方にサービスを提供しています。StoryblokはシリーズCを通じて総額1億3,800万ドルの資金を調達しています。
Storyblok Blueprintsとは何ですか?
Blueprintsは、2025年7月にStoryblokによってリリースされたガイド付きプロジェクトセットアップテンプレートです。Core Blueprint(最小限のスターター)またはBusiness Blueprint(事前構築されたコンポーネントを備えた本番環境対応)を選択します。フレームワーク(Next.js、Nuxt、またはAstro)を選択すると、Storyblokは数分でVercelまたはNetlifyへのデプロイパイプラインを備えた接続されたGitHubリポジトリを作成します。