【動画付き】Studio CMSの使い方と構築方法をStudio公式アンバサダーが初心者向けに解説

Studioはノーコードで高品質なWebサイトを作成できる人気のツールですが、CMSについては「よく分からない」「設定が難しそう」と不安に思う方も多いのではないでしょうか。

そこで本記事では、Studio公式アンバサダーが初心者の方でも迷わず取り組めるように、StudioのCMSの使い方や設定方法を丁寧に解説します。

StudioでCMS機能を使いこなしたい方は、ぜひこの記事を参考にしてください。

※本記事の内容は2025年3月28日時点の仕様に基づいています。Studioをご利用の際は最新情報をご確認ください。

【講師プロフィール】
ゆみいさん（@Yumiiii_design）
Studio公式アンバサダー。元工場勤務会社員から副業を経て独立し、取引実績26社を突破。デイトラライトニング運営・講師も務める。

CMSの基本的な部分を押さえよう！

StudioでWebサイトを作っていく前に、CMSの基本を押さえておきましょう。

CMSとは？

CMSとは「Contents Management System（コンテンツ・マネジメント・システム）」の略です。

日本語では「コンテンツを管理する仕組み」と訳されることが多く、Webサイトの文章や画像などの情報を、コードを書くことなく誰でも簡単に管理・更新できるシステムのことを指します。

CMSでできること

CMSが特に力を発揮するのは、「更新が繰り返されるコンテンツの管理」です。たとえば、次のようなものが挙げられます。

• 企業サイトの「お知らせ」や「プレスリリース」
• メディアサイトの「ブログ記事」
• ポートフォリオサイトの「制作実績」

こうしたコンテンツは、情報の追加や修正が頻繁に発生します。

CMSを使えば、Webサイト全体のデザインを保ったまま、新しい記事をどんどん追加できます。

CMSを使うメリット

最大のメリットは、専門知識がなくてもコンテンツ更新ができることです。

HTMLやCSSを触ったことがない人でも、CMSを使えばブログ記事を書くような感覚で更新作業ができます。

その結果、サイト運営者が自分で情報発信できるようになり、「ちょっとした修正でも制作者に依頼しないといけない」という手間が大きく減ります。

StudioにおけるCMSの仕組み

StudioにおけるCMSの仕組みについて解説します。

CMSダッシュボードとデザインエディターの役割の違い

Studioでは、CMSの操作には以下の2つの画面を使い分けます。

• CMSダッシュボード：コンテンツ（テキスト・画像など）の登録・管理を行う場所
• デザインエディター：登録したコンテンツの「見た目」や「配置」をデザインする場所

この2つを使い分けることで、「中身（情報）」と「見た目（デザイン）」を分けて効率よくサイトを管理できるのが特徴です。

StudioのCMSダッシュボード

StudioのCMSを使いこなすうえで欠かせないのが、「モデル」「アイテム」「プロパティ」といった基本構造の理解です。これらをしっかり押さえておくことで、CMSの操作が格段にスムーズになります。

モデル：コンテンツのひな型

「モデル」とは、CMSで管理するコンテンツのひな型のようなものです。

たとえば、「ニュース記事」のモデルであれば、「タイトル」「公開日」「本文」など、必要な情報をあらかじめ設計しておくことで、同じ構造の情報を複数登録できるようになります。

ほかにも、「制作実績」「商品情報」「タグ」など、異なる種類のコンテンツごとにモデルを作成して管理します。

アイテム：登録される1件ずつのデータ

「アイテム」とは、各モデルに実際に登録された具体的なコンテンツの個々のデータです。

たとえば、「ニュース記事」モデルの中に登録された「キャンペーン開催のお知らせ」「年末年始の営業案内」など、1つ1つがアイテムにあたります。

CMSダッシュボード上では、横一列が1アイテムという表示が基本です。

プロパティ：アイテムが持つ情報の項目

「プロパティ」は、アイテムごとに持つ個別の情報項目を指します。

