YouTube・Twitchのチャットだけ表示するアプリを作った話

YouTube・Twitchのチャットだけ表示するアプリを作った話

ライブ配信を見るとき、映像とチャットを同じ画面で追わなくてもいい場面って、意外と多いんですよね。配信そのものはテレビやPCの大きい画面で流しておいて、手元のスマホではチャットだけを大きく読みたい。通信量やバッテリーを抑えたくて、映像は切ってコメントの流れだけ眺めていたいこともある。私自身がずっとそういう見方をしていて、その不便さを消すために作ったのが ChatTube という Android アプリです。YouTube と Twitch のライブチャットだけを表示する、それ以外は何もしないアプリで、この記事では何ができて、どう使うのかをまとめておきます。

映像はいらない、チャットだけ読みたいという需要

YouTube や Twitch の公式アプリは、当然ながら映像とチャットがセットで表示される。よくできているけれど、「チャットだけを軽く見たい」という用途には少しオーバースペックなんだよね。映像のデコードが走るぶん端末は熱くなるし、ギガも減る。セカンドスクリーンとしてスマホを置いて、コメントだけを流し読みしたいときには、もっと身軽なものがほしくなる。

ChatTube は、その「チャットだけ」を切り出したアプリです。配信映像は一切表示せず、YouTube と Twitch のライブチャット欄だけを出す。映像を持たないぶん動作が軽くて、コメントの流れに集中できます。

使い方は「URLを貼る」だけ

チャットを開く手順はシンプルです。画面上部の「＋」からブックマークを追加して、見たい配信の動画URL、またはチャンネルのURLを貼り付ける。あとは一覧から項目をタップすれば、そのチャットが開きます。

もっと楽なのは共有経由で、YouTube や Twitch のアプリ側で配信ページを開いて「共有」メニューから ChatTube を選ぶと、URLをコピーして貼り直す手間なく登録できます。一度登録した配信はブックマーク一覧に残るので、よく見る配信者を並べておけば次からはタップ一発でたどり着けます。

YouTubeの「配信ごとにURLが変わる問題」を解決する

YouTube を追っている人なら一度は困ったことがあると思うんだけど、YouTube のライブ配信は配信のたびに動画URLが変わる。昨日ブックマークしたURLは、今日の配信ではもう別物になっている。これが地味に面倒で、結局その都度チャンネルを開いて「いま配信中の枠」を探すことになるんですよね。

ChatTube では、動画URLの代わりにチャンネルのURLを登録できます。たとえばこういう形式です。

https://www.youtube.com/@チャンネル名

チャンネルURLを登録すると、一覧にその項目が「チャンネル」バッジ付きで表示される。タップした時点でそのチャンネルがライブ配信中なら、いま流れている配信のチャットを自動で開いてくれます。配信していなければ「配信していません」と通知するだけで、画面は切り替わらない。配信ごとにURLを探し直す必要がなくなるので、毎回同じ配信者を追っている人ほど恩恵が大きい機能だと思う。

配信中かどうかが一覧でわかる

ブックマーク一覧では、各項目の配信状態がアイコンで出ます。🔴 が配信中、⚫ が配信なし。一覧を開いた瞬間に「いま誰がやっているか」がひと目でわかるので、一つずつ開いて確認する手間がない。状態は一覧右上の更新ボタンで取り直せるから、配信が始まったタイミングで押せば最新の状況に追いつけます。

コメントの投稿にも対応

ChatTube は読むだけのアプリではありません。チャットにコメントを書き込むこともできます。投稿にはログインが必要で、画面上部のログインアイコンから YouTube（Googleアカウント）または Twitch にログインする。ログアウトは設定画面からいつでもできます。映像なしの軽い画面のまま、配信に参加できるわけです。

チャットを広く・見やすくするための工夫

チャットだけを表示するアプリなので、その表示領域をどれだけ快適にできるかにはこだわった。チャット表示中は数秒でヘッダーが自動的に隠れて、画面いっぱいにコメントが広がります。もう一度出したいときは画面の上端をタップするだけ。この「没入モード」は設定の「ヘッダー自動非表示」でオン・オフを切り替えられます。

