00:00:00皆さんと他の何百人ものデザイナーと一緒に、とてもクールな実験をしようと思います。
00:00:06AIデザインをどこまで進化させられるか試したいのですが、今回は特に「Claude Code」を使って、
00:00:13共通の架空のビジネス案をもとにヒーローセクションを制作します。
00:00:19現在、designcourse.comでは30日間のUIデザインチャレンジを開催しています。
00:00:24100%無料です。
00:00:25すでに最初の課題を終え、200件以上の投稿がありました。そしてこれが
00:00:302番目の課題になります。
00:00:31Claude Codeの使い方と、素晴らしいデザインを生み出すための
00:00:37特別な「デザインスキル」を装備させる方法を教えます。
00:00:40このチャレンジの目的は、皆さんに同じ架空のビジネスアイデアを提示し、
00:00:44このタスクに対して最高のUIを作成するための
00:00:50プロンプトスキルがどれほど優れているかを見ることです。
00:00:52この後すぐに、今日のチャレンジへの具体的な参加方法を説明します。
00:00:56これを見ているのが数ヶ月後であっても関係ありません。
00:00:58いつでも参加して、他の人がどんなものを作っているか確認できます。
00:01:01ですがその前に、必要なセットアップ方法をお見せします。
00:01:04まず、当然ながらClaude Codeが必要になります。
00:01:07これがセットアップ用のページです。
00:01:10環境によって手順が異なります。
00:01:11すべてを説明はしないので、セットアップページのリンクを貼っておきます。
00:01:15未インストールの方は、そちらでインストール方法を確認してください。
00:01:17準備ができたら、「claude」と入力するだけで
00:01:22このように起動します。
00:01:23よし。
00:01:24次のステップは、特別な「スキル」を装備させることです。
00:01:26「スキル」とは、AIのコンテキストに読み込ませる
00:01:30一連の指示書のようなものです。
00:01:31様々な種類のスキルがあります。
00:01:32スキルをお見せする前に、システムへのインストール方法を説明します。
00:01:37使用しているOSや環境に基づいて、
00:01:43Claude Codeのフォルダがどこにあるか見つける必要があります。
00:01:44そして、スキルであるこのマークダウンファイルを
00:01:49そのフォルダに配置するだけです。
00:01:50今回使う特定のスキルは、ここにある「Front End Design」です。
00:01:55アクセスできるように概要欄にリンクを貼っておきます。
00:01:58Skills、Front End Skills、Skill.mdの順にクリックし、
00:02:03ここで「Download Raw File」をクリックします。
00:02:06スキルファイルを入手したら、先ほど示したURLから
00:02:12Claude Codeのフォルダを探して開きます。
00:02:14私のWindows 11環境では、「C:\Users\Gary\.claude」にあります。
00:02:21この中に「skills」フォルダがない場合は、
00:02:24作成してください。
00:02:25私はすでに作成済みです。
00:02:26それをダブルクリックし、「Designer」というフォルダを作ります。
00:02:31その中に、スキルファイル「Skill.md」を貼り付けます。
00:02:35もしClaudeが既に実行中の場合は、Ctrl+Cを数回押して
00:02:39一旦終了させてください。
00:02:41再度「claude」と入力し、「/skills」と打つと利用可能なスキルが一覧表示されます。
00:02:47今は3つありますね。
00:02:48ここに「Front End Design」が見えます。
00:02:51これを使うには、「/frontend-design」と入力し、
00:02:56その後にプロンプトを貼り付けます。
00:02:58実際に動いているところをお見せしましょう。
00:03:00「/frontend-design」に続けて、「AI本人確認サービスのランディングページ用の
00:03:06デザイナー・ヒーローセクション」と入力します。
00:03:07「背景は薄いベージュ、2カラム構成、強力な見出し、
00:03:11左側に説明文とコールトゥアクションボタンを配置してください。
00:03:13右側には、本人確認のアイデアを表現する
00:03:16架空のシンプルなUIアニメーションを配置します。
00:03:20これをCSS変数を含むHTMLファイルにまとめてください」
00:03:23プロンプトはこれだけですが、最終的にこのようなものが出来上がりました。
00:03:28皆さんはどう思うかわかりませんが、これ、一発で生成されたにしてはかなり堅実な出来です。
00:03:33プロンプトも見ましたよね。
00:03:35とても短いものです。
00:03:36では、チャレンジ内容と、架空のビジネスに使ってほしい
00:03:41プロンプトのアイデアを説明します。皆さんが何を作るか楽しみです。
00:03:46目的は、独自の個性を加えて自分らしいデザインを作り、
00:03:51必要であればアニメーションも追加することです。
00:03:53最初のステップは、[designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) のチャレンジページへ行くことです。
00:03:58リンクは下のどこかにあります。
00:04:00ページを開くと、すでに613人の受講生がいて、最初の課題には
00:04:06197件の投稿があったことがわかります。
00:04:08今回は2番目のチャレンジです。
00:04:09ここをクリックして「2026 UI/UX Figma template」を入手してください。
00:04:16その中に「チャレンジ #2」が入っているので、それを使います。
00:04:20内容はこんな感じです。
00:04:23これが「チャレンジ #2」で、こちらに指示が書いてあります。
00:04:27プロンプトに含めてほしい内容の一部がこれです。
00:04:29これが架空のビジネス案です。
00:04:31他のアイデアは使わないでください。
00:04:32全員同じ「AI住宅検査ビジネス」というテーマでお願いします。
00:04:37コンピュータービジョンを使って、床下、屋根、基礎の画像を分析し、
00:04:42共通の欠陥を特定して標準化された検査報告書を自動生成するサービスです。
00:04:45目標は、ここにある初期プロンプトをAIに与え、
00:04:50Claude Codeのデザインスキルを使って次世代のヒーローセクションを作ることです。
00:04:56こちらに手順があります。
00:04:58Claude Codeを使用して、このフレームの右側にある
00:05:03架空のビジネス案のヒーローセクションを生成してください。
00:05:05これをプロンプトの一部として必ず貼り付けてください。
00:05:08ビジネス案に加え、あなた自身のデザインやスタイリングの好みも含めてください。
00:05:13私が先ほどのアニメーションカードを作るように指示した時も
00:05:17そのようにしました。
00:05:18結果をブラッシュアップするために、何度でもプロンプトを重ねて構いません。
00:05:22希望すればアニメーションを組み込むこともできます。
00:05:24投稿する際は、まず最終結果に至るまでにかかったプロンプトの回数を記載してください。
00:05:29皆さんに結果を追求してほしいからです。
00:05:32また、コメント欄にプロンプト自体も記載してください。
00:05:36また、「Claude Code to Figma」プラグインを使って、デザインの
00:05:42Figmaプロトタイプを共有することもできますが、必須ではありません。
00:05:44スクリーンショットだけでも十分です。
00:05:47このプラグインを使えば、作成したUIの最終結果を
00:05:53Figmaに送ることができます。
00:05:54使い方は昨日アップした動画で詳しく説明しているので、
00:05:58ここでは割愛します。
00:06:00繰り返しますが、Figmaを使う必要はありません。
00:06:01提出はスクリーンショットで大丈夫です。
00:06:04エントリーの提出方法についてはここに記載があります。
00:06:09例えば、制作物のFigmaドキュメントを共有することに
00:06:14したとします。そうすれば、私がレビューする際に修正を加えることもできます。
00:06:18その場合は、ここの「Share」ボタンを押します。
00:06:20「Copy prototype link」をクリックし、誰でも閲覧可能であることを確認してから、
00:06:25応募作品と一緒に提出してください。
00:06:26結果がどれくらい似通るのか、あるいは違ってくるのか、
00:06:30非常に興味深いチャレンジになるはずです。
00:06:32あまり指示を出さなければ似たような結果になりますが、スタイリングや
00:06:37クリエイティブなアイデアを注入すれば話は別です。
00:06:40そうすることで、非常に面白く、バリエーション豊かな
00:06:47コンセプトがたくさん生まれると思います。
00:06:48繰り返しになりますが、希望する配色や、
00:06:53興味深いイラストやアニメーションを具体的に指定してください。
00:06:55目標は、AIが生成できる限界を最大化することです。
00:06:58それでは、皆さんの参加をお待ちしています。
00:07:01とても素晴らしいチャレンジになるでしょう。