たとえば、ニュース記事なら下記のようなものがプロパティです。

• タイトル（例：「新商品発売のお知らせ」）
• スラッグ（例：new-product）
• 公開日時（例：2025年6月1日）

CMSダッシュボードでは、縦の列がプロパティに対応しています。

「プロパティ」という言葉は少し堅い印象ですが、「記事に含まれる情報項目」として理解できれば問題ありません。

コレクション：条件付きで絞り込んだリスト機能

「コレクション」は、モデル内のアイテムの中から特定の条件に合うものだけをまとめて表示できる機能です。

たとえば、制作実績モデルからWebサイト制作だけをトップページに表示したい場合、その条件に合うアイテムだけを抽出して表示することができます。

必須機能ではありませんが、「トップページには一部だけ載せたい」「カテゴリごとに絞り込みたい」といったケースで便利です。

Studioは料金プランによって機能制限がある

CMSを使い始める前に、Studioの料金プランによって使える機能に制限があることも理解しておきましょう。

プランによって「作れるモデル数」や「公開できるデータ量」に違いがあります。

各プランで使えるCMS機能の違い

Studioの料金プランには以下のような違いがあります。

たとえば、企業サイトやポートフォリオ制作など、複数のコンテンツを管理する場合は、パーソナル〜ビジネスプランの利用を検討するとよいでしょう。

フリープランでは「アクティブモデル数：最大3つ」「公開アイテム数：最大100件」となっており、これを超えると上位プランへのアップグレードが必要です。

サイト規模に応じたプラン選びのコツ

クライアントからのサイト制作依頼に対応する際は、下記の内容を事前にヒアリングし、それに基づいてモデル数・アイテム数を見積もりましょう。

• どんなコンテンツが必要か
• どのくらいの頻度で更新されるか
• タグやカテゴリは必要か

StudioのCMSダッシュボードや料金ページの「？」マーク（ヘルプ）からも詳細が確認できます。

最初は難しく感じるかもしれませんが、実際に触っていくうちに自然と理解できるようになりますよ！

Studio CMSを使ったWebサイト構築7ステップ

ここからは、Studio CMSを使って、実際に「ニュース機能」を持つWebサイトを構築していきましょう。

動画を見ながら構築に挑戦したい方は、下記の動画をご参照ください。

【準備】今回作成するニュース機能の全体像と無料配布素材について

まずは、これから作成するWebサイトの構成と目的を明確にしておきましょう。

作成するサイトのページ構成

今回は、お菓子屋さんのWebサイト「Sweet Delight」にニュース機能を追加することが目的です。

以下のようなページ構成で、ニュースコンテンツをわかりやすく表示・管理できるようにします。

このように複数のページが連携することで、訪問者が目的の情報にスムーズにたどり着ける構造を実現します。

なお、見本サイトである「Sweet Delight」は下記の動画で作り方を紹介していますので、あわせてご覧ください。

無料配布素材の入手方法

一緒に構築を進めたい方向けに、画像素材と記事本文のテキストデータを無料で提供しています。

デイトラ公式LINEに登録のうえ、「CMS」とメッセージを送るだけでダウンロードリンクが届きます。

記事を読むだけでもCMSの使い方は学べますが、素材を使えばより実践的な練習ができるので、ぜひ活用してください。

ステップ1：ベースとなる「タグ」モデルを作成する

まずは、ニュース記事に付ける「タグ」を管理するためのCMSモデルを準備します。

あらかじめ用意しておくことで、記事作成時にスムーズにタグを紐づけられるようになります。

1：CMSダッシュボードの初期設定

Studioのプロジェクトを開き、左側メニューの「CMS」からダッシュボードを開きます。

「CMSを始める」ボタンをクリックし、「テンプレートのデータを使う」を選択してください。

初期状態で自動で作成されているモデルのうち、「ライター情報」モデルと既存のコレクションは今回は使用しないため、3点リーダー（･･･）メニューから削除しておきましょう。

