00:00:00これはPencil、AIアシスタントからのプロンプトを
00:00:05目の前で魅力的なデザインに変換し、Figmaのように編集できる「バイブ・デザイン」ツールです。
00:00:10コンポーネント、UIキット、CSS変数に対応しており、完全に無料です。
00:00:15ですが、SketchやFigmaの新しいMCPツールも似たようなことができる中、
00:00:19Pencilはデザイナーに使われるツールになるのでしょうか？
00:00:22チャンネル登録をして、さっそく見ていきましょう。
00:00:24AIがデザインを苦手としているのは、周知の事実です。
00:00:28例えば、これを見てください。
00:00:30最新モデルでスキルを追加すれば多少は改善されますが、
00:00:33コードを書く前にデザインを微調整したり、クライアントの承認を得たい時もありますよね。
00:00:38そこでPencilの出番です。
00:00:40これはエージェント駆動型のデザインツールで、IDE内やスタンドアロンアプリとして動作します。
00:00:46私のようにClaude Codeを使っている人には、最高のデザインツールです。
00:00:51では、簡単なデモをお見せしましょう。
00:00:52こちらがPencilの全貌です。
00:00:54Figmaを使ったことがあれば、左側にオプションがあり、
00:00:59右側にキャンバスやフレームの設定がある、お馴染みの構成だと感じるでしょう。
00:01:03これは、Pencilのセットアップ後に最初に表示されるファイルです。
00:01:07ステップ1と2を飛ばして、
00:01:09何が起きているか分かりやすいように、ステップ3へ直行します。
00:01:12ここにプロンプトがあります。
00:01:14「実行」をクリックして、このチャットウィンドウ内で走らせることもできますが、
00:01:18私はターミナルでClaude Codeを使います。
00:01:22そこには私のスキルやMCPサーバーなど、使い慣れた環境が揃っており、
00:01:26Pencilでもそれらの恩恵を享受できるからです。
00:01:29プロンプトをコピーして、Claude Code（1周年おめでとう！）に貼り付けます。
00:01:33念のため、PencilのMCPサーバーを使うように指示しておきます。
00:01:39このプロンプトの内容は、コンポーネントを使って
00:01:44ローバー管理プラットフォームのダッシュボードをデザインしろ、というものです。
00:01:45この「Lunaris UIキット」内にあるコンポーネントを使用します。
00:01:50フレームに戻ると、ダッシュボードがリアルタイムで作成されているのが分かります。
00:01:56Claude Codeの方で、具体的に何をしているか見てみましょう。
00:01:59Pencilの「MCPバッチデザインツール」を使って、ナビゲーションバーを配置しています。
00:02:05ステップ1のメインレイアウト構造のセットアップは、すでに完了しています。
00:02:08Pencilに戻ると、デザインがリアルタイムで追加・変更される様子が確認できます。
00:02:13Claudeの作業が終わったので、さらにデザインを調整していけます。
00:02:17正直、この出来栄えには非常に感銘を受けています。
00:02:20適切なアイコンの選択から配色、綺麗なピル型の要素、
00:02:25そしてこの素晴らしいボタンまで。
00:02:27「10件表示」の箇所が少し端に寄りすぎているようです。
00:02:31そこをクリックして、パディングを少し調整します。
00:02:34これこそがPencilの素晴らしさです。
00:02:36デザインの変更は、Figmaと同じように自由に行えますが、
00:02:40特定のUIキットに縛られることもありません。
00:02:42実際、ShadcnからLunaris、Halo、Nitroまで、
00:02:48非常に多くの選択肢があり、さらに増えています。
00:02:49例えばShadcnをクリックすると、テーマ設定エリアでより多くのオプションが表示され、
00:02:54ダークモードへの切り替えや、ボタンを黄色にするなどのテーマ変更、
00:02:58背景全体の変更も可能です。
00:03:01また、デザインの指針となるUIキットも用意されています。
00:03:05では、完全にゼロから作ってみましょう。
00:03:08ここをクリックするとデフォルトでチャットが使われますが、
00:03:11これをコピーしてチャットウィンドウに持っていくこともできます。
00:03:13その前に、ファイルから「新規作成」を選んで白紙の状態にします。
00:03:17幅を1024程度、高さは少し長めに設定します。
00:03:24フレームを選択した状態で、Claudeにスタイルガイドを使わせます。
00:03:28そして「ボヘミアンスタイルのフレンチベーカリーの
00:03:32ウェブサイトを作成して。画像はUnsplashから取得して」というプロンプトを入力します。
00:03:36エンターを押して、結果を見てみましょう。
00:03:39どうなるか全く予想がつきませんが、楽しみです。
00:03:42私が「superpower」スキルを使っているため、
00:03:45ウェブサイトについてのフォローアップ質問がいくつか来ました。
00:03:47さて、作業が始まりました。
00:03:49最初に私が設定したよりも広いフレームが提案されましたね。
00:03:52時間を短縮するために動画を早送りします。
00:03:55Claudeが、作成すると言っていた3つのページを完成させたようです。
00:03:59デザインを見てみると、正直これは素晴らしい出来です。
00:04:02もちろん、自分ならこう変えたいという部分はありますが、
00:04:06これをどこかのサイトで見かけても、AIが作ったとは思いもしないでしょう。
00:04:10ロゴから使用されている画像、レイアウト全体まで、
00:04:14信じられないほど見事です。
00:04:16多少の問題があっても心配はいりません。
00:04:17変更したい箇所をダブルクリックするだけですから。
00:04:20このようにテキストをドラッグして、内容を少し書き換えれば、
00:04:24はい、これで修正完了です。
00:04:26次に、これを機能するウェブサイトとしてコード化するようClaudeに頼みます。
00:04:30出来上がりました。これがそのサイトです。
00:04:32デザインにはなかったパンの背景が追加されていますが、
00:04:35まあ、良しとしましょう。
00:04:38スクロールしてみます。
00:04:39ほぼすべてがデザイン通りに再現されており、非常に見事です。
00:04:44「Our Story」ページも完璧です。
00:04:47綺麗なテキスト、3つのステップ、そして「自分たちが食べる食材のみを使用する」という
00:04:52素敵なこだわりまで、デザインそのままです。
00:04:56画像も完璧な位置にあり、メニューも実に素晴らしい。
00:05:00各項目の最後に追加された水平線もいい感じです。
00:05:04このデザインの良さは、AIによって作られているため、
00:05:07あらゆるデータベースに接続して、実データを使える点にあります。
00:05:10他のMCPツールやスキルを使って、サイトの質を高めることもできます。
00:05:15さらに、すでにFigmaでデザインを持っている場合は、
00:05:18ファイルをインポートしてPencilで使うことも可能です。
00:05:22このウェブサイトのリンクを概要欄に貼っておくので、ぜひ触ってみてください。
00:05:25様々なデザインをプロンプトから生成するのは本当に楽しく、
00:05:29目の前で構築され、後で編集もできるという体験は魔法のようです。
00:05:35さらに、Pencilのファイルは純粋なJSONなので、
00:05:38AIエージェントが理解しやすく、コードへの変換も容易です。
00:05:42ただ、これほど素晴らしいPencilも完璧ではありません。
00:05:46内蔵のチャットが時々反応しなくなることがありました。
00:05:50また、新規ファイル作成時の「生成中」のオーバーレイが、保存や再起動をするまで消えないこともあります。
00:05:56特定の操作で少し動作が重く感じることもありました。
00:05:59とはいえ、これらは開発チームが現在取り組んでいるであろう些細な問題です。
00:06:04Tailwind PlusのようなカスタムUIキットの作成やインポート機能も期待されます。
00:06:11そして、このツールは現在完全に無料で利用できます。
00:06:15ベンチャー支援を受けているため、ずっと無料とは限りません。今のうちに使い倒しましょう。
00:06:19私はデザイナーではありません。はい、驚きですよね。
00:06:22FigmaやSketchのMCPツールは試していませんが、ネットで見る限り、
00:06:28多くのツールとシームレスに統合できるPencilの方が、セットアップはずっと簡単そうです。
00:06:34シームレスといえば、手書きでコードを書く代わりにClaude Codeを使って、
00:06:39ターミナルUIを即座にデザインしたい方は、このClaude Canvasの動画を
00:06:42チェックしてみてください。その方法を詳しく解説しています。