【手順】Studio CMSでお知らせ一覧を作る4ステップ｜並び順・詳細ページまで

Studioのお知らせ一覧は、CMSで「モデルを作る → 記事を登録する → CMSリストで並べる → 詳細ページを作る」の4ステップで完成します。テキストボックスを手で増やしていく方法だと、記事が増えるたびにデザインが崩れ、更新にも時間がかかります。この記事では、その4ステップを操作の順番どおりに追いながら、日付の降順での並び替え、トップページに出す件数の決め方、一覧が1件しか表示されないときの対処までまとめます。150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、初めての方がつまずきやすいポイントも取り上げます。CMS全般の考え方はStudioのCMS・ブログの作り方でも扱っています。

結論・全体像：お知らせは「CMSモデル＋CMSリスト」で作る

まず全体像です。Studioでお知らせリストを作るときの土台になるのは、次の2つの要素です。

• モデル：お知らせ1件が持つ情報の「型」。タイトル・日付・本文などの入れ物を定義します
• CMSリスト：そのモデルに登録された記事を、決めたデザインで一覧表示する仕組み

理由はシンプルで、お知らせは「同じ見た目で、中身だけが違うものが並ぶ」コンテンツだからです。1件ごとに手作業でデザインを組むのではなく、型（モデル）を1つ作っておき、そこにデータを追加していけば、あとはStudioが自動で同じデザインで並べてくれます。

具体的には、次の順番で進めます。

1. お知らせ用のモデルを作り、必要なフィールドを設計する
2. モデルに実際のお知らせ記事を登録する
3. ページ上にCMSリストを置き、モデルと紐付けて一覧を表示する
4. 記事ごとの詳細ページ（テンプレート）を用意する

この4ステップを押さえれば、記事を追加するたびに一覧も詳細ページも自動で増えていく、運用しやすいお知らせページが完成します。コミュニティの制作現場でも、「最初にモデル設計だけ丁寧にやっておけば、あとの更新は驚くほど楽になる」という声が共通しています。

作り始める前に「お知らせの見せ方」を決める

手を動かす前に決めておきたいのが、お知らせをどう見せるかです。ここが決まっていないと、モデルのフィールドを何度も作り直すことになります。よく使われるのは次の3パターンです。

見せ方	向いているケース	必要なフィールド	詳細ページ
1行テキスト型（日付＋タイトル）	更新頻度が高く、本文が短い	日付・タイトル・本文	必要
カード型（画像＋日付＋タイトル）	イベントや実績を見せたい	日付・タイトル・サムネイル・本文	必要
外部リンク型	プレスリリースや他サイトへ飛ばす	日付・タイトル・リンク先URL	不要

迷ったら1行テキスト型から始めてください。フィールドが少なく、あとからサムネイルを足してカード型に寄せることもできます。逆に、最初からカード型で組んで画像を用意できないと、画像枠が空いた一覧になってしまいます。

もう1つ決めておくのが、置く場所と件数です。トップページのお知らせ枠と、全件を並べる専用の一覧ページは、同じモデルを別のCMSリストで表示します。トップには3〜5件だけ出し、専用ページへリンクする構成が定番です。

手順：お知らせリストを作る4ステップ

手順1：お知らせ用のモデルを作る

Studioの編集画面でCMSの設定を開き、新しいモデルを1つ作成します。モデルとは、前述のとおりお知らせ1件が持つ情報の型です。ここで最初に「どんな情報を持たせるか」を決めます。お知らせで最低限あると便利なフィールドは次のとおりです。

フィールド	用途	型の目安
タイトル	見出しになる短文	テキスト
日付	公開日・掲載日	日付
カテゴリー	お知らせ／プレス／イベント等	選択肢または参照
本文	詳細ページに表示する内容	リッチテキスト
サムネイル	一覧に出す画像（任意）	画像

