interfaceDesigner — 右に書くと、左にUIが出る

2016年ごろから社内で使っていた、画面設計ツールの話です。

見た目は2ペインのMarkdownエディタに似ています。右側にテキストで書くと、左側に管理画面のUIがリアルタイムに組み上がる。フォーム、テーブル、ボタンといった定番部品を、簡易記法でさくさく並べていけるツールです。

なぜ作ったか

受託開発では画面設計を大量に書きます。ワイヤーフレームツールで部品をポチポチ配置するのは、正直、面倒くさい。テキストで「一覧、検索ボックス、登録ボタン」と書いたらそのままUIが出てくれたほうが圧倒的に速い。単純に、書くのが楽だったんです。

Bootstrapベースの出力なので、設計画面がそのまま実装の下敷きになるのも良いところでした。当時のスタッフにも「これは楽」と好評で、画面設計の生産性がはっきり上がったツールです。

いま振り返ると

「人間が構造をテキストで書き、絵はツールが描く」というのは、いまのAIコーディングの形にちょっと似ています。10年早かった——と言いたいところですが、単に面倒くさがりだっただけかもしれません。面倒くさがりは、道具を作る原動力として一番信頼できます。