2：「タグ」モデルの編集と設定

テンプレートに含まれている「タグ情報」モデルを編集して、「タグ」モデルとして活用します。

モデル名は、わかりやすく「タグ」と変更しましょう。

プロパティは以下のように設定します。

• タイトル（Text）：イベント、期間限定など
• スラッグ（Slug）：event、limited-timeなど

スラッグはSEOを意識し、シンプルで意味のある単語を設定しましょう。

アイテムには、配布素材の内容に沿って必要なタグを登録します。

登録後には各タグを必ず「公開」状態にしましょう。

アイテム左のチェックボックスから「ステータス変更」に移動し、「公開する」を選ぶことで設定できます。

公開されたアイテムは緑色のマークが付くので、設定後に確認しましょう。

ステップ2：メインとなる「ニュース記事」モデルを作成する

次は、ニュース記事そのものを管理するモデルを作成します。テンプレート内の「Posts」モデルを編集して、「ニュース」モデルとして使用していきましょう。

1：「ニュース」モデルの編集とプロパティ設定

まずは、モデル名を「ニュース」に変更します。

続いて、以下のプロパティを設定します。

• タイトル
• スラッグ（Slug）
• カバー画像（Cover）
• 公開日
• タグ
• 本文

2：ニュース記事アイテムの登録と公開

配布されたテキスト・画像を使って、実際にニュース記事を登録していきましょう。

1. タイトル、スラッグ、公開日を入力
2. カバー画像をアップロードし設定
3. カテゴリから該当タグを選択
4. 本文はアイテム詳細画面からリッチテキストエリアにコピー＆ペースト

すべてのニュースアイテムを「公開」状態にするのも忘れずに行ってください。

ステップ3：デザイン調整用のダミー記事を準備する

実際にWebサイト上でCMSのコンテンツをどのように見せるかを整える前に、あると便利なのが「デザイン調整用のダミー記事」です。

ダミー記事が必要な理由

ニュース記事の本文（リッチテキスト）では、見出しやリスト、表、引用、太字など、さまざまな書式が使われます。

こうした要素が実際のWebページ上でどのように表示されるのかを、毎回異なる記事で確認して調整するのは手間がかかります。

そこで活用したいのが、すべてのスタイル要素を含んだ「ダミー記事」です。

この1つの記事をもとにすべてのスタイルをまとめて確認・調整すれば、効率的に全体のデザインを整えることができます。

おすすめのスタイル調整用ダミー記事

Studioのユーザーである山下さんが提供している、CMSスタイル調整用のダミーコンテンツが便利です。

このコンテンツには以下のような要素が網羅されています。

• 見出し（H1〜H6）
• 段落・太字・下線
• 番号付きリスト／箇条書きリスト
• 引用・テーブル・区切り線　など

このコンテンツをコピー＆ペーストするだけで、Studio内で使用可能なリッチテキストの全書式を一括で確認できるので活用しましょう。

STUDIOのCMSで、記事タイプのBody（本文）のスタイル設定をするとき、一度、CMSダッシュボード側ですべての要素を入力しないといけないのですが、その作業、ちょっと手間ですよね？

そんなときは、こちらを全選択&コピペして使ってください。必要な要素すべて網羅してます。https://t.co/XXwp6i36E7

— 山下侑一郎 / 福岡でマーケティング支援 (@YUICHIRO_Ya) January 16, 2024

ニュースモデルにダミー記事を登録する

CMSダッシュボードの「ニュース」モデルから「新規追加」を選択し、以下のように入力・設定していきます。

• タイトル：「CMSデザイン調整用」など、用途が明確にわかる名称にする
• 本文：山下さんの提供コンテンツをコピーして、リッチテキスト欄にペースト
• タグ／カバー画像：今回はスタイル確認用のため任意でOK

このダミー記事は公開するとサイト上に表示されてしまうため、下書きのままにすることでデザイン調整のみに活用できます。

