Claude Designは、AnthropicがOpus 4.7をベースに開発した最新のビジュアルデザインツールである。静的なモックアップではなく、クリック可能なインターフェース、スライドデッキ、ランディングページ、さらには音声・動画・3D・シェーダーを組み込んだインタラクティブな体験を生成できる点が特徴だ。Figmaの代替ではなく、空白のキャンバスを埋める最初の下書きを生成するツールとして位置づけられており、生成後はFigmaやCanvaで仕上げる想定となっている。利用にはProまたはMaxプランの契約が必要で、特にMaxプランが推奨される。デザインシステムの事前設定により、ブランドに沿った一貫性のある出力が可能となり、トークン消費を抑えつつ効率的なワークフローを実現できる。ワイヤーフレームから高精度デザインへの展開、微調整機能の活用、アニメーション生成など、多彩な機能を備えた次世代デザインツールである。
Claude Designとは何か
この動画では、Claude Designとは何か、どのように始めればいいのか、そしてスライドデッキやプロトタイプ、インタラクティブ動画の作り方、さらに初日に誰かが教えてくれたら良かったと思うプロのヒントまで、すべてお見せします。では、始めましょう。
Claude Designとは何でしょうか。Claude DesignはAnthropicが最近リリースした新しいビジュアルツールで、これまでで最も高性能なモデルであるOpus 4.7をベースに構築されています。基本的には、プロンプトを入力すると、Claudeが最初の下書きを生成し、それを洗練させていく、というループになります。
しかし、これが他と違うのはこういう点です。単なる静的なモックアップを作るのではなく、コードで動くプロトタイプを作るのです。クリック可能なインターフェース、スライドデッキ、ランディングページ、ワンページャー、そして音声、動画、3D、シェーダーが組み込まれたインタラクティブな体験などを生成できます。
重要なのは、このツールはFigmaを置き換えるものではなく、空白のキャンバスを置き換えるものだということです。基本的には、このツールを使って最初の下書きを生成し、それをFigmaやCanvaにエクスポートして仕上げるわけです。
始め方と料金プラン
アクセスはとても簡単です。claude.ai/designにアクセスするだけです。では、料金について簡単にお話ししましょう。これは驚くかもしれません。
Claude Designは無料では使えません。ProまたはMaxのサブスクリプションプランが必要になります。もし本気でこれを使い倒したいなら、Maxサブスクリプションプランを取得するのがベストでしょう。なぜなら、私が知っている人のほぼ全員が、数回試しただけで使用量の上限に達してしまっているからです。
使用量を追跡したい場合、特にClaude Designの場合は、こうすることをお勧めします。プロンプトを入力し始める前に、このタブを開いておきましょう。アイコンをクリックして、設定をクリックし、次に使用量に移動します。そして、Claude Designについては、プロンプトを入力するたびに、Claude Designの週間使用制限を確認するようにしてください。実は、これには別の使用制限があるので注意が必要です。
そして覚えておいてください。ここでの使用量は他の制限にはカウントされないと書いてあります。つまり、完全に別なのです。ですから、実験している間はこれに注意を払っておくことをお勧めします。非常に早く使い切ってしまう可能性がありますから。
デザインシステムのセットアップ
さて、Claude Designにアクセスしたら、最初にやるべきことの一つは、デザインシステムを用意することです。
これは絶対にやる価値があります。なぜなら、これをやらないと、将来的に何度もプロンプトを入力することになり、それは完全に時間の無駄だからです。デザインシステムをクリックして、デザインシステムのセットアップを始めましょう。
デザインシステムのセットアップはかなり簡単ですが、手動でやるのではなく、AIの助けを借りることをお勧めします。
これは基本的に、自分にブランドガイドを与えているようなものです。そうすることで、AIがファイルを出力する際に、ブランドに沿ってどのようにデザインすればいいかを正確に把握でき、混乱することがありません。これは時間を節約するだけでなく、トークンと計算量も節約します。なぜなら、AIがすでにデザインしたものを修正したり変更したりするように頼む必要がなくなるからです。
最初の試行で正しく仕上げてくれるのです。では、これを正しく行うために何をすべきか、お見せしましょう。
これを行うには、画像機能を持つAIであれば、どのAIのチャット機能も使えます。まず、既存のブランドから画像をいくつか取得します。そして、私が言うのは、デザイナーに渡せるスタイルガイドまたはブランドガイドを作成して、私のブランドであるAI Gridのブランドを保てるようにしてください、ということです。
PDFとしてエクスポートしてください、と言います。これを行う理由は、Claudeが実際に私たちのブランドの詳細を把握できるようにするためです。すでに特定のブランドガイドラインを持っていない限り、これが最も簡単に入手できる方法です。あるいは、AIがその作業に苦労していることを考えると、おそらくもっと良いのは、ロゴをスクリーンショットとしてアップロードすることです。
では、生成を続けましょう。デザインシステムの生成には5分かかりますので、これを生成して待ちましょう。
5分後、デザインシステムが無事に構築されました。もしClaude が実際にあなたのフォントにアクセスできない場合、求められることの一つは、その特定のフォントをアップロードすることです。
もちろん、私は自分のフォントが何か正確に知っているので、今それを行います。皆さんにも同じようにすることをお勧めします。そうすれば、あなたのブランドを完璧に再現できます。そうしなければ、他に何を確認する必要があるか、先に進んでチェックできます。
これをクリックして下を見ていくと、「要確認」というタブが表示されます。承認する前に確認が必要なものが12個あります。
承認するか却下するかを選びたい場合は、それぞれをクリックして、「問題なし」または「要改善」と言えます。今、私がやろうとしているのは、さらにフォントファイルをアップロードすることです。なぜなら、Claudeは基本的に、一つのフォントスタイルだけでは使えないと言っているからです。これは些細なことですが、デザインの世界にいる人なら、基本的に異なる目的のために複数のフォントが必要だということを知っているでしょう。
できるだけ多くのファイルをアップロードするのがベストです。そうすれば、Claudeが作業を完了するために必要なすべてのコンテキストを得られます。
すべての変更を行い、すべてに満足したら、すべてに「問題なし」をクリックするようにしてください。そうすれば、Claudeが今後これらのミスをしないことを確実にできます。
これらを一つ一つクリックするのは少し面倒に思えるかもしれません。問題なし、問題なし、とクリックするのは。でも、これはやる価値があると思います。なぜなら、やらなければ、将来のあなたがさらに多くの編集をしなければならなくなり、それにはもっと使用量がかかるからです。ですから、今やっておくのがベストです。
それが終わったら、このシステムを使って新しいデザインを作成できます。
デザインシステムの管理
では、メインページに戻ると、ここにAI Gridデザインシステムがあります。もし実際に失敗した場合、たとえばデザインシステムが気に入らなかった場合は、いつでも戻って、クリックして、そのデザインシステムを編集し直すことができます。あるいは、チームと共有することもできます。
そうすれば、チームメンバーもClaude Designを使っている場合、そのデザインシステムを使うことができます。また、たとえば複数の異なるブランドを所有している場合、デザインシステムをクリックして、再び新しいデザインシステムを作成できます。複数のブランドを所有していても、ここでは問題ありません。
複数の異なるサブブランドや異なるスタイルを運営しようとしても問題にはなりません。完全に異なるブランドがある場合は、ここに情報を入力してください。完了すると、そこに表示されるように、2つ目のデザインシステムがポップアップします。
ワイヤーフレームと高精度デザインの違い
では、ここからプロトタイプの作成を始めることができます。ここで、ワイヤーフレームと高精度の違いがあります。ワイヤーフレームは基本的にただのワイヤーフレームで、詳細がすべて含まれていない非常に基本的なものです。一方、高精度は全く異なります。2つの違いをお見せしましょう。そうすれば、どちらかでクレジットを無駄にすることがありません。
これをAI Gridランディングページと呼びましょう。なぜなら、私は desperately 必要としているからです。では、作成をクリックして、私のAIニュースレターのランディングページを作ってください、と言うだけにします。そして、設定をクリックしましょう。
ここで、多くの質問が表示されます。それによって、デザインをさらに良くすることができます。
これは、あまり良いプロンプトを持っていないときによく起こります。ですから、初心者の方、このチュートリアルを見ている方は、常に最高のプロンプトやプロンプトタグを入力する必要はありません。基本的なものを入力するのが常にベストで、Claudeが正確に何が必要かを確認してくれます。
では、これを使ってAI Grid Weeklyと呼びましょう。
コアバリュープロポジションは、無料で提供される最高のAIツールとワークフローとしましょう。次に、ここをクリックして、これは週刊ニュースレターだと言います。そして、これはツール、製品、スポットライト、主要なCTA、メールサインアップフォームだと言います。はい、購読者アカウント。次に、ここでいいえと言い、そしてクリーンでミニマルと言い、それから中程度と言います。
そして、続けるをクリックしましょう。
ここで、これが基本的にワイヤーフレームであることがわかります。これが基本的に良い理由は、実際に作る前に、潜在的に持てるものをプレビューできるからです。これはさまざまな理由で便利です。時間を節約するだけでなく、完成品を作る前に詳細を編集できるからです。
これはまだ便利だということを覚えておいてください。実際のデザイナーにこれをやってもらいたい場合や、自分で変更を加えたい場合もあるからです。ここで、スプリットヒーロー、統計主導のビルドがあることがわかります。これは本当に便利です。
ワイヤーフレームについて最後に言える非常に便利なことは、ユーザーエクスペリエンスを改善できることです。
これはもちろん、少し高度です。初心者は本当にこれをする必要はありませんが、アイデアを素早くテストするのに完璧です。すぐに3つの異なるエリアを得られたことがわかります。そして、ここで私が気に入っているのは、この統計主導のビルドであることは明らかだと思います。
もちろん、見ているものが本当に気に入らない場合は、編集ボタンを使って完全に変更できます。
詳細な編集機能
編集ボタンをクリックして、編集したい選択エリアをクリックすると、たとえばここでは、正確に何を編集したいかを編集できます。これを行うことが重要です。なぜなら、ただ話して編集すると、トークンがはるかに多くかかるからです。
細かい変更をしたい場合、たとえば他のページで何かを編集したり削除したりしたい場合は、任意の単語でこれを行うことができます。
たとえば、これを4,000に変更できます。特定の単語を編集できます。これは非常に便利で、もちろん色、マージン、半径も編集できます。本当に創造的になりたい場合は、描画アイコンをクリックすれば、そこでさらに多くのことができます。これは、Claudeに変更を加えるように視覚的に依頼するときに役立ちます。
もちろん、今あるものが気に入った場合は、ここでエクスポートできます。ここにいくつかの異なるエクスポートオプションがあります。これらの多くは、編集がはるかに簡単な異なるプログラムにエクスポートできます。
では、たとえば、この統計主導のビルドが実際に気に入った場合、統計主導のビルドを高精度のランディングページに変換してください、もはやワイヤーフレームではなく、と言います。
では、送信をクリックしましょう。
使用量の管理とランディングページの生成
さて、覚えておいてください。このプロジェクトが進むにつれて、使用量に注目し続けてください。それほど多くのことはしていませんが、すでに全使用量の61%を使い切っていることがわかります。
では、実際にここで何ができるか見てみましょう。ワイヤーフレームを完全に素晴らしいランディングページに変換できたことがわかります。
そして言わなければなりません。これは、私が使った他のAIツールと比べて非常に効果的です。左上に私のロゴがあり、適切なエリアと境界線があることがわかります。本当に、これがこのプラットフォームを使うときのワークフローのやり方だと言えます。
もちろん、いくつか変更を加えることもできます。
ここでは、使えるボタンが表示されます。グロー効果や統計の数字をオンまたはオフにできます。もちろん、先ほど言ったように、何かを編集したい場合は、同じ編集ボタンを使えます。これにより、トークンを消費するのではなく、より細かい編集が可能になります。
ランディングページや特定のプロジェクトで使用している他のものに戻りたい場合は、ここのタブを見て確認でき、左から右にナビゲートできます。ホームページに戻る必要がないので便利です。
プロジェクトが多すぎて、それらを編集または削除したい場合は、ここに入って、ホバーして、右クリックすれば、名前を変更するか削除するかを選べます。これの名前を変更して、AI Grid Landing Page Fullと言います。エンターをクリックすると、そこに表示されます。
Tweaks機能の活用
もちろん、ここでClaude Designが本当に得意な他のデザイン作品をどのように作成できるかをお見せします。
Claude Designで本当にクリエイティブになれることに、ほとんどの人が気づいていない重要なことは、このTweaks機能です。Tweaksが何をできるかというと、その場でデザイン変更を加えることができるということです。そうでなければできないことであり、実際にトークンを節約できます。
初期プロンプトを入力しているときに、右下のこれらのTweaksがどのようにプロンプトできるかの例をお見せしましょう。そうすれば、トークンを節約でき、自分の製品の異なるバリエーションを表示できます。
自分でこれを行うことができます。ホームをクリックして、サンプルに移動すると、虹色のカードまでずっとスクロールすると、ここで彼らがこれをプロンプトしたのがわかります。虹色のカードで、「豊かな遠近法ホラー効果とグローで表示される単色のトランプカードを作成してください」と言いました。
しかし、重要なのは最後に追加したことです。「この効果のできるだけ多くの側面にTweaksを追加してください」と言いました。Tweaksは基本的に小さな変更で、プロジェクト全体を再レンダリングせずに表示されるものを変更できることがわかります。ここで、色相、虹色、グロー、ノイズ、変更できる非常に多くの要素を変更できることがわかります。これは、どのようなデザインが欲しいかによって本当に便利です。
これは、この構造キット計算機でも再び行われたことがわかります。再び、「多くのTweaksを備えたシンプルな計算機UIを提供してください。通常のTweaksシステムを使用しないでください。これらのTweaksを常に画面に表示してください」と言いました。丸い、鋭い、これらの小さなデザインの側面を変更することがわかります。このものの形が異なる方法を見ることができます。
サイズ、中央、左があります。これらすべてのことは、Claudeに「これを左に置けますか?ここのフォントを変更できますか?これやあれをできますか?」と尋ねるのではなく、基本的にTweaksとは何かというと、手動で入りすべてを編集する必要なく、ボタンで細かく編集する方法なのです。
アニメーション機能の活用
さて、私が継続的に目にする別の使用例は、Claudeがアニメーションを作れることです。ここでのアニメーションは本当にクールですが、唯一の問題は、非常にコンピュータ集約的だということです。
「天体の距離について楽しい事実を提供するスプライトベースのアニメーションを作成してください」と言うと、このアニメーションがポップアップします。
唯一の問題は、これらのアニメーションが実行されると、基本的に使用制限全体を使い切ってしまうことです。Proプランでこれを行いたい場合、60秒のビデオに対して1つまたは2つのプロンプトしか得られないことを覚悟してください。
非常に良いビデオを作成してくれますが、問題は、システムをさらに使用するためのクレジットが残らないということです。
これは非常に重要です。なぜなら、人々はこのシステムがどれだけのクレジットを消費できるかを理解していないからです。しかし、それ以外では、アニメーションを作成できるのは本当に便利です。長すぎたり短すぎたりしないようにして、必要なものを正確に得られるようにすることをお勧めします。
そして、使用できるのは非常に基本的なアニメーションだけであることを覚えておいてください。
クレイジーなモーショングラフィックスエディタではなく、非常に基本的なものですが、それでも非常に便利なものです。
Claude Designの隠れた機能
さて、Claude Designについてほとんどの人が気づいていないことは、Claudeには実に多くの異なるスキルがあるということです。これらの秘密のスキルを見たい場合は、デザインシステムをクリックすると、Claudeがすでに持っているすべての現在のスキルとデザインシステムがポップアップします。
これは、Claudeが持っているすべてのネイティブフォーマットで、非常に得意なものを示しています。ここで、アニメーションビデオのものがあることがわかります。これを使用すると、基本的に、シンプルなプロンプトを実行するよりもはるかに良い方法でアニメーションビデオをデザインします。
再び進むと、インタラクティブプロトタイプがあります。ここでインタラクティブプロトタイプを作成できます。
再び、ここにスライドデッキがあります。また、Make It Tweakableもあります。これについては先ほど話しました。次に、フロントエンドデザイン、ワイヤーフレーム、PowerPointがあります。PowerPointに適したものがここにあります。そこにエクスポートしたい場合は、非常に効果的です。
次に、PDFとして保存があります。基本的に、PDFが綺麗に出力されるように作成します。
そして、これらのいずれかを事前に使用することを確認してください。なぜなら、使用しないと、やろうとしていることに関して最良の出力にならないからです。ですから、これらのスキルを使用することを確認し、何かを作成するときは常にデザインシステムがクリックされていることを確認することを忘れないでください。
コメント