00:00:00Paperは、今AIネイティブなデザイナーたちの間で
00:00:05最も注目されているデザインツールの一つでしょう。
00:00:06AIエージェントを活用したワークフローを可能にし、キャンバスでデザインしてコードに書き出したり、
00:00:11逆にコードからデザインに戻したりすることもできます。
00:00:13つまり、完全に双方向なワークフローを実現しているのです。
00:00:15今回は、その使い方とインストール方法を解説します。
00:00:17また、これは「30日間AIネイティブデザイン・シリーズ」の一環でもあります。
00:00:22このシリーズでは、こちらのデザインを使って挑戦していただきます。
00:00:25これは前回のチャレンジで作成したものですが、
00:00:27Paperを使って、このデザインのセクションを統合・完成させてみましょう。
00:00:32チャレンジの詳細や参加方法を説明する前に、
00:00:36まずはPaperのインストール方法をご紹介します。
00:00:38paper.designにアクセスし、Docs（ドキュメント）セクションに進んでください。
00:00:41最初に、Paperのデスクトップアプリをダウンロードします。
00:00:46シンプルですぐに終わるアプリです。
00:00:48次に、皆さんは何を使っていますか？ Cursorでしょうか？
00:00:50それともClaude Codeですか？
00:00:51CodexやCopilotなど、何でも構いません。
00:00:54私はClaude Codeを使っていますが、
00:00:55インストールは非常に簡単です。
00:00:57ターミナルで「claude」と入力して起動した後、
00:01:00ドキュメントにあるこの一行をコピーして、
00:01:03貼り付けるだけでインストールが完了します。
00:01:05正しく動作するか確認するには、「/mcp」というコマンドを打ってください。
00:01:10そこに「paper」と表示されていればOKです。
00:01:13「pencil」も見えますが、これについては近い将来解説する予定です。
00:01:17さて、これがPaperのアプリ画面です。
00:01:19これを開いた状態にしておく必要があります。
00:01:21そして、CursorやClaude Codeを立ち上げ、
00:01:24MCPが接続されていることを確認してください。
00:01:26では、次のステップは何でしょうか？
00:01:27Paperの使い方はいくつかあります。
00:01:31フレームツールを使ってここでデザインを始め、
00:01:35レイアウトを作成することもできます。
00:01:37操作画面は見慣れた構成になっています。
00:01:39もしFigmaのオートレイアウトを理解していれば、
00:01:41ここでゼロから手作業でレイアウトを構築するのも簡単でしょう。
00:01:46ですが、今回はその方法は使いません。
00:01:48基本的にはClaude（あるいはCursorなど）に対し、
00:01:52何を使っているにせよ、
00:01:53「Paper MCPサーバーを使って」と指示を出し、
00:01:58レイアウトをデザインさせます。
00:02:00その上で、Paperを使ってデザインをブラッシュアップし、
00:02:02視覚的にカスタム変更を加えた後、
00:02:05再びコードへと書き戻します。
00:02:06それでは、架空のビジネス向けの
00:02:09レイアウト作成を依頼してみましょう。
00:02:10その前に、coolers.coでちょっとした実験をしたいと思います。
00:02:14昔からあるサイトですが、
00:02:16「Start the Generator」をクリックして、
00:02:18スペースキーを叩くと、
00:02:20アプリが自動的に
00:02:22様々なテーマを提案してくれます。
00:02:24もちろん、自分で色をカスタマイズすることも可能です。
00:02:28私はこのまま良さそうなのを探して...。
00:02:31お、これなんか面白そうですね。
00:02:32明るい配色で、
00:02:33カラフルな感じがいい。
00:02:36この画面のスクリーンショットを撮ります。
00:02:39下の方にカラーコードが表示されているので、
00:02:41これをClaude CodeなどのAIにコンテキストとして渡せます。
00:02:46架空のビジネスのレイアウトを作成してもらう際、
00:02:51これらの色を使うように指示を出すわけです。
00:02:53プロンプトには、Claude Codeの「フロントエンドデザイン・スキル」を使います。
00:02:59これを使うと、通常より質の高い結果が得られます。
00:03:01ただし、あまり具体的に指示をしないと、
00:03:04かなりありきたりな結果になりがちです。
00:03:08どんなものが出来上がるか見てみましょう。
00:03:10その後、Paperでそのデザインを昇華させていきます。
00:03:12まずは「/front-end design」と入力します。
00:03:15ご覧の通りですね。
00:03:17今はClaude Codeに標準搭載されているはずですが、
00:03:19もし入っていなければ、概要欄にリンクした動画で
00:03:22これを「スキル」として統合する方法を確認してください。
00:03:25では、「/front-end design」と。
00:03:28次にプロンプトを詳細に書いていきます。
00:03:29非常に短いプロンプトですが、こう書きました。
00:03:32「Paper MCPサーバーを使用すること」。
00:03:34これを明示するのが非常に重要です。
00:03:36「製品製造における品質保証にAI技術を活用する、架空の企業のモダンなSaaSレイアウトをデザインして」。
00:03:39内容は少し地味ですね。
00:03:43「デスクトップ向けのデザインで、ナビゲーションバーとヒーローセクションを含めること」。
00:03:43以上です。
00:03:47あ、もう一つ。「指定の配色を使って」。
00:03:47「添付したスクリーンショットの下部に記載されている16進数値を使用して」。
00:03:49これですね。
00:03:53「すべての色を使う必要はないけれど、
00:03:54適切なコントラストを確保し、見栄えを良くして」と付け加えます。
00:03:56これで完了です。
00:03:59エンターキーを押すと、
00:04:00Paper MCPサーバーへのアクセスに関する情報が出力され始めます。
00:04:02実際にPaperを立ち上げて、リアルタイムで進行状況を確認できます。
00:04:07あいにく、私のPCのWindows 11特有の問題で、
00:04:11画面がちらつく現象が起きています。
00:04:15これについては既に開発者に報告済みですので、
00:04:16皆さんの環境ではおそらく発生しないはずです。
00:04:18さて、出来上がったのがこちらです。
00:04:21正直なところ、かなり平凡な印象ですね。
00:04:23いかにも「AIが生成しました」という感じが拭えません。
00:04:25そこで、Paperを使ってこのデザインに視覚的な調整を加え、
00:04:27それからコードに書き戻していきましょう。
00:04:30まず何をしましょうか。
00:04:34この部分を少し広げたいですね。
00:04:36よし、こちら側に余白を作ります。
00:04:37次のステップとして、
00:04:39レイヤー構造を理解する必要があります。
00:04:42このセクションのレイヤーを見てみると、
00:04:45ヒーローセクションの中に左右2つのカラムがあります。
00:04:48この構成は変えたいですね。
00:04:51全体を中央に寄せた
00:04:56シングルカラムのセクションにして、
00:04:57背面に面白い要素を配置したいと思います。
00:05:01まずは、ここを選択して
00:05:05テキストをすべて中央揃えにし、
00:05:08幅を広げていきます。
00:05:11上部を見ると、幅（Width）が「Auto」になっていますね。
00:05:15これを「Fixed（固定）」にしたり、
00:05:17「Fill container（コンテナを満たす）」にしたり、
00:05:20「Fit content（コンテンツに合わせる）」にしたりできます。
00:05:23「Fit content」は現状と同じですね。
00:05:25「Fill container」にしてみましょう。
00:05:26これで利用可能なスペースいっぱいに広がりました。
00:05:28次に、こちらを選択します。
00:05:29ここは既にFlexboxコンテナとして設定されており、
00:05:33要素間のギャップは32になっています。
00:05:36この数値をいじると、
00:05:38要素の間隔が広がったり狭まったりするのが分かります。
00:05:44すべての要素がそのスペース内で中央に配置されるようにします。
00:05:46まだ完全には思い通りになっていませんね。
00:05:48他にも調整が必要です。
00:05:53挙動が予想と違う場合は、さらに細かくインスペクト（検証）していきます。
00:05:55例えば、このエリア。
00:05:57ここを中央揃えにします。
00:06:01中央揃えのボタンをポチポチ押していくだけです。
00:06:04これもテキストなので、中央に寄せます。
00:06:06いい感じになってきました。
00:06:08こちら側も中央に揃えていきましょう。
00:06:10これも中央に。
00:06:12よし、右クリックから「Frame Selection（選択範囲をフレーム化）」を実行します。
00:06:15お、一発でうまくいきました。
00:06:18レイアウトの機能をいろいろと試してみることが大切です。
00:06:21これはFigmaでも同じですよね。
00:06:24レイアウトの仕組みを理解する必要があります。
00:06:30なぜなら、このキャンバスは実際のブラウザ上での見え方を再現しようとしているからです。
00:06:31要素を動かす際、どう連動するかわからず少し手こずることもあるでしょう。
00:06:35慣れるまで時間をかけてみてください。
00:06:40次に、こちらのスクリーンショットを参考に、
00:06:43AIが自動で選んだ色よりも
00:06:44洗練された形で色を取り入れていきたいと思います。
00:06:46AIもいくつか色は使ってくれましたが、全部ではありませんでした。
00:06:49全部使う必要もありませんが、
00:06:55ここでさらに調整を加えるプロセスをお見せしたいんです。
00:06:58例えば、ヘッダーセクションに特定の背景色を付けたい場合。
00:07:00この「Fill（塗り）」を選択して、
00:07:05一番上の色を使ってみます。
00:07:10値は「FC6471」です。
00:07:13うわ、めちゃくちゃダサくなりましたね。テキストとのバランスが最悪です。
00:07:15なので、選択した箇所の色（Selection Colors）を調整します。
00:07:19これを白にします。
00:07:23黒かった部分も白に変えましょう。
00:07:27そして、CTRL＋左クリックで要素を直接選んで、
00:07:28こちらを太字（Bold）にします。
00:07:31「Spectral AI」。
00:07:35この黒いパーツも白にします。
00:07:37このグラデーションはあまり好きじゃないですね。
00:07:39もちろん、グラデーションもサポートされています。
00:07:43もっと明るい色にしてみましょうか。
00:07:45これは何というか、汎用的な奇妙なロゴですが、
00:07:48まあ大した問題ではありません。
00:07:51気にせず進めましょう。これを横に動かして...。
00:07:56さて、ここのコントラストがひどいですね。
00:07:57ここも白にしましょうか。
00:08:00こっちは黒にして、
00:08:04このテキストも明るい色に変更します。
00:08:11見ての通り、調整は非常に素早く簡単に行えます。
00:08:20では、この背景に何かかっこいい要素、
00:08:23例えばシェーダーエフェクトを追加してみましょう。
00:08:29ここをクリックすると「Shaders」が表示されます。
00:08:30これがこのツールの本当にクールな点の一つなのですが、
00:08:34非常に個性的で面白いシェーダーを作成できるんです。
00:08:38例えば、この「スモークリング」。
00:08:42これを試してみましょう。クリックします。
00:08:45追加すると、これはDOM（ドキュメント・オブジェクト・モデル）内の
00:08:46一つの要素として組み込まれます。
00:08:47このあたりは、馴染みのない方もいるかもしれませんが、フロントエンド開発の概念です。
00:08:51技術的なバックグラウンドがあると、このツールの良さがより分かるでしょう。
00:08:53さて、この配置（Position）を「Absolute（絶対配置）」に変更します。
00:08:57そうすることで、いわゆる「ボックスモデル」の制約から外れます。
00:09:00どこへでも自由に動かせますが、他の要素に重ねると
00:09:05その中に入り込んでしまうことがあるので注意してください。
00:09:09これをヒーローセクション全体に広がるように、
00:09:11上下左右ぴったり合わせるよう構造を整えます。
00:09:14やり方は、まず上部のX座標を0に、
00:09:20Y座標も0に設定します。
00:09:23そして、幅（Width）を100%、高さ（Height）を100%にします。
00:09:28これで、すべてが隠れてしまいましたね。
00:09:31残念ながら、今のところUI上に「Z-index」の設定が見当たりません。
00:09:35Z-indexとはCSSのプロパティで、絶対配置された要素の
00:09:39重なり順をコントロールするものです。
00:09:42本来、これは他のコンテンツの下にあるべきものです。
00:09:47重ね順、つまり要素の重なりを制御するものです。
00:09:50フローではなく、重なる順番のことですね。
00:09:52本来はこれらすべての下に配置されるべきものです。
00:09:54残念ながら、ここではそのオプションが見当たりませんが、
00:09:57PaperからClaude Codeに取り込み、ブラウザ用のHTMLとCSSに戻した後に、
00:10:04コード側で修正することができます。
00:10:05とりあえず今は、ここのパラメータを調整することで中身を確認できます。
00:10:10すべてのシェーダーには個別のパラメータがあり、右側で変更可能です。
00:10:15スピードなどを自由に変えることができます。
00:10:18ここに黒い塗り（fill）があるのがわかりますね。
00:10:21これを0%にすると……なるほど、背後の要素が見えるようになりました。
00:10:26ただ、前景（foreground）がうまく見えません。
00:10:28前景については、この色をコピーしてスモークリングに適用してみましょう。
00:10:36塗りの色をその色に変更します。
00:10:39いや、正確には前景の色ですね。
00:10:43うーん、まだ見た目がおかしいですね。
00:10:46他の要素も変更してみましょう。
00:10:50スケールや厚み（thickness）がありますね。
00:10:54おや、これは面白い。
00:10:56半径（radius）もあります。
00:10:58見ての通り、いじっているだけで最高に楽しいです。
00:11:03なかなか格好良くなってきました。
00:11:04もう少し調整してみましょう。
00:11:07よし、これで満足です。
00:11:09では、別のシェーダーも試してみましょう。
00:11:11便利なのは、これらの値を不透明度0%などに変更すると、
00:11:18背後が透けて見える点です。
00:11:19もちろん、これをブラウザでの最終成果物にはしたくありません。
00:11:23ですので、後ほどz-indexプロパティを使って修正します。
00:11:27現時点では、ここで調整できる場所が見当たらないからです。
00:11:30では、このまま進めて、
00:11:32z-indexの問題を解決した後にどう見えるか確認しましょう。
00:11:35今回はこれを使うことにします。
00:11:39これを選択状態にして、
00:11:43CursorやClaude Codeなどに取り込めるようにします。
00:11:46そしてターミナルに戻ります。
00:11:48こう指示を出します。「Paper MCPサーバーを使用して、
00:11:50Paperで選択したデザインを、動作するバニラなHTML、
00:11:53CSS、JavaScriptに変換し、index.htmlファイルに書き出して」
00:11:56すべてが完璧に変換されるように指示します。
00:11:58正確を期すため、シェーダー設定のスクリーンショットも添付しました。
00:12:01ここが重要です。開発者に確認したところ、
00:12:04現時点では必要な情報がすべて渡されているわけではないようです。
00:12:08少なくとも私の初期テストでは、シェーダーに関してそうでした。
00:12:11では、エンターキーを押して結果を見てみましょう。
00:12:14はい、完了しました。
00:12:15さあ、見てみましょう。
00:12:16こちらです。
00:12:17100%完璧な再現というわけではありませんね。特に背景のシェーダーが、
00:12:22元のデザインとは少し違って見えます。
00:12:24私のは少し異なりますね。
00:12:28より大きく、流れるようなラインになっています。
00:12:31修正するには、ここでスクリーンショットを撮ります。
00:12:34グラデーションの設定や、メッシュグラデーションの設定など、
00:12:36使用した項目のスクリーンショットを必ず撮り、
00:12:38繰り返し改善を試みてください。
00:12:42これについては、近いうちに修正されるはずです。
00:12:44シェーダーが適切に統合され、
00:12:47MCPがその情報をどう変換するかが改善されれば解決します。
00:12:51さて、皆さんに「designcourse.com」へ行ってほしいと思います。
00:12:56下のリンクから、30日間の「AIネイティブ・デザイナー」
00:13:01チャレンジシリーズに参加してください。
00:13:04そこでPaperを使ってください。
00:13:06無料アカウントで、このデザインを完成させることができます。
00:13:11これは前回のチャレンジで取り組んだものです。
00:13:14今見えている、この暗いセクションに、
00:13:17「Your design here（あなたのデザインをここに）」とあります。
00:13:18今私たちがやったのと同じフローで、Paperを使って完成させてください。
00:13:24チャレンジページにあるアセットをダウンロードしてください。
00:13:27ここにあるようなHTMLが含まれていますので、
00:13:30Paperを使ってその下のデザインを完成させましょう。
00:13:33Figmaにあるチャレンジページです。
00:13:35必要であればこれを参考にしてください。
00:13:38使わなくても構いません。
00:13:39手順を説明します。
00:13:40まず無料アカウントを作成します。
00:13:42チャレンジページから index.html アセットをダウンロードします。
00:13:45Paperを使って、このセクションの空きスペースをデザインしてください。
00:13:49ここにあなたのデザインが入ります。
00:13:52デザインも文言も自由です。
00:13:54ただ、全体がシームレスである必要があります。
00:13:56また、次のセクションも自由に作成して構いませんし、
00:13:59アニメーションやインタラクティブ要素を組み込むのも自由です。
00:14:02その場合は、ビデオキャプチャをアップロードしてください。
00:14:04私たちのシステムは動画のアップロードに対応しています。
00:14:07皆さんが何を作ってくれるのか、本当に楽しみです。
00:14:09いつものように8作品から10作品ほど選んで、
00:14:13動画でレビューを行う予定です。どんな作品が出てくるか期待しています。
00:14:16デザインの未来は本当にエキサイティングです。
00:14:18今、AIエージェントによるワークフローを実現するツールが次々と登場しています。
00:14:24Paperもその一つですし、Pencilというツールもあります。今後も増えていくでしょう。
00:14:28どこが業界のトップに立つか楽しみですね。
00:14:30Figmaでしょうか？
00:14:31どうなるか分かりません。
00:14:32見守っていきましょう。
00:14:33それでは、またすぐにお会いしましょう。
00:14:34さようなら。