AIに指示するだけ！Web専門知識を引き出し「デジタルサイネージ」HTMLを生成するツールを開発した話

🎯 この記事の対象読者

• 自治体・公共機関の職員さん（特に広報やDX担当の方）
• 情報周知・広報資材づくりに「時間が溶けてる…」と感じている方
• Webの専門知識はないけど、AIを使って何か便利なものを作ってみたい方
• Google Colab でサクッと動くツールに興味があるエンジニア

💡 この記事を読むと得られること

• Google Colab と Python (ipywidgets) だけで、実用的なWebツール（HTML生成器）を作れるという実感
• AIやLLMに「いい感じに指示する」ことで、専門知識がなくてもリッチな表現が実現できるという可能性
• GSAP（軽量アニメーション）と PixiJS（キラキラ粒子）を使ったWeb表現の具体例
• 「単一HTMLファイルで完結させる」というツール設計のシンプルさ

---

🚀 はじめに：なぜこの記事を書いたか

皆さん、日々の業務お疲れ様です！ 基礎自治体の現場では、住民の皆さんへのお知らせ業務が非常に多いものです。

税金、保険料、福祉サービス、地域のイベント…。
これらを「分かりやすく」「魅力的に」伝えたい。イケてる動画やカッコいい掲示物を作りたい！…けど、デザインに凝り始めると、時間があっっっと言う間に溶けていく。 泣く泣く時間切れで「ここまでか…」と妥協することも多いんじゃないでしょうか。

でも、時代は変わりました。

今や、AI・LLMという強力な相棒がいます。ちょっと前までは、Webの専門知識を持った事業者さん・エンジニアさんしか知らなかったような技術も、AIに「こうしたい！」ときちんと指示さえすれば、驚くほど簡単に「自分の意志で」実現できるようになっています。

この記事では、その一例として私がサクッと作ってみたデジタルサイネージ生成ツール「signage-maker」を紹介します。この記事が、皆さんがデジタルやAIの力に触れ、「自分でもできるかも！」と感じるきっかけになればとても嬉しく、ありがたいです。

---

😫 課題：周知資材作成の「時間溶ける」問題

自治体の現場あるあるを、ちょっと図にしてみました。

フロー図

「伝える」ための本質的な作業よりも、「ツールを使いこなす」ための作業に忙殺されてしまう。このジレンマ、なんとかしたいですよね。

---

✨ 解決策：AIと協働作成した！「signage-maker」

そこで開発したのが、ブラウザ（Google Colab）上でポチポチするだけで、イイ感じのデジタルサイネージ用HTMLを吐き出してくれるツール「signage-maker」です。

写真とテキストさえあれば、あとはスクリプトが頑張ってくれます。

項目	内容
ツール名	signage-maker
概要	Google Colab / Jupyter 上のUI（ipywidgets）で写真とテキストを設定するだけで、スタンドアロンなデジタルサイネージ用HTMLを生成します。シンプルなアニメーション（GSAP）と、キラキラな粒子モーフィング（PixiJS）の2モードを選べます。
利用シーン	庁舎の待合室ディスプレイ、イベント会場の案内板、Webサイトへの埋め込みなど
GitHubリポジトリ	https://github.com/HosoyaYusaku/signage-maker

▼ 実際の動きはデモサイトで！ ▼
https://hosoyayusaku.github.io/signage-maker/

🛠️ 技術スタックと選定理由

中身はこんな感じです。

技術	役割	選定理由
Python (ipywidgets, Pillow)	開発言語 (Google Colab上のUI操作、画像最適化)	誰でも実行できる「ノートブック操作だけ」の体験を実現するため。UIには ipywidgets を採用。
JavaScript / HTML / CSS	出力HTMLの実行	最終的な成果物を「単一のHTMLファイル」にしたかったため。設置が圧倒的にラクです。
GSAP (GreenSock)	シンプルなアニメーション	軽量・高速で安定動作するアニメーションライブラリのデファクトスタンダード。信頼性重視。
PixiJS	キラキラな粒子（パーティクル）表現	「おっ！」と思わせるリッチな表現担当。GSAPとは違う方向性で差別化。
Google Fonts (CDN)	Webフォント	どの環境でも美しい日本語フォント（Noto Sans JP）を表示するため。

