스크립트
00:00:00多くの人が誤解していることがあります。
00:00:01モデルのデザイン能力は飛躍的に向上しており、日々進化し続けています。
00:00:05しかし、ある時点から、どの素晴らしいデザインも同じように見え始めます。
00:00:08そこで本当の問題は、あなたのデザインをどう際立たせるかということです。
00:00:12その多くは、適切なプロンプトと指示にかかっています。
00:00:15ここでスキルが重要になります。実際に機能するものをパッケージ化して
00:00:19誰とでも共有できる再利用可能なワークフローにできるからです。
00:00:21そのため、多くの人がデザイン用のスキルを構築しており、その中でも最高のものは
00:00:25ツール開発チームから直接提供されています。
00:00:27しかし、すべてのスキルを使う価値があるわけではなく、多くはデザインの
00:00:31役に立ちません。
00:00:32背景として、私たちはソフトウェア企業であり、チャンネル名は「AI Labs」です。
00:00:37このチャンネルでは、自分たちのプロセスを最適化したように、AIでプロセスを最適化する方法を紹介しています。
00:00:41よりクリエイティブなスキルのいくつかに入る前に、他の多くのデザインスキルの
00:00:46基礎となるものから始めましょう。
00:00:48Anthropicのフロントエンドデザインスキルは、サイトのデザインの方向性を形作るものであり、
00:00:53前回の動画でも使用しました。
00:00:55AIで十分な数のランディングページを生成していくと、ある傾向に気づき始めます。
00:01:00なぜか同じように感じられるというパターンに気づくでしょう。
00:01:03それは、モデルが同じパターンで満たされた膨大なデータから学習したからです。
00:01:07そのため、デザインの判断を下す必要があるときはいつでも、最も一般的なものに頼ってしまいます。
00:01:11その結果、プロジェクトが実際にはどのようなものであっても、デザインは安全で一般的な選択肢へと流されていきます。
00:01:16それがこのスキルが解決する問題です。
00:01:17それがまさにこのスキルが解決する問題です。
00:01:19何かを書き始める前に、モデルに実際のデザインの方向性を強制することで、無難な選択から脱却させます。
00:01:24書き始める前に。
00:01:25無難で一般的な見た目にデフォルトで頼る代わりに、方向性を一つ選び、それを一貫させます。
00:01:30一貫させます。
00:01:30また、skill.mdファイル（基本的にはスキルの指示書）の中で、通常のAIスロップ（凡庸なデザイン）を直接指摘しています。
00:01:36そのため、モデルが使い古された同じフォントや、
00:01:41白背景の紫のグラデーションに頼るのをやめます。
00:01:42そして、それは聞こえる以上に重要です。
00:01:44なぜなら、ほとんどのモデルはランディングページを作成する際、正しく作ることを最適化しているからです。
00:01:48しかし、このスキルは代わりにデザインの方向性を決めるよう促します。
00:01:52そのため、私たちは主にランディングページやポートフォリオでこのスキルを使います。デザイン自体が製品の一部であり、
00:01:56始める前にモデルにより強い視点を与えてくれるからです。
00:02:00テストするために、ランディングページの作成を依頼し、要件を伝えました。
00:02:03すると、通常のデフォルトに流されることなく、定めたデザインの方向性を守ったため、
00:02:08お決まりのAIスロップがないサイトが生成されました。
00:02:11AI Labsのデザインシステムには、それぞれ異なるタスク用に作られた2つのスキルがあります。
00:02:15ダッシュボードのように、人々が実際に使用しなければならないUIを構築する機能的なスキルがあります。
00:02:20そして、マーケティングUI用のものもあります。
00:02:22マーケティング用の中では、skill.mdは「デフォルトを壊す（break the default）」というプロンプトを使用しています。
00:02:27それは基本的にAnthropicのフロントエンドデザインスキルです。
00:02:29少し変更を加えたものです。
00:02:31オリジナル版が新しいモデルに対して少し古くなってきたため、変更を加えました。
00:02:35Opus 4.8やFable 5はいずれも、Claudeの変化や、
00:02:40与える指示も変える必要があることを示すプロンプトガイドとともにリリースされました。
00:02:42そのため、そのバージョンを独自のデザインシステムに組み込みました。
00:02:45すでに述べたように、Anthropicのデザインスキルは機能的なUIではうまく機能しません。
00:02:50実際の製品を作り始めると、問題は完全に変わります。
00:02:53単に見栄えを良くしようとしているだけではなくなります。
00:02:55製品として機能するものを構築しようとしており、
00:02:58すべてのコンポーネントが正しく動作する必要があります。
00:03:01ここで、ランディングページから実際のアプリケーションへと移行します。
00:03:04例えば、AI Labs Proでは、コミュニティの実際の機能レイヤーとは対照的に、
00:03:09ランディングページの方がはるかに芸術的なデザイン言語を持っていることがわかります。機能レイヤーは、
00:03:14これまでに関わった他のどのWebインターフェースとも同じように、非常に退屈でシンプルに見えます。
00:03:18そこで登場するのがShadCNです。
00:03:20もちろん、モデルは自分自身でダッシュボードを構築することができます。
00:03:23しかし、ダッシュボードで一般的に使用されるコンポーネントはすべてすでに存在しており、
00:03:27実際の人間によってプロの基準に合わせて作られています。
00:03:29そのため、モデルが一からコンポーネントを生成したり、自分でアニメーションを設定したりする必要はありません。
00:03:34レジストリにあらかじめビルドされているコンポーネントを引っ張ってくるだけで済みます。
00:03:38それは基本的に、すぐに使えるコンポーネントの大きなライブラリです。
00:03:41それこそがShadCNの神髄です。
00:03:43モデルが各コンポーネントを手作業で構築する代わりに、
00:03:46すでにプロレベルで構築されたパーツのライブラリから取得し、アプリで使用します。
00:03:51それこそが、結果が本物の製品のように感じられる理由です。
00:03:53大まかな初稿から始めて少しずつ修正していくわけではないからです。
00:03:57最初から出荷用に作られたパーツから始めるのです。
00:03:59ShadCNの設定には、連携して動作する2つのパーツがあります。
00:04:021つ目はスキルです。
00:04:03ルールブックと考えてください。
00:04:05ShadCNには特定かつ正しい構築方法があり、スキルにはそれらのルールがすべて含まれています。
00:04:10さらに、自身のプロジェクトがどのように設定されているかも確認します。
00:04:12そのため、モデルに何かを作るよう依頼したとき、
00:04:15スキルによって、結果がShadCNのルールに従い、プロジェクトの既存の仕組みに適合するようになります。
00:04:20そのメリットはシンプルです。
00:04:21同じ間違いを何度も修正し直す必要がなく、最初からクリーンな出力が得られます。
00:04:262つ目はShadCN MCPです。
00:04:29これは基本的にShadCNのレジストリへのライブ接続であり、
00:04:32モデルが実際のコンポーネントを閲覧してプロジェクトに直接取り込むことを可能にします。
00:04:36こう思うかもしれません。
00:04:37すでにMCPが存在し必要なコンポーネントを提供してくれるのに、なぜわざわざスキルを使うのかと。
00:04:41答えは、スキルはMCPのように常にコンテキストウィンドウに常駐するのではなく、
00:04:44実際に必要なときにだけロードされるからです。
00:04:48ShadCNスキルはコーディングエージェントにルールを与えます。
00:04:50パターンや、プロジェクトに関するコンテキストを与えます。
00:04:53これらが合わさることで、コンポーネントを正しく使用する判断力が与えられます。
00:04:56通常のアプリであれば、コンポーネントを1つずつ構築していき、そのアプローチもうまくいきます。
00:05:00そのため、それがそのままダッシュボードにも引き継がれると期待するかもしれません。
00:05:03そして、それは部分的にはその通りです。
00:05:04しかし、ダッシュボードには通常のアプリとは異なる根本的な問題があります。
00:05:07コンポーネントの一貫性を保つことよりも、すべての情報が画面上にどのように配置されるかが重要です。
00:05:12画面上にどのように配置されるかです。
00:05:12つまり、データをどのようにグループ化するか、また雑然としすぎる前に1つの画面にどれだけの情報を収められるかを考える必要があります。
00:05:17そのため、まさにそのために作られた「dashboard」という別のスキルが存在します。
00:05:21ShadCNではなく、別の開発者によって作られたものです。
00:05:23そして、その配置についてモデルに深く考えさせます。
00:05:26その配置について事前に推論するため、結果として雑然としたものにならず、
00:05:30本当に本物の分析ツールのようになります。
00:05:33UIUX Pro Maxは、ここまでのものとは異なる仕組みで動作します。
00:05:36ほとんどのスキルはモデルにいくつかのデザイン原則を与え、それを適用することを信頼します。
00:05:40しかし、このスキルは最初に実際のエンジンを実行します。
00:05:43その構築の背景にある問題は、優れた方向性と堅実なコンポーネントのセットがあっても、
00:05:47モデルは製品にどのようなデザインの選択肢が適しているかを自分で決定しなければならないということです。
00:05:51ほとんどのスキルは、デザインを「良いもの」という1つの一般的なアイデアとして扱います。
00:05:54そのため、何を構築しているかに関わらず、すべてが同じ見た目に流されてしまいます。
00:05:58そして、それがこのスキルが埋めるギャップです。
00:06:00何かを作るよう頼んだとき、すぐにコードに飛びつくことはありません。
00:06:03まずエンジンを実行します。
00:06:04裏でこのエンジンは、GitHub上の独自のオープンソースデータベースに対して、
00:06:09一度に5つの検索を実行します。
00:06:11161の業界カテゴリから、あなたの製品に適合するスタイルを引き出します。
00:06:15そしてその選択肢の中から、構築している業界に実際に適したカラーパレット、
00:06:20フォントの組み合わせ、ページレイアウトを選びます。
00:06:22次に、その種の製品にとって不自然に見えるものをすべて除外し、
00:06:26モデルに合わせたデザインシステムを渡します。それは基本的に、モデルがウェブサイトを構築する際に従う完全なルールブックです。
00:06:31ルールブックとなります。
00:06:32その結果、ウェブサイトのアイデアに合わせてすべてのデザイン属性が一致した、非常に強力なウェブサイトが手に入ります。
00:06:37モデルがデザインを発明してうまくいくことを祈るのではなく、
00:06:41あなたの具体的なユースケースに合わせて実際に推論されたものから構築します。
00:06:44このスキルは他のものとは本当に異なります。
00:06:46他のスキルがモデルにより良いセンスを与えるのに対し、このスキルは開始前に決定を与え、
00:06:50実際に作成している製品の種類に合わせて調整します。
00:06:53先に進む前に、スポンサーであるSciSpaceについてご紹介します。
00:06:56何らかのリサーチを行う際、おそらくChatGPTを使用したことがあるでしょう。
00:07:00問題は、存在しない引用や論文を自信満々にでっち上げることであり、
00:07:04その偽の引用がすでに自分の論文に掲載された後でようやく気づくことがよくあります。
00:07:08SciSpaceはその問題を解決し、現在ではChatGPTの中に直接組み込まれています。
00:07:12テストするために、SciSpaceを開いてプロフィールに移動し、そこからChatGPTアプリを選択して
00:07:17SciSpaceを接続しました。
00:07:18文献レビューを依頼したところ、ChatGPTは2億8000万件以上の実際の論文を収蔵するSciSpaceのライブラリから関連する研究を引っ張ってきました。
00:07:242億8000万件以上の実際の論文。
00:07:25また、それらを要約し、ハルシネーション（幻覚）を起こす代わりに、実際のクリック可能な引用を提供してくれました。
00:07:30すべての引用はソースに直接リンクしています。
00:07:33そのため、ワンクリックで論文を開いて正確な行を自分で確認することができます。
00:07:37直接対決のテストでは、ElicitやConsenSysのようなツールよりも多くの関連論文を提示してくれました。
00:07:42そのため、学生や研究者であれば、説明欄にある最初のリンクを使ってChatGPT内のSciSpaceアプリを接続し、
00:07:48最終的に信頼できるリサーチを始めましょう。
00:07:52これまでに私たちが追加したものはすべて、静止した状態でのサイトの見た目を正しくするものです。
00:07:56しかし、静的なページだけでは限界があります。
00:07:58アニメーションは、ユーザー体験を向上させ、ウェブサイトの滞在時間を延ばすため、実際には非常に重要です。
00:08:04しかし問題は、アニメーションこそがAI生成コードの破綻する部分であるということです。
00:08:09実際の問題は、モデルにアニメーションの追加を依頼すると、ほぼ確実に全く同じことをしてしまう点にあります。
00:08:15つまり、ページを下にスクロールするにつれて要素がビュー内にスライドインするという処理です。その1つのスクロール演出は基本的に
00:08:20それが知っている唯一の手法です。しかし、それは世の中にあるAI構築サイトの半分で見られる同じアニメーションでもあり、
00:08:25本物のモーションができることには遠く及びません。
00:08:27ここで登場するのがGSAPスキルです。GSAPは多くのプロ仕様のサイトですでに稼働しているアニメーションライブラリであり、
00:08:32このスキルはそれを構築しているチームから直接提供されています。そのため、モデルが動作を推測するのではなく、
00:08:37正しいパターンに基づいて機能します。基本的な動きから、ページをスクロールする際に再生される
00:08:42ダイナミックなアニメーションまで、すべてをカバーしています。さらに、ほとんどの人が軽視しがちなパフォーマンス面も処理してくれます。
00:08:47AIアニメーションがカクついて感じる大きな理由は、モデルが要素のサイズや位置を変更することで移動させるためであり、
00:08:52そうした変更によってブラウザがすべてのフレームでページ全体を再構築せざるを得なくなるからです。
00:08:57そのため、このスキルはブラウザが簡単に処理できる種類の動きへとモデルを導きます。
00:09:02その1つの習慣だけでも、アニメーションをスムーズに保つことができます。GSAPはランディングページや
00:09:07スクロール連動型ストーリーテリングで最も真価を発揮します。ここではすべてが物語のように明らかにされ、
00:09:12重要な詳細が視聴者にしっかりと伝わります。それこそが、ウェブサイトを静的なページから動的なページへと引き上げるものです。
00:09:16これが、AI Labsのデザインシステムにおいて、マーケティングUIスキルの中で、アニメーションが必要な場合には必ずGSAPスキルを使用して
00:09:22ランディングページにそれらのアニメーションを実装すべきであると明記している理由です。
00:09:27次のスキルグループはフルシステム用ではありません。特定の好みのルックへとモデルを誘導するためにドロップインする
00:09:33テイストプリセットです。
00:09:38最初はミニマリストUIです。ページに情報を詰め込みすぎる代わりに、
00:09:43シンプルで開放的な状態を保つデザインタイプです。新聞やブログサイトなど、すべてが注意を引こうと競い合うのではなく、
00:09:49コンテンツにゆとりを持たせたいときに選ぶものです。その対極にあるのが、
00:09:54反企業的なスタイルを持つ、生々しくヘビーなインダストリアル・ブルータリストUIスキルです。次に、
00:09:59極端なものを望まない場合に確実なデフォルトを提供する、汎用的な万能のフロントエンドUI UXがあります。これは
00:10:05クリーンでプロフェッショナルに見せる必要がある製品やビジネスのランディングページにとって安全な選択です。そして、
00:10:10サイトを高級ファッションブランドのランディングページのように見せるプレミアム・フロントエンドUIスキルがあります。
00:10:16そのため、これらを一度にすべて積み重ねるわけではありません。その代わり、求めている雰囲気に一致するものを選び、
00:10:21デザインをそれに導かせます。頭の中にすでに方向性がある場合、これらはそれをモデルに直接伝える最も早い方法です。
00:10:25この時点までに、構造がしっかりしていて、動きが心地よく、独自のスタイルを持ったサイトを構築できるようになります。
00:10:30しかし、プロレベルのウェブサイトには、アニメーションだけ以上のものが必要です。プロ仕様のアプリには、
00:10:36本物の画像や動画のビジュアルが必要です。モデル単体では、インターネットからストック画像を適当に拾ってくることがほとんどであり、
00:10:41その多くは実際には必要なものに一致しません。それをスキップするために私たちが使用するのが
00:10:46Higgsfieldです。画像や動画の生成をエージェントに直接組み込んでいるため、
00:10:51ターミナルを離れることなく、作業している場所から直接ヒーロー画像や背景クリップを要求できます。
00:10:56さらに、Higgsfieldは1つのモデルに縛られていません。優れた画像・動画モデルの大部分を備えているため、
00:11:011つの強みに縛られることなく、自分に適したものを利用できます。動画を作成する場合は、
00:11:06現在最高の動画生成モデルの1つであるCdanceを使用する価値があります。これにより、ウェブサイト上で
00:11:12静的なテキストや灰色のプレースホルダーボックスの代わりに、本物のビジュアルを得ることができます。前の
00:11:17スキルはすべてウェブ用でした。次はモバイルスキルについて解説します。AIが生成したUIの多くが
00:11:23ひそかに破綻してしまうのは、単純な理由からです。モデルは携帯電話を小さなウェブサイトのように扱い、ウェブの習慣をそのまま
00:11:29縮小させがちだからです。しかし、モバイルは小さなウェブではありません。独自のルールを持つ別物です。人々が
00:11:35親指で実際に届く範囲でスマホをどう持つか、ナビゲーションがどう機能すべきか、すべてが異なり、
00:11:40各プラットフォームにはモデルが通常適切に従わない独自のデザイン言語が存在します。そこには
00:11:45モバイル開発を最適化するための複数のスキルもあります。1つ目はモバイルアプリUIデザイン、つまり
00:11:51原則のレイヤーです。単体では、モデルは優れたモバイルデザインのルールをかなり緩く扱いますが、このスキルは
00:11:56それらを直接組み込みます。これには、親指が実際に届く位置に主要なボタンを配置するサムゾーンや、
00:12:01一貫したスペーシング、10種類もの異なるフォントサイズを使わないクリーンで制限されたフォントサイズが含まれます。
00:12:06これらは基本的に、Airbnb、Duolingo、
00:12:11Spotifyのような人気アプリの背後にある同じルールです。そのため、モデルは推測ではなくその感覚を持って設計するようになります。2つ目は
00:12:16Material 3です。これはShadCNがウェブに対して行ったことのモバイル版のようなものです。モデルに
00:12:21Googleの実際のデザインシステム、つまりAndroidやPixelアプリの大部分を支えるシステムを与えます。Googleのデザイン言語には
00:12:27本当の個性があります。大きくて丸みを帯びた形状とバネのような動きを持つ、大胆でカラフルなものであり、モバイルデザインの表現力豊かな側に位置しています。
00:12:33このスキルはコンポーネントとカラーのシステム全体をもたらすため、1つの色を渡せば
00:12:38完全にマッチしたテーマを構築してくれます。アプリがGoogleのガイドラインにどれほど密接に従っているかさえチェックするため、
00:12:43構築しているアプリがデザインシステムに正確に一致します。しかし、iPhone上で完全に
00:12:48ネイティブに構築している場合は、SwiftUIスキルを使用できます。AppleのデザインはGoogleとは反対側に位置しています。
00:12:53Materialが大胆でカラフルであるのに対し、Appleはより控えめで、
00:12:58現在「リキッドグラス」と呼ばれる、半透明でガラスのようなルックに依拠しています。このスキルは、Mac上のXcodeから
00:13:04Apple自身のドキュメントを直接引き出し、ルールとしてモデルに渡します。そのため、モデルはAppleのアプリが
00:13:09どのように感じられるべきかを推測するのではなく、Appleの実践的なガイダンスに基づいて作業します。単に
00:13:14iPhoneアプリに大体似ているだけでなく、実際にネイティブに感じられるものを手に入れることができます。そしてもし
00:13:18iPhoneとAndroidの両方に同時にビルドする場合は、公式のExpoスキルがあります。Expoは、
00:13:23AndroidとiOSの両方で動作する1つのアプリを作るためのフレームワークです。そのため、同じアプリを2回作る必要はありません。ナビゲーションやスタイリングからプラットフォームの
00:13:29機能まで、両方で動作する本物のアプリに必要なすべてを1箇所でカバーします。そのため、1つのプラットフォーム向けであろうと両方同時であろうと、
00:13:34その領域を実際に知っているスキルが存在します。さて、すべてのスキル、ワークフロー、その他私たちがビルドし、
00:13:39これらの動画で見せるものはすべて、コミュニティであるAI Labs Proで見つけることができます。そこでは
00:13:43リソース、スターターパックなどを入手でき、私たちのチームを含めた同じ志を持つ
00:13:48たくさんの仲間と交流する場所もあります。私たちの活動に価値を見出し、チャンネルをサポートしたい場合は、
00:13:53これが最も良い方法です。リンクは説明欄にあります。それでは、今回の動画は以上となります。
00:13:58チャンネルをサポートし、このような動画を作り続けるのを助けていただける場合は、
00:14:02下の「スーパーサンクス」ボタンから行っていただくことができます。いつものように、ご視聴いただきありがとうございます。また次の動画でお会いしましょう。
00:14:07また次の動画でお会いしましょう。