StudioのCMS機能の使い方｜記事の編集から公開までの流れ・作り方を解説

ノーコードツール「Studio」のCMS機能に興味はあるものの、「具体的な使い方がわからない」「記事作成や編集は簡単なの？」といった疑問をお持ちではないでしょうか。Webサイトを運用して集客や情報発信を行う上で、ブログやお知らせといったコンテンツの更新は欠かせません。Studio CMSは、そうしたWebサイトのコンテンツ運用を誰でも簡単に行えるように設計された強力なツールです。

本記事では、Studio CMSの基本的な使い方から、アカウント作成、記事作成、編集、公開といった一連の流れを、初心者の方にも分かりやすく徹底解説します。さらに、Studioのブログ機能としての活用法、便利な機能、そして「できないこと」まで、具体的で実用的な情報を提供します。この記事を読めば、あなたもStudio CMSを自在に使いこなし、効果的なコンテンツマーケティングを始める第一歩を踏み出せるでしょう。

Studio CMSの使い方

ここからは、Studio CMSの具体的な使い方を9つのステップに分けて解説します。アカウント作成からサイトの公開、そして更新作業まで、この手順に沿って進めることで、誰でも迷うことなくStudio CMSをマスターできます。まずは全体像を把握し、ご自身のWebサイト作成の参考にしてください。

StudioのCMS機能は、コンテンツ（情報）とデザイン（見た目）を分けて管理できる点が最大の特徴です。一度レイアウトを作成すれば、あとはコンテンツを追加するだけで、同じデザインの新しいページを量産できます。これにより、ブログ記事やお知らせなど、定期的に更新が必要なコンテンツの運用が格段に効率化されます。それでは、各ステップを詳しく見ていきましょう。

アカウントを作成する

最初に、Studioを利用するためのアカウントを作成します。公式サイト（https://studio.design/ja）にアクセスし、画面右上の「無料で始める」ボタンをクリックします。メールアドレスとパスワードを入力して登録する方法のほか、GoogleアカウントやFacebookアカウントと連携して、より簡単に作成することも可能です。

アカウント作成時には、利用目的や経験レベルに関する簡単なアンケートが表示されることがあります。これは、Studioがあなたに最適なチュートリアルやサポート情報を提供するためのものです。正直に回答することで、より効率的にStudioの使い方を学べます。初回ログイン後は、基本操作を学べるチュートリアルが用意されているため、指示に従って進めることをおすすめします。この初期設定が、StudioでのWebサイト作成の第一歩となります。

プロジェクトを作成する

アカウント作成後、ダッシュボードから新しい「プロジェクト」を作成します。プロジェクトは、制作するWebサイトごとの管理単位であり、一つのアカウントで複数のプロジェクトを管理することが可能です。例えば、企業サイトと個人ブログを別々のプロジェクトとして作成・管理できます。

プロジェクト作成時には、豊富なテンプレートの中から用途に合ったものを選択できます。ブログ向け、ポートフォリオ向け、企業サイト向けなど、目的別に最適化されたテンプレートが用意されており、その多くにはCMS機能があらかじめ組み込まれています。もちろん、完全に空白の状態から自由に作成することも可能です。テンプレートを選択すると、プロジェクト名の入力を求められますので、分かりやすい名前を付けておきましょう。これで、CMS機能を含んだサイト制作の準備が整います。

CMSページを作成する

プロジェクト内で、CMS機能を利用するためのページを作成します。プロジェクトのダッシュボード上部にある複数のタブの中から「CMS」タブを選択してください。初めてCMS機能を使う場合は、「CMSをはじめる」というボタンが表示されますので、これをクリックします。

ここで、3つの選択肢が提示されます。「テンプレートデータを使う」「空白からはじめる」「WordPressからインポート」の3つです。初めての方には「テンプレートデータを使う」がおすすめです。これを選択すると、記事、投稿者、タグといった基本的なモデル（コンテンツの型）があらかじめ設定された状態でスタートできます。ブログやお知らせなど、用途に応じたモデルを選択することで、CMSで管理する動的なページの土台が完成します。このCMSページの作り方がコンテンツ運用の基本となります。

