サイネージは、CMS(管理のサービス)と契約しなくても自作できます。Claude などの AI にチャットで頼んで、今日のおすすめ・営業時間・時計・天気を1枚にまとめた Web ページを作ってもらい、テレビにつないだ Fire TV Stick や Raspberry Pi のブラウザで開くだけです。1台なら自作で足りますが、画面が増えたり、時間で中身を切り替えたりするなら、Yodeck か Kitcast を AI とつなぐほうが早く済みます。
プログラムを書かずに、AI に「こんなものを作って」と話しかけてソフトを作ってもらうやり方は、「バイブコーディング」と呼ばれています。この方法で、店のサイネージに映す Web ページも作れます。
この記事では、編集部が実際に Claude にチャットで頼んで作ったページを見ながら、頼み方と映し方、そして自作で済む場合と、CMS を使ったほうが早い場合の分かれ目を紹介します。
この記事のページは、2026年10月24日に編集部が Claude(Claude Code)に頼んで作り、パソコンのブラウザ(Chromium)で 1920×1080 に表示して撮影しました。Fire TV Stick・Android の STB・Raspberry Pi などの実機での表示は未検証です。店名・品名は見本です。Yodeck と Kitcast の料金は、2026年11月11日に公式の料金ページで確かめました。
自作サイネージとは?
ここでいう「自作サイネージ」は、次の3つだけでできる、いちばん小さなサイネージです(ふつうのデジタルサイネージの仕組みは、画面・再生端末・CMS の3つ)。
- 画面に映す Web ページ(HTML のファイル1つ)を AI に作ってもらう
- そのページを、インターネットから見られる場所に置く
- テレビやモニターにつないだ端末のブラウザで、そのページを全画面で開いておく
サイネージ用の CMS(管理のサービス)と契約しなくても、まず1台の画面に何かを映すところまでは、これで届きます。
AI に頼むと、どんなページができる?
1回の返事で、HTML のファイル1つのページができました。ただし1回目は画面の下がはみ出し、見たままを伝えて頼み直すと、1画面に収まりました。
最初に、どう頼んだ?
画面の大きさ、載せるもの、あとで書き換える場所を、1つの文章にまとめて頼みました。
Claude には、次のように頼みました。
うどん屋の店頭のテレビに映す、サイネージ用の Web ページを、HTML のファイル1つで作って。横向きの 1920×1080。左に今日のおすすめ2品と値段、右上に時計と今日の営業時間、右下に東京の天気(APIキーのいらない Open-Meteo を使って)。文字は離れたところからでも読めるくらい大きく。おすすめと営業時間は、あとで自分で書き換えやすいように、ファイルの上のほうにまとめて。天気は10分ごとに取り直して。
AI は1回の返事で、HTML・デザイン・時計・天気の取得まで入った1つのファイルを作りました。書き換える場所は、頼んだとおりファイルの上のほうにまとまっています。
// ===== ここだけ書き換えればOK =====
const SHOP = {
name: "うどん処 さくら(見本)",
hours: "11:00 – 15:00 / 17:30 – 21:00",
note: "本日は通常営業です",
// 天気を出す場所(緯度・経度)
lat: 35.68, lon: 139.76, place: "東京",
};
const SPECIALS = [
{ name: "かしわ天ぶっかけ", price: 980, note: "鶏の天ぷら2本・温玉つき" },
{ name: "季節の野菜かき揚げうどん", price: 1080, note: "さつまいも・れんこん・春菊" },
];
1回で、そのまま使えるページになった?
なりませんでした。ブラウザで開いてみると、長い品名が2行に折り返して、画面の下がはみ出していました。営業時間も途中で折り返しています。AI はコードを書けても、できあがった画面を自分の目で見ているわけではありません。
はみ出しは、どう直した?
見たままを伝えて頼み直すと、直りました。
1920×1080 で開くと、「季節の野菜かき揚げうどん」が2行になって、下がはみ出している。営業時間も途中で折り返している。どんなに長い品名でも1行に収まるように、入りきらないときは文字を自動で小さくして。営業時間は昼と夜で2行に分けて。全体がかならず1画面に収まるようにして。
AI は、品名が入りきらないときに文字を少しずつ小さくするしくみを足し、営業時間を2行に分け、余白を詰めました。もう一度開くと、1画面にきちんと収まりました。
天気について:編集部の撮影環境からは天気のサービス(Open-Meteo)につながらなかったため、写真の天気は見本の値を返して表示しています。天気が取れないときは「天気を取得できませんでした」と出て、画面が崩れないことも確かめました。実際にインターネットにつないだ端末で、本物の天気が出るかは未検証です。
おすすめは、どう差し替える?
翌日のおすすめに変えるときも、AI に一言頼めば、書き換える場所だけを直したファイルが返ってきます。
1品目を「きのこの天ぷらうどん 980円、舞茸・しめじ・エリンギの天ぷら」に差し替えて。それと、今日は昼の部だけなので、営業時間の下に「本日は昼の部のみ(15:00まで)」と出して。
ただし、ここで変わったのはパソコンの中のファイルだけです。店の画面に出すには、このファイルをもう一度、ページを置いている場所にアップロードしなければなりません(後で説明します)。
AI には、どう頼めばうまくいく?
画面の大きさと向きを最初に伝え、できたページを自分の目で見て、おかしい所を具体的に言って直させます。
- 画面の大きさと向きを最初に言う:「横向き 1920×1080」「縦向きのモニター」など
- 書き換える場所をまとめさせる:「おすすめと営業時間はファイルの上のほうにまとめて」と頼むと、あとで自分で直すときも、AI に直させるときも迷わない
- 見たままを伝えて直させる:「2行になって下がはみ出している」のように、どこがどうおかしいかを具体的に言う
- APIキーのいらないサービスを指定する:天気なら Open-Meteo のように、キーなしで使えるものを選ぶと、ページにキーを書かずに済む
- 失敗したときの表示も頼む:「天気が取れないときは画面を崩さずにメッセージを出して」
- 最後は自分の目で確かめる:パソコンのブラウザを全画面(多くのブラウザは F11)にして、実際の画面に近い状態で見る
文字の大きさや、1枚に載せる情報の量の考え方は、サイネージのコンテンツの作り方にまとめています。ページに載せる料理の写真を AI で作る方法は、AIでサイネージの画像・動画を作る方法をご覧ください。
作ったページは、どこに置く?
インターネットから見られる、静的なページを置くサービスに置きます。
端末のブラウザで開くには、ページがインターネットから見られる場所にある必要があります。無料で使えるのは、たとえば次のようなサービスです。
- Cloudflare Pages、GitHub Pages、Netlify などの、静的なページを置くサービス
どれも、HTML のファイルをアップロードすると URL がもらえます。置き方も AI に「このファイルを Cloudflare Pages に置く手順を教えて」と聞けば、画面に沿って教えてくれます。
編集部は、この記事のページをこれらのサービスに置いて、端末から開くところまでは試していません(未検証)。
どの端末で映せる?
Fire TV Stick・Android の STB・Raspberry Pi など、ブラウザのある端末で映せます。Apple TV にはブラウザがないので、向きません。
ページの URL を開けるブラウザがあれば、どの端末でも映せるのが自作のよいところです。ただし、端末によってブラウザの有無や使い勝手が大きく違います。以下は、この記事のページを実機で開いて確かめたものではありません(未検証)。
表1:自作の Web ページを映す端末と、ブラウザの有無(実機では未検証)
| 端末 | ブラウザ | 自作ページを映すときのポイント |
|---|---|---|
| Fire TV Stick | Amazon のアプリストアから「Silk ブラウザ」を入れられる | 手頃で始めやすい。全画面のまま長時間映し続けられるか、スクリーンセーバーが出ないかは、実機で確かめる必要がある |
| Android の STB(セットトップボックス) | Chrome などのブラウザや、キオスクブラウザのアプリが入る | 「Fully Kiosk Browser」などのキオスクブラウザで、ページを全画面に固定しやすい(Androidサイネージアプリの選び方)。決める設定はFully Kiosk Browserの使い方にまとめた |
| Raspberry Pi | Chromium(Raspberry Pi OS に入っている) | Chromium の「キオスクモード」で全画面にでき、電源を入れたら自動でページを開く設定もできる。設定には少しパソコンの知識がいる(Raspberry Piでサイネージを作る方法) |
| Apple TV | ブラウザがない | 自作の Web ページを映すのには向かない。Apple TV で映すなら、専用アプリのある CMS(Kitcast)を使う(Apple TVでサイネージを始める方法) |
| テレビ・モニター本体 | 機種による | 画面そのものに、ブラウザが入っていない機種も多い。上のどれかの端末を HDMI でつなぐのが確実 |
端末とモニターは、Amazon でも手に入ります。Android の STB は、メーカーのはっきりした Google TV Streamer などを選ぶと安心です。安い Android のボックスを使う前に、Android TVボックスの「バックドア問題」と見分け方もご覧ください。
Amazonのアソシエイトとして、サイネージファンは適格販売により収入を得ています。
※ Fire TV Stick 4K Select(Vega OS の機種)では、サイネージのアプリを入れられないか、制限つきでしか動きません。くわしくはFire TV Stickでサイネージを始める方法をご覧ください。
自作のよいところと、限界は?
よいところは、お金をかけずに今日から1台に映せることです。限界は、更新・複数の画面・スケジュール・止まったときの見張りを、すべて自分でやることです。
自作サイネージのよいところは、お金をかけずに、今日から1台の画面に映せることです。デザインも、出したい情報も、AI に頼めば自由に変えられます。
一方で、実際に店で使い続けようとすると、次のような壁にぶつかります。
- 更新のたびに、ファイルを置き直す:AI がファイルを直しても、店の画面に出すには毎回アップロードが要る。スマホだけで済ませるのは難しい
- 画面が増えると管理が大変:2店舗、3台と増えると、どの画面に何が出ているかを人が覚えておくことになる
- 時間で切り替えるのが手間:「ランチは11時から14時だけ」「年末年始だけ別の案内」のようなスケジュールを、自分でページに組み込む必要がある
- 止まっても気づけない:端末が固まったり、Wi-Fi が切れたりしても、店に行って画面を見るまでわからない
- 画像や動画を出すのが面倒:料理の写真や動画を入れるには、ファイルを置く場所も自分で用意する
画面が増えたら、どうする?
Yodeck か Kitcast を AI とつなぐのが早道です。
上の壁は、サイネージ用の CMS がまさに得意とするところです。そして今は、CMS そのものを AI とつないで、チャットで操作できるようになっています。自作で「頼むだけで画面が変わる」手軽さを知ったなら、その感覚のまま、複数画面・スケジュール・遠隔の管理まで任せられます。
表2:自作の Web ページと、Yodeck・Kitcast を AI とつなぐ方法の違い(料金は2026年11月11日、公式の料金ページで確認)
| 自作の Web ページ | Yodeck・Kitcast を AI とつなぐ | |
|---|---|---|
| 始めるお金 | 端末代だけ | 端末代+月額(どちらも無料のお試しあり) |
| 月額(1画面) | 0円(ページを無料のサービスに置く場合) | Yodeck:1画面は無料。Basic $8、AI とつなげる Premium は $12。Kitcast:Starter $7・Pro $10(年払い) |
| 更新 | AI にファイルを直させて、自分で置き直す | AI に頼むと、そのまま画面に反映される |
| 複数の画面 | 画面ごとに URL を開いておく。管理は人がする | 管理画面でまとめて管理。AI に「全店舗に」と頼める |
| スケジュール | 自分でページに組み込む | 「平日の11時から14時だけ」と頼める |
| 画面の状態 | 店に行かないとわからない | 管理画面で、オフラインの画面がわかる |
| 対応端末 | ブラウザがある端末 | Yodeck は Fire TV・Android・Raspberry Pi など、Kitcast は Apple TV に強い |
| 弱点 | 上の「限界」のとおり | Yodeck:円で払えない。AI とつなげるのは Premium 以上。Kitcast:管理画面の日本語に、一部英語・不自然な訳が残る |
- Yodeck:日本語の管理画面があり、claude.ai やスマホの Claude アプリ、ChatGPT から、URL を貼ってログインするだけで AI とつながる。編集部の検証では、プレイリスト・レイアウト・スケジュールまで日本語の一言で作れた。つなぎ方はYodeck MCP(AI Agent)の使い方
- Kitcast:Apple TV で映すならこちら。AI の変更が版として残り、「やっぱり戻して」と頼める。つなぎ方はKitcast MCPの使い方
CMS と AI をつないだときの頼み方と実例はバイブコーディングでサイネージを更新、スマホに話しかけて更新する方法は声でサイネージを更新する方法で紹介しています。
2つの CMS の違いはKitcastとYodeckのMCP比較で、画面・端末・CMS を合わせた費用の考え方はデジタルサイネージの費用で確かめられます。
自作から始めるとき、何に気をつける?
ページに秘密の情報を書かないことと、値段と長時間の表示を自分の目で確かめることです。
- APIキーやパスワードをページに書かない:ページの中身は、URL を知っている人なら誰でも見られる。キーのいらないサービスを使う
- お客さまの情報を出さない:予約の名前などを映すページは作らない
- 値段は人が確かめる:AI が書き換えた値段や日付は、画面に出す前に自分の目で確かめる
- 長時間つけっぱなしにする前に試す:端末の省電力やスクリーンセーバーで画面が消えないか、一晩つけて確かめる
まとめ
- Claude などの AI にチャットで頼めば、今日のおすすめ・営業時間・時計・天気を出すサイネージ用の Web ページを、HTML のファイル1つで作れる
- 編集部の検証では、1回目は画面の下がはみ出した。見たままを伝えて頼み直すと、1画面に収まった
- 映すのは、Fire TV Stick・Android の STB・Raspberry Pi などのブラウザ。Apple TV にはブラウザがないので向かない(実機での表示は未検証)
- 1台の画面を手軽に始めるなら自作で十分。複数の画面・スケジュール・遠隔の管理が要るなら、Yodeck か Kitcast を AI とつなぐほうが早い
AI でサイネージを動かす記事は、AI×サイネージのまとめに並べています。