ポイントは、後から追加するのは手間なので、最初に必要なフィールドを洗い出しておくことです。特に日付フィールドは、並び替えや「新着」表示に使うため必ず入れておきます。カテゴリーで絞り込みたい場合は、この段階でカテゴリーの持ち方を決めておくとスムーズです。カテゴリーやタグの設計は少し奥が深いので、Studio CMSのカテゴリー・タグの作り方で詳しく扱っています。モデル設計そのものの考え方はStudio CMS「モデル」の作り方と設計のコツも参考になります。

手順2：お知らせ記事を登録する

モデルができたら、実際のお知らせを登録します。CMSの管理画面から新規追加を選び、手順1で作ったフィールドに沿ってタイトル・日付・本文などを入力していきます。この段階では見た目を気にする必要はありません。あくまで「データを入れる」作業です。

テスト用に3〜4件ほどダミー記事を入れておくと、次の一覧表示の段階でレイアウトの確認がしやすくなります。1件だけだと並び順や余白の崩れに気づけないため、複数件入れておくのがおすすめです。

手順3：CMSリストで一覧を表示する

次に、お知らせを表示したいページ（トップページや専用のお知らせページ）にCMSリストを配置します。CMSリストは、選んだモデルの記事を繰り返し表示してくれる箱のようなものです。

CMSリストを置いたら、表示元のモデルを手順1で作ったお知らせモデルに指定します。すると、リスト内に用意した1件分のデザイン（カード）が、登録した記事の数だけ自動で複製されて並びます。あとは、そのカードの中にあるテキスト要素や画像要素を、モデルのどのフィールドと結びつけるかを設定していきます。たとえば見出しテキストにはタイトルを、日付表示部分には日付フィールドを紐付ける、といった具合です。

ここで設定しておきたいのが並び順と表示件数です。並び順は「日付の新しい順（降順）」にすると、最新のお知らせが先頭に来ます。トップページのお知らせ枠として使うなら、表示件数を3〜5件に絞り、「お知らせ一覧へ」というリンクで全件ページに誘導する構成が定番です。全体のレイアウトや余白が崩れる場合は、ボックス・余白の仕組みを確認すると原因を切り分けやすくなります。

手順4：詳細ページ（テンプレート）を作る

一覧のタイトルをクリックしたら記事の詳細が開く、という動きを作るには、詳細ページのテンプレートを用意します。Studioでは、モデルに対して「1記事分の詳細ページ」の型を作れる仕組みがあります。この型を1つデザインしておけば、記事の数だけ詳細ページが自動生成されます。

詳細ページには、タイトル・日付・本文（リッチテキスト）などのフィールドを配置し、それぞれをモデルのフィールドと紐付けます。一覧側のカードから詳細ページへのリンクを設定すれば、「一覧→詳細」の導線が完成します。お問い合わせへの動線をつけたい場合は、お問い合わせフォームの作り方もあわせて設定しておくと親切です。

手順4の補足：詳細ページを作らない場合

お知らせの中身が他サイトのプレスリリースやPDFしかない場合、詳細ページは作らなくてかまいません。モデルにリンク先URLを入れるテキストフィールドを用意し、一覧のカード全体のリンク先にそのフィールドを指定します。こうすると、クリックで外部ページへ直接移動します。

この形にするなら、本文のリッチテキストフィールドは不要です。ただし、途中から「やはり自社サイト内に本文を置きたい」となると作り直しになるため、本文を書く可能性が少しでもあるなら詳細ページ型で組んでおくほうが安全です。

つまずき・よくある失敗と対処

お知らせリスト作りで、制作現場からよく相談が寄せられるつまずきポイントと対処法をまとめます。

• 一覧が1件しか表示されない：CMSリストではなく、通常のボックスに1件分だけ手で作ってしまっているケースです。表示元のモデルを紐付けた「CMSリスト」になっているかを確認します。
• 並び順がバラバラになる：並び替えの基準を設定していない、または日付フィールドを紐付けていないことが原因です。並び順の設定で「日付・降順」を指定します。
• 日付が意図した書式で出ない：日付フィールドは表示書式を選べる場合があります。「2026年7月6日」「2026.07.06」など、サイトのトーンに合う書式を選びます。
• 詳細ページが真っ白になる：詳細ページのフィールドをモデルと紐付け忘れていることが多いです。本文（リッチテキスト）が正しく結びついているか確認します。
• 一覧のデザインが崩れる：カード内の要素の幅指定や余白が原因のことが多いです。1件だけで確認せず、複数件で表示崩れを確認するのが安全です。

