0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

入力した文字でドミノ倒しを作れるWebツール「ドミノ倒しメーカー」を作ってみた

0
Last updated at Posted at 2026-09-11

メッセージや絵文字を入力すると、立体ドミノが自動で組み上がってパタパタ倒れるWebツール「ドミノ倒しメーカー (domino.work)」を作りました!

スクリーンショット 2026-09-12 11.59.10.png

💡 なぜ作ったのか(開発のきっかけ)

「自分の書いたメッセージや名前が、リアルタイムにドミノになって倒れたら面白そう!」という直感的なアイデアから開発をスタートしました。

ただ文字を表示するだけでなく、家族や友達への感謝・ジョーク・SNSでの一言メッセージなどを、“ドミノ倒しの映像”として楽しく共有できるエンタメ系Webツールを目指しました。

🛠️ 主な機能と工夫したポイント

1. テキスト入力からのドミノ自動生成

文字や記号、絵文字を入力して生成ボタンを押すだけで、テキストの形に沿って自動的にドミノが整列・配置されます。

2. 視覚的・直感的に楽しめる演出

ドミノが1枚ずつ連鎖して倒れていく爽快感やテンポ感を意識し、誰でも1秒で遊べるシンプルな操作性に落とし込みました。

3. SNS共有・メッセージ作成

恋人や友人へのメッセージ、ちょっとしたネタ動画感覚でSNS(Xなど)にシェアして楽しんでもらえる設計にしています。

💻 採用した技術スタック(※ご自身の環境に合わせて修正してください)

  • フロントエンド: HTML5 / CSS3 / JavaScript
  • 物理演算 / 描画: Three.js / Cannon.js

🚀 開発で苦労した点・工夫した技術

  • 文字パターンからドミノの配置座標を割り出す処理
  • 重くならずに滑らかにドミノを倒すためのアニメーション・描画の軽量化
  • スマホ・PC問わずきれいに表示・動作させるレスポンシブ対応

おわりに

誰でも登録不要でサクッと遊べますので、ぜひお好きな言葉や絵文字を入力して試してみてください!

エンジニアの皆さんからの「描画パフォーマンスの改善策」「こういう演出・機能があったらもっと面白い」といったフィードバックやアドバイスをコメントでいただけると大変励みになります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?