Pencilの紹介と特徴
こんにちは、AI駆動開発部の日常へようこそ。
このポッドキャストは、日々AI駆動開発を行う企業家の山本とエンジニアの阿部が、
AI駆動開発のリアルをゆるーく語り合う番組です。
はい、じゃあ本日もよろしくお願いします。
よろしくお願いします。
はい、じゃあ今日はPencilっていう、AIツールになるのかな。
デザインツール、AIネイティブなデザインツールっていうのが正しいのかな、について話ができればと思います。
ちょっとね、僕は実はまだ使ってなくて、阿部ちゃんが試しに使ってくれたみたいなんで、
なんか大体実際どんな感じだったかみたいなところも、シェアをしてもらえたらいいかなというふうに思ってます。
はい、なのでちょっとこのPencil AIっていうのかな、のちょっと概要の説明から、
なんか実際に使ってみてどうだったかみたいなところとか、ぜひちょっと聞かせてもらえると嬉しいです。
はい、じゃあ今日はなんか普段はコーディングの話ばっかりですけど、デザインツールということで、
PencilっていうAIネイティブなデザインツールが、ちょうどね1月22日ぐらいに公式で公開されたっていうニュースがありました。
で、それXで僕も見かけて、結構なんかそのデザインツールでAI組み込まれて、なんでしょう、簡単にデザインを起こせるよねっていうのを、
僕自身が結構開発する中で、どういう見た目を作ればいいのかなって結構悩むことが多かったから、
まあいろいろ触ってみてはいたんですけど、今回このPencilっていうのが出てきて触ってみたところ、結構なんか今までのものとは違う使いやすさを感じたので、
ここでみんなに紹介したいなというところで、今日ここで話すというような感じですね。
Pigmaみたいな感じなの?
そう、見た目はねほぼPigmaみたいな感じだし、そのレイヤーの考え方とかコンポーネントみたいな基本的な操作感もPigmaとほぼ一緒になってます。
で、なんか今までのそのデザインツールっていうのが結構、UXピロットだったりUIザードみたいなのが結構いろいろあって、
これらも使ったことがあるんですけど、基本的にみんな有料にすぐなっちゃうんですよ。
まあ何回ぐらいかはなんか指示出せるんだけど、それ以上は有料ですよというところがあったりするんだけど、このPencilっていうツールは基本的に無料で使うことができるっていうのが大きな特徴になってます。
将来的にはちょっと有料プランとか導入する予定ですよとか言ってるんですけど、今のところは無料でダウンロードして使うことができて、
これ裏側ではクロードのモデルをおそらくサブスクリプションに入っている人が自動で連携されるようになってて、
クロードのサブスクリプション内で指示を与えてデザインさせるっていうのができるような仕組みにどうやらなっているみたいなんですよね。
デザインの編集と共有
MCPではなくてもうこの中で使うみたいな感じになるってことか。
そう、多分この中でおそらくクロードコードを立ち上げているようなイメージがありますね。
なるほど。
おそらく内部で、僕らもクロードコードのモデルがプランをいくつか使ってると思うんだけど、
僕が使ってるそのアカウントで認識されていたので、おそらくクロードの認証を通して、
クロードコードの認証を通して内部でクロードコードを実行してるっていうのが、これの特徴的なところなのかなっていうふうに思います。
実際に公式でそういうアナウンスがあるわけではないので、これはちょっと推測レベルではあるんだけど、きっとそうかなっていう。
なるほど。
あとここの面白いのが、編集できるデザインっていうのが、チャットが左下とかに立ち上がってテキストベースで指示を出したり、
画像を渡してこういうデザインを作ってほしいですっていうと、もうかなりそのまんまのデザインをしっかり出してくれるっていうところがあるんですけど、
これは他のUIツール、デザインツールもみんな大体そういうのはサポートしてるのはあるんでしょう。
基本的にクオリティの高いデザインが作れるっていうのは、どのツール使っても同じなんだけど、
このPencilっていうのが、編集したデータっていうのがテキストファイルに起こされるようになっているんですよ。
構造がJSONで出てくるみたいな?
そうそう。JSONでもう書き出されて、拡張紙はドットペンシルみたいな形になってて、ダブルクリックするとそのままペンシルのツールが立ち上がるようになってるんだけど、
中身を見たらただのJSONっていうような感じになってます。
これ僕の中で結構嬉しくて、他のツールとかだと、やっぱりサービスの、例えばWebのサービス内に閉じてるから他の人に共有することができなかったり、
他の人と一緒に作業しようとなるとすぐチームプランみたいな感じになって、さらに有料になってしまうみたいなところがあったんだけど、
これはもうファイルをそのままチーム内で共有することができるし、何なら僕たちとかあと、
コードをGitを使って履歴管理しているから、もうそこにファイルを入れるだけで、みんなでデザインの更新とか共有っていうのがすごいしやすくなったっていうふうに感じた。
デザインシステムの構築と活用
だから結構無料で使えて、かつチーム内と共有もできて、編集しやすくなっているっていうのは僕の中で今までなかったことで、いいなと思って。
MCPもいろいろ提供されていて、もちろんカーサーとか、クロードコード上とかコーデックス上でも、この編集したデザインについてアクセスして、それをマークアップしてもらうみたいなこともちゃんとできるようになっている。
JSONファイルって解釈できるものなのかな、AIが。
多分ね、AI自体はそのMCPを介して、MCPがJSONから読み取ったデザイン情報をAIに教えてあげるみたいな。
じゃあスタイリングされてるみたいな感じになるのかな。
スタイリングされた情報を渡すっていうような。だから間にMCPとして噛んでるんじゃないかなって。
なるほどね。あれだね、使い始めて、実際にそれでデザインを管理していこうみたいな感じになった場合、
リアルタイムでちゃんと、例えばGitHub Actionsのところに、毎回変更したら更新されるような仕組みを設けるみたいな感じになったときに、
どう同期していくかみたいなところが結構、本当に実用的に使えるかどうかのあれになりそうだね。
例えば今のイメージだと、新しいデザインとかUIが追加されたときに、
Cloud Code Actionとかが自動的にデザインをアップデートしてくれるみたいな。
そうそう、Cloudを発動させて、CloudがそのMCPでみたいなことができると、より良さそうだなって思う。
だけど今の阿部ちゃんがいいなって思ってる様子ケース的には、
例えばこんなの作ってほしいって俺が言ったときに、こんなデザインでいいかなみたいなとかの確認とかで、
ある程度固めたやつを元にコーディングをしてもらえるっていうところで言うよって思ってるって感じなのかな、今のところは。
まず今はそうだね。やっぱりザクッとこういうの作りたいときに、どういう見た目がいいのかなっていうのを実装してから、
AIが今はやってくれるからだいぶ楽にはなったんだけど、やっぱりその画面を、実装があって画面を作り込むじゃなくて、
先に画面をある程度サクッと擦り合わせることができるようになるっていうのはめちゃくちゃ楽になることかなと思うよね。
あとはこれを使って、スクショ渡せばかなりの精度でUIを再現してくれるので、
今デザインシステムとかがそもそもない中で開発しているプロジェクトとかで、
もう全部のページを与えてデザインにアップしてもらうことで、
このコンポーネントとかって共通化できるよねみたいなのを俯瞰して見やすくなるっていうのも結構いいんじゃないかな。
使い方としていいんじゃないかなって。
なるほど。逆に言うと、例えば参考にしているサービスがあって、そのスクショを渡して、
今作っているサービスのスクショを渡して、トーンはこっちのサービス、自分たちのサービスに合わせてほしいんだけど、
このサービスのこういうところいいから、みたいな感じにやるとかもできるってことか。
できちゃうね。できるね。
デザイナーの人に怒られそうだけどって感じか。
パクったとか言われちゃうかもしれないけど、こういうインターフェイスを再現したりとか、
そういうので参考にすることもしやすくなったんじゃないかなって。
そういうことだね。
システム開発の領域だと、ほぼ固定的やけどね。みんなパクってるみたいなもんみたいな感じやもんね。
YouTubeとかインスタとかのストーリーとかね、ああいうのはみんなパクってるっていうので。
それこそTikTokとかもそうだしね。
ショート動画のスワイプとかもそうだし。
みんな少なからず参考にしてるっていう。
よく言うとね。
みたいな感じだから、その辺は難しいんだろうね。難しいっていうか。
なかなかロゴとかね、そういうよりクリエイティブにやったところだと、ちょっと話は違うかもしれないけど。
話はずれましたが、そういうこともできると。
さっき山ちゃんが言ったような、例えばGitHub Actions、クロードコードのActions上で新しいUIができたら、
それを追従するように保存することも、MCP自体でデザインを更新するっていうのが一応ツールとして提供されてるみたいなので、
全然そういうのもできるんだろうなっていう感じがあったね。
なんか最近思ってるのが、今ユーザーマニュアルを作ってるじゃん。
あそこに画像を挿入したいなって思ってて。
確かに。
そのデザインの画像とかをMCP経由で引っ張ってこれたりしたらよりいいよね。
それをプレイライトでスクショして貼り付けるみたいなことをできないかなとかって、ちょっと阿部ちゃんに相談しようと思ってたんだけど。
プレイライトでスクショしたりとかするのが一番。
確実だけどね。
そういう仕組みはちょっと欲しいなって思ってて。
それがそっちの方針の方が簡単な、ペンシルでやるっていう方針の方が簡単なんだったらそれも一つかな。
Pencilの機能とユースケース
けどより実態に近いみたいなところで言うと、今俺が言ったみたいにプレイライトでみたいな感じだけど、
モデルになるテンポ?リアリティのあるテンポのデータを用意しないといけないっていうのがある。
プレイライトとかでスクリーンショット撮ってっていうのも確かにあるんだけど、やっぱり実データを作ってあげないとスクショするまでたどり着けないっていうところがあるから。
このペンシルのMCPを見ていたらスクリーンショットを取得するっていうツールもあったんで。
あるんだ、なるほど。じゃあいいね、なんかそれスクリーンショット取得してみたいなことができると。
それをファイルで保存できるのかどうかわかんないけど。
いいね、こういうユースケースの画像というかデザインをどんどん作ってもらうっていうのをやってもらって、それをスクショして。
それがしかも毎回ちゃんと再シンクされてるっていう前提になったらめっちゃいいよね。
それちょっとやりたいね。
今ちなみにちょっと余談なんですけど、うちの仕組み的には、
毎回プロリクを投げたらそのプロリクを元にユーザーマニュアルを自動で更新していくみたいな仕組みをちょっと作っていますと。
なので、そこに今ちょっとデザインを同期していけたら、よりユーザーさんにとってはわかりやすい仕組みになるし、
こっちは手間をかけずにそこのエアエージェントのメンテナンスさえしていけば、
結構低コストで高品質なサービス提供ということができそうだなっていうのを思ってちょっと話してました感じですね。
AIの統合と将来性
その辺ちょっと試せるなら試したいね。
けど、この話始める前にちょっと見せてもらったんですけど、本当にね、本当に結構ちゃんとデザイン起こしてくれる感じよね。
いや本当にスクショ撮ったんかなって感じぐらいまでには綺麗に再現してくれたから。
しかもなんかね、あとこれの使い方のいいのは、
とりあえずそのPC版のデザイン作った後にSP版、スマホ版のデザインに書き換えたいって時に、
これを元にスマホ版のデザイン作ってって言ったりしたら、それも結構いい感じに変換してくれるから。
なるほどね。
UIとしてパターン1個だけ作って、それを複数のパターンに分けていくっていうのもだいぶやりやすいんじゃないかなって思いますね。
いやー、XD使ってる人Figma使ってほしいとかってずっと言ってたけど、こっちになるね、芝居には。
そうだね。
今ですらイラストレーター使ってる人とかもいるからね。
Photoshop、イラストレーター、XD、ちょっとね、エンジニアが使うには難しいけど。
システム開発領域だったらせめてFigmaにしてほしいって思ってたけど、こっちになりそうだね、芝居に。
Figmaもそのうちこういうのやってくるのかもしれないけど、やっぱり強いのはGitで管理ができるっていうところと、追加の利用料金が今のところはかからないところが強力だね。
Figmaとかってあんだけ複雑なシステムを構築してるから、そこからって結構難しくなりそうだよね。
プラグイン的にフックスとかみたいな感じで、前後に挟むみたいなとか、そういうのはできるかもしれないけど、
それをAIネイティブとして、根幹にAIを組み込んでいくみたいなっていう作り。
ちょっと、全くゼロから作り直そうくらいの気概が必要やと思う。
なりそうだね。今だとプラグインでね、AIを使ったデザインプラグインみたいなのが出てたりするけど、コアのところにまだ入ってないからね。
そこはけど、うちも開発してて、どうAIを組み込んでいくかみたいなところは、ちょっとやっぱ難しいところだよね。
エージェンティックに動いてもらうっていうのと、ツールを今までシステム化するには難しかったけど、ラスト1マイルできるようにしようっていう話とはちょっと大きな隔たりがあるなって思ってて。
今までのシステム開発の頭でいくと、ツールを作っちゃいそうになるよね。
ツールを作るでも十分いいんやけど、エージェンティックな振る舞いをするサービスを作るってなると、またもう一段難易度が上がるなみたいな感覚はあるなって最近思ってる。
作ろうとすると、例えば今目の前に書いてあるインプットフォームをただ埋めてくれるAIぐらいしか作らないけど、もっとエージェンティックというか。
エージェンティックな動きをクロードコードとかね、そういうのにすると、再現ないじゃん、その動作が。
パターンというかね。
ガードレールをやっぱり引きたくなっちゃって、ガードレールを引き始めるとツールの延長線上になるみたいな。そこのせめぎ合いが結構あるよね。
自分たちが作っていったツールの分の価値提供しかできなくなるから。
けどクロードコードってもう、クロードが開発している分以上の価値提供さ、ユーザー側が考えて、全然違う使い方をしていくっていう。
それがちょっとエージェンティックな使い方みたいなイメージなんやけど。
スコープを狭めると、もちろん精度も上がるし、いいんやけど。
1価値しか提供できないツールみたいなのもちょっともったいないなっていう感覚があって。
画面内の中に閉じたツールだけじゃなくて、サービスの垣根も飛び越えて、僕らのサービスを使ってくれたら他の、例えばAI使って。
それが俺らが想定していない使い方までされていくみたいな。
そういうサービス開発というか、みたいなのは考えたいところやね。
そういう意味ではPencilは今聞いていると、Figmaっぽいっていうのを超えてできそうな。
確かにそうだね。
やっぱりそこで重要なのはAPIを提供してくれるとか、MCPがあるとか、外とのつながりのポイントをちゃんと最初のうちから作っているっていうのがきっと大事なのかなと思ったりする。
そういうのと、あとはその中のエージェントをどう動かすかみたいなところっていうのは結構あるなって思いますね。
ちょっとそんな感じで、じゃあPencil、引き続き使っていって、いい使い方発見したらここでも共有するようにしましょうかね。
そうですね。やっていきましょう。
じゃあ今日はそんな感じですかね。
では、本日もありがとうございました。
ありがとうございました。
お疲れ様です。
本日もAI駆動開発部の日常を聞きいただきありがとうございました。
いかがでしたでしょうか。
今回の話題はPencilというAIネイティブのデザインツールについての話でした。
僕はちょっとまだ使ってないんですけれども、阿部ちゃんはかなり気に入ってるっぽくてテンション上がってたんで、ちょっと使っていきたいなっていうふうに思ってます。
かなり使えるサービスになっているみたいですね。
なので今後、それこそユーザーマニュアルに反映するとかもそうですけど、そういう仕組みが構築できた時にはまた共有できればと思っております。
こんな感じで新しいツールとかAIのモデルとかを含めて試したことを共有できればと思っておりますので、
もしこんな話してほしいとか、これちょっと使ってみてほしいんだよみたいなことがあれば、いつでもお便りいただけると助かります。
このポッドキャスト気に入ってくれた方は、いいねやフォロー、高評価ぜひお願いいたします。
それではまた次回もお楽しみください。バイバイ。