設定画面では、ほかにもテーマ（ライト／ダーク）、表示言語、フォントサイズ、チャットの余白、画面の常時オンを変更できます。チャットの余白はピクチャーインピクチャー（PiP）の小窓表示に合わせるための調整で、映像を別アプリの小窓で流しながら ChatTube でチャットを読む、という使い方にも寄せられる。配信を流しっぱなしで眺めたいときは、画面常時オンにしておくと画面が消えずに済みます。

まとめ

• ChatTube は映像を表示せず、YouTube・Twitch のチャットだけを軽く読める Android アプリ
• チャンネルURLを登録すれば「いま配信中の枠」のチャットへ自動で飛べて、YouTubeのURL変化問題を回避できる
• Google または Twitch にログインすればコメント投稿もできる
• 没入モードや余白・フォント調整で、チャットを広く見やすく保てる

「映像はいらない、チャットだけ」という人にはちょうどいいはずです。ChatTube は Google Play で公開しているので、気になった人はこちらからどうぞ。

Webサイトのモックアップ作成はAIにHTMLを書かせるのが速い

Webサイトのモックアップ、もうAIにHTMLを書かせればいいんじゃないか

結論から言うと、Webサイトのモックアップ作成はAIにHTMLを直接書かせるのが一番速い。自分はここ半年くらい、デザインツールでワイヤーフレームを引く工程をほぼやめて、ClaudeやChatGPTに「こういうサイトのモックをHTML 1ファイルで」と頼む方式に切り替えた。実際に使っているプロンプトとハマりどころを、自分の経験ベースで書いていく。

なぜデザインツールではなくHTMLモックなのか

以前はFigmaでモックを作っていた。ただ、自分のような開発寄りの人間にとって、Figmaは正直オーバースペックなんだよね。オートレイアウトの設定に時間を食って、肝心の「どんなサイトにするか」を考える時間が削られていく感覚があった。

HTMLモックには明確な利点がある。ブラウザでそのまま開けるから、クライアントや社内メンバーに「このURLを開いて」で共有が終わる。ウィンドウ幅を縮めればレスポンシブの挙動も実物で確認できる。静止画のモックだと「スマホだとどう見えるんですか」という質問に毎回別画面を用意する必要があったけど、HTMLならその場で縮めて見せるだけ。

そして何より、HTMLを書く作業自体をAIに丸投げできるようになったのが大きい。手書きでHTMLモックを作るのは正直つらいけど、書くのがAIなら話は別だと思う。体感だけど、以前Figmaで半日かけていたレベルの提案用モックが、いまはプロンプトを書いて修正指示を数回出すだけ、30分前後で形になっている。

実際のやり方

基本は「1ファイル完結」で頼む

自分がいつも使っているプロンプトの型はこんな感じ。

以下の要件でWebサイトのモックアップを作って。
- HTML 1ファイル完結（CSSは<style>タグ内に書く）
- 構成: ヘッダー / ヒーロー / 特徴3つ / 料金表 / お問い合わせフォーム / フッター
- ターゲット: 中小企業の経営者
- 配色: 紺をベースに、アクセントは1色だけ
- ダミー画像は使わず、CSSのグラデーションか単色で代用
- 文言は「ここに入ります」ではなく、それらしい日本語を入れる

ポイントは外部依存をなくすこと。CSSを別ファイルにされたり、CDNから画像を引っ張られたりすると、ファイルを渡した相手の環境で崩れることがある。「1ファイル完結」と明示しておけば、メールに添付するだけで誰でも開ける成果物になる。

文言はダミーにしない

地味に効くのが「それらしい日本語を入れて」という指示。モックの段階で「サンプルテキストサンプルテキスト」が並んでいると、見る側はデザインじゃなくて空白の文言が気になってしまう。文言まわりは、業種とターゲットを添えるとぐっと良くなる。

