Claude Codeで作った社内SNSアプリHIROBAの紹介動画を整理

出典: 【必見】ClaudeCodeでSNSアプリを作ってみた

集まりの連絡や雑談を、自分たちだけのSNSアプリでできたらどうでしょう？外のサービスに合わせず、自分たちの形で作る。動画は、その紹介から始まります。

冒頭のテロップは、Claude Code で作った社内のSNS・掲示板アプリ。あいさつのあと、出演者はそのアプリを順に紹介すると話します。

動画の出演者（動画の中で・0:39〜）

今回は、え、クロードコードで作ったSNSアプリを紹介していきたいと思います。

ここから先は、出来上がった画面の見学です。

動画の出演者（動画の中で・0:46〜）

自分のコミュニティであったりとか、え、サークルとか、ま、地域や学校など自分たちの中の集まりのSNSを自分で作ってみるというきっかけになるような動画になればなと思っております。

狙いは、会社に限らず、コミュニティやサークル、地域や学校の人が、自分たちのSNSを自分で作るきっかけを持つこと。

作る道具が変わっても、場への責任は変わりません。

自分たちのSNSを自分で作る、という呼びかけは、とても大事な一歩だと私は考えます。作る入口が軽くなるほど、その後の場の中身が問われます。

連絡の流れ、雑談の空気、誰が最初に声をかけるか。画面の外にある仕事は、頼んでも消えません。

私の記事より（RPG職業診断、寝る前に頼んだらClaude Codeが診断カードの投稿サイトを作った・寝る前にClaude Codeへ「過去のライブの案を参考に」と頼んだら、朝には診断カードを置くサイトができていた）

前の晩に頼んだものが、朝には動いていました。動くところまで来たので、そのまま朝のLIVEで見せました。

10月12日の朝LIVEで、私は前の晩に Claude Code へ頼んで作ってもらった投稿するサイトを、動いた状態で見せました。

完成ではありません。一応動く状態で、投稿した人はまだ誰もいません。動作確認もまだのまま、画面を見せました。

夜に頼んで、朝には動く状態。作る入口は、そこまで軽くなっています！

Claude Code に頼めば、画面は一晩で形になります。けれど、そこで交わされる言葉までは、頼んで作れる物ではありません。

画面が動くことと、そこに人が集まることは別の話。

場は、人が来てから始まります。

ホーム、投稿、掲示板、チャット。機能が並ぶ画面を見ると、全部入れたくなります。動画が最初に見せるのは、ホーム画面です。

映るのは、InstagramやXのような画面で投稿が流れるホームです。ストーリーの機能や、今の気持ちを入れる欄も並びます。

動画の出演者（動画の中で・1:28〜）

必要じゃない機能なども入っているかなと感じる方もいるかもしれませんが、え、是非自分が作る立場になってイメージしてみてですね、あ、こんな機能も入れれるんだなぐらいの気持ちで見ていただければと思います。

要らない機能があってもいい、そのうえで、こんな機能も入れられると眺めてほしい、という呼びかけです。

動画の出演者（動画の中で・1:38〜）

投稿に対していいねとか、え、ありがとうといったリアクションもできたりとかPDF資料を添付することができます。

続いて、リアクションやPDFの添付、話題ごとの掲示板、グループや個人のチャット。要るかどうかは作る人が決めてほしい、と出演者は話します。

機能をたくさん入れられることと、押した人に伝わることは別の話。集まりの目的に合う物を選ぶのは、その手前の一歩です。

思い出すのは、10月19日の朝LIVEの場面です。

共創の酒場の診断カード作りで、LIVE中にコピーボタンを押しました。開いたのは、AIのチャット画面だけ。画面の上では、何も起きていないように見えました。

実際は、文はちゃんとコピーされていたんです！でも、見た目ではそれが分かりません。作った私は、押せば分かると思い込んでいました。

共演者と一緒に画面を見ていて、気づきました。ペーストしてください、と出した方が分かりやすいんです。

動いているのに、伝わらない機能。押した人の目には、何も起きていないのと同じでした。

機能の数で迷った時の物差しは、押した人に何が見えるか。見えなければ、その機能はまだ途中です。

ホームのストーリーも、PDFの添付も、ここは同じ。押した瞬間、使う人の目には何が見えますか？

あの朝のコピーボタンは、最初から文が入った状態で開くよう、AIに頼むことにしました。

ホーム、掲示板、リアクション、チャット。どの機能も、押した人の目に何が返るかで、残すかどうかを決められます。

入れられる機能の数ではなく、伝わる機能の数を数える。作る前に、この数え方を決めておくと、画面が静かに整います。

人に向かって言いづらいことは、どの集まりにもあります。そこで動画が見せるのが、目安箱です。

社内の課題を見つけるために用意した機能だ、と出演者は話します。

動画の出演者（動画の中で・2:43〜）