コンテンツブロックを追加・編集する

CMSダッシュボードで、記事の具体的な中身となる「アイテム」を追加・編集します。Studio CMSでは、「モデル」と「アイテム」という概念が重要です。モデルは記事や著者といったコンテンツの種類を表し、アイテムはそのモデルに属する個々のコンテンツ（例：特定の1記事）を指します。

新しいアイテムを作成するには、CMSダッシュボードで該当するモデルを選択し、「新規追加」ボタンをクリックします。すると、編集画面が開き、タイトル、本文、画像といった各要素を入力できます。これらの要素は「プロパティ」として管理されます。例えば、ブログ記事を作成する場合、記事タイトル、本文、カバー画像、公開日、著者情報といったプロパティを持つアイテムを一つひとつ作成していくことになります。

プロパティには、テキスト、画像、数値、カラー、参照（他のモデルとの関連付け）など、様々な種類があります。必要に応じてカスタムプロパティを追加することも可能で、サイトの要件に合わせた柔軟なコンテンツ管理が実現します。この編集作業が、Studio CMSにおける記事作成の中心です。

デザインエディターで動的ページを作成する

コンテンツの準備ができたら、「デザインエディター」に移動し、CMSで作成したアイテムを表示させるための動的ページのデザインを行います。画面右上の「デザインエディター」ボタンをクリックすると、ビジュアルエディタが開きます。

デザインエディターでは、まず「動的ページ」を新規作成します。動的ページとは、CMSのデータを表示するためのテンプレートページのことです。作成時に、どのモデルのデータを表示するかを選択します。例えば「記事」モデルを選択すれば、すべてのブログ記事に共通するレイアウトを作成できます。

ここで重要なのが、CMS内のどのデータをページのどの部分に表示させるかという「紐付け」作業です。例えば、ページ上部に配置したテキストボックスを選択し、プロパティパネルから「記事タイトル」のプロパティを紐付ける、といった設定を行います。同様に、画像ボックスには「カバー画像」を、本文エリアには「本文」プロパティを紐付けていきます。この直感的な操作で、プログラミング知識がなくても、データベース連携されたWebページが作成できます。このエディタの操作性が、Studioの大きな魅力の一つです。

デザインを整える

ページのレイアウトやデザインを調整します。ボックスモデルを基本とした直感的な操作で、フォント、色、配置などを自由に変更できます。Studio CMSのデザイン機能を活用し、サイト全体のトンマナに合わせた美しいデザインを作成しましょう。レイアウトの変更もドラッグ＆ドロップで簡単に行えます。

ページを公開する

作成した個別の記事（アイテム）を公開状態にします。各アイテムは「下書き」状態で作成されるため、内容を確認後、ステータスを「公開」に変更する必要があります。この操作により、そのページがWeb上で表示されるようになります。公開前にプレビュー機能で表示方法を確認することが重要です。

サイトを公開する

個別のページだけでなく、Webサイト全体をインターネット上に公開します。ドメイン設定を行い、「公開」ボタンをクリックすることで、あなたのサイトが世界中からアクセス可能になります。このステップで、作成したCMSコンテンツの表示が完了します。

サイトの編集・更新をする

サイト公開後も、新しい記事の追加や既存コンテンツの編集といった更新作業は欠かせません。CMSダッシュボードから新しいアイテムを追加・編集し、公開するだけで、サイトに新しい情報を反映できます。この簡単な更新方法が、Studio CMSの大きなメリットです。

StudioのCMS機能でできること

StudioのCMS機能とは、単に記事を公開するだけでなく、効率的なサイト運用を支援する多彩な機能が搭載されています。ここでは、その中でも特に代表的な7つの機能をご紹介します。これらの機能を理解することで、Studio CMSを最大限に活用できるでしょう。

① リアルタイム共同編集

Studio CMSは、複数人が同時に同じプロジェクトにアクセスし、リアルタイムで編集作業を行える共同編集機能を備えています。Googleドキュメントのように、他のメンバーが今どこを編集しているかがリアルタイムで表示され、同時編集による競合を防げます。

