UI部品ライブラリ「Bencho」の30秒紹介動画
触って動くReactのUI部品を集めたライブラリ「Bencho」の30秒の紹介動画です。AIがありきたりな画面を作る場面から、Bencho MCPで本物の部品を受け取って動かすまでをターミナルと設計図で見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
Benchoとこの紹介動画
Benchoは、触って動くReactのUI部品とマイクロインタラクション、UIの効果音を集めたライブラリです。Bencho MCPをClaudeやCursorにつなぐと、頼んだ部品をコンポーネント・CSS・必要なパッケージごとプロジェクトに受け取れます。
- 製品
- Bencho（UI部品ライブラリ）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- AIに頼むとありきたりな見た目になる困りごとを、ターミナルの出力と灰色の部品で見せました。
- Bencho MCPをつなぎ、search_blocksとget_blockで部品を受け取る流れを1行ずつ見せました。
- 設計図に線で描かれた部品が本物のカードに塗り替わり、スライダーやリアクションが動く様子を見せました。
30秒の流れ
0〜3秒 「Your AI ships generic UI.」。ターミナルで部品を頼むと、プレビューに灰色のトグルと星が出て「GENERIC」の判が押されます。
3〜8秒 「Connect the Bencho MCP.」。MCPを追加するコマンドを打ち、設計図にBenchoのマークと3つの道具が線でつながります。
8〜14秒 「Ask for a block. Get the real one.」。部品の名前が解読されるように出て、設計図に部品の枠が線で描かれていきます。
14〜20秒 「Component, CSS, motion. Live.」。設計図が本物の部品に塗り替わり、スライダーを動かし、リアクションとトグルを押します。
20〜26秒 緑の文字が降る中でASCIIの「BENCHO」が解読されて現れ、部品と効果音とMCPの説明が出ます。
26〜30秒 白い画面にBenchoのマークと「Give Claude better taste in UI.」、bencho.devを出し、部品の名前の帯が流れます。
表現で工夫したこと
左にターミナル、右に青焼きの設計図を並べ、部品はまず線で描いてから本物のカードに塗り替えました。色と書体はサイトの墨色・薄い灰色・Interに合わせ、マークはサイトのSVGを使っています。部品は動画用にHTMLで作り直しました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る