声を出すを見てみると自分がどういう主張したいのかを選んで匿名で投稿することができます。

声を出す画面では、どんな主張かを選び、名前を出さずに投稿できます。

動画の出演者（動画の中で・2:47〜）

こうすることでみんなが感じている課題とか人に言いづらいことっていうものが共有されていって、え、どんどんどんどん発信の場になるのではないかな。

言いづらいことが共有され、発信の場へ育つという期待。管理者の画面では、届いた声の一覧や今週の調子、よく出る言葉がまとめて見えます。

声を出す入口が軽いほど、受け取る側の仕事は増えます。人が安心できるのは、ありのままで居られる場。

入口の軽さを、私は目安箱とは別の場所で見たことがあります。

分身AI講座の受講生だけが集まるリアル会で、私は話をして、相談や質問にも答えました。

自己紹介で子どもの話が出ると、うちも、私も、と話がつながっていきました。初対面どうしなのに、最後は握手をし合うところまで近づいていました！私が自分の目で見た光景です。

私の見立てでは、自分を言語化できている人たちが、自己開示し合ったから。受講生だけの場だったことも、関係していると見ています。

私が見たのは、この一回の場です。ほかの場でも同じとは限りません。だから、見立てとして置いておきます。

目安箱は、仕組みで入口を軽くする道具。あの会は、受講生だけという場の前提が、入口を軽くしていたと、私は見ています。どちらも、声が出る前の準備です。

匿名の声は、名前が無いぶん、返す相手も見えにくくなります。入口と受け取り方は、二つで一組。

管理者の画面に、届いた声の一覧や今週の調子が並んでも、どう返すかを決めるのは人です。読む人が決まっていない目安箱は、置いただけでは動きません。

声を集める前に、誰が読み、どんな時に返すのか。ここを先に決めておくと、出した人も安心できます。

では、言葉が荒れた時、誰がどう動くのでしょう？次は、見守りの話に進みます。

人が集まって話す場には、言葉がとがる日も来ます。その時、誰が先に気づいて、誰が止めるんでしょう？

社内で使う場なので、健全なSNSである必要があります。出演者は、そう前置きして見守りの機能に入ります。

動画の出演者（動画の中で・3:39〜）

見守りと言って何か荒れている事象などがないかといったことも確認できるような機能も入れてみました。

画面に並ぶのは、返信を止める、ゆっくりモード、返信の非表示、投稿の一時停止といった対応です。

動画の出演者（動画の中で・3:54〜）

こうした荒れている内容なのに対しても確認することができて、ま、そうですね、非表示にするとか

止める時は理由と再開の日時を入れ、操作の記録が右側に残る作り。

AIが気づくのは入口まで。止めるかどうかと、止めた後の確認は、人の手に残します。誰かが見ていないと止まる形には、しません。

気づいて知らせるところまでは任せても、最後の一押しは手放しません。これが私の線です。

私の朝のメルマガは、AIが書いた案に、機械の検査が入ります。その日の号は検査に合格して、本文のリンクも全部開きました。

案が届くと、私はまず中身を読みます。なぜそんな前のライブのネタを使うのか、ほかの候補はないのか、と返したんです。

検査には合格していても、その案は送らず、差し戻しました。

送るのは、私が毎号、送るを選んだ時だけ。書き上げるまではAIのボール、送るの一押しは私のボール！

機械が合格と言っても、読んだ私が違うと感じたら、私は止めます。見守りも、同じ形が似合うかなと思うんです。

止める時に理由と再開の日時が残れば、止められた側にも先が見えます。黙って消されるのとは、まるで違う重さ。

操作の記録が残るのも、人の判断を後から振り返れる作りです。気づくのはAIでも、記録に残る判断は人のもの。

荒れを見つける速さは、機械に任せるほど上がります。ただ、止めた後に、その人が戻れる道を残すのは、人の仕事。

見守りは、疑うための仕組みではなく、安心して話せる場を保つための仕組みだと私は考えています。

Claude Code でSNSアプリを作るなら、その一押しを誰が持ちますか？

スマホで見る人、パソコンで見る人、iPadで見る人。同じ集まりでも、画面はばらばらです。動画は、どの端末でも崩れない表示の話に進みます。

スマホ、パソコン、iPad、テレビなど、どんなサイズにも合わせるアプリ。画面には、スマホ版と少し小さめのiPadの表示が並びます。

動画の出演者（動画の中で・4:11〜）

スマホ版で見るとこんな形になりますし、iPadなど少し小さめのデバイスでも綺麗に崩れることなく表示されています。

この合わせ込みまでやってくれるのが、Claude Code でのAI開発の良さのひとつ、という話です。

動画の出演者（動画の中で・5:05〜）

会社だったら全社のお知らせとか部署の掲示板で、ま、他にはサークルとか自分の属してるコミュニティだったら、ま、連絡とか雑談とか、え、それぞれやり取りをする場とか、ま、地域ならその地域のコミュニティの場としても作るのもありですし、ま、学校とかで作ってみるのも、え、良いのかもしれません。