ここまででCMSダッシュボードの準備は完了です。
次はいよいよデザインエディターを使って、実際のWebページにCMSのデータを反映させていきましょう。

ステップ4：トップページに最新ニュース一覧を表示する

ここからは、実際にCMSで登録した記事をWebサイトに表示させる作業に入ります。

まずはトップページに、最新のニュースを3件表示するセクションを作ってみましょう。

1：デザインエディターを起動する

Studioの上部メニューから「デザインエディター」を開きます。

すでに「Sweet Delight」を作成している場合は、そのトップページから作業を開始しましょう。

新しく始める方は、適当なセクションを配置してスタートしてもOKです。

2：ニュース表示セクションの土台を作る

既存のセクションをコピーして、新しいセクションのベースとして利用します。

セクションの名称は「News」などにリネームしておくと管理しやすくなります。

デフォルトのテキストや画像など不要な要素は削除し、ニュース一覧用の枠組みをスッキリさせておきましょう。

3：CMSリストをセクション内に配置する

左側の「追加」パネルから「CMS」を開いて「ニュース」モデルのリストを選択し、先ほど作成したセクション内にドラッグ＆ドロップします。

これで、CMSに登録したニュース記事がプレースホルダー付きで表示される状態になります。

4：表示件数を3件に設定する

CMSリストを選択した状態で、右パネルの「レイアウト」設定を開き、「表示数」を「3」に設定します。

「もっと見る」ボタンや「0件のときに表示するテキスト」などは、今回必要ないためオフにしておきます。

5：各表示内容とCMSプロパティを紐付ける

画像、テキストボックスなどCMSリストの中にある要素を、それぞれCMSで定義したプロパティに紐付けていきます。

• 画像：画像ボックスを選択し、右パネルで「カバー画像」プロパティを選択
• 日付：日付用テキストボックスを選択し、「公開日時」プロパティを紐付け。「YYYY年MM月DD日」形式で表示されるようにフォーマットを調整
• タイトル：タイトル用のテキストボックスには「タイトル」プロパティを設定し、デザインに合わせてフォントサイズや太さ、カラーなどを調整
• タグ：タグ表示用のテキストボックスを用意し、「カテゴリ」プロパティ（タグモデル参照）を紐付けて表示

ライター情報、本文など初期状態で不要な要素が表示されている場合は、それらの要素は削除してください。

このように、必要な表示項目のみを整えていくことで、トップページのニュース表示がよりスッキリと伝わる形になります。

6：タグのデザインを整える

表示されたタグは、視認性とデザイン性を高めるためにスタイルを調整していきます。

日付とタグを横並びに配置したい場合、それぞれを選択してグループ化（Cmd/Ctrl + G）し、グループの並び方向を「横並び」に設定します。

次に、タグが複数ある場合に備えて、タグを囲む親ボックスの方向も横並びに設定します。

背景色や文字色、パディングなど、トップページに合わせてタグ自体の装飾も整えましょう。

7：区切り線を追加し、条件付きスタイルを活用する

ニュースリストに区切り線を追加することで、各アイテムの視認性が高まります。

リストアイテムを選択し、今回は枠線（Border）設定から上に線を追加します。

そのままだと最初や最後のアイテムにも線が表示されてしまうため、「条件付きスタイル」を活用します。

リストアイテムを選択し、右上の「条件付きスタイル」から「最初のアイテム」を選びましょう。

上枠線を0pxに設定することで、不要な線を非表示にできます。

画像と区切り線が近すぎる場合は、パディングやマージンで適切に余白を調整しましょう。

8：詳細ページへのリンク設定を行う

ユーザーが各ニュースの詳細を確認できるように、画像とタイトルに詳細ページへのリンクを設定します。

1. 対象の画像やテキストボックスを選択
2. 右パネルの「リンク」設定から「＋」をクリック
3. 「（ニュースモデル名）の詳細ページ」を選択