例えば、デザイナーがレイアウトを調整している間に、ライターが記事コンテンツを執筆・編集する、またはマーケティング担当者がSEO設定を行う、といった分業がスムーズに実現します。変更履歴も自動で保存されるため、誤って削除してしまった場合でも復元が可能です。チームでのサイト制作・運用効率を飛躍的に向上させます。

② 操作性

専門知識がない初心者でも直感的に操作できる、優れた操作性もStudio CMSの大きな特徴です。ドラッグ＆ドロップでのレイアウト変更、見たまま編集できるデザインエディタなど、視覚的なインターフェースが採用されています。

特にCMSダッシュボードはシンプルで整理されており、記事の一覧、編集、公開状態の切り替えがスムーズに行えます。HTMLやCSSといったコードを一切書く必要がないため、マニュアルを熟読しなくても、画面の指示に従って操作するだけで、基本的な使い方をすぐに習得できます。この手軽さが、他のノーコードツールと比較してもStudioが高く評価される理由の一つです。

③ 記事の公開予約

作成した記事は、指定した日時に自動で公開する予約投稿が可能です。例えば、新製品の発表に合わせて特定の時間に情報を発信したい場合や、毎週決まった曜日・時間にブログ記事を公開したい場合など、定期的な更新を計画的に行いたい場合に非常に便利な機能です。

記事を事前にまとめて作成しておき、公開日時を設定するだけで、後は自動で公開されます。これにより、手動での更新作業に縛られることなく、戦略的なコンテンツ配信が実現します。特に、複数のライターが関わるメディアサイトや、編集者が不在の時間帯に公開したい場合などに威力を発揮します。

④ WordPressからの移行

既存のWebサイトがWordPressで構築されている場合、その記事データをStudioへ簡単に移行できます。WordPressからエクスポートしたファイルをインポートするだけで、コンテンツを移管できるため、サイトリニューアルのハードルを大幅に下げることができます。

⑤ コレクション機能(記事のキュレーション)

CMSで作成した多数の記事の中から、特定のテーマに沿った記事だけをピックアップして、トップページや一覧ページに表示させることができます。例えば、「人気記事」や「おすすめ記事」といったセクションを自由に作成可能です。また、記事の表示順を任意に並び替えることもでき、戦略的なコンテンツの見せ方を実現します。

⑥ SEO対策

Studio CMSには、検索エンジン最適化（SEO）に不可欠な基本的な設定機能が標準で備わっています。各ページのタイトルタグやメタディスクリプション、OGP画像の設定など、専門的な知識がなくても、検索結果やSNSでのシェア時に適切に表示させるための設定が簡単に行えます。

⑦ ライターの権限管理機能

外部のライターや編集者と共同でサイトを運用する際に、メンバーごとに操作権限を細かく設定できます。例えば、「記事の執筆・編集はできるが、デザインの変更はできない」といった権限を付与することで、意図しないデザイン崩れなどのヒューマンエラーを防ぎ、安全なチーム運用を実現します。

StudioのCMS機能でできないこと

多くのメリットがある一方で、StudioのCMS機能にはいくつかの制約や、標準では搭載されていない機能も存在します。Webサイトの要件によっては、この「できないこと」が大きな課題となる可能性もあります。ここでは代表的な3つの制約について解説します。

記事のランキング表示

StudioのCMS機能では、記事の閲覧数などに基づいて人気記事を自動で集計し、ランキング形式で表示する機能は搭載されていません。ランキングを表示したい場合は、手動で記事を選択し、「コレクション機能」を使ってランキング用のリストを作成する必要があります。そのため、常に最新の人気順を反映させるには、定期的な手動更新が必要となり、手間がかかる点は否めません。記事の並び替え自体は可能ですが、自動でのランキング表示はできないと覚えておきましょう。

ページネーション機能の作成

ブログの一覧ページなどで、記事数が増えた際にページを「1, 2, 3...」と分割して表示する「ページネーション機能」は、StudioのCMSでは標準で作成することができません。代替機能として、一覧の最後に「もっと見る」ボタンを設置し、クリックするごとに次の記事を読み込む形式が用意されています。大量のコンテンツを扱うサイトの場合、ユーザーが目的の記事にたどり着くまでに何度もクリックが必要になる可能性があります。