会社なら全社のお知らせや部署の掲示板、サークルなら連絡や雑談、地域ならその地域の集まり。学校で作るのもいい、という例が続きます。

動画の出演者（動画の中で・5:21〜）

自分たちの形に合わせて作ってみる、そして自分たちで使ってみるっていうのは1つ面白い形になるのではと思うので、是非皆さんも自分のコミュニティでですね、SNSアプリ作ってみてください。

端末に合わせる作業が当たり前になると、作る人の仕事は、画面の調整から使い方の設計へ移ります。

Claude Code が端末合わせを引き受ける分、作る人の手は、集まりの人たちの声を聞く方へ回せます。

使い道の幅は、本当に広い！では、その使い道は誰が決めるのでしょう？使う人たちです。

私の記事より（「意味より居場所」をTa-nishiさんが言語化・「趣味が主、コミュニティが従」）

私が全部決めたら、それはコミュニティじゃなくて支配になります。

場を整えるのは私の仕事です。でも、その場で何に夢中になるかは、一人一人が主役。作る側が全部決めたら、場は支配に変わります。

Claude Code で作るSNSアプリも、最初の形だけを渡して、育て方は集まりの人たちに預ける。それがいちばん自然かなと思います。

会社なら、全社のお知らせの置き場が先に要ります。サークルなら、連絡より雑談が主役になる日もあります。地域なら、顔を合わせる日の前後の連絡が中心です。

同じアプリでも、使い道は集まりごとに違います。違っていいし、違う方が自然です。

最初の一歩は、使う人たちの手の中に！

作れたSNSアプリを、そのまま人に使ってもらっていいんでしょうか？動画の後半は、この問いに向き合います。

作ってみたと言ったけれど、作る時の注意点も話しておきたい、と切り出して、出演者は話を進めます。

動画の出演者（動画の中で・5:45〜）

今回はこの見た目デザインの部分は作ってあってですね、実際のデータであったりとかログインとか、ま、その他のルールですね、え、セキュリティバランスの部分っていうのはあまり作り込んではいません。正直に。

見た目のデザインはできていて、データやログイン、ルール、セキュリティの部分は、まだ作り込んでいない状態だという説明です。

動画の出演者（動画の中で・6:05〜）

データの置き場所であったり、見られる範囲とかログイン安全対策、その他のルールとか、ま、個人情報の管理方法、ま、毎月の固定費とか止まった時の対応を誰が管理するのかとかっていったものですね。

動画の出演者（動画の中で・6:26〜）

設定をせずに、え、ただ作ったものを運用してしまうと後で大きな問題に繋がりかねません。

決めておく物として挙がるのは、データの置き場所、見られる範囲、ログインの安全対策。個人情報の管理方法、毎月の固定費、止まった時に誰が対応するか、も並び、設定を最初にしっかりやることが大事だと強調します。

Claude Code で作れたSNSアプリと、人に預けられるSNSアプリは、別物です。預かった個人の情報を守ること。信頼できる仕組みが先。

画面がきれいに動くと、出来上がった気になります。でも、データの置き場所も、見られる範囲も、見た目からは分かりません。

動かしてみると、画面を眺めているだけでは見えなかった不足が出てきます。削除も、管理する人も、利用のルールも、完成した画面の中には並んでいません。

動画が挙げた置き場所、見られる範囲、ログインの安全対策は、集まりの人たちが安心して書き込める土台です。

個人情報の管理方法は、預かる側の責任。サークルでも地域でも、名前や連絡先が一つ入った時から、預かり物になります。

毎月の固定費は、作った後に毎月続くもの。集まりの予算や会費とつながるので、作る前に口にしておきたい所です。

止まった時に誰が対応するかは、いちばん忘れやすい項目。夜に止まっても、誰も気づかない集まりでは、安心して使えません。

公開前に決める物は、完成した画面からではなく、動かした時に出てくる不足から数えます！

私なら、この箱を Claude Code に頼み始める前の入口に置きます！

Claude Code で作ったSNSアプリの動画は、ホーム、目安箱、見守り、端末の表示、公開前の準備の順に、完成した HIROBA を見せていきます。

機能は、押した時に何が起きるかで選びます。私の場合は、あの朝のコピーボタン。声の入口の軽さには、受講生だけのリアル会で見た光景が重なります。

気づくのはAI、一押しは人。メルマガの差し戻しは、その線の実例です。使い道を決めるのは、使う人たちです。

公開の前に決める物は、動かした時に出てくる不足から数えます。置き場所、見られる範囲、止まった時の担当。信頼できる仕組みが先です！

頭に浮かぶ集まりが一つあれば、十分です。その集まりのSNSアプリを作るなら、最初に決めるのは機能ですか、それとも声の受け取り方ですか？