- 投稿日：2026/02/07
- 更新日：2026/02/21
ホームページのトップに、最新の「お知らせ」や「ブログ」の日付が出ている。 たったそれだけで、サイト全体に「生きている感じ」が生まれますよね。
初めて訪れたお客様にとって、その日付が新しいものであることは、
「この会社は今もしっかりと動いている」
「ここなら安心して相談できそうだ」
という静かな、けれど力強い信頼につながります。
ただ…正直なところ、新しい記事を書くたびに、トップページのデザイン編集画面を開いて、タイトルをコピペして、日付を打ち直して……という作業は、とても面倒ですよね？
忙しい業務の合間、そういった「小さな手間」は、積み重なると意外と大きなストレス（困りごと）になるものです。
そこで今回は、ノーコードツール「Studio」のCMS機能を活用して、
記事を書けば自動的にトップページ（ファーストビュー）に「最新の1件」が表示される仕組みをご紹介します。
これは実際に、僕たち自身のホームページでも採用している手法です。
今日から、更新の手間という「小さな困った」をほどいて、
もっと記事作成そのものに集中できる環境をつくっていきましょう。
1. なぜ、ファーストビューに「最新記事」を置くのか？
具体的な設定方法に入る前に、
少しだけ「なぜ、そこに置くのか」という理由をお話しさせてください。
私たちは、ホームページのファーストビュー（最初に表示される画面領域）の最下部に、最新記事の「日付」と「タイトル」だけをシンプルに表示させています。
これには、明確な理由があります。
それは「お客様への信頼感の醸成」です。
(1)「看板に明かりが灯っている」安心感
Webサイトは、24時間365日働く会社の顔です。 しかし、どんなに美しいデザインのサイトでも、トップページの情報が半年前の日付で止まっていたらどうでしょうか？ 「あれ？ この会社、今は活動しているのかな？」「問い合わせても返事が来るかな？」 お客様は、そんなふうに少し不安になってしまいます。
ファーストビューに最新の日付があることは、実店舗で言えば「看板に明かりが灯っている」のと同じです。ページを開いた瞬間に、「いらっしゃいませ、私たちは今日も元気に営業していますよ」というメッセージを、言葉を使わずに伝えることができるのです。
(2)「今」の熱量を共有する
私たちは、お客様と「同じ景色を見て、同じ温度で進む」ことを大切にしています。会社として今、何に取り組み、どんなことを考えているのか。
その「現在の温度感」を最も端的に表すのが、最新の記事です。
わざわざ「お知らせページ」までクリックしなくても、トップページを開くだけで私たちの「今」が伝わる。
そうすることで、お客様との心の距離を少しでも縮めたいと考えています。
それでは、この仕組みをStudioでどのように実装するのか、
次の章から具体的な手順を見ていきましょう。
2.【実践】Studioで最新記事を表示する4ステップ
それでは、実際に手を動かしていきましょう。
「CMS」と聞くと少し難しそうに感じるかもしれませんが、やっていることは「記事を書く場所（裏側）」と「表示する場所（表側）」を線でつなぐ作業だけです。
今回は仕組みを理解することを最優先にするため、デザインの細かい調整は後回しにして、まずは「最新記事がポッと表示される」をゴールに最短距離で駆け抜けましょう。
ステップ1：CMSで記事を作成
まずは、ホームページに表示させるための元データ（記事）を用意します。
CMS画面へ移動: 左側のメニューバーにある「CMS」アイコンをクリックしてください。
モデルの作成: テンプレート選びの画面になりますが、今回はシンプルに仕組みを作るため「空白からはじめる」を選びましょう。
タイプと名前の設定: 「モデルを追加する」をクリック後、「記事タイプ」を選択し、モデル名を入力します。
今回はお知らせを表示する想定なので、わかりやすく「NEWS」と名付けましょう。
記事（アイテム）の投稿: 「アイテムを追加」をクリックして、テスト用の記事を作ります。
例）タイトル：1記事目のタイトルです
例）本文：1記事目の本文です
その後、右上の「公開」ボタンをクリック。
💡ここでワンポイント：動きを確認しやすくするため、もう1記事（合計2記事）作っておくのがおすすめです。
「最新の1件だけ」が表示されるかどうかのテストがしやすくなります。
（もちろん、必須ではありません）
これで、裏側の「データの準備」は完了です！
ステップ2：ボックスの配置と「CMSリスト」の設置
続いてデザインエディタに戻り、トップページに「記事を表示するための枠」を作ります。
ボックスの配置: 左側のツールバーから「Box」を追加し、お好きな場所に配置してください。これが記事を表示する土台になります。
リスト化（ここが重要！）: 配置したBoxの上で右クリックをします。メニューの中から「リスト化」を選んでクリックしてください。
※これで、ただの四角い箱が「データを受け取れる特別な箱」に進化しました。
テキストの配置: リスト化したBoxの中に、「Text」パーツを2つ追加してください。
1つ目：タイトル用
2つ目：本文用
（今は「テキスト」という文字が入っているだけでOKです）
これで、「データを流し込むための空箱」の完成です。
ステップ3：データの連携（ここが最重要！）
いよいよ、ステップ1で作った「記事データ」と、ステップ2で作った「箱」をつなぎ合わせます。
リストの選択: 先ほどリスト化したBox全体を選択した状態で、画面右側のパネルを見てください。
データの紐付け: パネル内の「データ」タブにある「データを紐付け」をクリックします。 すると、ステップ1で作った「NEWS」というモデルが表示されるので、それを選択してください。
表示件数の設定: ここが今回のキモです。設定項目の中に「表示数」という箇所があります。 今回は「最新の1記事だけ」を表示したいので、ここの数字を「1」に書き換えてください。
💡補足：CMS記事（記事タイプモデル）は、勝手に公開日の新しい順でリストに並びます。
ステップ4：表示項目の紐付け
最後に、テキストの箱の中に入っている文字と実際の記事データが持っているデータを紐付けていきます。
データの選択: レイヤーパネル（左側）でBoxを選択し、右パネルの「データ」をクリックすると、記事の情報（タイトルや本文など）がズラッと表示されます。
ドラッグ＆ドロップで紐付け: 右パネルに表示された「Title」の横にある「●（丸印）」を長押ししながら、画面上のテキストパーツまで引っ張って、離してください。
どうでしょう？文字が、実際の記事タイトルにパッと変わりましたよね？
同じ要領で、もう一つのテキストパーツには「Content」を紐付けましょう。
めちゃくちゃ簡単ですよね！！
ドラッグ&ドロップで直感的に操作できる。ここがStudioの楽しいところです！
▼ 補足：もう一つのやり方
とはいえ、ドラッグ＆ドロップが面倒な場合は、以下の方法でも可能です。
画面上のテキストボックスをクリックして選択。
右側の設定パネルにある「テキスト」入力欄の中をクリック。
「CMSプロパティから選択」というメニューが出るので、そこから「Title」や「Content」を選ぶだけで紐付け完了です。
完成！あとは整えるだけ
お疲れ様でした！これで仕組み自体は完成です。
一番新しい記事の「日付」と「タイトル」だけが表示されていれば大成功です！
あとは、文字のサイズを調整したり、日付を表示させてみたり、
お好みのデザインに整えてあげてください！
一度この設定をしてしまえば、あとはCMSで「お知らせ」を書くだけ。
自動的にトップページが更新され、サイトが常に生き生きと動き出します。ぜひ、試してみてくださいね！！
※はじめにお見せした弊社のHPでは、記事の「公開日付」と「タイトル」を紐づけております。
まとめ：CMSを使えば手間も減らして鮮度を保てる
Webサイトは「作って終わり」ではありません！
だからこそ、今回のCMS連携のようにWebサイトは「運用しやすさ」まで考えて設計することが重要です。
ただ綺麗なだけのサイトではなく、更新され続け、生きた情報を届けるサイトこそが価値があると考えています！
「やりたい」が「難しい」に変わったら、ご相談ください
Studioは直感的に触れる素晴らしいツールですが、
触れば触るほど「もっと動きをつけたい」「スマホでの見え方にもこだわりたい」など、実現したいアイデアが溢れてくるものです。
ただ、そうした「あと一歩のこだわり」を自分ひとりだけで形にするのは、時間も技術も必要で、少し大変かもしれません。
私たちは、そんなあなたの「作りたい」という想いを、サポートするStudio制作代行を行っています。
弊社では、単にサイトを作るだけでなく、お客様がご自身で運用しやすい設計（CMS設計など）も含めてご提案しています。
「クライアントと制作会社」という垣根を超えて、同じチームとして伴走しながら、あなたの会社の魅力を伝えるWebサイトを一緒に作り上げます！
シティ外ではございますが、大手の代理店さんとも取引しております。
お探しの際には、ぜひお声がけ(DM)ください！😌