いずれも「型（モデル）とデザイン（CMSリスト）を別々に考える」という原則に立ち返ると、原因を切り分けやすくなります。ノーコードサロンでも、うまく表示されないときは「これはデータ側の問題か、表示側の問題か」を最初に切り分けることを推奨しています。

よくある質問（FAQ）

Q1お知らせとブログはモデルを分けるべきですか？

用途が違うなら分けるのがおすすめです。お知らせは日付と短いテキスト中心、ブログは本文が長くカテゴリーや著者情報を持つことが多く、必要なフィールドが異なります。別モデルにしておくと、それぞれに合った一覧デザインや絞り込みを設定しやすくなります。ブログ側の作り方はStudioのCMS・ブログの作り方を参照してください。

Q2無料プランでもお知らせCMSは使えますか？

CMSの利用可否や登録できる記事数はプランによって変わることがあります。運用を始める前に、最新の料金プランで自分の使い方に合うかを確認しておくと安心です。プランの考え方はStudioの料金プランで整理しています。

Q3お知らせをカテゴリーで絞り込んで表示できますか？

できます。モデルにカテゴリーのフィールドを持たせておき、CMSリスト側で特定カテゴリーだけを表示する条件を設定します。カテゴリーの持ち方（選択肢か、別モデルの参照か）で設定方法が変わるため、Studio CMSのカテゴリー・タグの作り方で詳しく確認するのがおすすめです。

Q4記事を追加したら一覧に自動で反映されますか？

はい。CMSリストはモデルのデータを参照して表示しているため、記事を追加・公開すると一覧にも自動で反映されます。並び順の設定が「日付・降順」になっていれば、新しい記事が自動で先頭に並びます。

Q5詳細ページを作らず、お知らせから外部サイトへ飛ばせますか？

できます。モデルにリンク先URLのテキストフィールドを用意し、一覧のカードのリンク先にそのフィールドを指定します。プレスリリースやPDFを置いている場合に向いた形です。ただし本文を自社サイト内に載せる予定があるなら、最初から詳細ページを作っておくほうが後戻りが少なくなります。

Q6トップページと一覧ページで、同じお知らせを使い回せますか？

使い回せます。モデルは1つのまま、トップページと一覧ページにそれぞれCMSリストを置き、同じモデルを表示元に指定します。表示件数だけをトップは3〜5件、一覧ページは多め、と変えるのが定番です。条件で出し分けたい場合はStudioのCMS動的フィルターの使い方も参考になります。

まとめ

Studioでお知らせリストを作るときは、「モデルを作る → 記事を登録する → CMSリストで一覧化する → 詳細ページを用意する」という4ステップで進めるのが基本です。最初にフィールド（特に日付とカテゴリー）を丁寧に設計しておくと、後の更新や絞り込みが格段に楽になります。並び順は日付の降順、トップページの枠では表示件数を絞って一覧ページへ誘導する、という定番の形を押さえれば、運用しやすいお知らせページが完成します。

作り始める前に、1行テキスト型・カード型・外部リンク型のどれで見せるかを決めておくと、フィールドの作り直しを避けられます。一覧と詳細を「型」と「表示」に分けて考えることが、つまずいたときの解決の近道です。まずは3〜4件のダミー記事で表示を確認しながら、少しずつ整えていきましょう。

ノーコードサロンには、Studioで実際に案件を納品しているメンバーが集まっています。お知らせ一覧のように「作り方は分かったけれど、この案件ではどう組むのが正解か」で迷う場面こそ、人に聞くのが早い部分です。作ったサイトを見せて意見をもらいながら進めたい方は、のぞいてみてください。