스크립트
00:00:00AIを使って美しいウェブサイトをデザインできるスキルは世の中にたくさんあり、
00:00:04それぞれ特徴は異なりますが、すべてが機能するわけではありません。中には、一見すると印象的な
00:00:09複雑なワークフローを持ちながら、最終的にはどれも同じようなサイトを生成してしまうものもあります。実際に
00:00:13成果を上げるものはごく一部です。そもそも、なぜこのようなスキルが必要なのかと思われるかもしれません。
00:00:17AIモデルはすでに十分強力であり、優れたデザインを生成できるからです。しかし、いかに
00:00:22モデルが強力であっても、デザインする際には独自のパターンに従うため、そのパターンは簡単に見抜かれてしまいます。
00:00:26だからこそ、そのパターンから脱却させ、ウェブサイトを実際に際立たせるための仕組みが必要なのです。
00:00:30これらのスキルは、デザインにおいて豊富な経験を持つ人々によって開発されました。
00:00:36彼らは、自らテストして効果を確認したワークフローを再利用可能な形にパッケージ化し、
00:00:41他の人でも使えるようにしました。初めての方へ、ようこそ。私たちはソフトウェア企業であり、ここはAI Labsです。
00:00:46この動画では、実際に私たちがテストして成果が得られたスキルについて紹介します。始める前に
00:00:51知っておくべきこととして、Claude Design自体にスキルを追加する必要はありません。Claudeの設定で
00:00:55追加したスキルは、Claude Designでもそのまま使用できます。つまり、Claudeの設定から
00:01:00スキルを追加するだけでよいのです。また、これらのスキルはClaude Designで使用していますが、Claude
00:01:05CodeやCodexなど、他のエージェントで使用しても同様の結果が得られます。最初に取り上げるのは、
00:01:10エミール・コワルスキ（Emil Kowalski）氏のスキルです。このセットには1つだけでなく9つのスキルが含まれており、
00:01:15それぞれがデザインの異なる部分を変更します。これらは、Claude CodeやClaude Designの
00:01:20どちらで作業している場合でも、私たちがデザイン制作時に実際に使用しているスキルです。数多くのスキルがあり、
00:01:25それぞれがデザインの異なる領域をターゲットにしています。その中にはAppleデザインもあり、
00:01:30これはAppleが自社製品で使用しているデザイン原則を網羅し、他のウェブサイトでも利用できるようにしたものです。
00:01:35また、アニメーション語彙（vocabulary）スキルもあり、これは曖昧なアニメーションの描写を、
00:01:40モデルが理解できる正確な言葉に変換してくれます。スキルはいくつでも追加できますが、
00:01:45Claude Designの機能を飛躍的に向上させるため、私たちが最も頻繁に使用しているものが2つあります。
00:01:501つ目は、美しいUIコンポーネントを構築し、それらにアニメーションを追加する方法が記載された
00:01:55「email design engineering（メールデザインエンジニアリング）」スキルであり、デザインを始めるのに最適なスキルです。
00:02:00もう1つは「animate」で、こちらはすでに構築されたウェブサイトに詳細なステップバイステップのプロセスで
00:02:05アニメーションを追加するための完全なワークフローが含まれています。これらを使用するには、Claudeに
00:02:10追加する必要があり、追加すればClaude Design内で使用できるようになります。そこからスラッシュとスキル名を入力し、
00:02:15プロンプトでどのようなサイトを作りたいかを伝えます。まだデザインが構築されていなかったため、私たちはまず
00:02:20「Emil design engineering」スキルを使用しました。するとスキルが呼び出され、何かを構築する前に、
00:02:25Claude Designが単体で行うのと同じように、アプリに関する質問をしてくれます。それに答えると、デザインが構築されます。
00:02:30Claude Designが最初に作成したバージョンは、モノトーン調のミニマルな見た目でしたが、生成された
00:02:35アニメーションはそれほど洗練されておらず、一部でタイミングがずれていました。そこで登場するのが「animate」スキルです。
00:02:40このスキルは、すでに構築されたウェブサイトのアニメーションを実際に洗練させてくれるからです。このスキルは
00:02:46サイトの仕組みを理解し、どこに動きが必要で、どこに不要かを判断します。Claudeが変更作業を終えると、
00:02:51サイトのアニメーションは見違えるほど向上しました。動きはスクロールと同期し、以前のものと比べて
00:02:56全体により意図的なデザインが感じられるようになりました。ここまで聞いて、Claudeが普段生成するものと
00:03:01大差ないと思われるかもしれませんが、それは今回がランディングページだったからです。非常に小さく
00:03:06繊細なアニメーションは改善されたものの、ランディングページで見栄えが良くなる主要なアニメーションスタイルといえば、
00:03:11スクロールベースのアニメーションであり、それについては以前の動画でもたっぷりと取り上げてきました。
00:03:16しかし、このスキルが本当に真価を発揮するのは、アプリの機能的な側面における小さな要素です。
00:03:21例えば、レストラン向けのサイトを制作していた際、アニメーションスキルを使ってアニメーションを追加したところ、
00:03:26フォーム送信時のアニメーションや、ホバー時にグラフィックがポップアップする演出など、サイトの操作感を
00:03:32高める細かなアニメーションが追加されました。これらすべてのディテールが合わさることで、サイトの
00:03:37インタラクティブ性が大幅に高まり、利用体験が向上しました。エミールのスキルは、どれもデザインツールキットへの
00:03:42大きなプラスとなるため、必要なものをいくつでも追加することができます。次に紹介するのは、
00:03:47コナード・リー（Conard Lee）氏のガーデン（garden）スキルです。これも単体のスキルではなくコレクションです。
00:03:52ビデオプレゼンテーションや画像などをカバーする5つのスキルが含まれていますが、その中で最も重要なのは
00:03:57「web design engineer」スキルです。なぜなら、このスキルには一流のデザインエンジニアの
00:04:02ようにデザインするための手順が実際に含まれているからです。このスキルは、機能性ではなく
00:04:07ビジュアルを圧倒的に美しくすることに特化しています。このスキルの仕組みは、あなたの要件を受け取り、
00:04:12あなたが何を望んでいるのかが明確になるまで一緒に検討を重ねた上で、参考にすべき実際のデザインを探すというものです。
00:04:17その原則は、優れたデザインは決して無から生まれるものではないということです。世の中のすべてのデザインが、
00:04:22過去に存在した何らかのものからインスピレーションを受けているのと同様です。また、これまでの実績ある
00:04:27デザインを基盤としています。このスキルには、デザインに関連する複数の領域を網羅した一連の
00:04:32リファレンスも含まれています。デザインの評価方法、デザインが失敗しがちなポイント、そしてAppleや
00:04:38Linearのような有名サイトのスタイルレシピなどがカバーされており、あなたのサイトを構築する際に、
00:04:44そうしたサイトが実際にどのように機能しているかを参照できるようになっています。Claude Designに追加した後は、
00:04:49作りたいものを説明するプロンプトを与えることで使用できます。これによって得られたサイトは、
00:04:55Claude Designが単体で出力するものよりもはるかに興味深く、デザインの観点からもClaude Designだけで作った場合より優れていました。
00:05:01すでにデザインがある状態でこのスキルを実行すると、そのデザインを確認し、さまざまな領域でスコアをつけてくれます。
00:05:08完璧なスコアに達し、本当に望むデザインになるまで、修正と実行を何度も繰り返すことができます。
00:05:13他のスキルを探索する前に、チャンネル登録と高評価ボタンを押していただけると幸いです。
00:05:18この小さな応援が、私たちにとって大きな励みになります。
00:05:22次に取り上げるのは、Elia DesignによるAIデザインスキルです。今回はランディングページ用に作られた単体のスキルとなります。
00:05:30行うことのすべてが1つのファイルに収まっており、その役割は、あなたのアイデアを取り入れてビジュアルシステムに変換することです。
00:05:37これは基本的にはページ上のすべてが従う一連のルールのことであり、色、タイポグラフィ、スペーシングなどが含まれます。
00:05:41このスキルは、本当に価値のあるランディングページをデザインするための、特化型の完全なシステムです。
00:05:46その背景にある考え方は、ランディングページはホームページではないということです。ホームページは一度に多くの多様な人々に対応しようとしますが、
00:05:53ランディングページには1つの役割しかありません。それは、ユーザーに行動を起こさせることです。
00:05:57AIモデルは機能するホームページを生成しがちですが、このスキルのようにランディングページのデザインに特化しているわけではありません。
00:06:03そのため、サイトをそのアクションを中心に構築することで、サイトを訪れた人に取ってほしいその1つのアクションに焦点が集まるよう、ページを構成してくれます。
00:06:12また、デザインを一貫したビジュアルスタイルに保ち、検索エンジンで見つけやすくすることを含め、ほとんどのモデルが見落としがちなウェブデザインの他の領域にも対応します。
00:06:22Claudeのスキルにインストールしたら、デザインが必要なときにいつでもプロンプトとともに実行します。
00:06:27まず質問をしてくれ、それに答えるとデザインが始まります。
00:06:31完成したサイトは本物のブランドのような雰囲気を持ち、目指していた通りの正確な空気感に一致していました。
00:06:36また、各要素の構成により、サイトを訪れたユーザーが実際に購入に至る確率が大幅に高まりました。
00:06:43ですがその前に、スポンサーからのお知らせです。
00:06:45Makeをご存知でしょう。ビジュアルオートメーションで知られるMakeが、新しく「Maya」をリリースしました。
00:06:49これはMakeのビルダー内に常駐するAIの同僚です。
00:06:52ほとんどのAIビルダーはブラックボックスを渡すだけで、あとは動くことを祈るしかありません。
00:06:56Mayaは違います。普通の言葉で希望を伝えると、目の前で構築してくれます。
00:07:00そこで実際に試してみました。Salesforceに新しいリードが入るたびにチームへSlackのサマリーを送信するようMayaにお願いしたところ、すぐにキャンバスへ反映されました。
00:07:07Mayaはリクエストを論理的に考え、適切なツールを選び、すべてのモジュールをマッピングして、私たちが眺めている間にキャンバス上で自動化全体を組み立ててくれました。
00:07:15すべての判断が見えるため、いつでも自分で介入して調整することができます。
00:07:19その過程で、単に自動化が手に入るだけでなく、Makeが実際にどのように機能するのかを学ぶこともできます。
00:07:23現在ベータ版で無料お試しが可能です。リンクは概要欄にあります。
00:07:26次に取り上げるスキルは、メン・トウ（Meng To）氏によるものです。
00:07:29彼は業界で長く活躍しているデザイナーであり、没入感のあるスクロールベースのストーリーテリングデザインで知られています。
00:07:36彼は見出したすべての要素をデザインスキルのシステムにパッケージ化し、他の人でも使えるようにしました。
00:07:41ここには、さまざまな領域をカバーする多くのスキルが含まれています。
00:07:44すべて、単に視覚的に美しいだけでなく、実際にストーリーを語る高品質なデザインの生成に焦点を当てています。
00:07:51そのうちの1つは「video to super prompt」で、ウェブサイトの画面録画やウォークスルーを利用し、PC上のツールを使ってその録画をエージェント用のプロンプトに変換します。
00:08:01しかし、私たちが本当に注目したいスキルは「awards quality sites」です。
00:08:05Awwwardsは優れたデザインを競うコンペを開催しているサイトであり、そこで受賞したサイトはウェブ上で最高峰のデザインと認められます。
00:08:12このスキルは、アワードレベルのサイトが備えている原則とデザインのディテールを実際にリストアップしてくれます。
00:08:17それが重要なのは、Claudeが自力ではそのレベルのデザインを構築できないからです。
00:08:21そのため、このスキルがそうした原則をプロセスに組み込み、デザインの方向性を導いてくれます。
00:08:25これらを際立たせているのは、原則と並行して、サイトを高級感のあるものにする実際のテクニックや具体的なエフェクトが盛り込まれている点であり、それはモデルが単体では生成できない部分です。
00:08:35アワードスキルを追加したら、作りたいサイトを説明するプロンプトを与えます。
00:08:40受賞サイトと同じような構成とデザインのサイトが生成されます。
00:08:45控えめなアニメーションの背景がありますが、何より目を引くのはスクロールです。
00:08:49Awardsに掲載されているウェブサイトのように、スクロールベースのストーリーテリングを採用しています。
00:08:54次のスキルセットはJakub Krehelによるものです。
00:08:571つのスキルでサイト全体を一度に処理する他のものとは異なり、領域ごとに複数のスキルに分割されています。
00:09:05タイポグラフィ、カラー、アクセシビリティなど、デザインを構成するすべての要素が、1つのスキルで処理されるのではなく、それぞれ個別のスキルを持ちます。
00:09:13これらのスキルはClaude Designに追加できますが、私たちが使用するのはレビュー用スキルです。
00:09:18デザインのあらゆる側面を包括的にレビューし、スコアに基づいてブラッシュアップできるためです。
00:09:24このレビュー用スキルはGitHubと連携させるとさらに効果的で、変更前後のデザインの状態を確認してくれます。
00:09:31直前の変更前まで機能していたものが機能しなくなった場合、それを検出し、特定の変更が原因で動かなくなったことを教えてくれます。
00:09:40アニメーション、アクセシビリティ、さまざまな画面サイズでの見え方などを確認し、見つかった問題をすべてリストアップして修正できるようにします。
00:09:48また、Claude Designが苦手としているレイアウトを改善するためのスキルも使用しています。
00:09:52これは余白、配置、デザイン全体の要素の整列を扱い、デザインを徹底的にチェックします。
00:09:58例えば、ページ上の日付により多くのスペースが必要であることを見つけ出し、あと何ピクセル必要かも教えてくれました。
00:10:04そのため、指摘された点をすべて修正するよう指示するだけです。
00:10:06サイトの見た目が劇的に変わるわけではありませんが、実際にプロが用いるデザイン原則に則った正しい状態にしてくれます。
00:10:14リストの次のスキルはTastemakerです。
00:10:16主な目的はAIが生成しがちなありきたりなデフォルト表現を避けることであり、そのアプローチ方法が特徴的です。
00:10:22実際の参考資料のピクセル単位から直接処理を行うため、見た目を一度言葉に変換する過程で情報が失われません。
00:10:28モデルに参考画像を渡すと、通常は後で参照できるようにテキストベースの要約に変換されます。
00:10:34しかしこのスキルでは、スクリプトを使用して正確なデザインの詳細を抽出し、後でエージェントが使用できる構造化された形式で保存します。
00:10:42これにより、テキストベースの要約では失われてしまうデザインの細部が保持されます。
00:10:46エージェント自身に無理をさせず、スクリプトを優先して処理を行うことで多くの作業をこなします。
00:10:52例えば、さまざまな方向に発展させたり、バリエーションを試したりします。
00:10:55下された決定は1つの画面で終わることなく、プロジェクト全体に反映されます。
00:10:59このスキルはモデルにデザインのセンスを与え、ありきたりなパターンに陥るのを防ぎます。
00:11:05追加した後は、他のスキルと同様にスラッシュコマンドとプロンプトで実行します。
00:11:09希望するサイトの要件を先ほどのスタイル要件とともに渡し、処理を進めさせました。
00:11:14その結果、ありきたりなスタイルが一切なく、構築を依頼したサイトのルック＆フィールに一致した非常に印象的なサイトが完成しました。
00:11:22最後のセットも人気のコレクションの1つで、実際の調査や研究に基づいている点が特徴です。
00:11:28デザイナーが実際に活用している普遍的な法則に基づき、項目ごとに独立したスキルが用意されています。
00:11:33ユーザーがウェブサイトの途中で離脱してしまう理由や、サイト内を移動する際の行動パターンなどをカバーするスキルが含まれています。
00:11:39すべてをインストールする必要はありません。
00:11:41自分のワークフローに合ったスキルだけをインストールすればよいのです。
00:11:44私たちの環境では2つ追加しました。
00:11:451つ目は画面の批評を行うスキルで、画面を取り込んで多角的な視点からレビューし、
00:11:50デザインの品質を判断するための適切なガイドラインに沿って、画面のどこが問題であるかを指摘してくれます。
00:11:562つ目は知覚の法則に関するスキルで、人間の目が実際にどのようにデザインを見て理解するのかに関する指示が含まれています。
00:12:03デザインが完成したらレビューを実行し、最初にどこが目に付くか、
00:12:09文字や余白の点など、何が問題であるかをリストアップして修正できるようにしてくれます。
00:12:12知覚の法則をサイトに適用すると、全体的な仕上がりが一段と洗練されたものになります。
00:12:17ここまでが、GitHubで誰もが利用できるデザインスキルです。
00:12:20しかし、私たちは実際に製品を構築する中で、自分たちでテストを重ねて構築・ブラッシュアップした別のスキルも使用しています。
00:12:26それらにアクセスしたい場合は、私たちのコミュニティであるAI Labs Proで入手できます。
00:12:31ここには、独自に構築したスキルや、オープンソースを活用したスキルが含まれています。
00:12:36私たちの活動に価値を感じ、チャンネルをサポートしたい場合は、これが最良の方法です。
00:12:41リンクは概要欄にあります。
00:12:42これで今回の動画は終了です。
00:12:44チャンネルをサポートし、このような動画を作り続ける私たちの力になりたい場合は、下のスーパーサンクスボタンからご支援いただけます。
00:12:50いつものようにご視聴いただきありがとうございます。また次回の動画でお会いしましょう。