これで、CMSで作成した詳細ページへ正しく遷移できるようになります。

9：タグごとの一覧ページ（カテゴリ別ページ）へのリンクを設定する

表示されているタグにもリンクを設定し、そのタグに紐づく記事一覧ページ（カテゴリ別ページ）に遷移できるようにします。

1. タグのテキストボックスを選択
2. 「リンク」設定で、該当の「タグモデル名のカテゴリページ」を指定

これで、ユーザーが関心のあるカテゴリのニュースを絞り込んで閲覧できます。

10：「ニュース一覧を見る」ボタンの設置

トップページから全ニュースを一覧できるよう、「ニュース一覧を見る」ボタンを設置します。

1. テキストボックスとアイコンボックスを追加
2. アイコンの初期状態はハートマークなどになっているので、「>」に変更
3. サイズや背景色、位置などを調整
4. ボタングループに「ニュース一覧ページ」へのリンクを設定

ステップ5：ニュース一覧ページを作成する

トップページの「ニュース一覧を見る」ボタンから遷移する、すべてのニュース記事を一覧表示する専用ページを作成します。

1：ページの新規作成と基本設定

デザインエディター左側の「ページ」タブを開きます。

Studioでは、CMSモデルを作成した時点で関連するページが自動生成されています。

「Recent Posts」や「ニュース-index」など、一覧ページらしき名前のページを見つけて選択し、右側の歯車アイコンからページ設定を開きましょう。

パス（URL）が初期状態で/postsなどになっている場合は、分かりやすく/newsに変更します。

パス変更後に「リンクの更新」確認が出たら、必ず「更新する」を選択してください。

ページタイトルはブラウザのタブや検索結果に表示されるタイトルで、説明文は検索結果などに表示される簡潔な説明を記載する部分です。

Studio内表示用のページ名は、管理しやすいように「ニュース一覧ページ」などに変更しましょう！

2：共通パーツ（ヘッダー・フッター）の配置と調整

ニュース一覧ページにも、トップページと同じヘッダーやフッターを使います。これらはコンポーネント化して使い回すことで、修正を一括管理できます。

3：ファーストビュー画像とH1見出しの設定

ページの冒頭に、大きなアイキャッチ画像とページタイトルを配置してインパクトを出します。

作業中に不具合が発生した場合は、リロードすると解決することが多いので試してみてください！

4：トップページのニュースセクションを再利用する

ニュース一覧ページでは、トップページと同じレイアウトで複数のニュースを一覧表示したいため、すでに作成済みのニュースセクションを活用すると効率的です。

1. トップページの「News」セクション全体をコピー
2. ニュース一覧ページに移動し、H1見出しのすぐ下にペースト
3. 初期表示されていた仮のCMSリストが残っていれば削除

これで一覧表示のベースが完成します。

5：表示件数の増加と「もっと見る」ボタンの設定

一覧ページでは、トップページより多くのニュースを掲載したいため、表示件数や読み込み方法を変更します。

ペーストしたCMSリストを選択し、右側の「レイアウト」パネルから「表示数」を10件に変更。

表示件数を超えるニュースがある場合に備え、「Load more」ボタンをオンにします。

ステップ6：カテゴリ別のニュース一覧ページを作成する

特定のタグ（カテゴリ）ごとに、関連するニュース記事だけを表示する「カテゴリ別ニュース一覧ページ」を作成します。

訪問者が関心のある話題にすばやくアクセスできる、ユーザビリティの高いページです。

1：ニュース一覧ページの構造を流用する

カテゴリ別ページは、基本的な構造やデザインがニュース一覧ページと共通しているため、コピー＆ペーストで効率的に構築できます。

ニュース一覧ページから、ページ全体のベースをコピーします。ヘッダーやフッターなど共通パーツが含まれている状態でOKです。

コピーした親ボックスをペーストし、レイアウトを調整します。

2：CMSリストのフィルター機能で、タグごとの記事を絞り込み表示

