TUIデザインツール「Tooey」の30秒紹介動画
ターミナルで動く画面をデザインするツール「Tooey」の30秒の紹介動画です。罫線を手で書いてずれてしまう困りごとから、実際の編集画面と機能を線でつなぎ、ブラウザで開くだけで使い始めるまでを見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
Tooeyとこの紹介動画
Tooeyは、TUI（ターミナルの画面）をターミナルの升目の上で直接デザインできるツールです。罫線の文字がつながって組まれ、flexのレイアウトで並べられます。複数人で一緒に作業することもでき、ブラウザからGoogleのアカウントでログインして使えます。
- 製品
- Tooey（TUIデザインツール）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- TUIを手で組むときに升目を数えて角を直す手間を、手書きの罫線がずれて赤いエラーが出る場面で見せました。
- コマンド1つでTooeyを開いた先に、告知の動画のコマから行を並べ替える実際の編集画面を見せました。
- サイトの機能カード3枚の実画像を線でつなぎ、升目の上でのデザインの流れを1枚の図にまとめました。
30秒の流れ
0〜3秒 公式ロゴと崩れた文字から整う「Tooey」の名前、サイトの一文が出ます。
3〜7.5秒 エディタで罫線を手書きすると線がずれ、「✗ borders don't line up」と赤く出ます。
7.5〜14秒 「$ open tooey.design」と打ち、告知の動画のコマで行を並べ替える編集画面を見せます。
14〜20秒 サイトの機能カード01〜03の実画像を線でつなぎます。
20〜26秒 og:imageが印字されるように出て、「Design TUIs together」と添えます。
26〜30秒 tooey.designと1行のコマンドで締めます。
表現で工夫したこと
窓の外を青焼きの設計図とASCIIの罫線の画風にし、紺と水色の地にJetBrains Monoの文字をのせました。場面のつなぎはブラウン管のように画面が縦に潰れて開く動きにしています。実在の人名が写る複数人作業の機能カードと、まだ公開されていない機能のカードは使っていません。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る