複数のタグでの絞り込み

記事に複数のタグを設定することは可能ですが、ユーザーがサイト上で記事を検索する際に、複数のタグを同時に選択して絞り込む（AND検索）機能はありません。例えば、「東京」と「グルメ」の両方のタグを持つ記事だけを探す、といった絞り込みができないのです。タグを多用する大規模なメディアサイトなどを構築する際には、この制約がコンテンツの見つけやすさに影響を与える可能性があります。

Studio CMS機能を使うときのポイント

StudioのCMS機能を最大限に活用し、効率的かつ効果的なサイト運用を実現するためには、いくつかのポイントを押さえておくことが重要です。ここでは、Studio CMSの基本的な使い方をマスターした上で、さらに一歩進んだ活用を目指すための3つのポイントを解説します。

適切な料金プランを設定する

Studioは無料で始めることができますが、本格的にCMS機能を活用してサイトを運用していくのであれば、有料プランへのアップグレードが推奨されます。無料プランでは、公開できる記事数（アイテム数）やページ数、月間の閲覧数に上限があります。ビジネスで利用する場合や、多くのコンテンツを継続的に発信していく計画がある場合は、プロジェクトの規模や目的に合わせた適切な料金プランを設定することが、スムーズなサイト運用の鍵となります。

Studioでできない機能は外部連携させる

前述の通り、StudioのCMS機能には、ページネーションや複数タグでの絞り込みなど、標準では対応していない機能も存在します。しかし、これらの課題は外部ツールとの連携によって解決できる場合があります。例えば、高機能なサイト内検索を導入したい場合は「Searchive」、問い合わせフォームを設置したい場合は「formrun」など、多様なサービスと連携させることが可能です。Studio単体で完結させようとせず、必要に応じて外部サービスを組み合わせる柔軟な発想が、サイトの可能性を広げます。

公式の発信情報・サイトを活用する

Studioは、現在も活発に開発が進められており、頻繁に機能のアップデートが行われています。新しい機能の追加や仕様変更など、最新の情報をキャッチアップしておくことが、Studioを使いこなす上で非常に重要です。公式サイトのヘルプページやブログ、YouTubeチャンネル、ユーザーコミュニティなど、公式から発信される情報を定期的にチェックする習慣をつけましょう。これらのリソースは、基本的な使い方でつまずいた際の解決策を見つけるのにも役立ちます。

StudioのCMS機能についてのQ＆A

ここでは、StudioのCMS機能に関してよく寄せられる質問とその回答をまとめました。具体的なトラブルシューティングや、細かい機能に関する疑問を解決するための参考にしてください。

StudioのCMS機能が使えない・表示されないときは？

StudioのCMS機能が予期せず使えない、またはコンテンツが表示されない場合、いくつかの原因が考えられます。以下の順番でチェックしてみましょう。

1. 公開状態の確認

まずは、CMSアイテムが「公開」状態になっているかを確認してください。アイテムはデフォルトで「下書き」状態で作成されるため、明示的に「公開」に切り替えないとサイトに表示されません。

2. 紐付けの確認

次に、デザインエディタでデータが正しく紐付けられているかを見直しましょう。紐付けが外れていたり、間違ったプロパティを参照していたりすると、コンテンツは表示されません。テキストボックスを選択し、右側のプロパティパネルで紐付け状況を確認できます。

3. プランの上限確認

プランの上限（アイテム数や閲覧数）を超過している可能性も考えられます。ダッシュボードの「設定」からプランの利用状況を確認し、必要に応じてプランをアップグレードしましょう。

4. キャッシュのクリア

上記をすべて確認しても表示されない場合は、ブラウザのキャッシュをクリアするか、シークレットモードでアクセスしてみてください。古いキャッシュが原因で更新が反映されていないことがあります。

StudioのCMS機能でデザインの変更はできる？

はい、可能です。StudioのCMS機能では、コンテンツ（情報）とデザイン（見た目）が分離して管理されているため、柔軟なデザイン変更が可能です。デザインエディタを使用すれば、CMSで管理しているテキストのフォントや色、画像のサイズ、レイアウトなどを、コーディングの知識なしで自由に変更できます。