表示される記事が、URLに含まれるタグに応じて自動で切り替わるよう、CMSリストにフィルターを設定します。

フィルター設定の手順は次のとおりです。

1. カテゴリページ上のCMSリスト（ニュース記事一覧）を選択。
2. 右パネルの「フィルター」セクションを展開し、「＋ フィルターを追加」をクリック。
3. 最初のプルダウンで、ニュースモデル内の「タグ」を選択。
4. 最後に「ダイナミック」のついたタグ名を選択。

ダイナミックがついていない固定のタグ名を選択してしまうと、他のタグページでも同じ記事が表示されるミスにつながります。
必ず「ダイナミック」と書かれているものを使いましょう！

「もっと見る」ボタン（Load more）をオンにして、段階的に記事を追加表示します。

「0件の表示」は該当タグに記事がない可能性もあるため、「〇〇に関するニュースはありません」などのメッセージを追加すると親切です。

3：H1タイトルにカテゴリ名を動的に反映

SEOおよびユーザー視認性の観点からも、ページ最上部にカテゴリ名入りのH1見出しを設置します。

以下のような手順で設定してください。

1. H1タイトル用のテキストボックスを追加
2. テキスト内容を、CMSの「タグ」モデルの「タイトル」プロパティに紐付け
3. 後ろに「に関するニュース」などの固定文言を追加

たとえば、「{タグタイトル}に関するニュース」と設定すると、「期間限定に関するニュース」のように表示されます。

ステップ8：ニュース詳細ページを作成する

個別のニュース記事を、美しく・読みやすく表示する「ニュース詳細ページ」を作成します。

ユーザーが快適に閲覧できるよう、デザインやCMSの設定を丁寧に整えていきましょう。

1：共通パーツの配置

まずは、他ページとのデザイン統一のため、共通パーツをニュース一覧ページからコピーします。

1. ニュース一覧ページのヘッダー・ショップ情報・フッターを含む親ボックスをコピー
2. ニュース詳細ページにペースト
3. 不要な要素や余白、パディングなどは削除
4. 最上部の見出しにH1タグを適用

なお、共通パーツをコンポーネント化している場合、そのまま使うとH1タグが複数ページで重複してしまいます。

そのため、コンポーネント内の見出しタグをdivやspanなどに変えましょう。

2：CMSプロパティの紐付けとデザイン調整

次に、記事の主要情報をCMSと連携させて表示します。

3：記事本文（Body）は必ず「リッチテキスト」要素に紐付ける

ニュース記事の本文には、リッチテキストボックスを使いましょう。

StudioのCMSで設定する「本文（Body）」フィールドには、見出し、太字、リスト、引用、表など、さまざまな書式情報が含まれています。

これらの書式を正しくWebページ上に反映させるためには、「リッチテキスト」専用の要素に紐付ける必要があります。

設置手順は次のとおりです。

1. デザインエディター左の「追加」パネルから「リッチテキスト」を選択
2. ページ内に配置
3. 「Body」プロパティを紐付け

なお、記事本文の横幅が広すぎると読みづらいため、可読性を向上させるためにもなるべく狭く設定することをおすすめします！

4：「ニュース一覧に戻る」ボタンの設置とデザイン

記事下部には、ユーザーが迷わず一覧ページに戻れるようナビゲーションを用意します。

ボタンのテキストは「ニュース一覧に戻る」にし、アイコンは左向き矢印を追加パネルから挿入します。

テキストとアイコンを横並びにしてグループ化し、左寄せに配置してください。

最後に色・フォントなど、サイト全体のトーンに合わせて調整しましょう。

ステップ7：CMS記事本文の見た目を整える

ニュース詳細ページに配置した「リッチテキスト」ボックスは、初期状態ではStudioのデフォルトスタイルで表示されています。

このままでは、見出しやリストのデザインがサイト全体と調和せず、読みにくい印象を与えてしまうこともあります。