選定理由のキモ:
とにかく「ノートブックだけで完結する手軽さ」と「出力HTMLを置くだけで動く手軽さ」を最重要視しました。

アニメーションは、安定・軽量の「Plain (GSAP)」モードと、表現力重視の「Pixi (粒子モーフ)」モードで差別化。外部ライブラリはCDN経由でバージョン固定（GSAPはSRI付き）にすることで、安全性と予測可能性を担保しています。

📜 コードのハイライト

このツールの「お楽しみ」部分、PixiJSで画像やテキストをキラキラの粒子（点群）に変換するコアロジックをちょっとだけ紹介します。

やっていることは、①見えない場所にテキストや画像を描画 → ②ピクセルを一定間隔でサンプリング → ③色や明るさが一定以上のピクセルだけを「粒子」として抽出する、という流れです。

// テキストや画像を一度オフスクリーンに描画してピクセルを間引き走査し、
// 不透明度/明度がしきい値以上の画素だけを抽出して
// 画面中央基準の {x,y,color} 点群に変換する最小コアです。
function sample(displayObject, targetW){
  const o={ cell:CFG.dot.cell, alphaThreshold:8, brightThreshold:12, targetWidth: targetW||app.renderer.width*0.6 };
  const temp=new PIXI.Container(); const bounds=displayObject.getLocalBounds();
  const scale=o.targetWidth/Math.max(1,bounds.width); displayObject.scale.set(scale); temp.addChild(displayObject);
  const w=Math.ceil(displayObject.width), h=Math.ceil(displayObject.height);
  const rt=PIXI.RenderTexture.create({width:w,height:h,resolution:1}); app.renderer.render(temp,{renderTexture:rt,clear:true});
  const px=app.renderer.extract.pixels(rt), pts=[];
  for(let y=0;y<h;y+=o.cell){ for(let x=0;x<w;x+=o.cell){
    const i=(y*w+x)*4; const r=px[i],g=px[i+1],b=px[i+2],a=px[i+3];
    const bright=(r+g+b)/3; if(a>o.alphaThreshold||bright>o.brightThreshold) pts.push({x,y,color:(r<<16)|(g<<8)|b});
  }}
  const ox=(app.renderer.width-w)/2, oy=(app.renderer.height-h)/2; pts.forEach(p=>{p.x+=ox; p.y+=oy;});
  rt.destroy(true); temp.destroy({children:true}); return pts;
}
function textPoints(t){
  if(cache.textPts[t]) return cache.textPts[t];
  const style=new PIXI.TextStyle({ fill:'#ffffff', fontSize:200, fontWeight:'700', letterSpacing:2 });
  const txt=new PIXI.Text(t, style); const pts=sample(txt, app.renderer.width*0.7);
  pts.forEach(p=>p.color=0xeffff4); cache.textPts[t]=pts; return pts;
}
async function imgPoints(url){
  if(cache.imgPts[url]) return cache.imgPts[url];
  const img=await loadImage(url); const tex=PIXI.Texture.from(img); const sp=new PIXI.Sprite(tex);
  const pts=sample(sp, app.renderer.width*0.6); cache.imgPts[url]=pts; return pts;
}

---

💻 使い方

使い方は驚くほど簡単です。

① 環境構築

不要です！ 必要なのはGoogleアカウントだけ。
以下のURLにアクセスし、「Colabで開く」ボタンをクリックしてください。

https://github.com/HosoyaYusaku/signage-maker
（notebooks/signage_maker.ipynb をダウンロードしてcolabにインポートでもOK）

② ツールの実行

