無限キャンバスツール「Pencil」登場、Claude Codeと連携しIDE上でコードとデザインを同期

デザインツールで作った画面を見ながら、エンジニアがコードエディタに向き合ってUIを一から組み上げる。少し文言や配色を変えるだけでも、両者の間で往復のやりとりが発生する。そんな長年の課題を解消しようとする試みが登場しました。

無限キャンバスとClaude Codeを組み合わせたUIデザインツール「Pencil」が話題を集めています。独立したアプリでありながら開発環境（IDE）に直接統合されており、利用にはClaude Codeへのログインが必要です。コードエディタから離れることなく、UIの描画からコード生成までを一気通貫で進められます。

IDEの中に無限キャンバスを埋め込む

一般的なデザインアプリはコードベースから完全に切り離された場所で動きますが、PencilはIDEの内部に常駐します。

特徴の一つがサイズ制約のない無限キャンバスです。固定サイズのアートボードに縛られることなく、複数画面にわたる複雑なアプリの遷移図やデザインシステム全体を自由に配置し、直感的にズームイン・ズームアウトしながら俯瞰できます。

Figmaファイルの読み込みに対応しているほか、キャンバス上でゼロから画面を描くことも可能です。さらに強力なのがインタラクティブな操作性です。キャンバス上のテキストやカラーをマウス操作で直接修正できるため、軽微な修正のためにわざわざコード側を触る必要がありません。

裏側ではClaude Codeが待機しており、キャンバス上のデザインコンポーネントをコードベースと自動同期します。単にコードを吐き出すだけでなく、レスポンシブ対応やアクセシビリティ、パフォーマンス面での最適化提案まで行います。

Claude特有の「青紫UI」を回避する工夫

AIにUIを作らせると、指定を細かくしない限り、なぜか青と紫を基調にした似たり寄ったりの未来風画面になりがちです。

Pencilはこの問題を賢く回避しています。あらかじめ複数のデザインコンポーネントライブラリを内蔵しており、Claudeはそのライブラリのスタイルに沿ってフロントエンドコードを生成します。これにより、AI任せにした際のデザインの崩れや単調さを防いでいます。

GoogleのStitchと比較すると、その設計思想の違いがよくわかります。Stitchは微修正の際にコードを直接書き換える必要がありますが、Pencilは画面上で視覚的に編集できる利便性があります。一方で、Pencilの選べるコンポーネントスタイルは現時点でやや限られており、Geminiを活用するStitchのほうがデザインの多様性や審美眼の幅広さでは優れている面もあります。それでもXやLinkedInでは、作業効率が大きく向上したというエンジニアたちの報告が相次いでいます。

なぜ重要か

私たちは、Pencilが「フロントエンド開発にはやはり視覚的な操作面が欠かせない」という原点に上手く着地したと考えています。プロンプトを打ち込むだけのチャットUIでは、細かな余白や色味の調整にどうしても限界がありました。

個人開発者やフルスタックエンジニアにとって、利用価値は非常に高いと言えます。Figmaの資産をIDEに直接持ち込み、文字や色をキャンバス上で直感的に手直ししながらAIに同期コードを書かせられるため、モックアップ作成やプロトタイピングのスピードは格段に上がります。現在IDE中心で開発を進めているなら、試してみる価値は十分あります。

業界全体で見ても、AIコーディングツールは「テキスト指示によるコード生成」から、コードとデザインがリアルタイムに相互連携するビジュアル主導のワークフローへと進化しつつあります。

コンポーネントライブラリでAIの出力を制御するアプローチは実用的ですが、提供されるスタイルのバリエーションが拡充されなければ、生成物が画一化してしまう懸念も残ります。またClaude Codeのアカウントログインが前提となる点も利用のハードルになるでしょう。それでも、デザインと開発の境界線をIDEの中で溶かしてしまう体験は、今後のUI制作のスタンダードを予感させます。