00:00:00皆さん、こんにちは。今日の動画は「Paper」についてです。Paperは、簡単に言えば
00:00:05Claude CodeやCursorのためのFigmaのようなツールです。こちらに例があります。
00:00:10Paperのデスクトップ版が起動していますが、今見ているように、すべてを
00:00:14Claude Code経由で操作できます。コンポーネントとコードを
00:00:19非常に簡単に相互変換できるのも素晴らしい点です。Vercel、Z、Dubといった企業も
00:00:24使用しており、多くの優れたプロダクトで採用されています。アプリを起動するとこんな感じです。
00:00:28これは初回起動時に表示されるデモプロジェクトです。アプリは
00:00:31paper.design/downloads からダウンロードできます。次のステップとして
00:00:35MCPサーバーをインストールする必要があります。Cursorに
00:00:40インストールする場合は、このボタンをクリックするだけです（私は既に済ませてあります）。
00:00:43では、実際にClaude Codeで試してみましょう。これをコピーします。
00:00:47これによりPaperのMCPサーバーが「user」スコープで追加されます。つまり、
00:00:53PC上のすべてのプロジェクトからアクセス可能になります。通常、MCPサーバーは
00:00:57プロジェクトごとに設定されますが、ここではトランスポートが「local」になっています。
00:01:01これでPaperのデスクトップアプリに接続されます。では、ここで
00:01:06インストールを実行します。インストールが完了したので、Claudeを開きましょう。
00:01:11ここではCmuxで4つのウィンドウを開いています。Tmuxのようなスタイルで
00:01:17Ghostyを動かしており、4つの異なるウィンドウがあるので、
00:01:19いくつか異なるデモを行いたいと思います。さて、次に
00:01:22このプロンプトをターミナルにコピーします。Paperを使って
00:01:28経費管理アプリを作ってみましょう。どうなるか見てみます。
00:01:33このようなデモが出来上がるはずですが、実際の結果を確認しましょう。その間に、
00:01:36他のタスクもいくつか走らせておきます。「Paperでデモ用の
00:01:40ランディングページを作って、私を驚かせてみて」と。うまくいくでしょうか。
00:01:44「金融アプリのダッシュボードを作って」これも実行します。それから、
00:01:48「Twitterのようなソーシャルアプリのデザインシステムを作って」。これらを
00:01:53すべて並行して実行します。どんな結果になるか私も楽しみです。
00:01:56こちらで、先ほど実行した処理の進捗が見られます。
00:02:00デザインの要約やパレットが作成されています。Claude Codeが検討を重ねて、
00:02:04Paperのアプリに追加しています。一番下まで見てみましょう。
00:02:08よし、終わりました。どんな感じか見てみましょう。ズームアウトして
00:02:13どこにあるか探してみます。おっ、他のアプリも
00:02:17構築されているのが見えますね。そしてこれが経費入力アプリです。すごいですね。
00:02:22デザインもかなりしっかりしています。実は以前に実行した時は、
00:02:25少し違うデザインになりました。他のプロジェクトもすべて
00:02:30並行して動いているのがわかります。このPaperアプリの面白いところは、
00:02:34基本的にはFigmaだということです。Figmaで使い慣れている機能は
00:02:39ほぼ揃っていて、見た目もそっくりです。ここで要素を変更したり、
00:02:43戻って編集したりすることもできます。アップロード・セクションを削除して、代わりに別のものを置く、といったことも可能です。
00:02:53そうするとどうなるか見てみましょう。裏では他のタスクも
00:02:56まだ動いています。ここに戻ると、
00:03:00アップロード・セクションが削除されているはずです。ランディングページもいい感じですね。
00:03:04「意図を持ってデザインし、制限なく創造する」。ちなみに、ここで他の
00:03:09コンポーネントも形になってきています。デザインシステムも非常にクールでプロフェッショナルです。
00:03:12これと同じものを作ってもらうのに、デザイナーに何千ドルも払う価値があるレベルです。
00:03:16本当に素晴らしいですね。もちろん、Figmaと同じように自由に編集できます。
00:03:20ランディングページの最終形はこうなりました。あとで
00:03:24ReactとTailwindを使って実装してみます。こちらが
00:03:28ダッシュボードで、もう一つのタスクも完了しました。スプリット幅が
00:03:33調整されていますね。非常にプロフェッショナルな見た目のデザインが、
00:03:36プロンプトを入力しただけで出来上がりました。これらすべてに、
00:03:42Claude CodeやCursorが提供している既存のスキル・エコシステムを利用できます。
00:03:46必要であれば、フロントエンド・デザイン・スキルを使ってこれらすべてをデザインすることも可能です。
00:03:50では、このデザインを使ってブラウザで見られるHTMLページをリクエストしてみます。
00:03:54Paperに戻って、他にもいくつかお見せしましょう。
00:03:58ここにコンポーネントがありますが、これに対して
00:04:03「Tailwindとしてコピー」や「React CSSとしてコピー」ができます。通常はコピー＆ペーストで
00:04:08持っていけますが、すぐにお見せするように、Claude Codeなら
00:04:13これを読み込んでブラウザで開くこともできます。そして、
00:04:17わあ、実際にできました。これは本当に驚きです。
00:04:20このボタンを見てください。正直、最高です。ページの
00:04:24検証（インスペクト）をしてみましょう。何が出力されたかというと、
00:04:29ここではHTMLとCSSが使われていますが、Reactや
00:04:35Tailwindで出力させることも可能です。Figmaと同じように構築でき、
00:04:40サイドバーから要素の変更も可能です。色を変えたり、
00:04:44基本的な操作はFigmaと全く同じです。このコンポーネントも
00:04:48用意しました。普通のアプリにコピー＆ペーストした時に
00:04:51どう見えるか確認したかったからです。ご覧の通り、
00:04:55ほぼ思い通りの結果になりました。ここで
00:05:00コピー＆ペーストされた内容を確認できます。これが背景コンポーネントです。
00:05:05もう一度手順をお見せします。「Tailwindとしてコピー」を選択し、
00:05:10Cursorに移動して貼り付けるだけです。すると、このようなコードになります。
00:05:14一旦元に戻しますね。これは先ほど
00:05:20経費管理アプリのために貼り付けたコンポーネントです。トップバーや金額表示などがあります。
00:05:26先ほどと同じものを、ReactとTailwindで実装した形になります。
00:05:29これが実際のアプリ内のReactコードです。これはまた別の
00:05:3420分前にプロンプトで生成したバリエーションです。これがバージョン1、
00:05:40そしてもう一方が通常のHTMLとCSSで作ったバージョンです。
00:05:44どちらも非常に高いクオリティです。Claude Codeを使って
00:05:49他のアプリがどうなるかも見てみたいですね。今デザインした
00:05:53すべての画面のHTML版をリクエストしています。また、先ほど
00:05:58「React CSSとしてコピー」してCursorに貼り付けたものですが、これは実際のアプリです。
00:06:04localhost:3001で動作しています。これは「Inbox Zero」というデモページに
00:06:09私が追加したもので、完璧に動作しています。素晴らしいですね。
00:06:13最初からレスポンシブ対応というわけではありませんが、それ以外は
00:06:18かなり堅実です。レスポンシブ化には多少の手直しが必要ですが、
00:06:22コンセプトとしては非常に面白いと思います。そしてこれが先ほどリクエストした
00:06:26HTMLバージョンです。こちらの方が
00:06:33多少レスポンシブに近いですね。一部崩れるところもありますが、先ほどのバージョンよりはマシです。
00:06:36いい感じですね。さて、次に画像生成機能も
00:06:41お見せしましょう。Command + I を押すと
00:06:46画像を生成できます。今回用意したプロンプトは、
00:06:50「Inbox ZeroというAIメールアシスタントの美しい広告を作って。これはメールボックスを素早く整理するツールです」。
00:06:54使用できるモデルがいくつかありますね。「Nano Banana Pro」を使って、
00:06:59まずはバラエティパックで試してみましょう。うまくいくといいのですが。
00:07:05はい、4つの画像の生成が始まりました。それから
00:07:10Nano Banana Proでもう一度試してみたいと思います。
00:07:14「画像を生成」をクリックします。もう一枚、別の画像が作成されます。
00:07:19お、広告が出来上がってきました。うん、
00:07:25悪くないですね。もちろん改善の余地はありますが、最初の試みとしては
00:07:29かなりクールです。これを見てください。この「Inbox Zero」のデザイン、
00:07:35下手なデザイナーよりずっといい出来です。4つの中では、
00:07:39私はこれが一番好きですね。一度の生成でこれですから、ここから
00:07:43何度もブラッシュアップできます。Nano Banana Proの結果も見てみましょう。
00:07:47これが一番印象的かもしれません。「穏やかさへの近道、AIメールアシスタント」。
00:07:51正直、ワンショットでこのグラフィックは相当すごいです。また、
00:07:55ロゴを認識しているようなのが興味深いですね。AIが「Inbox Zero」の
00:08:00ロゴを学習したのか、それとも偶然似たようなテキストデザインになったのでしょうか。
00:08:04最後に、あと2つだけお見せしたいことがあります。この画像をクリックして
00:08:09「S」キーを押すと、様々なエフェクトをかけられます。例えば
00:08:13このウォーターエフェクト。もう一度「S」を押すとリキッドメタルになります。
00:08:18元の画像とどう関係しているのか仕組みはよくわかりませんが、
00:08:21非常にクールな効果が得られます。これをランディングページで使うこともできます。
00:08:24これは生成した画像の別バージョンです。そして、もう一つ嬉しいのが
00:08:27色の整合性と正確さです。Paperは世界初の
00:08:33ユニフォーム・カラーピッカーを搭載しており、色の扱いを容易にしています。
00:08:37ご存知ない方のために説明すると、Figmaで設定した色が
00:08:41実際のウェブサイトでは違って見えることがあり、これが非常に厄介なんです。
00:08:45私たちのサイトでも青色の調整で苦労しました。Figma上の表示と
00:08:48サイト上の表示が、同じカラーコード（Hex）を使っているにもかかわらず
00:08:52一致しなかったんです。もし皆さんが私たちと同じような
00:08:56問題に直面したことがあるなら、これは非常にありがたい機能です。
00:08:59そして最後にお見せしたいのがこれです。「既存のコードベースから
00:09:04Paperでデザインシステムを作成して」。コードベースの解析が始まりました。
00:09:08これは通常のClaude Codeの動作です。使用されているフォントを抽出しています。
00:09:12ただ、残念ながら「Paper Pro」の週ごとのMCPツール利用制限に
00:09:17達してしまったようです。そのため、完成形をお見せすることはできませんが、
00:09:20要するに、既存のコードからデザインをPaper上に再現できるということです。
00:09:23それをPaperで編集し、再びコードとして
00:09:28プロジェクトに戻すことができます。これは本当に素晴らしい機能だと思います。
00:09:32この機能が特に役立つ場面として、ランディングページ用の
00:09:35デモコンポーネントを作成する際が挙げられます。
00:09:39通常は単にスクリーンショットを撮りますが、実際には少し修正を加えたいことが多いです。
00:09:43テキストを書き換えたり、本物のメールアドレスを隠したりといった作業です。
00:09:47FigmaやPaperにデザインがあれば、直接文字を打ち替えて編集できるので
00:09:50圧倒的に楽です。単なるスクリーンショットではなく、
00:09:55PNGやJPEGとして書き出すことも可能です。こちらは作成中だったTwitter風のアプリです。
00:09:58これも非常にクールなデザインですね。さて、動画を楽しんでいただけたでしょうか。
00:10:03あちこち話が飛びましたが、これが最近の私の
00:10:07コーディングスタイルです。いくつもの作業を並行して進める様子が、
00:10:10動画からも伝わったかもしれません。少しでも参考になれば幸いです。
00:10:14Paperを使って何を作ったか、ぜひ教えてください。本当に便利なツールだと思います。
00:10:17私自身、近いうちに有料版にアップグレードするつもりです。
00:10:20今後も動画をお届けしますので、チャンネル登録をお願いします。
00:10:24ご視聴ありがとうございました。