・文言はダミー禁止。税理士事務所のサイトという前提で、
  40〜50代の個人事業主に響くキャッチコピーと説明文を入れて
・キャッチコピーは20字以内、説明文は各80字程度

AIならそれらしいキャッチコピーや説明文を一緒に生成してくれるので、モックの完成度が一段上がる。実際、クライアントに見せたとき「この文言ほぼこのままでいいね」と言われて、コピーライティングの工数まで浮いたことがあった。逆にここをダミーのままにしておくと、打ち合わせの場で文言の話に脱線して、肝心のレイアウトの議論が進まなかったりする。

修正は会話で回す

初回の出力が微妙でも問題ない。修正指示を会話で投げれば、数十秒で修正版が返ってくる。自分が実際によく使う修正プロンプトはこのあたり。

・ヒーローセクションの高さを画面の70%にして、キャッチコピーをもっと大きく
・料金表は3プラン横並び。真ん中のプランを「おすすめ」として少し目立たせて
・全体的に余白が窮屈。セクション間の余白を1.5倍くらいに
・スマホ表示のとき、特徴3つは縦積みにして

Figmaで自分で直すより圧倒的に速い。自分の場合、初回生成から3〜5往復くらいで「見せられるモック」に到達することが多い。

ハマったポイントと対策

いいことばかり書いてきたけど、ハマりどころもある。

まず、AIが作るデザインは放っておくと似たり寄ったりになる。紫系のグラデーション、カード型レイアウト、絵文字アイコン。いかにも「AIが作りました」という見た目になりがちなんだよね。対策としては、配色とトーンを具体的に指定すること。自分はこういう指示を最初のプロンプトに足している。

・配色は #1e3a5f（紺）をベースに、アクセントはオレンジ1色だけ。グラデーション禁止
・絵文字アイコンは使わない
・無印良品の公式サイトみたいな、余白多めで色数を絞った落ち着いたトーン
・フォントは游ゴシック系。丸ゴシックは使わない

「参考サイトの雰囲気を文章で説明する」のが特に効く。デザインの専門用語を知らなくても、「〜みたいな感じ」で伝えるだけでだいぶ変わる。

もうひとつは、モックのHTMLをそのまま本番に流用したくなる誘惑。これはやめたほうがいい。モック用に生成されたコードはアクセシビリティやセマンティクスが甘いことが多くて、本番品質にするには結局書き直しに近い手間がかかる。自分は「モックは使い捨て、本番は別物」と割り切ることにしている。

ツールの選択肢としては、ChatGPTやClaudeのようなチャット型のほか、Vercelのv0みたいなUI生成特化のサービスもある。ただ個人的には、日本語の文言込みで作るなら普通のチャット型AIで十分というのが体感。プレビュー機能つきのチャットAIなら、生成結果をその場で確認しながら会話で直せる。

デザインツールとの使い分け

じゃあFigmaが要らなくなったかというと、そうでもない。デザイナーが入るプロジェクトでは、コンポーネント管理やコメント機能を含めてFigmaのほうが回しやすい。自分の整理はこう。

• 提案段階の叩き台、個人開発、社内ツール → AIにHTMLモックを書かせる
• デザイナーと共同作業する本格的な案件 → Figma
• 「とりあえず見た目のイメージを共有したい」だけ → AIのHTMLモックで十分

体感だと、自分の仕事の8割は上の1番目と3番目で済んでいる。叩き台の段階で時間をかけても、どうせ要件が変わって作り直しになる。だったら30分で出せるHTMLモックを使い捨てる前提で回したほうが、トータルでは速い。モックに対する心理的なコストが下がると、「とりあえず2案作って並べて見せる」みたいな贅沢な使い方もできるようになるしね。

まとめ

• モックアップはAIにHTML 1ファイルで書かせるのが速い。ブラウザで開けてレスポンシブ確認もできる
• プロンプトは「1ファイル完結・構成・配色・それらしい日本語の文言」を指定する
• AIっぽい見た目を避けるには配色とトーンの具体指定が効く
• モックのコードは使い捨て。本番流用はしない