1. Colabが開いたら、メニューの「ランタイム」→「すべてのセルを実行」をクリックします。
2. しばらく待つと、ノートブックの下部にUIが表示されます。
3. Step 1: 表示したい画像ファイルをアップロードします。（任意で最適化もできます）
4. Step 2: 表示したいテキスト（見出し、本文）を入力します。
5. Step 3: アニメーションの見た目（モード、色、持続時間など）を設定します。
6. Step 4: 「HTML生成」ボタン（Plain版 or Pixi版）をクリック！
7. 自動で signage_plain.html または signage_pixi.html が生成・ダウンロードされます。

③ 出力結果（UIと生成サンプル）

生成されたHTMLファイルは、それ単体で動きます。サーバーにアップロードするなり、USBメモリに入れてディスプレイに挿すなり、ご自由にお使いください（※CDNにアクセスできるインターネット環境は必要です）。

百聞は一見に如かず。ぜひデモサイトで実際の動きを確認してみてください！

▼ デモサイトはこちら ▼
https://hosoyayusaku.github.io/signage-maker/

---

🧗 開発でつまづいた点と解決策

サクッと作ったとはいえ、UI/UXの部分では悩みに悩みました。

• 課題1：UIとして、どこまで設定可能にすべきか？
  • 原因・解決策： 細かく設定できるようにしすぎると、結局使うのが難しくなって「時間が溶ける」問題に戻ってしまいます。シンプルさとカスタマイズ性のバランスを取るため、何度も自分で実験を繰り返し、「これだけは変えたい」と思う最小限の項目（テキスト、画像、色、時間）に絞り込むことにしました。
• 課題2：操作イメージが伝わる文言（ラベル）設計
  • 原因・解決策： 作り手は仕様を分かっているので、つい言葉を省略しがちです。でも、初めて使う人にとっては「？？？」となってしまいます。「このボタンを押したら何が起こるか」「この設定は何に効くか」が直感的に分かるよう、言葉を補足しながら何度も推敲しました。

---

🔭 今後の展望と野望

「皆さん、このツールを使って広報活動してください！」という意図はゼロパーセントです。

今回の記事で本当に伝えたかったこと。それは、「AIを使って、専門的な知見を上手に引き出して使うことで学習期間がゼロでも、こんなことができます」という実証です。

皆さんも、日々の業務の中で「もっとこうしたい」「ここが不便だ」といった改善のテーマを山ほど持っていると思います。

これまでは、何かを実現するために数年がかりで勉強したり、高額な予算を組んで外部委託したり…と、実行までの「仕込み」に膨大な時間が必要でした。

でも今は違います。AI（LLM）を「優秀な壁打ち相手」や「凄腕の翻訳家（日本語→コード）」として上手に使うことで、あなたの「〇〇したい！」というアイデアは、思ったよりずっと早く実現に近づくことができます。

これから世の中はもっと複雑になり、行政課題も難しくなっていきます。だからこそ、現場の一人ひとりが感じる「こうしたい」という課題感が、DXを進める上で一番重要なエンジンになります。

その「〇〇したい」と思った時に、スッと解決に近づける。そんな環境が当たり前になっていくと、本当の意味でのDXが進むんじゃないかな、と私は思っています。

---

🔚 おわりに：小さな一歩が、大きな変化を生むと信じて

今回は、デジタルサイネージという小さなツールを例に、AI時代の「モノづくり」の一端を紹介しました。

「自分はコードなんて書けないし…」と尻込みしていた自治体職員の皆さん。大丈夫です。AIに「やりたいこと」を伝えることから始めてみませんか？

「現場の課題？ よく分からない…」と思っていたエンジニアの皆さん。ぜひ、現場の「困った！」に耳を傾けてみてください。あなたの技術と技術を得るまでに獲得した知見が、劇的に行政の業務を変える「魔法」になるかもしれません。

この記事が、皆さんの「小さな一歩」を踏み出すきっかけになれば幸いです！

最後まで読んでいただき、ありがとうございました！