00:00:00AIを使った開発において、デザインからコードへのハンドオフがいまだに一番の難所なのはなぜでしょうか？
00:00:04今の時代、何かをデザインして、
00:00:06それを変更すればコードも更新される、そんなスマートな方法があるはずだと思うでしょう。
00:00:08しかし、私たちのチームが試したツールはどれも、デザインかコードのどちらかしかできず、両方は無理でした。
00:00:13StitchやBoltはプロンプトからコードを生成しますが、後から編集できるデザインキャンバスがありません。
00:00:17Figma MCPは読み取り専用なので、AIはデザインを取得できても、そこでデザインすることはできません。
00:00:22また、コーディングエージェントを直接使っている場合、デザインを少し変えるたびにゼロからプロンプトを打ち直す必要があります。
00:00:26そんな中、Pencil.devが「デザインとコードの双方向の架け橋になる」と謳って注目を集め始め、
00:00:31私たちの目にも留まりました。しかし、実際にそれを使って構築を始めてみると、
00:00:35その「架け橋」は期待していたほどシームレスではありませんでした。単なるツールのテストとして始まったものが、
00:00:40このワークフローを完成させるために、予定よりもずっと深く踏み込むことになったのです。
00:00:44最近デザイナーの間で人気が高まっている新しいAIデザインツール、
00:00:47Pencil.devについてはすでにご存知かもしれません。
00:00:51これは基本的に、デザインに特化した人気ツールと、
00:00:56それらのデザインパターンを実装するために調整されたAI開発ツールの間をつなぐものです。
00:01:00主要な自律型IDEと連携し、コンポーネント生成や
00:01:04UIライブラリのサポート、CSSクラスの自動生成など、
00:01:08デザインからコードへのワークフローをスムーズにする機能を多く備えています。
00:01:11Figmaを使っている人なら、インターフェースはかなり親しみやすいはずです。
00:01:15現在は無料で利用できるので、私たちのチームもデスクトップ版をダウンロードして試してみました。
00:01:18アプリを起動すると、インストール済みのすべてのAIプラットフォームに接続するオプションが表示されました。
00:01:23私たちはメインツールとして使っているClaude Codeに接続しました。
00:01:27Pencil.devは、バックエンドでClaude CodeやCodexのようなAIコーディングプラットフォームを利用して動作します。
00:01:32デスクトップアプリをインストールすると、自動的にPencil.dev用のMCPが設定され、
00:01:36Claude Code内にすべてのツールがすぐに表示されました。
00:01:41セットアップが完了すると、チャット内でOpenAIとAnthropicの全モデルが選択可能になりました。
00:01:46今回は、全モデルの中からOpus 4.6を選びました。このツールには強力なデザイン機能が備わっています。
00:01:51デザインファイルはプロジェクトフォルダ内に「.pen」ファイルとして保存されます。
00:01:56これはJSONベースの形式なので、Gitでバージョン管理を行うことも可能です。しかし、
00:02:01他のツールと一線を画す最大の特徴は、コーディングエージェントとアプリ上のデザインを双方向につなぐ機能です。
00:02:06ただ、実際にその「双方向同期」を体験してみると、当初の予想とは少し違っていました。
00:02:10ClaudeなどのAIエージェントが、デザインとコードを自動で同期してくれるものだと思い込んでいたのです。
00:02:16実際には、同期するために手動でプロンプトを入力する必要がありました。
00:02:21デザインをコードに自動同期するわけではなく、デザインをセクションごとに解析して
00:02:26HTMLファイルに実装していくという仕組みだったからです。キャンバス上のデザインは正確に再現されましたが、
00:02:32デザインを修正するたびに毎回これを繰り返すのは、手間がかかりすぎると感じました。
00:02:37私たちのチームは、クリエイティブ・ディレクション・スタジオのランディングページを制作していました。
00:02:41Pencil.devとClaude Codeを連携させてデザインしたところ、見た目的には
00:02:46意図した通りのクリエイティブが反映された、しっかりとしたウェブサイトができました。
00:02:51一度Claudeを使ってデザインを実装し、開発中のNext.jsプロジェクトに同期させましたが、
00:02:56ページ上にはまだ気に入らない要素が多く、修正が必要な箇所もたくさんありました。
00:03:01プロジェクト内の多くの要素を繰り返し変更しなければならなかったのですが、そのたびにClaudeに向かって
00:03:06「実装済みのプロジェクトと同期して」と言い続けるのは、非常に退屈な作業です。
00:03:10そこで私たちは、この問題を解決するためのスクリプトを作成しました。このスクリプトは、
00:03:15ファイルの変更を監視するための複数のJavaScriptライブラリを使用しています。また、
00:03:20トークンの浪費やセッション制限を避けるため、Claudeが頻繁に起動するのを防ぐクールダウン期間も設けました。
00:03:25このスクリプトの目的は、デザインが格納された「.pen」ファイルを常に監視し、
00:03:29ファイルに変更があるたびに、プロジェクトと同期させるためのプロンプトを添えてClaude CLIを起動することです。
00:03:34クールダウン期間を設けたことで、保存のたびに一定の間隔が空き、細かな変更が一度に同期されすぎるのを防いでいます。
00:03:39使い方は簡単で、「npm run sync」コマンドを実行するだけです。すぐにワーカーが起動し、
00:03:44デザインを含む「.pen」ファイルの監視が始まります。このスクリプトを走らせた状態で
00:03:49何かを修正し、保存のキー操作（Ctrl+Sなど）を行うだけで、
00:03:54明示的に指示しなくても自動的にClaude CLIがトリガーされ、変更内容がプロジェクトに同期されます。
00:03:59ただし、このスクリプトを使う前に一つ準備が必要です。編集に必要なすべての権限、
00:04:04つまり読み書きやMCPツールの呼び出しといった権限をあらかじめ設定しておく必要があります。
00:04:10「.claude」フォルダ内の「setting.json」にこれを記述しておかないと、Claudeが権限の確認プロンプトで
00:04:15無限に止まってしまいます。権限がないとClaudeはプロジェクトに変更を加えることができず、
00:04:20実装を適切に完了させることができません。このスクリプトのおかげで、
00:04:24手動で同期のプロンプトを打つ必要がなくなり、作業がぐっと楽になりました。
00:04:29あらゆる修正がスクリプトによって監視され、自動的に実装のためにClaudeへ送られます。
00:04:34このスクリプトとアプリのソースコードは、AI Labs Proで公開しています。
00:04:39AI Labs Proは最近立ち上げたコミュニティで、皆さんのプロジェクトにすぐに組み込める
00:04:43テンプレートを提供しています。私たちの活動に価値を感じ、
00:04:48チャンネルを応援したいという方には最適な場所です。リンクは概要欄にあります。
00:04:52Claude Codeの機能の一つに、タスクを並列化して高速化できるマルチエージェント・システムがあります。
00:04:57そこで、Pencil.devでもマルチエージェント構成を試してみることにしました。
00:05:02MCPとして接続されているので、Next.jsの実装において複数のエージェントを使い、
00:05:07アプリの異なる要素を同時に作業させてみました。Claude Codeを使う利点は、
00:05:12プロジェクト開始前に作成したPRDやUIガイドなどのドキュメントを、コンテキストとして参照できる点にあります。
00:05:18単なるランディングページではなく、ウェブサイトの他のページも実装する必要がありました。
00:05:23そこで私たちは、各エージェントがアプリの異なる側面を担当するように明示的に指示しました。
00:05:28まずは探索から始め、複数のMCPツールを呼び出しました。
00:05:335ページあったため、Claudeは5つのエージェントを生成し、それぞれを各ページの担当に割り当てました。
00:05:39しばらくすると、アプリケーションのデザインの初期バージョンが出来上がりました。
00:05:44必要な全ページが生成され、フォントやスタイリングもランディングページと統一されていました。
00:05:48デザインが完成したら、Command + Sでファイルを保存します。
00:05:54するとスクリプトが自動で作動し、手作業を省いてデザインをアプリに実装していきました。
00:05:58この時点でのウェブサイトも悪くありませんでしたが、まだ何かが足りませんでした。
00:06:03ページに動きがなく、静的なレイアウトの中でユーザーの視線を誘導するためのスクロールアニメーションが必要でした。
00:06:08そこで、複雑なアニメーションも簡単に実装できる、
00:06:14JavaScriptアニメーションライブラリの定番であるGSAPを採用することにしました。
00:06:19この際、XML形式で書かれた非常に詳細なプロンプトを使用しました。
00:06:26ClaudeのモデルはXML構造のプロンプトをより正確に理解し、指示を解析するように調整されているからです。
00:06:31プロンプトにはタスクの詳細、必要な依存関係、重要な注意事項を記載し、
00:06:36特定の要素ごとに、各セクションがどのように動作すべきかをタグで細かく指定しました。
00:06:41このプロンプトをClaude Codeに与えると、GSAPのインストールから、動きのあるコンポーネントの追加まで一気に行われました。
00:06:46実装が完了してサイトを確認すると、
00:06:51アニメーションのおかげで、ウェブサイトはより生き生きと、インタラクティブになっていました。
00:06:56全く動きがなかった以前の静的なバージョンとは、体験の質がまるで違います。
00:07:00このプロンプトも、私たちのコミュニティ「AI Labs Pro」で公開されています。
00:07:04ダウンロードして、皆さんのプロジェクトに活用してください。また、
00:07:09このコンテンツを気に入っていただけたら、ぜひ「ハイプ」ボタンを押して応援をお願いします。
00:07:14GSAPでスクロールの視覚効果を加えた後、さらにその上にLenisを重ねてレイヤーを追加しました。
00:07:19Lenisはオープンソースの慣性スクロールライブラリで、
00:07:25より没入感のあるウェブサイトを作るための非常に人気のあるツールです。
00:07:30GSAPでアニメーションを設定したのになぜ別のライブラリが必要なのか、と思うかもしれません。
00:07:35実は、LenisとGSAPは互いに補完し合う関係にあります。
00:07:39GSAPが「スクロールした時に何が起きるか」を制御し、Lenisは「スクロール自体の感触」を制御します。
00:07:44Lenisがないとスクロールはカクつきますが、導入することでページが滑らかに流れ、GSAPの演出もより自然になります。
00:07:49このタスクのためにも、別の詳細なプロンプトを用意しました。
00:07:54GSAPの時と同様に、XML形式のプロンプト・アプローチを採用しました。このLenis用プロンプトは、
00:07:59前のステップで追加した既存のスクロールアニメーションを強化することに焦点を当てました。
00:08:04依存関係のリスト、セットアップ手順、各要素の配置方法、
00:08:09そして最終的な挙動のルールまでを網羅した詳細な説明を含めました。
00:08:13これをClaude Codeに渡し、リポジトリ全体にわたって多くの変更を加えさせました。
00:08:18実装後にサイトを確認すると、劇的に改善されていました。
00:08:23最大の変化はスクロールの滑らかさで、サイト内のナビゲーションがより没入感のある体験に変わりました。
00:08:28ウェブサイトが完成し、すべての機能が整ったところで、
00:08:32最後にUX基準に準拠しているかを確認し、プロジェクトを完了させる必要があります。
00:08:38そこで、Skill Creatorを使って「UX Audit（UX診断）」というスキルを作成しました。
00:08:44このスキルは、UI要素の品質チェックやサイトの各側面のレビューを行い、すべてがUX基準を満たしているかを確認します。
00:08:49コンテキストの収集、9項目のチェックリストによる分析、そして基準ごとにスコア化する報告フェーズで構成されています。
00:08:54これには、全9項目の詳細を記したUXチェックリストのリファレンスや、
00:08:59人間の目では見落としがちなUXの問題を、
00:09:04プログラムによって自動的に検出するためのPythonスクリプトも含まれています。
00:09:08診断スキルを実行したところ、2つの致命的な問題と、複数の中・小規模な問題が検出されました。
00:09:14致命的な問題は色のコントラストでした。指摘された多くの問題により、サイトの評価は「C」と判定されました。
00:09:19必要な修正内容が詳細に提示されたので、そのまま修正を実装するように指示しました。
00:09:24すべての修正が完了した後、見た目はそれほど大きく変わりませんでしたが、
00:09:29ユーザビリティは大幅に向上し、操作しやすくなっただけでなく、WCAG（ウェブアクセシビリティ）にも準拠しました。
00:09:34再度診断スキルを実行したところ、評価は「C」から「B」に上がり、
00:09:40主要な問題はすべて解決され、残るは軽微なものだけとなりました。
00:09:45これで今回の動画は終わりです。もし私たちの活動をサポートし、
00:09:50このような動画作りを応援してくださるなら、下の「スーパーサンクス」ボタンからお願いします。
00:09:55ご視聴ありがとうございました。それでは、また次の動画でお会いしましょう。