お酒を注ぐ動画ばっかり集めたSNS「TokK Tokk(トックトック)」を作ってみた

こんにちは、「Webを愛し、Webに愛されたい男」hirokです。

みなさん、日常的にSNS使っていますか？
X（旧Twitter）、Instagram、TikTokなど世の中には様々なSNSがあふれていますが、今回は、チョコレートプラネット（チョコプラ）さんのYouTube動画に出てくる架空のSNS「TokK Tokk（トックトック）」がここ3年ほど気になりすぎていて、情熱を注ぎ込んで実際に作ってみた話をお届けします！

TokK Tokkとは？

元ネタとなったのは、チョコレートプラネットさんのYouTubeチャンネルで公開されているこちらの動画です。

聞いたことないSNSばっかり使ってるやつ

動画の中で長田さんが「お酒を注いでる動画ばっかり集めたSNS『TokK Tokk（トックトック）』」という、ニッチすぎるSNSを使っているという場面が登場します。

「注いでるだけの動画を集めた」という絶妙なリアリティ。
エンジニア魂に火がついた私は、「TikTokのような滑らかなUI/UXで再現してみたい！」と、開発を開始しました。

実際に作ってみた

ただ動画を流すだけでは「TokK Tokk」とは呼べないと考え、世界観を忠実に再現しつつ、ユーザー体験を極限まで高めるために以下の点にこだわりました。

タテ型フルスクリーン＆「1スワイプ＝1本」の操作感

TikTok風の縦スワイプ操作を実装。一般的なCSS指定ではスマホで何枚も勢いよく飛んでしまう課題があったため、移動量と速度を計算する判定ロジックを組み、「手触りの良いスワイプ感」を追求しました。

「トクトク音」は音声ファイルを使わずに物理演算で

ボタンを押した時の「トクトク…」という効果音は、音声ファイルを再生しているのではなく、ブラウザの音源合成技術（WebAudio API）でリアルタイムに波形を生成しています。容量ゼロで読み込める上、押すたびに微妙にピッチが変わるため、機械っぽさのないリアルな「注ぎ感」が楽しめます。

実際の画面がこちら

無駄に堅牢かつクリーンな設計

ジョークアプリとはいえ、今回、最もこだわったのが「運用コスト・個人情報管理リスクを完全にゼロにする」という設計思想です。

TokK TokkはデータベースやAPIを持たず、サーバーからは静的ファイルの配信のみを行い、アカウント情報（LocalStorage）や投稿動画（IndexedDB）を含むすべてのユーザーデータを閲覧者のブラウザ内で完全に完結させるアーキテクチャを採用しています。

使用した技術スタック

• フレームワーク:
  Next.js 15 / React 19 (App Router)
• 言語:
  TypeScript (strictモード)
• スタイリング / アニメーション:
  Tailwind CSS v4 / Framer Motion
• データ保存:
  LocalStorage / IndexedDB（ブラウザ内保存）

完全ローカル完結

ユーザーが作成したアカウント、押した「いいね」や「トクトク」、さらには投稿した動画までもが、すべて閲覧者自身のブラウザ内だけに保存されます。投稿した動画が外部サーバーに送信されることは一切ありません。

データ容量の最適化

ブラウザ保存で一般的なLocalStorageは容量が小さく（約5MB）、動画を扱えません。そこでブラウザのデータベース「IndexedDB」に動画をバイナリ（Blob）のまま直接格納し、無駄なデータ膨張を回避する設計を施しました。

依存パッケージをわずか5つに絞り込み、純粋なフロントエンド技術だけで「本当に登録できて、本当に投稿できるSNS体験」を構築しました。

ご要望があれば…

今回は、web上で公開してあるものの実際に他のユーザーの投稿を見ることはできませんが、ご要望があり且つ可能であれば実際に動作するものへとアップデートを考えています。

＜開発した感想＞

開発は変わった。

お気づきの方もいらっしゃることと思いますが、今回のTokK TokkはAIと一緒に開発を進めました。チョコプラさんのこの動画を数年前に見たときに『よし！実際に作ってみよう！』とワクワクしましたが業務に追われて、中々まとまった開発時間が取れず時間ばかり経ってしまいました。

もともとはコンセプトはそのままでしっかりと設計して、皆さんに楽しんでもらえるかも？なんて想像しながら、自身でコードを書いていくのをとても楽しみにしていたものです。しかし、AIの普及によって開発現場は変わってしまいました。私個人の感覚では、全てをAIでポン出しといったことはまだする気がありませんし、しないでしょう。効率や質に疑問はありますが、実際にコードを書く楽しさをまだ味わっていたいのです。

残念ながら今回の開発では思う存分にその楽しさを味わうことはありませんでしたが、思い立ったものやアイデアを形にしていく時のワクワクだけは感じることができたので、これからも変わらず『人々が思い描く 自由な発想を形に。』をモットーにWebを愛していきたいと思います。

おわりに

今回はチョコレートプラネットさんの動画へのリスペクトから、お酒を注いでいる動画ばっかり集めたSNS「TokK Tokk(トックトック)」をノリと情熱で開発してみました。

一見するとただのジョークアプリですが、裏側では最新のフロントエンド構成、ブラウザストレージを極限まで活用した軽量設計、緻密なアニメーション制御など実用的な技術が詰まっています。

私たちは、このように「遊び心のあるプロモーション企画」から、「モダンで快適なWebシステム・アプリ開発」まで、技術力と企画力を武器に幅広いソリューションを提供している開発会社です。

また、弊社ではWebメディアの「掲載枠・広告スペース」を有効活用し、新しい収益や集客に繋げるプラットフォーム『Linkoffer（リンクオファー）』も運営しています。

Linkoffer(リンクオファー)

• 自社メディアのスペースを使って収益化したい
  （メディア様）
• 地域やターゲットに密着した効果的な広告枠に出稿したい
  （スポンサー・企業様）

このようなお悩みをお持ちの方は、ぜひ一度『Linkoffer』をチェックしてみてください！