具体的には、動的ページのテンプレートを開き、各要素のスタイルを変更するだけで、すべての記事に一括でデザイン変更が反映されます。例えば、見出しのフォントサイズを大きくしたり、カバー画像の表示サイズを変えたり、レイアウトを左右逆にしたりといった変更が簡単に行えます。一度作成したコンテンツをそのままに、後からサイト全体のデザインをリニューアルすることも容易です。これは、従来のCMSでは難しかった「コンテンツを保ったままのデザイン刷新」を可能にするStudioの大きな強みです。

関連記事一覧ページを表示できますか？

はい、表示できます。StudioのCMSには「参照プロパティ」という強力な機能があり、これを利用して記事同士を関連付けることができます。

具体的な設定手順は以下の通りです。まず、記事モデルに「関連記事」という名前の参照プロパティを追加します。このプロパティの参照先を「記事」モデルに設定し、複数選択を有効にします。次に、各記事の編集画面で、関連させたい記事アイテムを手動で選択します。

そして、記事詳細ページのデザインエディタで、この参照プロパティを紐付けたリストを表示させることで、「この記事を読んだ人へのおすすめ」のような関連記事一覧ページを実装できます。表示方法もリスト形式、カード形式、スライダー形式など、デザインを自由に調整可能です。この機能を活用することで、ユーザーのサイト内回遊率を高め、SEO効果も期待できます。

StudioのCMS機能でレイアウトを作成する手順は？

CMS機能を利用したページのレイアウト作成は、デザインエディタで行います。以下の3ステップで進めます。

ステップ1：動的ページの作成

まず、デザインエディタで新しい動的ページを作成し、どのモデル（記事、お知らせなど）のデータを表示するかを選択します。これが、すべての記事に共通するテンプレートとなります。

ステップ2：レイアウトの構築

次に、左側の追加パネルからテキストボックス、画像ボックス、ボタンなどの要素をドラッグ＆ドロップでキャンバスに配置し、大枠のレイアウトを構築します。例えば、上から順に「カバー画像」「タイトル」「公開日」「本文」といった構成が一般的です。

ステップ3：データの紐付け

最後に、配置した各ボックスを選択し、右側のプロパティパネルからCMSで作成したコンテンツ（タイトル、本文、画像など）を紐付けていきます。紐付けが完了すれば、プレビューで実際の表示を確認できます。この方法で、すべてのCMS記事に共通する統一されたレイアウトを効率的に作成できます。

CMS記事の並べ替えはできますか？

はい、CMSダッシュボード内で記事の並べ替えが可能です。デフォルトでは作成日や更新日の順で表示されますが、ドラッグ＆ドロップで直感的に記事の順番を入れ替えることができます。また、「コレクション機能」を使えば、特定の記事だけをピックアップし、その中での表示順を自由に設定することも可能です。これにより、トップページに表示する特集記事の順番を任意にコントロールするなど、戦略的な情報発信が実現します。

まとめ

本記事では、StudioのCMS機能の基本的な使い方から、具体的な記事作成・編集・公開の手順、さらには多彩な機能や活用ポイントまで、幅広く解説しました。Studio CMSは、専門的な知識がなくても、誰でも手軽にブログやお知らせなどのコンテンツを運用できる非常に強力なツールです。

ご紹介した使い方を参考に、まずはアカウントを作成し、実際に手を動かして記事作成の流れを体験してみてください。リアルタイム共同編集や予約投稿といった便利な機能を活用すれば、チームでの効率的なサイト運用も夢ではありません。本記事が、あなたのWebサイトでの情報発信を加速させる一助となれば幸いです。

Studioでのホームページ制作ならラシン株式会社へ

ラシン株式会社は、デザインとマーケティングの力で事業成長を支援するホームページ制作会社です。

Studio社公式のStudio Gold Experts認定企業であり、700サイト以上の制作実績No.1を誇ります。

ホームページ制作をきっかけに企業のDX推進全体を加速させること。それが私たちラシンの使命です。

不確実な時代でも前進を続けられるよう、信頼できるパートナーとして伴走します。
まずは、お気軽にお問い合わせください！