はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です。
Pencil.devというデザインツールをXで見かけまして触ってみました。
High Agency, Inc. というアメリカのスタートアップが作ったツールとのこと。
上記公式ページのTOPページでは「Introducing a new way to design right where you code.」とありまして、直訳では「コードを書いているその場においてデザインを行うための新しい方法を紹介します」
。。ちょっとよくわからないですね。
ということで実際に触ってみましたので紹介してみたいと思います。
インストール及び設定
このPencil、1月頃まではWindow版が無く、macOSとLinuxのみでしたが、2月にWindows版がリリースされました。早速ダウンロード＆インストールしてみると以下のような画面が表示されます。
上記のダイアログでEメールアドレス入力するとそのアドレスにアクティベーションコードが届きますのでそれを以下のダイアログで入力します。
すると以下のような設定ダイアログが出ます。ダイアログの上の部分にある通り、クイックスタートガイドへのリンクがありまして、Pencil.devのAI機能を使うにはClaude Codeへのログインが必要になります。
ここでログインを行うとClaude CodeにおけるPencilのMCPサーバーの設定も自動的に行われます。
設定も終わると以下のような画面が表示されます。
そうしましたら、一旦その画面を離れまして、恐らくClaude Codeが起動していると思いますので「/mcp」とコマンドを叩いてもらい、PencilのMCPサーバーと繋がっていることを確認してください。以下のようにconnectedとなっていましたら設定完了です。
デザイン
最初の画面では色々表示されているのですが、一旦メニューバーの「File」ー＞「New File」で新しく画面を開いてください。
すると以下のような白い四角が表示された画面が表示されまして、ここからがスタートになります。
ではClaude Codeで以下のプロンプトを入力してみます。
「Pencilのキャンバスにあるフレームに、ToDoアプリのUIをデザインして。以下を含めること：
・ヘッダー（アプリタイトル）
・タスク入力欄と追加ボタン
・タスクリスト（チェックボックス付き、3〜5件のサンプルタスク）
・完了/未完了のフィルタータブ
シンプルでモダンなデザインで。use the pencil mcp server」
そうするとPencil側の白い四角だけだった箇所に色々と画面らしき内容が描画されていきます。
最終的に以下のようにToDoアプリの画面が作成されます。
画面上の部品をクリックするとFigmaライクの設定画面が表示され、ここで各部品のデザイン変更が可能となります。
Claudeからの操作だけでなく、Pencilには以下のようなチャットウィンドウが存在しておりまして、ここで直接プロンプトを投げてデザイン変更も可能です。
作成したデザインは.penファイルとして保存できます。このファイルの中身はJSONファイルでこの後作られるソースコードと同じリポジトリで管理が可能になります。
次はこのPencil上で決めたデザインで実装してみます。
以下のプロンプトを投げます。
実装
「Pencilのキャンバスにあるマイタスクのデザインを見て、ReactとTailwind CSSで実装して。実際に動作するToDoアプリとして、タスクの追加・完了チェック・フィルター機能も実装すること。use the pencil mcp server」
そして実装された結果が以下のブラウザ上の画面になります。
当たり前ではありますが、Pencilのデザインのまま実装されていることがわかります。
このように設計と開発を同じ環境に統合することで両者のギャップを埋め、コンポーネントを設計し、コードと同期させ、AIアシスタントが設計と実装の一貫性を維持できる。というのがPencilの特徴となります。
Design Kits &Style Guides
あとはメニューバー付近の「Design Kits &Style Guides」を選択してみると
以下のような画面が表示されます。
この画面は2つのセクションに分かれています。
上段：Design System Components
選んだコンポーネントセットがキャンバスに読み込まれます。
たとえばLunarisというコンポーネントを選ぶと、左パネルにLunarisのボタン・カード・テーブルなどのパーツが並んで、AIがデザインを生成するときにそのパーツを使って作ってくれます。
これによって生成されたコードが「Lunarisを使ったReactコード」として出力されるのでデザインの一貫性が保たれます
下段：Style Guide to Apply in Chat
こちらはチャットでAIに指示するときのデザインの参考資料として使われます。
「PROJECT OVERVIEW」みたいなダッシュボード系のスタイルを選ぶと、AIがそのトーン・レイアウト・色使いを参考にしてデザインを生成してくれます。
これでプロンプトで細かく説明しなくてもビジュアルイメージをAIに伝えられ、「こういう雰囲気で」という曖昧な指示が通りやすくなります。
一言で言えば
上段 = 使う部品を選ぶ、下段 = デザインの雰囲気を伝える
ということになりまして、この2つを組み合わせることで、プロンプトだけでは伝えにくいデザインの品質・方向性をAIに伝えられるのがポイントです。
Figmaとの互換性
Figmaライクと書きましたが、Figmaを普段使っている方は互換性も気になるかもしれません。
Pencilではメニューの「File」をクリックすると以下のようなメニューが表示されまして、「Import Image/SVG/Figma」で.figファイルをインポートすることができますし、その下の「How to Import from Figma..」をクリックするとFigmaからのインポート方法が表示されます。
Xを見るとPencilで作ったものをまたFigmaで取り込みたいといった要望もあるようでして、それに応える形で以下のような「Pencil to Figma」というプラグインがFigmaには存在しています。
他のAIツールとの連携
あとはClaude Code以外のIDEを使っている方々のために公式サイトの「Download」では以下のような拡張機能が存在しています。
これによりClaude Code以外のCursorやVSCode、AntigravityのユーザーでもPencilが使用可能になります。
試しに「Add to Cursor」をクリックすると以下のようにCursorでPencilが利用可能となります。
最後に
Pencilはまだアーリーアクセス段階ですが、Xを見るとかなり実用的なツールとして使っているFigmaユーザーの方もいらっしゃるようです。
すでにClaude Codeを契約しているエンジニアであれば、Pencil自体は無料で使えますので、まずは気軽に試してみてはいかがでしょうか。デザインとコードの境界がなくなっていく流れは今後も加速していくと思われますので、引き続き注目していきたいと思います。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
Microsoft Forms
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
