プログラムを書かずに、AI に「こんなものを作って」と話しかけてソフトを作ってもらう「バイブコーディング」。この方法で、店のサイネージに映す Web ページも作れます。今日のおすすめ、営業時間、時計、天気を1枚にまとめたページを AI に作ってもらい、テレビにつないだ Fire TV Stick や Raspberry Pi のブラウザで開けば、それだけで「自作のサイネージ」になります。
この記事では、編集部が実際に Claude にチャットで頼んで作ったページを見ながら、頼み方と映し方、そして自作で済む場合と、CMS を使ったほうが早い場合の分かれ目を紹介します。
この記事のページは、2026年10月24日に編集部が Claude（Claude Code）に頼んで作り、パソコンのブラウザ（Chromium）で 1920×1080 に表示して撮影しました。Fire TV Stick・Android の STB・Raspberry Pi などの実機での表示は未検証です。店名・品名は見本です。
自作サイネージとは
ここでいう「自作サイネージ」は、次の3つだけでできる、いちばん小さなサイネージです。
- 画面に映す Web ページ（HTML のファイル1つ）を AI に作ってもらう
- そのページを、インターネットから見られる場所に置く
- テレビやモニターにつないだ端末のブラウザで、そのページを全画面で開いておく
サイネージ用の CMS（管理のサービス）と契約しなくても、まず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 はコードを書けても、できあがった画面を自分の目で見ているわけではありません。
「1画面に収めて」と頼み直す
そこで、見たままを伝えて頼み直しました。
1920×1080 で開くと、「季節の野菜かき揚げうどん」が2行になって、下がはみ出している。営業時間も途中で折り返している。どんなに長い品名でも1行に収まるように、入りきらないときは文字を自動で小さくして。営業時間は昼と夜で2行に分けて。全体がかならず1画面に収まるようにして。
AI は、品名が入りきらないときに文字を少しずつ小さくするしくみを足し、営業時間を2行に分け、余白を詰めました。もう一度開くと、1画面にきちんと収まりました。
天気について：編集部の撮影環境からは天気のサービス（Open-Meteo）につながらなかったため、写真の天気は見本の値を返して表示しています。天気が取れないときは「天気を取得できませんでした」と出て、画面が崩れないことも確かめました。実際にインターネットにつないだ端末で、本物の天気が出るかは未検証です。
おすすめを差し替える
翌日のおすすめに変えるときも、AI に一言頼めば、書き換える場所だけを直したファイルが返ってきます。
1品目を「きのこの天ぷらうどん 980円、舞茸・しめじ・エリンギの天ぷら」に差し替えて。それと、今日は昼の部だけなので、営業時間の下に「本日は昼の部のみ（15:00まで）」と出して。
ただし、ここで変わったのはパソコンの中のファイルだけです。店の画面に出すには、このファイルをもう一度、ページを置いている場所にアップロードしなければなりません（後で説明します）。
うまく頼むコツ
- 画面の大きさと向きを最初に言う：「横向き 1920×1080」「縦向きのモニター」など
- 書き換える場所をまとめさせる：「おすすめと営業時間はファイルの上のほうにまとめて」と頼むと、あとで自分で直すときも、AI に直させるときも迷わない
- 見たままを伝えて直させる：「2行になって下がはみ出している」のように、どこがどうおかしいかを具体的に言う
- APIキーのいらないサービスを指定する：天気なら Open-Meteo のように、キーなしで使えるものを選ぶと、ページにキーを書かずに済む
- 失敗したときの表示も頼む：「天気が取れないときは画面を崩さずにメッセージを出して」
- 最後は自分の目で確かめる：パソコンのブラウザを全画面（多くのブラウザは F11）にして、実際の画面に近い状態で見る
作ったページを置く場所
端末のブラウザで開くには、ページがインターネットから見られる場所にある必要があります。無料で使えるのは、たとえば次のようなサービスです。
- Cloudflare Pages、GitHub Pages、Netlify などの、静的なページを置くサービス
どれも、HTML のファイルをアップロードすると URL がもらえます。置き方も AI に「このファイルを Cloudflare Pages に置く手順を教えて」と聞けば、画面に沿って教えてくれます。
編集部は、この記事のページをこれらのサービスに置いて、端末から開くところまでは試していません（未検証）。
どの端末で映すか
ページの URL を開けるブラウザがあれば、どの端末でも映せるのが自作のよいところです。ただし、端末によってブラウザの有無や使い勝手が大きく違います。以下は、この記事のページを実機で開いて確かめたものではありません（未検証）。
| 端末 | ブラウザ | 自作ページを映すときのポイント |
|---|---|---|
| Fire TV Stick | Amazon のアプリストアから「Silk ブラウザ」を入れられる | 手頃で始めやすい。全画面のまま長時間映し続けられるか、スクリーンセーバーが出ないかは、実機で確かめる必要がある |
| Android の STB（セットトップボックス） | Chrome などのブラウザや、キオスクブラウザのアプリが入る | 「Fully Kiosk Browser」などのキオスクブラウザで、ページを全画面に固定しやすい（Androidのサイネージアプリ） |
| Raspberry Pi | Chromium（Raspberry Pi OS に入っている） | Chromium の「キオスクモード」で全画面にでき、電源を入れたら自動でページを開く設定もできる。設定には少しパソコンの知識がいる（Raspberry Piでサイネージ） |
| Apple TV | ブラウザがない | 自作の Web ページを映すのには向かない。Apple TV で映すなら、専用アプリのある CMS（Kitcast）を使う（Apple TVでサイネージ） |
| テレビ・モニター本体 | 機種による | 画面そのものに、ブラウザが入っていない機種も多い。上のどれかの端末を HDMI でつなぐのが確実 |
端末とモニターは、Amazon でも手に入ります。
AmazonでAndroidのSTB（Android TV BOX）を見る
Amazonのアソシエイトとして、サイネージファンは適格販売により収入を得ています。
自作の手軽さと、限界
自作サイネージのよいところは、お金をかけずに、今日から1台の画面に映せることです。デザインも、出したい情報も、AI に頼めば自由に変えられます。
一方で、実際に店で使い続けようとすると、次のような壁にぶつかります。
- 更新のたびに、ファイルを置き直す：AI がファイルを直しても、店の画面に出すには毎回アップロードが要る。スマホだけで済ませるのは難しい
- 画面が増えると管理が大変：2店舗、3台と増えると、どの画面に何が出ているかを人が覚えておくことになる
- 時間で切り替えるのが手間：「ランチは11時から14時だけ」「年末年始だけ別の案内」のようなスケジュールを、自分でページに組み込む必要がある
- 止まっても気づけない：端末が固まったり、Wi-Fi が切れたりしても、店に行って画面を見るまでわからない
- 画像や動画を出すのが面倒：料理の写真や動画を入れるには、ファイルを置く場所も自分で用意する
画面が増えたら、Yodeck か Kitcast を AI とつなぐのが早い
上の壁は、サイネージ用の CMS がまさに得意とするところです。そして今は、CMS そのものを AI とつないで、チャットで操作できるようになっています。自作で「頼むだけで画面が変わる」手軽さを知ったなら、その感覚のまま、複数画面・スケジュール・遠隔の管理まで任せられます。
| 自作の Web ページ | Yodeck・Kitcast を AI とつなぐ | |
|---|---|---|
| 始めるお金 | 端末代だけ | 端末代＋月額（どちらも無料のお試しあり） |
| 更新 | AI にファイルを直させて、自分で置き直す | AI に頼むと、そのまま画面に反映される |
| 複数の画面 | 画面ごとに URL を開いておく。管理は人がする | 管理画面でまとめて管理。AI に「全店舗に」と頼める |
| スケジュール | 自分でページに組み込む | 「平日の11時から14時だけ」と頼める |
| 画面の状態 | 店に行かないとわからない | 管理画面で、オフラインの画面がわかる |
| 対応端末 | ブラウザがある端末 | Yodeck は Fire TV・Android・Raspberry Pi など、Kitcast は Apple TV に強い |
- Yodeck：日本語の管理画面があり、claude.ai やスマホの Claude アプリ、ChatGPT から、URL を貼ってログインするだけで AI とつながる。編集部の検証では、プレイリスト・レイアウト・スケジュールまで日本語の一言で作れた。つなぎ方はYodeckをAIエージェントとつなぐ
- Kitcast：Apple TV で映すならこちら。AI の変更が版として残り、「やっぱり戻して」と頼める。つなぎ方はAIエージェントとつなぐ（Kitcast MCP & API）
CMS と AI をつないだときの頼み方と実例はバイブコーディングでサイネージを動かす、スマホに話しかけて更新する方法は声だけでサイネージを更新する、2つの CMS の違いはKitcastとYodeckのAI連携を実際に比べたで紹介しています。
自作から始めるときの注意
- APIキーやパスワードをページに書かない：ページの中身は、URL を知っている人なら誰でも見られる。キーのいらないサービスを使う
- お客さまの情報を出さない：予約の名前などを映すページは作らない
- 値段は人が確かめる：AI が書き換えた値段や日付は、画面に出す前に自分の目で確かめる
- 長時間つけっぱなしにする前に試す：端末の省電力やスクリーンセーバーで画面が消えないか、一晩つけて確かめる
まとめ
- Claude などの AI にチャットで頼めば、今日のおすすめ・営業時間・時計・天気を出すサイネージ用の Web ページを、HTML のファイル1つで作れる
- 編集部の検証では、1回目は画面の下がはみ出した。見たままを伝えて頼み直すと、1画面に収まった
- 映すのは、Fire TV Stick・Android の STB・Raspberry Pi などのブラウザ。Apple TV にはブラウザがないので向かない（実機での表示は未検証）
- 1台の画面を手軽に始めるなら自作で十分。複数の画面・スケジュール・遠隔の管理が要るなら、Yodeck か Kitcast を AI とつなぐほうが早い