00:00:00Claude Codeのフロントエンドデザインがひどいのは、あなたのせいです。
00:00:04ですが、これはシンプルなロードマップで解決できる問題です。
00:00:07どこに向かうべきかを知るだけでいいのです。
00:00:09この動画では、
00:00:10Claude Codeによるフロントエンドデザインの「7つのレベル」を分解し、
00:00:13各レベルで何が期待できるのか、
00:00:16避けるべき罠、
00:00:18そして次のレベルに進むために必要なことを解説します。
00:00:21最後まで見れば、
00:00:22Claude Codeを使って、よくある退屈で汎用的なテンプレートではない
00:00:25フロントエンドデザインを作成するための、
00:00:28シンプルで再現可能なプロセスが身に付いているはずです。
00:00:30さて、今回の動画のケーススタディとして使用するのは、
00:00:33「Argus」という架空のSaaSウェブアプリです。
00:00:36Argusはソーシャルメディア・インテリジェンス・アプリケーションです。
00:00:41つまり、コンテンツクリエイターなどが、
00:00:43自分のニッチな分野でトレンドのトピックを見つけられる場所です。
00:00:48このArgusを通じて、
00:00:497つのレベルすべてのプロセスを体験していきます。
00:00:52では、レベル1から始めましょう。
00:00:53残念ながら、多くの人がここで立ち止まっています。
00:00:55これは単に「あなたとプロンプト」だけの状態です。
00:00:57Claude Codeを開いて、
00:00:59こんな風に言うだけです。「ねえ、
00:01:01Argusのランディングページを作って。
00:01:02これはコンテンツクリエイターが自分のニッチな分野で
00:01:05トレンドを特定するためのソーシャルメディア・インテリジェンス・アプリなんだ」
00:01:08さて、
00:01:09たとえプランモード（plan mode）にしたとしても、
00:01:12出来上がるのは非常に汎用的なものです。
00:01:15なぜなら、デザインの方向性を全く示していないからです。
00:01:18「何が良いデザインか」という空白の部分を
00:01:20Claude Codeが埋めてくれるのを期待してしまっています。
00:01:22「AIにはセンスがない」とよく言われますが、それは事実です。
00:01:26しかし実際には、ほとんどの人間にもセンスがありません。
00:01:28そのせいで、
00:01:31Claude Codeに意図を明確に伝えられないのです。
00:01:33「正解」が何かが分からなければ、
00:01:35Claude Codeがそれを理解できるはずがありません。
00:01:37ですから、最も基本的なレベルで
00:01:39マスターし始めるべきスキルがいくつかあります。
00:01:41それは「描写的なプロンプトを書くこと」、
00:01:43「フレームワークを指定し、それが何かを理解すること」、
00:01:46そして、
00:01:46「基本的なデザインの語彙力を養うこと」の3つです。
00:01:50このプロセスでプランモードを使うだけで、
00:01:53これらのスキルのいくつかが身に付き始めます。
00:01:55なぜなら「このランディングページにはどの技術スタックを使いますか？」
00:01:57といった質問をされるからです。
00:01:58Next.js、素のHTML、Astroなどです。
00:02:00最初はこれらが何を意味するのか全く分からないでしょう。
00:02:02しかし、単純に
00:02:05「これらのフレームワークは何？」と聞くことで、
00:02:07フレームワークなどの分野において
00:02:11ある程度の知識レベルを構築し始めることができます。
00:02:13ただ質問すればいいのです。
00:02:14また、プランモードはデザイン上の決定や、
00:02:17ウェブサイトの実際の目的について考えることを強制します。
00:02:19「Argusのランディングページが欲しい」
00:02:20と言うだけでは不十分だからです。
00:02:21「このサイトのポイントは何か？」
00:02:23「実際に目指している成果は何なのか？」
00:02:25今回の場合、
00:02:26ウェイティングリストへの登録と製品紹介の両方が必要です。
00:02:29すると、AIはスタイルについて
00:02:32明確な質問を投げかけてきます。ですが、
00:02:35提案されるビジュアルスタイルは、ここでもまた
00:02:38「ダークでテック風」「クリーンでミニマル」といった
00:02:41ありきたりなものです。
00:02:42これでは、望む結果を得るための具体性がまだ足りません。
00:02:45みんなここで止まってしまいます。
00:02:47だからすべてが同じように見えてしまうのです。
00:02:49今回は「クリーンでミニマル」を選択し、
00:02:52ヒーローセクション、機能紹介、CTA（行動喚起）
00:02:53だけで構成して送信してみます。
00:02:55「これだけ基本的だと、どうやって描写的なプロンプトを書き、
00:02:58デザインの語彙力を養えばいいんだ？」
00:03:01と思うかもしれません。
00:03:03正直なところ、
00:03:04それには多少の時間と経験が必要です。
00:03:06「正解」であるクリエイティブなフロントエンドデザインに
00:03:09触れれば触れるほど、
00:03:12こういった感覚が身に付いていきます。
00:03:13これについては、後のレベルでもっと詳しく話します。
00:03:16では、何ができたか見てみましょう。…うわ、典型的な「AIのゴミ」ですね。
00:03:20ひどいでしょう？ これ以上ないほど凡用的です。
00:03:24なぜかAIが大好きな
00:03:27紫色のグラデーションまで入っています。一体何が起きたのでしょう？
00:03:30プランモードを使ったのに、なぜこうなったのか？
00:03:32実は、すでにご存知の通り、
00:03:35Claude CodeもAI全般も、
00:03:37フロントエンドデザインがそれほど得意ではありません。
00:03:38描写の足りない退屈なプロンプトを与えれば、
00:03:42このような出力になってしまうのです。
00:03:44それなのに、あちこちで目にするのは
00:03:46多少の違いはあれど、こんなものばかりです。ではどうすればいいか？
00:03:48レベル1から脱出し、このデザインの地獄から抜け出すには？
00:03:51その前に、
00:03:52皆さんお気に入りのスポンサー、私から一言。
00:03:55先日「Claude Code マスタークラス」をリリースしました。
00:03:58まだ日は浅いですが、
00:03:59ゼロからAIエンジニアを目指すなら、ここが一番の場所です。
00:04:02特に技術的なバックグラウンドがない方には最適です。
00:04:04毎週更新しており、リリース以来、
00:04:07すでに1時間以上の新しいコンテンツを追加し、
00:04:1020以上のモジュールを更新しました。気になる方は、
00:04:13「Chase AI Plus」でチェックできます。
00:04:14リンクは固定コメントにあります。
00:04:17ただ、AIが初めてで、
00:04:18そこまでやるのはまだ早いという方は、
00:04:19無料の「Chase AI コミュニティ」を覗いてみてください。
00:04:22リンクは概要欄にあります。
00:04:24さて、レベル2に進むには、
00:04:25Claudeに「デザイン教育」を施す必要があります。
00:04:28ここからスキルを導入していきます。
00:04:30Claude Codeにデザインを向上させる方法を教える、
00:04:33外部の専門化されたプロンプトを取り入れ始めるのです。
00:04:36「フロントエンド・デザイン・スキル」や
00:04:39「UI UX Pro Max スキル」のようなものを活用することで、
00:04:41多くの重労働を代わりにやってくれます。
00:04:42これらはClaude Codeに次のようなプロンプトを注入します。
00:04:45「この業界のウェブページを作るなら、
00:04:49こういった要素に注目すべきだ」とか、
00:04:51「これがよくあるAI製デザインのテクニック一覧だ。これらは避けろ」
00:04:55といった具合です。
00:04:56つまり、私たちのプロンプトを強化してくれるのです。
00:04:58たとえ元の依頼が少しお粗末だったとしても、です。
00:05:00こちらが「UI UX Pro Max スキル」の様子です。
00:05:03GitHubにあるオープンソースのリポジトリで、5万2千ものスターを獲得しています。
00:05:07skillsフォルダーの中を見ると、
00:05:09すべてがどのように設定されているかが分かります。
00:05:12中身はすべてテキストプロンプトであり、
00:05:15Claude Codeが凡庸なデザインに陥らないようにするための
00:05:17チェックリストのような役割を果たしています。
00:05:19今の状態のまま立ち止まらないために。さて、この特定のスキルや、
00:05:21これに類する他のスキルをインストールするのは
00:05:23非常に簡単です。GitHubに行けば、
00:05:26使い方がここに記載されています。
00:05:27「/plugin marketplace」を実行して、
00:05:30スキルを追加し、インストールするだけです。
00:05:32これをClaude Codeのターミナルで実行します。
00:05:35もしそれが少し難しいと感じるなら、
00:05:37単にリポジトリのURLをコピーして
00:05:40Claude Codeに貼り付け、「ねえ、
00:05:41このスキルをインストールしたいんだ」と言うこともできます。
00:05:42では、スキルを試してみましょう。
00:05:44スラッシュ（/）コマンドでスキルを読み込みました。
00:05:46自然言語を使って、「ねえ、Claude Code、
00:05:47UI UX Pro Max スキルを使って」と言うこともできます。
00:05:50そしてこう伝えます。
00:05:51「このスキルを使ってランディングページを作り直して。
00:05:54必要な質問があれば何でも聞いて」
00:05:55標準のプランモードと同じように、
00:05:57スタイルに関する質問をいくつかされます。
00:05:59今回はおすすめに従ってみましょう。
00:06:03「洗練されたタイポグラフィ」ですね。いいでしょう。
00:06:05CTAの色は「オレンジ」にしましょう。
00:06:07何としても紫からは逃れたいのです。
00:06:09さて、Claude Codeが再設計を終えたので、見てみましょう。
00:06:12これがUI UX Pro Max スキルを使ったランディングページです。
00:06:15一目見て、大幅に改善されたのが分かりますね。
00:06:18適切な背景があり、この小さな
00:06:21四角い装飾も追加されています。
00:06:22ボタンにはかすかな光沢（グロウ効果）があり、
00:06:25マウスを乗せると色が変わるようになっています。
00:06:27グラフィックもあり、セクションごとに
00:06:30色が変わっています。以前よりずっと良くなりましたが、
00:06:33やはり紫が大好きみたいですね。とはいえ、
00:06:36これは明らかに「AIが作ったもの」だと分かりますよね？
00:06:38これを見て感動して圧倒されるようなものではありません。
00:06:40依然として「AIのテンプレート」のように見えます。
00:06:43デザインされたAIテンプレートではありますが、
00:06:46テンプレートであることに変わりはありません。根本的には、
00:06:48先ほど見たのと同じようなウェブサイトに、
00:06:49少し飾り付けをしただけの状態です。
00:06:51では、どうすればこれをさらに向上させられるでしょうか？
00:06:52レベル2を抜けて、レベル3に進むにはどうすればいいか？
00:06:55こういったスキルは素晴らしいものです。
00:06:56色彩理論やタイポグラフィ、
00:06:59余白や一般的なレイアウトデザインの考え方を持ち込んでくれますが、
00:07:02本質的にはまだ汎用的なのです。
00:07:04そして、マスターすべきスキルのうち、
00:07:07最大のものはこれです。
00:07:08「デザイナーの目で出力を評価し、
00:07:11その批評をどうプロンプトに変換するか？」
00:07:13これもプロンプトの問題ですが、ここで罠があります。
00:07:16それは、描写の細かさには限界があるということです。
00:07:18特に初心者のうちはそうです。
00:07:21私たちは問題を明確に言語化するための
00:07:23知識が不足しています。
00:07:27そうでしょう？
00:07:27ビジュアルという媒体、ビジュアルという問題を
00:07:31テキストで説明しようとすると、本質的に何かが抜け落ちてしまいます。
00:07:34では、具体的に何ができるのか？
00:07:36Claude Codeに「見せる」必要があります。問題だったのは、
00:07:39私たちがClaude Codeに対して、
00:07:41目指しているものの「実例」を見せていなかったことです。
00:07:44レベル3をアンロックするには、
00:07:46テキストだけのプロンプトから脱却し、
00:07:49ビジュアルという媒体に踏み込む必要があります。
00:07:52言葉で説明するだけでなく、実際に見せるのです。
00:07:54レベル3は、あなたが「ビジュアル・ディレクター」になる段階です。
00:07:56ここでは、Claudeにコードや
00:07:58私たちが目指している具体的な例を与え始めます。
00:08:01そうすることで、テキストやスキルだけに頼る必要がなくなります。
00:08:03テキストにスキル、そして視覚的な例を組み合わせて活用するのです。
00:08:07これが大きな突破口になる理由は2つあります。1つ目は、
00:08:09言葉での説明よりも、画像を見せた方が
00:08:12Claude Codeはより正確に再現できるからです。
00:08:152つ目は、画像を使うということは、
00:08:17他のウェブサイトを参考にすることを意味します。つまり、
00:08:20「正解」がどのようなものか、
00:08:23プロが実際に何をしているかを見て、模倣できるようになるのです。
00:08:25さて、
00:08:26フロントエンドのデザインのインスピレーションを得られる場所は
00:08:28たくさんありますが、ここでは4つ紹介しましょう。
00:08:311つ目は「Awwwards」です。wが3つのサイトですね。
00:08:34ここは人々が自分の作品を投稿し、
00:08:37採点を受ける場所なので、非常にクリエイティブな傾向があります。
00:08:402つ目は「godly.website」です。
00:08:42無限スクロールで、様々なデザインを次々と見ることができます。
00:08:453つ目はPinterestです。
00:08:48意外かもしれませんが、ここにもかなりクールなものがあります。
00:08:49例えば「SaaS ランディングページ」で検索してみましょう。
00:08:52気に入ったものが見つかれば、
00:08:53関連するデザインも芋づる式に見つけることができます。
00:08:56最後はDribbbleです。bが3つのサイトです。
00:08:58ここでも「SaaS ランディングページ」と入力すれば、
00:09:01洗練されたデザインがたくさん出てきます。
00:09:04例えば、この「Open Hands」というサイトが気に入ったとしましょう。
00:09:07この上部にある、
00:09:09実績を示すワークフローのスクロール部分がいいですね。
00:09:11独特なカラースキームも好みです。
00:09:14一目で普通とは違うと感じさせます。
00:09:15社会的証明もあり、
00:09:19全体的なスタイルが非常に魅力的です。そこで、
00:09:22やることは極めてシンプルです。
00:09:23このページのスクリーンショットを何枚か撮り、
00:09:26Claude Codeに投げ込んで「こんなビジュアルスタイルにしたい」と伝えるだけです。
00:09:29実際にClaude Codeの中でこう伝えました。
00:09:31「サイトをOpen Handsのスタイルに合わせたい」。
00:09:34URLを教え、さらに
00:09:36「参考にスクリーンショットを送る」と言って、
00:09:38撮った画像をすべてアップロードしました。
00:09:40これでClaudeは、具体的な視覚的リファレンスを手に入れました。
00:09:43自分が求めているものを言葉で説明するのは、
00:09:45私にとっても非常に難しいことです。
00:09:47たとえ「UI/UXプロ」スキルの助けを借りたとしてもです。
00:09:51このプロセスを通じて、
00:09:52優れたビジュアルリファレンスを収集し始めます。
00:09:55世界には素晴らしい例が溢れています。
00:09:57それらを日常的に目にしていれば、
00:10:00以前の素人くさいデザインには戻れなくなります。
00:10:03「あんなにかっこいい見本があるのに、なぜこれを使うんだ？」と思うはずです。
00:10:05多くのリファレンスを見ることで、
00:10:07単にスクリーンショットを渡すだけでなく、
00:10:09自分が何を求めているかをより具体的に伝えられるようになります。
00:10:12なぜなら、
00:10:12多くのサイトを見るうちに、共通するパターンが
00:10:14見えてくるようになるからです。
00:10:16また、複数のサイトの要素を
00:10:18組み合わせることもお勧めします。
00:10:21今回はOpen Handsを使っていますが、
00:10:23PinterestやGodlyで見つけた要素を組み合わせて、
00:10:26「これはここから、あれはあそこから」といった具合に、
00:10:28いいとこ取りをしたいわけです。
00:10:29様々なサイトのベストな部分を抽出し、
00:10:32融合させます。しかし、
00:10:33このレベル3には陥りやすい罠があります。
00:10:36ほとんどの人はこのレベル3で止まってしまいます。
00:10:39「スキルを使い、Claude Codeの初期状態を補えば、
00:10:41スクリーンショットを使うことで
00:10:42それなりのものができる」と満足してしまうのです。
00:10:45しかし、実はここには限界があります。
00:10:49「雰囲気のギャップ」にぶつかってしまうのです。
00:10:50出来上がったものを見ると、
00:10:52「惜しい、近いんだけど……」という感じになります。
00:10:55完璧にはなりません。なぜなら、
00:10:57やはりそこには「劣化（Lossy）」が生じるからです。
00:11:01Claude Codeは本質的に
00:11:03すべてをコードで行うツールです。そこに画像を見せて、
00:11:05「このビジュアルをコードに翻訳して」と頼んでいるわけです。
00:11:08これがフロントエンドデザインにおける課題です。
00:11:10視覚的な媒体であるにもかかわらず、
00:11:12テキストで指示を出し、
00:11:15たとえ画像を送ったとしても、
00:11:17「翻訳」という工程が介在してしまいます。
00:11:18では、どうすれば完璧に再現できるのでしょうか？
00:11:20実は、今の方法の限界は
00:11:22これを見れば一目瞭然です。
00:11:24スクリーンショットを元に作成されたのが、これです。
00:11:28左がオリジナル、右が作成されたものです。
00:11:31以前もお話ししましたが、
00:11:32ここでみんな行き詰まります。
00:11:33これを見てみると、
00:11:36目を細めて遠くから見れば、
00:11:37何を目指していたのかは分かります。
00:11:39おそらく50%くらいは再現できているでしょう。
00:11:41良い部分もありますが、
00:11:43多くの人はここで、
00:11:46ヒーローセクションのスクショを撮り直し、
00:11:49「次はここを直して」と何度も修正を繰り返します。
00:11:51延々とプロンプトを打ち込み、スクショを撮り、また戻る。
00:11:53これでは時間がいくらあっても足りず、結局ゴールに辿り着けません。
00:11:56そうでしょう？
00:11:57それは「画像からコードへの翻訳」という根本的な問題があるからです。
00:11:59ですから、レベル3を脱してレベル4へ進むためには、
00:12:03ウェブサイトの表面的なデザインを見てインスピレーションを得るだけでなく、
00:12:08それらを正しく「複製」する方法を学ぶ必要があります。
00:12:11Open Handsのようなサイトを動かしている「実際のコード」を
00:12:15手に入れるのです。これは単に
00:12:18「そのままコピーしてパクる」ということではありません。
00:12:20複製するプロセス、そしてそれをどう模倣するかを考えることは、
00:12:23私たちに大きなメリットをもたらします。
00:12:26テンプレートとして使えるのも素晴らしいことですが、
00:12:30表面の下で実際にどのようなコードが
00:12:34動いているのかに触れることができるからです。
00:12:36レベル3からレベル4へ進むには、
00:12:38スクリーンショットを見て満足する段階を
00:12:41超えなければなりません。
00:12:44表面のさらに奥深くへ潜り、
00:12:48幕の裏側を覗いて、ウェブサイトがどのような
00:12:51コード構成要素、つまりHTML、
00:12:54CSS、JavaScriptで構築されているかを知る必要があります。
00:12:56レベル4は「クローナー（複製者）」です。
00:12:59プロの手法を「盗む」ことで学ぶ段階です。
00:13:02誤解しないでください。
00:13:04これは単に、
00:13:05他人のサイトを盗作して自分のものだと言い張るための
00:13:08レベルではありません。
00:13:10気に入ったサイトを見つけたら、
00:13:13それを解体して構造を理解し、テンプレートとして活用するのです。
00:13:16その過程で、驚くほど多くのことを学べます。
00:13:20どんな分野のスキルでも同じです。
00:13:24上達するにはどうすればいいか？ プロの技を見ることです。
00:13:27そして彼らを模倣してみることです。
00:13:28真似をしようとする過程で多くを学び、
00:13:30やがて自分なりのアレンジを加えて、
00:13:33オリジナルの何かを生み出すのです。それがこのレベルの目的です。
00:13:35これを最大限に活かすためには、
00:13:37フロントエンドデザインの仕組みを理解し始める必要があります。
00:13:39フロントエンドのデザインを
00:13:42簡略化すると、3つの要素に分けられます。まずはHTML。
00:13:45これはウェブサイトの「骨組み」だと考えてください。
00:13:47全体の構造を定義します。次にCSS。
00:13:50Das ist quasi das Styling, oder? Von der Website.
00:13:52ウェブサイトが着ている「服」のようなものです。
00:13:55そしてJavaScript。
00:13:56これは「筋肉」だと思ってください。
00:13:59ボタンをクリックした時などの
00:14:01実際の動作を司ります。
00:14:02この3つの要素を分析することで、
00:14:05より高度な複製やテンプレート化が可能になるだけでなく、
00:14:08仕組みそのものを理解できるようになります。
00:14:10サイトを解体し、手法を学ぶという考え方ですね。
00:14:13では、具体的にどうすればいいのでしょうか？
00:14:15例えばOpen Handsをどう解体するか。
00:14:17スクリーンショットでは不十分なのは明白です。
00:14:21やり方は比較的簡単です。HTMLを取得するには、
00:14:25サイトを表示して「Control + U」を押すだけです。
00:14:28すると、HTMLの全文が表示されます。
00:14:33これらをすべて、
00:14:37丸ごとコピーします。
00:14:39そしてClaude Codeに貼り付けます。
00:14:42このコードはかなり長くなるのが普通で、
00:14:44今回の場合は1,152行ありました。そして、
00:14:48このコードの一番下まで行くと、
00:14:50CSSファイルやJavaScriptファイルへの
00:14:54リンクも記載されています。
00:14:56今、下の方でハイライトしている部分ですね。
00:14:58ほとんどすべてのHTMLファイルの末尾には、
00:15:01このように記述されています。
00:15:04少し見えにくいかもしれませんが、ここに
00:15:06JavaScriptとCSSへの参照があります。
00:15:09これらもまた、膨大なコードを含む実際のファイルです。
00:15:13そこで私たちがやるべきことは、
00:15:17HTMLを渡した後に、
00:15:19Claude Codeに対して「このJavaScriptとCSSも
00:15:22確認して内容を理解してくれ」と伝えることです。
00:15:24「CSSとJSファイルも見ておいて」と書きました。ここで止めてもいいのですが、
00:15:29そうするとClaudeは独自の「Web Fetch」機能を使って確認しようとします。
00:15:31ただ、このWeb Fetchには問題があります。
00:15:35Claude Codeは処理を任せるために「小型モデル」を呼び出すのです。
00:15:39つまり、今のClaude Codeのインスタンスが直接ページを見に行くわけではありません。
00:15:42小型モデルが内容を要約し、それをClaude Codeに伝えます。
00:15:47問題は、CSSやJSファイルは非常に大きく、
00:15:51サイト特有の非常に具体的な構築手法が詰まっているという点です。
00:15:54私たちは「要約」ではなく、情報の「すべて」を必要としています。
00:15:58そこで、Claude Codeがこれをより適切に処理できるよう、
00:16:03専用の「スキル」を作成しました。実質的には強化版のプロンプトです。
00:16:04これを使えば、必要なCSSとJavaScriptを可能な限り取得できます。
00:16:07使い方は「Site Teardownスキルを使用して」と伝えるだけです。
00:16:12このSite Teardownスキルは、無料のスクールコミュニティで
00:16:16公開しています。リンクは説明欄にあります。
00:16:18それを読み込めば、皆さんも同じことができるようになります。
00:16:21まとめると、私はこう指示しました。「これがOpen HandsのHTMLだ。
00:16:25CSSやJSファイルも確認させてみましょう
00:16:28「サイト解体スキル」を使って、その情報をもとにオリジナルのOpenHandsのサイトをより正確に複製させます
00:16:31では、これがどう学習に役立つのでしょうか？ まず第一に
00:16:36皆さんは、例えばこの背景をどうやって作ったのか、見当もつかないはずです
00:16:39そうですよね？
00:16:40これをより忠実に再現するために、どのような語彙を使うべきかさえ
00:16:43おそらく理解していないし、知らないでしょう
00:16:46スクリーンショットだけを渡したときは、「うーん、まあ
00:16:50なんとなく近いかな」という程度の出来でした
00:16:52しかし、Claude Codeに「内部で何が起きているか」を実際に見せることで
00:16:56Claude Codeにこれらを教えてもらうことができるようになります。なぜなら
00:17:01Claude Codeがコーディングレベルで何が起きているかを理解したからです
00:17:04これで、Claude Codeと知的な会話ができます。「ねえ
00:17:07これはどうやったの？ これは何を意味するの？ GSAPって何？
00:17:11スクロールアニメーションはどうやったの？ これは？
00:17:13あれはどうやったの？」といった具合にです
00:17:14こうして何度もウェブサイトを複製し、それを自分の作品のテンプレートとして使っていくうちに
00:17:18もちろん、常に自分なりのアレンジを加えることになりますが
00:17:19これらを基礎の土台として活用することで
00:17:21他のスキルと同じように
00:17:23フロントエンドデザインの腕が上がっていきます
00:17:26これが、プロのテクニックに触れるだけでなく
00:17:29自分のビルドに取り入れ始めるプロセスなのです
00:17:31ただし、さらに上のレベルへ進むには、先ほども言ったように
00:17:34Claude Codeを使って、ただキーボードを叩くサルのようになってはいけません
00:17:38これまで話してきたことと同じです。ただ「承認、承認、次へ」と
00:17:41クリックするだけではいけません。それではどうやって差別化するのですか？
00:17:43では、この過程でマスターすべきスキルは何でしょうか？
00:17:46まず、ソースコードを読んで理解することを学ぶ必要があります
00:17:48Claude Codeがその手助けをしてくれます
00:17:51次に、どのテクニックがどの効果を生んでいるかを特定する必要があります
00:17:52ある時点で、ウェブサイトを見た瞬間に
00:17:57「ああ、これはこうなっているんだな」と直感的に
00:18:02認識できるようにならなければなりません。そして最後に
00:18:04これらの複製したパターンを自分のデザインに適応させる方法を学ぶ必要があります
00:18:09盗作ではなく、インスピレーションを得るのです
00:18:12もしこれらのスキルをマスターできなければ
00:18:13「複製の限界」という罠にはまってしまいます。つまり
00:18:16コピーはできても創造はできない状態です
00:18:18「なぜそうなるのか」を理解しようとしなければ
00:18:20成長は止まってしまうでしょう
00:18:22そうなれば、結局のところ、誰でもいいから連れてきて
00:18:25ステップ1、2、3をやってくれと言えば済む話です
00:18:27それでは、あなたが望むような高みへは行けません
00:18:29では、追加のコーディングコンテキストを与えた結果、Claude Codeが何を構築できたか見てみましょう
00:18:32こちらが更新されたバージョンです
00:18:35これは明らかにオリジナルにぐっと近くなっています
00:18:39特に背景がそれらしくなっていますね
00:18:41この2つを比較してみると、まだ完全に一致しているわけではありませんが
00:18:45これは実質的に最初の試行であり、以前よりも
00:18:48はるかに完成度に近づいています
00:18:50この時点でさらに反復を繰り返し、自分の好みに
00:18:54近づけていくのは、ずっと簡単です
00:18:57なぜなら、Claude Codeは今、OpenHandsが使っているのと
00:19:01同じ「レシピ本」を見ているようなものだからです。そこで「ここを変えよう
00:19:04あそこを変えよう。やり方は分かった、こうやって模倣しよう」と言えるのです
00:19:07繰り返しになりますが、ここから学習プロセスが始まります。例えば
00:19:10「このかっこいい背景はどうなってるの？」
00:19:12あるいは「OpenHandsのようにマウスでスクロールしたときに
00:19:17一部が消えるような効果はどうすれば出せる？」といったことです
00:19:19Claude Codeに「背景はどう動いているの？ どうすれば同じ効果を再現できる？」と聞くだけでいいのです
00:19:22これを繰り返すたびに
00:19:25あなたの道具箱に新しいツールが追加されていきます
00:19:27Claude Codeはその効果の仕組みを説明し、さらに素晴らしいことに
00:19:32私たちの背景にもそれを正しく適用してくれます。最高ですよね
00:19:35しかし、当然ながらレベル4にとどまりたくはありません
00:19:38ただの「複製屋」で終わりたくはないですよね？ 自分なりのスパイスを加えたいはずです
00:19:42それを自分のものにしていきたい。では、どうすればいいでしょうか？
00:19:45どうすればレベル5に進んで、自分なりの工夫を加えられるのでしょうか？
00:19:48ここで、コンポーネントや独自のカスタムアセットデザインを
00:19:53楽しむ段階に入ります。自分自身の素材を持ち込むのです
00:19:56他人のウェブサイトをそのままコピーするだけの段階は卒業です
00:19:57そのための最も簡単な方法の一つは、21st.devのようなサイトで
00:20:02高品質なコンポーネントを見つけることです
00:20:04これは、ウェブサイトからインスピレーションを得て一部を取り入れるのと似ていますが
00:20:08よりミクロな、コンポーネント単位での話です
00:20:11例えば21st.devなら
00:20:14左側にあるボタンなどの項目を見ることができます
00:20:17すると、様々な種類の
00:20:21ボタンのデザインが表示されます。気に入ったデザインがあれば、例えば
00:20:26こんな感じのものを見つけたら、プロンプトをコピーして
00:20:29Claude Codeに持っていき、「このボタンのデザインを統合して」と言うだけです
00:20:33これはあらゆる種類の要素に当てはまります
00:20:36カルーセル、スクロールエリア、マップ
00:20:40ナビゲーションメニュー、画像など、何でもあります
00:20:42しかも21st.devだけではありません。CodePenもありますよね
00:20:46CodePenにも、取り入れ可能なかっこいいデザインがたくさんあります
00:20:50Mantineもいいですね。実際
00:20:52こうした素晴らしいコンポーネントを見つけて
00:20:57自分のページに統合できる場所は山ほどあります
00:20:59でも、もっとカスタムなものが欲しい場合はどうでしょう？
00:21:01どこかで見つけたランダムなコンポーネントをコピーするだけでは物足りません
00:21:04どうすれば本当にオリジナルなものを作れるのか？ 選択肢は2つあります
00:21:08一つは、21st.devのコンポーネントを使いつつ
00:21:11Claude Codeに指示して変更させることです。しょせんはコードですから
00:21:14プロンプトから得た正確なコードを、心ゆくまで調整できます
00:21:18あるいは、文字通りゼロから自分で作ることもできます
00:21:21Pinterestに行って、芸術性の高い
00:21:25かっこいいランディングページを見つけたとしましょう
00:21:29AIを使ってこのような画像を生成し
00:21:34ページを訪れた人を惹きつける目玉にすることを妨げるものは何もありません
00:21:36静止画である必要もありません
00:21:39背景に動画を追加したり
00:21:42特定のスクロールアニメーションと連動させたりすることも可能です
00:21:45ステップ4で学んだアイデアを、自分のものにするのです
00:21:49では、実際にやってみましょう。ウェブページをさっとリデザインして
00:21:53OpenHandsのクローンから脱却し、かっこいいAIアートを制作して
00:21:57サイトを訪れたときに真っ先に目に飛び込んでくるようにします
00:22:01やり方はもうお分かりですね
00:22:02まずはインスピレーションを探します。Pinterestを
00:22:06しばらくスクロールしてみたところ
00:22:07ヒーローセクションの背景に、アニメ調というか
00:22:10スタイリッシュな画像を使ったサイトがたくさん見つかりました
00:22:14そして、テキストを左側に配置するスタイルです
00:22:16ここでビジュアルストーリーテリングを導入しましょう
00:22:19私たちが作っているアプリは何でしたっけ？ 「Argus（アルゴス）」ですよね
00:22:22理想を言えば、画像そのものと結びつくような
00:22:27キャッチコピーを考える必要があります。Argusで何を伝えたいのか？
00:22:30アルゴスといえば、神話に登場する「百の目」を持つ巨人です
00:22:33ソーシャルメディアの話をしています
00:22:34他の誰よりも早く何かを見つけ出す、という話です
00:22:37そこで考えたコピーは「See what's next（次を見通す）」、シンプルです
00:22:41決まりましたね。そして、これを考えるのを手伝ってくれたのは
00:22:44もちろんClaude Codeです。それからClaude Codeに
00:22:47こう言いました。「ねえ
00:22:49ビジュアルストーリーテリングについて考えてるんだけど
00:22:51どんなイメージのアイデアがあるかな？」
00:22:54この段階では、自分だけのものを作りたいですからね
00:22:57レイアウトなどの一般的なコンセプトは参考にできますが
00:23:01画像は自分自身のオリジナルである必要があります。そして
00:23:04アプリの実際の機能と結びついたビジュアルストーリーテリングがあれば
00:23:07説得力が格段に増します
00:23:10そこで私は、Claude Codeからもらったアイデアをもとに
00:23:15画像を作成しました。今回はMidjourneyを使いました
00:23:18画像生成AIは何を使っても構いません
00:23:21Nano Banana ProでもSeaDreamでも、何でもいいです
00:23:24こうしたコンセプトアートのような作品にはMidjourneyがとても気に入っています
00:23:28特にバージョン7は素晴らしいですね
00:23:31バージョン8はまだあまり試していませんが
00:23:33少し変わったプロンプトでも、いい感じにしてくれます。例えば
00:23:38「Argusというサイトのランディングページの背景画像が必要だ
00:23:41コピーは『See what's next』だ」といった具合に
00:23:43かなり曖昧で下手なプロンプトでも
00:23:47かっこいい候補をたくさん出してくれました
00:23:50その中でこれを見て「これ、最高にクールだな」と思ったんです
00:23:54すでに頭の中でイメージが湧いていました
00:23:55情報のテキストをこの左側に配置して
00:23:59上部にも何か置けるかな、とか。色々と遊べそうです
00:24:02これは本当にいい。後でアニメーションも加えられるかもしれません
00:24:06画像が決まれば、あとは簡単です
00:24:10画像をダウンロードしてClaude Codeに渡し、「ねえ
00:24:13この画像を背景に使って、ヒーローページを作り直したいんだ」と言います
00:24:17Claude Codeの中で、私はこう伝えました
00:24:19「フロントエンドを全面的に変えたい
00:24:21この画像をヒーローセクションの背景にしてほしい
00:24:24アプリ『Argus』の情報は左側に寄せて
00:24:27右側には画像が映えるように余白を残してくれ。コピーは『See what's next』で」
00:24:30これでどうなるか見てみましょう。繰り返しますが
00:24:34ここからは皆さんのクリエイティビティを発揮させる段階です
00:24:37なぜなら、皆さんはここに来るまでに
00:24:39よくある汎用的なSaaSテンプレートとは違う
00:24:43様々なフロントエンドデザインに触れてきたからです
00:24:46かっこいいアートを使うこと、それが何であれ
00:24:48ビジュアルストーリーテリングを追求することが、あなたのスキルを一段引き上げます
00:24:52さて、新しい背景画像を使った、更新後のヒーローセクションがこちらです
00:24:52全体が見えるように少し縮小して表示しています
00:24:56Claude Codeは気の利いたことに
00:24:58全体の配色も更新してくれました。もちろん、これはまだ最初の一歩に過ぎません
00:25:02背景を追加しただけですが、それでもすぐに
00:25:06より独創的でクリエイティブな、他とは違う印象を感じるはずです
00:25:09そうですよね？
00:25:12ここからさらに自分なりの「こだわり」を加えていきます
00:25:15まずは手始めに、画像のアップスケールです
00:25:19Midjourney内で実行できます。今のままだと
00:25:21画像が少し引き伸ばされた感じで、ディテールが物足りませんからね
00:25:24あるいは、「動き」を加えるのもいいでしょう
00:25:28背景は静止画である必要はありません
00:25:30動画を配置することも可能です
00:25:32動画化するのはとても簡単です
00:25:34Kling 3.0やVeo 3.1など、開始フレームを指定できる場所へ行きます
00:25:36終了フレームも指定できるのが理想的です。左側の例のようにですね
00:25:40そうすれば動きが破綻しません。というのも
00:25:41理想的なのは完全にループする動画だからです
00:25:45AI画像で完璧なループを作るのは難しいこともあります
00:25:49その場合の次善の策は、15秒程度の長めの動画を作ることです
00:25:52そして、動きを極めて控えめにします。今見ているような感じですね
00:25:55これを背景にすれば、たとえ鳥が止まっていたとしても
00:25:59全く問題ありません。パララックスのような効果が得られます
00:26:03ヒーローページで15秒もあれば
00:26:07誰かが30秒も居座って、最後までじっと見続ける可能性は低いです
00:26:11たとえ最後に少し繋ぎ目の違和感があっても、大丈夫でしょう
00:26:14幸いこれについては
00:26:18動きを非常に小さくしたので
00:26:2215秒から1秒に戻った瞬間にほとんど気づきません
00:26:24これを使ってみましょう。皆さんはおそらく
00:26:25「パフォーマンスはどうなの？」と聞きたいはずです
00:26:29デスクトップでのパフォーマンスについては、動画でも全く問題ありません
00:26:31ただしClaude Codeにはこう指示します。「ねえ
00:26:35もしモバイルユーザーがサイトに来たら
00:26:38動画は読み込まずに、静止画だけを表示して」
00:26:42動画は読み込まれず、静止画のみが表示されるようになります。
00:26:45そこで、新しくアップスケールした画像を渡し、モバイル用にはそれを使うよう指示しました。
00:26:50そして、動画へのリンクを渡して、こう言いました。
00:26:52「ヒーローセクションの要素をこれに差し替えて」と。
00:26:54動きを加えた現在のページを見てみましょう。
00:26:58かなり良い感じになったと思いませんか？ポイントは「控えめ」であることです。
00:27:02背景でフル版のビデオゲームが動いているような、派手すぎる動きは避けるべきです。
00:27:06意図があるなら別ですが、
00:27:07今回のように雲がかすかに動いたり、
00:27:11下の方で水面が揺れていたりする程度が最適です。これにより、
00:27:14ウェブページに、
00:27:15独自のキャラクター（個性）が宿ります。これこそがレベル5の本質です。
00:27:19繰り返しになりますが、最初の4つのレベルは基礎を学び、プロの手法を知る段階でした。
00:27:22レベル5では、実際にカスタマイズを行っています。
00:27:25ヒーローセクションで行ったように、
00:27:28他のすべてのセクションにも同じようにアプローチする必要があります。
00:27:32例えばこのカード、見た目がひどいですよね。背景も退屈です。
00:27:36どこにでもあるようなデザインです。では、どうすればいいでしょうか？
00:27:38インスピレーションを探すのです。21st thought devやAwwwardsを見に行きましょう。
00:27:42それをClaude Codeに取り込み、
00:27:45自分が納得できるまで何度も試行錯誤を繰り返します。ただ、この段階で、
00:27:48視覚的な編集を続けていると、Claude Codeの中にいることに
00:27:51少し窮屈さを感じるようになるかもしれません。
00:27:54ターミナルでテキストを扱っている状態と、
00:27:58視覚的なメディアを操作しようとする状態の間には、常にギャップが生じます。そこで、
00:28:03ステップ6では、Claude Codeの外にあるツールを使い始めます。
00:28:06レベル6では、外部ツールを取り入れることで、
00:28:11視覚的な要素をより具体的に作り込んでいくことができるようになります。
00:28:14活用できるツールはたくさんあります。
00:28:17paper.design、Stitched、Figmaなどです。
00:28:21pencil.devもありますね。
00:28:22これらの外部プログラムを導入して、さらに微調整を加えるための土台とスキルが、
00:28:26今の皆さんには備わっています。特におすすめなのは、
00:28:29AIを積極的に取り入れていて操作が簡単なStitchedです。しかも無料です。
00:28:33これはGoogleが提供しているもので、フロントエンドのデザインを
00:28:37視覚的なキャンバス上で操作できるツールです。
00:28:38ここで行ったのは、ゼロから何かを作ることではありません。
00:28:42既存サイトのリデザインです。現在のサイトのスクリーンショットを渡しました。
00:28:45ヒーローセクションと、それ以外の部分の両方です。
00:28:47そして、「これが今の構成です。ヒーローセクションは気に入っています。
00:28:51その美学や色彩は好きですが、
00:28:53サイトの下半分を全面的にアップデートしたいです」と伝えました。
00:28:57今のままでは、とても平坦に感じるからです。
00:28:59「上部にあるようなイメージや色彩を、下のセクションにも取り入れたいです。
00:29:03どんなリデザイン案ができるか見せてください」と指示しました。
00:29:05生成されたリデザイン案を見てみましょう。
00:29:08出来上がったのがこちらです。
00:29:10Das Coole an Stitched ist, dass ich damit Redesigns vom Redesign erstellen kann.
00:29:14要素を選択すると、
00:29:15下の方で他のチャットボットと同じようにプロンプトを入力できます。
00:29:18また、右クリックしてバリエーションを選択すれば、
00:29:22レイアウト、配色、画像などを変更できます。
00:29:24これはStitchedでのリデザインであり、コードを一から書いているわけではないので、
00:29:28生成されたのはあくまで「画像」です。
00:29:30ですが、これを右クリックしてコピーし、
00:29:34Claude Codeに戻って「これについてどう思う？」と聞くことができます。
00:29:37こうした視覚的なエディタツールは、
00:29:38アイデアを練るプロセスにおいて非常に強力です。
00:29:43他にも多くのツールがあります。Pencil.devもその一つで、
00:29:46今後いたるところで見かけることになるでしょう。
00:29:47CursorやVS Codeを使っている場合に非常に効果的です。
00:29:50キャンバスを表示させながら、リアルタイムで編集できるからです。
00:29:54この分野では毎週のように新しいツールが登場しています。
00:29:58そこで、Stitchedで作成した画像をClaude Codeにドロップして、
00:30:01「これについてどう思う？」と尋ねました。
00:30:03「背景画像に適用されている、このグラスモーフィズム効果はどうかな？
00:30:06これを試してみよう」と提案したのです。
00:30:08ここから先、サイトが理想の形になるまで、
00:30:12皆さんが行う作業はまさにこれです。
00:30:12フロントエンドデザインのこの段階は、ひたすら「いじくり回す」プロセスです。
00:30:15何度も、何度も試行錯誤を繰り返します。
00:30:16皆さんはすでに、何を目指すべきかを見極めるスキルを身につけていますが、
00:30:21これは極めて反復的なプロセスであり、本当の意味での近道はありません。
00:30:25しかし、インスピレーションを見つけ、
00:30:27実際に手を動かすためのツールはすべて揃っています。
00:30:31私自身が20分ほど試行錯誤した結果、
00:30:34Argusのサイトはこのようになりました。
00:30:37まず、いくつか細かい変更を加えたことで、
00:30:40サイトに重厚感とプレミアムな雰囲気が生まれました。一つ目はローディング部分です。
00:30:43ページを更新すると何が見えますか？
00:30:45テキストが読み込まれる前に一瞬の「ため」があることに気づくでしょう。
00:30:49これがサイトに「重み」を感じさせてくれるのです。
00:30:52また、フォントも変更しました。フォント選びやタイポグラフィは非常に重要です。
00:30:57どこでフォントを探し、
00:31:00インスピレーションを得ればよいでしょうか？おすすめはGoogle Fontsです。
00:31:03膨大な数のフォントがすべて無料で提供されています。
00:31:06タイプ別に分類されており、Claude Codeですべて使用可能です。
00:31:08「どれを使えばいいか分からない」という時は、ぜひチェックしてみてください。次にスクロールセクションを追加しました。
00:31:11また、画面下部にティッカー（流れる文字）を追加し、
00:31:14動画セクションと、下にある背景画像との
00:31:19境界線としての役割も持たせました。以前は、
00:31:25動画のヒーローセクションから同じ画像の背景へ移る境界が
00:31:30非常に唐突でしたが、これによって自然な仕切りができました。
00:31:35また、Stitchedから取り入れた変更点にも注目してください。
00:31:38グラスモーフィズム効果を採用しました。まだ少し調整が必要で、
00:31:41要素がバウンドする際に少し途切れて見えることがありますが、
00:31:44背景のアートワークを活かすことで、サイトに個性が生まれています。
00:31:48さらに、細かな演出も見てみましょう。
00:31:52ここでページを更新すると、
00:31:54カウンターがゼロから1,000万まで一気にカウントアップします。
00:31:59これらは、細部にまでこだわり、
00:32:03プロとしての誇りを持ってサイトを作っていることを示す「わずかな差」です。
00:32:07「AIツール」や「コンテンツ戦略」といった文字の上を光が走り抜けるような演出もあります。
00:32:10これも小さな工夫の一つです。
00:32:12実を言うと、こうした細部の一つひとつに気づく人はほとんどいないでしょう。
00:32:16しかし、これらすべてが組み合わさることで、
00:32:20最終的には一貫性があり、作り手の情熱が伝わるサイトになります。
00:32:24AIをツールとして使ったかどうかは関係ありません。
00:32:27大切なのは、それが「丁寧に作り込まれた」ということです。例えば、
00:32:31上部にあるスクロールバーの進捗表示もそうです。これも細かなこだわりです。
00:32:34では、どのようにプロンプトを出したのか？
00:32:38正直なところ、
00:32:40これまでお話ししてきたことの組み合わせに過ぎません。
00:32:42自分が好きなデザインを見つけ、
00:32:45そのスクリーンショットを撮って、Claude Codeに取り込みました。ただ、
00:32:48私はウェブデザインの専門家ではありません。そこで、
00:32:52「Stitchedで見たグラスモーフィズムのカードが気に入った」
00:32:53ということはすぐに伝えました。
00:32:57Stitchedが最初にそのアイデアをくれたからです。
00:32:59Claude Codeが最初に作ったカードは、とても平坦なものでした。
00:33:03ページから浮き出すような立体感がなかったのです。そこで、
00:33:06「もっと重みを持たせて、ページから浮き出して見えるようにしよう」と言いました。
00:33:08さらに、Claude Codeに対してこうも言いました。
00:33:12「こうした要素をデザインする際の、
00:33:17ウェブデザインのベストプラクティスをウェブ検索して調べてほしい」と。
00:33:20「カードを際立たせて重厚感を出す方法を考えるだけでなく、
00:33:22控えめながらも、
00:33:25ウェブサイトをよりプレミアムに見せるための他のアイデアも提案してほしい」と指示したのです。
00:33:29すると、いくつものアイデアを提案してくれました。
00:33:32それらを一つずつ検討し、採用するものとしないものを決めました。
00:33:36これが、制作を進める上での一般的な「リズム」です。
00:33:40自分ひとりの知識に頼る必要はありません。
00:33:41Claudeにウェブ上のベストプラクティスを調べさせることができます。ですが、
00:33:45常に主導権を握っているのは、あなた自身であることを忘れないでください。
00:33:47あなたが運転席に座り、恐れずにこのプロセスを楽しんでください。
00:33:50こうした細かな工夫こそが、サイトに個性（キャラクター）を与え、
00:33:53それを「自分の作品」にするのです。
00:33:57あなたのクリエイティブな精神が、画面上の表現として反映されればされるほど、
00:34:02サイトの仕上がりは良くなります。本当です。
00:34:04なぜなら、あなたが何を実現し、何を表現したいのかを反映させたものであれば、
00:34:08それを「AIが作った粗悪品」と呼ぶことはできないからです。
00:34:11それはあなた自身の作品であり、単なるAIのテンプレートではありません。
00:34:14このレベルは表面的には「Stitchedのような外部ツールを使う」
00:34:17という内容に見えるかもしれませんが、
00:34:19本質は、今私が申し上げたことすべてに含まれています。
00:34:23Stitchedなどを使って試行錯誤を繰り返すこと。
00:34:25しかし究極的には、このレベルに到達したことで、
00:34:27皆さんはフロントエンドデザインにおいて創造的に考え、自分を表現できるようになり、
00:34:31Claude Codeを「道具」として使いこなせるようになったのです。
00:34:34最初の数レベルでは、ただ流れについていくのが精一杯だったはずです。さて、
00:34:37いよいよ最後のレイヤー、レベル7についてお話ししましょう。
00:34:413Dに関する内容ですが……先にネタバレをしておくと、
00:34:45ここは、私たちのほとんどが足を踏み入れることのない領域です。
00:34:51「フロンティア」や「アーキテクト」による3D体験について語る時、
00:34:55それは「メジャーリーグ」の世界の話です。
00:34:57私たちが簡単に手を出せるものではありません。現時点、
00:35:022026年3月末の時点では、
00:35:05まだ私たちの守備範囲ではないと考えています。
00:35:07というのも、ここではカスタムWebGLやシェーダー、3D体験の話になるからです。
00:35:12それは、
00:35:13もはやビデオゲームのように見えるウェブサイトのことです。例えば、
00:35:17こちらのウェブサイトを見てください。
00:35:20これが「Ctrl+U」や「Ctrl+A」でソースコードを表示させて、
00:35:25HTMLやCSSを覗けば仕組みがわかるようなものだと思いますか？
00:35:30いいえ、これはもはや「アート」の領域です。
00:35:34デザイナーのチームが膨大な時間をかけて
00:35:37作り上げたもので、息を呑むほど美しい。では、
00:35:41理論上、AIにこれが可能かと言われれば「イエス」かもしれませんが、正直なところ、
00:35:45これは私や皆さんの次元を遥かに超えています。
00:35:47あえてここに含めたのは、何が可能かを知ってほしかったからです。
00:35:50こうしたサイトをもっと見たいなら、
00:35:53先ほど紹介したAwwwardsへ行き、
00:35:54「Site of the Day」や「Site of the Month」を見てみてください。
00:35:57どれも共通して、
00:36:00完全にカスタムメイドされた世界観を持っています。
00:36:03数年後には、AIを使ってこうした領域で遊べるようになるかもしれません。
00:36:07本当に素晴らしい世界です。
00:36:09ウェブデザインの世界は、知れば知るほど面白いものです。
00:36:12こうした作品はまさに芸術です。
00:36:16この分野に足を踏み入れたばかりの頃は、
00:36:17どれも同じようなSaaS風のサイトばかりに見えるかもしれません。
00:36:19しかし、こうした表現を目の当たりにすると、固定観念が打ち砕かれます。
00:36:22これがレベル7の世界です。
00:36:24もし、AIを使ってこうしたサイトを作る方法を知っているなら、
00:36:27あなたがYouTubeで動画を作るべきです。
00:36:29私がぜひ教わりたいくらいですから。ただ、
00:36:30このレベルを設けたのは、純粋にこの「Igloo」のサイトを紹介したかったからです。
00:36:34本当に格好いいサイトなので、ぜひチェックして、
00:36:38圧倒されてみてください。そして、将来的に自分に何ができるかを
00:36:42想像してみてください。
00:36:43Claude Codeによるフロントエンドデザイン、全7レベルの解説はここで終わります。
00:36:46皆さんに何よりも伝えたかったのは、
00:36:51こうしたレベルに到達するための「スキルの段階的な進歩」という考え方です。
00:36:56それは、誰にでも実現可能な道です。
00:36:58まずは好きなものを見つけ、
00:37:01次にそれを解体する方法を学ぶ。
00:37:03ウェブサイトをクローンするというアイデアは、非常に重要だと思います。
00:37:06Claude Codeに、自分が愛するサイトがどのように作られているかを
00:37:10解説させることで、多くの学びが得られるからです。
00:37:14そのプロセスを通じて、存在すら知らなかった
00:37:18様々なテクニックや効果について知識を深めることができます。そして、
00:37:21それらを自分のサイトに持ち帰り、自分なりのクリエイティブなスタイルで
00:37:26応用していく。それこそが本質です。
00:37:30「Claude Codeにある特別なスキルを一つ使えば、
00:37:33魔法のように素晴らしいサイトができる」という話ではありません。もしそうなら、
00:37:37世の中のすべてのサイトが美しくなっているはずですが、現実は違います。
00:37:40つまり、それほど単純なことではないのです。
00:37:44「AIにはセンス（感性）がない」という意見がありますが、
00:37:47それはある意味で正しいかもしれません。
00:37:48しかし、より正確に言えば、
00:37:53私たちは自分のセンスを言葉にするのが非常に苦手であり、
00:37:57その理由は、センスを言語化するための
00:38:02「正しい言葉」を知らないからです。私たちはウェブデザイナーではないので、
00:38:05専門用語も作法も知りません。
00:38:06これはウェブデザインに限らず、AI全般に言える共通の課題です。
00:38:10コーディングなどの他の分野でも同じことが言えます。
00:38:13その分野の出身でなければ、
00:38:15文字通り「言語」を話すことができません。その結果、
00:38:19あなたとClaude Codeとの間に意思疎通の齟齬が生じ、
00:38:21出来上がるものが雑で凡庸なものになってしまうのです。
00:38:25ですが、このロードマップを辿ることで、
00:38:29時間をかけてそうした課題を解決していく道筋が見えてきたはずです。
00:38:32何か一つでも得られるものがあれば幸いです。私自身、とても楽しんで制作できました。
00:38:37感想があればぜひコメント欄で教えてください。また、
00:38:40Claude Codeマスタークラスに興味がある方は、Chase AI Plusをチェックしてみてください。
00:38:43皆さんのご参加をお待ちしています。それでは、またお会いしましょう。