ここでは、記事の可読性を高めつつ、サイトのトーン＆マナーに合った見た目になるよう、リッチテキスト内の各要素のスタイルを一括で整えていきます。

1：リッチテキスト内の各要素のスタイルを調整する

「CMSデザイン調整用」のダミー記事を表示させた状態で、リッチテキスト内の各要素を実際に目で確認しながらスタイルを整えていきましょう。

リッチテキストボックスを選択した状態で、右パネルから全体のスタイル設定を行うことも、個別の要素をクリックして選択・編集することも可能です。

調整が必要になる主要な要素は次のとおりです。

• 段落
• 目次
• 見出し
• 太字・下線・打ち消し線
• リンク
• リスト
• 引用
• 表
• 区切り線
• 画像

これらのスタイルは一度調整すれば、同じプロジェクト内のすべてのCMS記事に自動で適用されます。

時間をかける価値がある工程ですので、丁寧に仕上げましょう。

2：スタイル調整後はダミー記事を非公開または削除

すべてのリッチテキストスタイルの調整が完了したら、ニュース詳細ページで表示している記事を実際のニュース記事に切り替え、最終的な表示を確認しましょう。

調整に使用した「CMSデザイン調整用」のダミー記事については、運用上のトラブルを防ぐためにも、スタイル調整が済んだタイミングで削除しておくのが無難です。

今回はCMSがメインなのでレスポンシブ対応については割愛しています。
TOPページであらかじめレスポンシブ対応しておくと、コンテンツを使い回す際に効率よく作業が進められます。

【補足】シンプルなタグ管理なら「マルチセレクト」もおすすめ！

今回は「タグ」モデルを別途作成し、それを「ニュース」モデルから参照する構成でタグ管理を行いました。

この方法でタグごとの絞り込みページ（カテゴリ別一覧ページ）も作成できましたが、すべてのケースでタグの絞り込みページが必要とは限りません。

たとえば、「タグはただのラベルとして表示できればよい」「タグをクリックしての絞り込みやリンク先は不要」というシンプルな使い方をしたい場合には、より簡潔な管理方法が適しています。

そこで活用できるのが、2025年2月に新しく追加された「マルチセレクト」プロパティです。

マルチセレクトプロパティとは

「マルチセレクト」とは、あらかじめ定義した選択肢の中から複数を選んで項目に紐付けられるプロパティです。

タグ用にCMSモデルを別途作成する必要がないため、使用するモデル数を抑えられるメリットがあります。

一覧ページやリンクを伴わない、シンプルなタグ表示を行いたい場合には便利な機能です。

マルチセレクトの設定方法と表示イメージ

マルチセレクトは、以下のような手順で設定できます。

1. ニュースモデルに新しいプロパティとして「マルチセレクト」を追加
2. ニュース記事を作成・編集する際に、該当する選択肢をチェック形式で選択
3. デザインエディター上で、マルチセレクトプロパティを紐付けたテキストエリアやタグ表示用の要素を配置

このように、マルチセレクトプロパティを使えば、モデル数を節約しつつ、簡易的なタグ表示が実現できます。

プロジェクトの規模や目的に応じて、「モデル参照型」と「マルチセレクト型」をうまく使い分けましょう。

まとめ：Studio CMSを理解して、本格的なWebサイトを制作できるようになろう！

CMSの構築は、クライアントからの要望でも特に多いニーズのひとつです。

そのため、CMSの仕組みや使い方を正しく理解しておくことは、Web制作者としてのスキル向上に直結します。

最初は難しく感じるかもしれませんが、実際に手を動かしながら学んでいくことで、少しずつ理解を深められます。

知識と経験を着実に積み重ねていき、CMS機能を活用した本格的なWebサイト制作にも自信を持って取り組めるようになりましょう。

未経験からWebデザインを学ぶならデイトラWebデザインコースがおすすめ！

デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！

デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。

独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。

また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。

未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！