Claude Code + Impeccable = デザインのチートコード
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00「AIにはセンスがない。それはあなたの責任だ」
00:00:03視覚的な出力が平凡なのは
00:00:05あなたのプロンプトが平凡だからです。
00:00:08あなたは専門用語や
00:00:10言語、専門的な呼称を
00:00:11実際のデザイナーが使うような言葉で使っていません。
00:00:13しかし幸運なことに、解決策を見つけました。
00:00:16「Impeccable」というものです。
00:00:17これはオープンソースのGitHubリポジトリで
00:00:20実質的には一つのスキルとして
00:00:23Cloud Codeにインポートでき
00:00:25この問題をまさに解決してくれます。
00:00:27Cloud Codeにデザイン言語を与え
00:00:29優れたデザインとはどのようなものかを教え込み
00:00:32同時に、避けるべき悪いデザインについても指示します。
00:00:36今日は、このスキルの仕組みを紹介するだけでなく
00:00:39それを使って新しいウェブサイトを構築し
00:00:42既存の私のサイトを編集します。
00:00:45この動画が終わる頃には、あなたはもう言い訳できません。
00:00:48平凡なフロントエンドデザインを作ることに。
00:00:51つまりImpeccableとは、オープンソースのGitHubリポジトリで
00:00:54一つのスキルを提供し
00:00:55優れたフロントエンドデザインを
00:00:58作れるようにするものです。
00:01:00「たった一つのスキル」と言いましたが
00:01:01それは少し控えめな言い方で
00:01:03このスキルには23種類の異なるコマンドが含まれています。
00:01:077つのドメイン特化型リファレンスファイルがあり
00:01:10避けるべきアンチパターンを教えてくれ
00:01:13ブラウザ内で要素を編集することさえ可能です。
00:01:17つまり、非常に堅牢なツールなのです。
00:01:20これは単なるフロントエンドデザインのスキルではなく
00:01:22Cloud Codeが何をすべきかという
00:01:24数段落程度の指示ではありません。
00:01:26しかし、その複雑さは少し圧倒されるかもしれません。
00:01:28なぜなら文字通り23種類の異なるコマンドがあり
00:01:31デザインに関連する様々な処理を
00:01:34実行してくれるからです。
00:01:35リポジトリ内でそれらすべてを分解していますが
00:01:37正直なところ、すべてを覚えることはできないでしょう。
00:01:40ですが、役立つことが2つあります。
00:01:421つ目は、言うまでもなくCloud Codeが
00:01:44どれを使うべきかをかなり上手く判断してくれること。
00:01:46そして2つ目は、彼らがウェブサイトを用意しており
00:01:4923個のスキルそれぞれが何をするかを示していることです。
00:01:53GitHubからリンクされているウェブサイトは
00:01:54impeccable.style です。
00:01:56素晴らしいことに、適用可能なすべてのスキルについて
00:01:59「以前」の様子を見ることができ
00:02:02それは普通のCloud Codeの状態ですが
00:02:03「その後」の様子も確認できます。
00:02:05特定のImpeccableコマンドを使った後の状態です。
00:02:07なかなか優れていますね。
00:02:09Impeccableにはデザインの7つの柱があります。
00:02:12タイポグラフィ、カラー、空間デザイン、レスポンシブ
00:02:15インタラクション、モーション、UXライティングです。
00:02:17単に色などを調整するだけではありません。
00:02:21非常に包括的なのです。
00:02:22ここで、これらすべてのコマンドを
00:02:25スクロールして見ていくことができます。
00:02:27先ほど言ったように、それらを使った場合と
00:02:29使わなかった場合の違いを確認できます。
00:02:31もし「これは一体何をするのか？」と思ったなら
00:02:34「実際に動作しているところが見たい」なら
00:02:35ここがその場所です。
00:02:37ウェブサイトにはケーススタディも含まれており
00:02:39彼らがどのようにしてこのウェブサイトを
00:02:40Impeccableと一枚の画像だけで作ったかを見せています。
00:02:42かなりかっこいい仕上がりだと思います。
00:02:43最後に、ライブモードを披露していますが
00:02:45これも少し試してみる予定です。
00:02:47現在アルファ版ですが
00:02:48先ほど話したように、ブラウザ経由で
00:02:51実際にウェブサイトをいじることができます。
00:02:53Chrome拡張機能やCLIもありますが
00:02:56正直なところ
00:02:56スキルの恩恵の99%は得られるでしょう。
00:02:59ですので、今日はそこに焦点を当てます。
00:03:01インストールはたった一行のコードです。
00:03:04コピーして
00:03:06ターミナルに貼り付けるだけです。
00:03:07Impeccableの使い方としては
00:03:09大きく分けて2つの道があります。
00:03:111つは「グリーンフィールド」
00:03:12ゼロからウェブサイトを構築する場合
00:03:142つ目は既存サイトの編集です。
00:03:17今日はその両方を行いますし、それ以上もやります。
00:03:20ゼロから構築する方法を見せるだけでなく
00:03:22ゼロから構築した時に
00:03:23どう見えるかもお見せします。
00:03:25参照画像を使ったり
00:03:27ムードボードのようなものを使う場合です。
00:03:30それが終わったら、私の実際のウェブサイトに移動し
00:03:33Impeccableがそれをどう評価するか
00:03:36そして私の作品にどんな「ダメ出し」ができるかを見ていきます。
00:03:41最後に、Impeccableライブを見てみます。
00:03:43これはアルファ版ですが
00:03:44現時点でどれほど優れたものかを確認しましょう。
00:03:48本題に入る前に
00:03:50誰もが大好きなお決まりのスポンサー、私からの一言です。
00:03:54先月、Cloud Codeマスタークラスを公開しました。
00:03:56これはゼロからAI開発者になるための最高の道であり
00:03:59技術的なバックグラウンドがない方には特に適しています。
00:04:02このコースは毎週更新しているので
00:04:05このワイルドなツールをどう使うかを学ぶには
00:04:07最高の場所です。
00:04:10実際のユースケースに焦点を当てています。
00:04:12つい最近、Cloud Codeエージェント型OSの
00:04:13レッスン計画をすべて公開しました。
00:04:16ぜひ手に入れたいという方は
00:04:18「Chase AI Plus」で見つけることができます。
00:04:20ピン留めされたコメントにリンクを貼っています。
00:04:23では始めましょう。
00:04:24グリーンフィールドプロジェクトから着手します。
00:04:27ゼロからウェブサイトを構築します。
00:04:29繰り返しになりますが、コマンドが多すぎて
00:04:31少し混乱しやすいかもしれません。
00:04:32ゼロから何かを始めるなら
00:04:35「impeccable craft」で始めることを提案します。
00:04:39なぜなら、それには「impeccable teach」のような
00:04:41補助的なコマンドが含まれているからです。
00:04:44これらすべては何を意味するのでしょうか？
00:04:45Impeccable craftとは、ほぼ
00:04:48独自の「プランモード」を実行し
00:04:50私たちのウェブサイトや製品、
00:04:53何を構築しようとしているのかを尋ねるということです。
00:04:55その過程で、2つのファイルが作成されます。
00:04:59「product.markdown」と
00:05:01「design.markdown」です。
00:05:02「design.md」は、私たちが
00:05:07Google Stitchで見たものとほぼ同じです。
00:05:09みなさん、Google Stitchを覚えていますよね？
00:05:11Googleの無料デザインツールです。
00:05:13そこにはデザインシステムというものがあり
00:05:14「design.md」ファイルがあります。
00:05:16これは非常に詳細なマークダウンファイルで
00:05:20AIにどう構築すべきかを指示するものです。
00:05:21この「design.md」という構造は
00:05:24ある種の業界標準になりつつあります。
00:05:27最近いたるところで見かけますよね。
00:05:29Impeccableもそのアプローチに従っています。
00:05:31つまり、私たちにインタビューを行い
00:05:32何を構築しているのかを把握し
00:05:34どのような見た目にしたいかを確認します。
00:05:36インタビューが完了すると
00:05:37ランディングページを作成してくれます。
00:05:39それではCloud Code内で、
00:05:41「impeccable-test」という新しいディレクトリにいます。
00:05:44コマンドは「impeccable-spacecraft」です。
00:05:47プロンプトは「架空のSaaS製品
00:05:49Lighthouseのランディングページを作ろう」です。
00:05:51「ソロ創業者や小規模チーム向けの分析プラットフォームです。
00:05:54質問があれば何でも聞いてください」と。
00:05:56これは前回の動画で
00:05:58Huashu Designに出したプロンプトとほぼ同じです。
00:06:01まだ見ていない方はぜひチェックしてください。
00:06:03あれはCloud Designのクローンといえます。
00:06:06Impeccableがそのデザインシステムに対して
00:06:08どう対抗できるか興味深いところです。
00:06:11まだその動画を見ていない場合は
00:06:13上にリンクを貼っておきます。
00:06:14すると13の質問が返ってきました。
00:06:16最初の4つはすべて製品に関することです。
00:06:18「実際の顧客は誰か？」
00:06:19「Lighthouseをどう説明するか？」
00:06:21「訪問者のマインドセットは？」
00:06:22「主要なCTA（行動喚起）は何か？」
00:06:23「このランディングページの本来の目的は？」
00:06:25次の質問はボイスや外観についてで
00:06:28その後、スコープの話に移ります。
00:06:29「ヒーローセクションだけでいいのか？」
00:06:30「フルスクロールか、実際のスクリーンショットはあるか？」
00:06:32「他に提供できる素材はあるか？」
00:06:34私が気に入ったのは、質問の深さです。
00:06:36これは前回の動画でHuashu Designが
00:06:40した質問よりも多いです。
00:06:41そしてこれは「Claude Design」のようなツールから
00:06:43受ける質問量に近いものです。
00:06:44非常に奥深く、これを見るのは楽しいです。
00:06:46では、これらを埋めていきましょう。
00:06:49かなり標準的に答えておきます。
00:06:50特別なことは何もする必要はありません。
00:06:52フルスクロールをお願いしました。
00:06:53これがImpeccableによる最初の試作の結果です。
00:06:56最小限のガイダンスでしたが。
00:06:57私たちがやったのは質問に答えたことだけです。
00:06:59素材や例を一切与えていません。
00:07:01さて、早速ですが
00:07:02これを見て即座に「AIの駄作」だとは思いません。
00:07:05最近のモダンなフロントエンドデザインでは
00:07:08このクリーム色やセリフ体のようなフォントを
00:07:11いたるところで見かけるようになりました。
00:07:13特にClaude Designのようなものでは。
00:07:16このダッシュボードは気に入りました。
00:07:18間違いなく好きです。
00:07:20あらゆるAIデザインサイトで見かける
00:07:23ありきたりな弁当箱スタイルではないのがいい。
00:07:25この部分はかなり良い感じです。
00:07:26引用、完全な価格表
00:07:30そしてメールアドレスを登録してくれ、という流れです。
00:07:32ということで、最初のパスとしてはかなり良いですね。
00:07:35ですが、最近私がWebデザインをする際に
00:07:37Claude Codeを使って
00:07:40ただ一つの出力をさせるだけでは満足できないんです。
00:07:44そこでImpeccable、つまりClaude Codeにこう伝えました。
00:07:47Webサイトのレイアウトを一つだけに絞りたくないんです。
00:07:50ここにあるのが最初のパスでしたが、
00:07:52選べるように3つの異なるバリエーションを見せてほしいと。
00:07:56しかも、それぞれがかなり異なるものになるようにしたい。
00:07:59さらに、それらすべてをクリックして確認できるようにして、
00:08:01並べて比較できるようにしたいんです。
00:08:03つまり、細かなコンポーネントをいじる前に
00:08:05まずはマクロなレイアウトを
00:08:08いくつか見ておきたいということですね。
00:08:09そうしてImpeccableが出してくれたのがこれです。
00:08:11まず、先ほど見たエディトリアルなもの。
00:08:15次に「ドレンチド（drenched）」と名付けられたもの。
00:08:17明らかにスタイルが異なり、色がより多く使われています。
00:08:20そして最後がブルータリストなデザイン。
00:08:22こちらがその「ドレンチド」です。
00:08:24間違いなくかなり違いますよね。
00:08:26フロント部分で少し重複があるものの、
00:08:29よくあるAI生成物とはかなり雰囲気が異なります。
00:08:34見ていくと、このWebサイトの大胆さは
00:08:39なかなか良いなと思います。色については何とも言えませんが。
00:08:43個人的には、このブルータリストのものが気に入っています。
00:08:44とてもグレースケールな感じですが、
00:08:46数字の配置の仕方が好きなんです。
00:08:48ボックスの少しずれたような感じもいいですね。
00:08:52ラインが完全に揃っていないところとか。
00:08:54実はこれ、すごく気に入っています。
00:08:56とてもかっこいいし、他とは全く違いますよね。
00:08:58ということで、今のところは
00:09:02これで行こうと思います。
00:09:04ちなみに、このようにデザインを3つ提示させて
00:09:07一度に確認する手法というのは、
00:09:08Impeccable固有の機能というわけではありません。
00:09:12これは私が独自に行っていることで、
00:09:13単なる一つのプロンプトに過ぎません。
00:09:14どんなデザインツールや技術を使っていても
00:09:17ぜひやってみることを強くおすすめします。
00:09:19これは「Stitch」から学んだことだと思います。
00:09:23Google Stitchは
00:09:25こういった比較作業が本当に簡単で、
00:09:26異なるバリエーションをすべて同じページで確認し、
00:09:29比較検討できるんです。
00:09:30私自身、視覚的に確認しないと
00:09:33自分がどうしたいのか全く想像がつかない人間なので、
00:09:37本当におすすめですよ。
00:09:38別に3つである必要はありません。
00:09:396つでも、100万個でも構いませんから。
00:09:41それにClaude Codeにプロンプトを投げる際も、
00:09:42単に「こうしたい」と言うだけでなく、
00:09:443つすべてを同一ページに表示してほしい、
00:09:47それぞれフルスクリーンで確認できるようにしたいと伝えればいいんです。
00:09:50さらに多くの異なるマクロなオプションを出させてから、
00:09:53その中から気に入ったものを選び、
00:09:55それらを実際に形にするよう
00:09:57指示することもできます。
00:09:57生成には少し時間がかかりますからね。
00:09:59さて、気に入ったランディングページができたので、
00:10:01次は編集作業に取りかかりましょう。
00:10:03ここで登場するのが新しい「Impeccable Live」です。
00:10:06やり方は簡単で、ただこう言うだけです。
00:10:07「このブルータリストのページでImpeccable Liveを実行して」と。
00:10:10そのコマンドを実行すると、
00:10:12Claude Codeがライブモードが起動したことを教えてくれます。
00:10:14ローカルホストへのリンクが提示されるか、
00:10:18ブラウザをリフレッシュするだけで表示されます。
00:10:20そうすると、ページの中で
00:10:22スクロールに合わせて要素がハイライトされるのがわかります。
00:10:26画面下部にもいろいろな操作パネルが表示されていますね。
00:10:29まず、「design.md」があります。
00:10:32これを押すと右側にサイドバーがポップアップします。
00:10:35「raw」をクリックすれば、生成されたすべてのコードが見られます。
00:10:39特定のコンポーネント、
00:10:41例えばこのメインコピーなどをクリックするとオプションが表示されます。
00:10:45まず「フリーフォーム（Free form）」があり、
00:10:47ここに直接テキストでプロンプトを入力したり、
00:10:50あるいは実質的に
00:10:52Impeccableのあらゆるコマンドにアクセスできます。
00:10:54「bolder（より太く/大胆に）」、「quieter（より静かに）」、「distill（要約）」、「polish（磨き上げる）」、「adapt（適応させる）」などです。
00:10:56これらは先ほど触れた23のImpeccableコマンドの
00:11:00一部です。
00:11:02例えば「bolder」を試してみましょう。
00:11:04bolderは基本的に事前設計されたプロンプトです。
00:11:09Impeccableのドキュメントを確認すると、
00:11:12bolderコマンドはその名の通り、デザインを大胆にするものです。
00:11:15こちらが適用前で、こちらが適用後です。
00:11:18より洗練された、印象的なものに変化しました。
00:11:21定義としては「安全なデザインを
00:11:26カオスに陥ることなく、インパクトのあるものに昇華させる」
00:11:28といったところで、使用方法や仕組みも記載されています。
00:11:31これにbolderを適用してみましょう。正直なところ、
00:11:32今のままでも十分に大胆な気がしますが。
00:11:34ベストな選択かはわかりませんね。
00:11:35さらに洗練させることも可能です。
00:11:37bolderに加えて任意のプロンプトを追加できます。
00:11:40例えば「色を追加して」と入力してみます。
00:11:43すると、ここに
00:11:463倍、4倍、2倍という選択肢が出てきます。
00:11:47これは表示させるバリエーションの数です。
00:11:50設定したら実行します。
00:11:51これはある意味で、先ほど
00:11:56ページ全体で行っていたバリエーション生成の
00:11:58マイクロ版のようなものです。
00:12:00特定の要素だけ変更して、バリエーションを見せるという。
00:12:03それを今度はミクロなレベルで行っており、
00:12:06より具体的に自分たちが求めている方向性を
00:12:08反映できるというわけですね。
00:12:09今回はbolderを選択しましたが、
00:12:1012あるコマンドのどれを選んでもよく、
00:12:13結果としてこれが出力されました。
00:12:14他の選択肢と比べても非常に大胆ですよね。
00:12:17これがバリエーション1、バリエーション2は
00:12:21少し控えめで、
00:12:22そしてバリエーション3はかなり攻めた感じです。
00:12:25バリエーションを調整する機能もあります。
00:12:27「tune（調整）」をクリックすると、
00:12:30オフセット具合を変えたりできます。
00:12:31例えば、「攻めた感じ」をどの程度にするか、
00:12:36色の見栄えをどうしたいかなどです。
00:12:39前回の動画やClaude Designを思い返すと、
00:12:42こうした細かな微調整は、
00:12:44まさにマイクロなtweaks（調整）であり、
00:12:47すべてのバリエーションに適用されます。
00:12:50キーの表示・非表示など、できることはたくさんあります。
00:12:53もしこれでいこうと決めたら、
00:12:54どうするか？
00:12:56「accept（適用）」を押せば、変更が反映されます。
00:13:00もしacceptを押して挙動が少しおかしくなったら、
00:13:02Claude codeの状態を確認してみてください。
00:13:03変更を適用して再ロードしているところです。
00:13:06こちらが変更後の姿です。
00:13:09まだ触れていない機能に「detect（検出）」があります。
00:13:10これを実行すると、
00:13:13本質的に「AIスロップ（AIらしすぎる粗い部分）」が含まれていないかチェックします。
00:13:17先ほど話したような
00:13:19アンチパターンがないかを探るわけです。
00:13:20今回はImpeccableで最初から作成されたものなので、
00:13:24おそらく何も検出されないでしょう。
00:13:26だから何も表示されていないんですね。
00:13:28後ほど自分のWebサイトで試す際、
00:13:31どうなるか見てみましょう。
00:13:32ライブシステムの使い方は大体こんな感じです。
00:13:34この部分は本当にクールですし、他のフロントエンドデザイン関連の
00:13:37ツールやリポジトリと差別化される点だと思います。
00:13:41特に、追加のバリエーションを生成できる点は素晴らしいです。
00:13:42これらすべてを一度に確認できるというのは
00:13:45本当に素晴らしいですし、
00:13:47非常に細かなミクロレベルで調整を重ねられる点も
00:13:49とても気に入っています。
00:13:52まだアルファ版なので、
00:13:54いくつかエラーが発生するかもしれません。
00:13:57再ロードの際に見られたような、
00:13:59多少粗削りな部分もまだありますが、
00:14:01それでも最高にクールだと思います。
00:14:03Impeccableを使うなら間違いなく試してみてください。
00:14:04生成して終わり、ではなく、
00:14:07ライブモードに入っていろいろといじってみるのがいいですよ。
00:14:09Webページが納得のいく形になったら、
00:14:11さらに実行できるコマンドが用意されています。
00:14:13「polish（磨き上げる）」を実行して、
00:14:16デザインシステム全体に最終的なパスをかけることもできます。
00:14:18「harden（堅牢化）」を使えば、
00:14:20エッジケースやエラーを確認し、
00:14:22すべてが正常に動作するように検証できます。
00:14:24繰り返しになりますが、実行できるコマンドの数と
00:14:25深さはかなり洗練されています。
00:14:28ですが、時間の都合上、ここからは
00:14:30ゼロから構築する方法をお見せしようと思います。
00:14:33ただし今回は、Impeccableに投影したい
00:14:35ビジョンのムードボードやモックアップを使用して
00:14:38構築してみます。
00:14:40彼らのケーススタディがどうであったか、
00:14:43実際に再現して確認してみたいんです。
00:14:45彼らは画像を取り込み、Claude Codeに入れ、
00:14:48Impeccableに処理させてWebサイトを作成したところ、
00:14:50素晴らしいものができあがっていました。
00:14:52なので私も、彼らのケーススタディで使われた美学に合う画像を
00:14:53作成してみました。
00:14:54Lighthouseを使って、
00:14:55ある程度の1対1の比較テストができるようにしています。
00:14:58この画像が良さそうなので、これでいきましょう。
00:15:02先ほどと同様に、スキルとして「impeccable craft」を実行します。
00:15:04先ほどと同様に一連の質問がなされるので、
00:15:07提示した画像から得られる雰囲気や
00:15:09ムードを守るよう指示しました。
00:15:11そうして出力されたのがこちらです。
00:15:15正直なところ、少し期待外れでしたね。
00:15:18こういったムードボードを放り込んで、
00:15:21「ここからWebサイトを作って」と伝えるだけでは
00:15:22上手くいかないようです。
00:15:24頑張ってはくれたみたいで、
00:15:26ダッシュボードも作れたし色も反映されていますが、
00:15:29彼らが作ったものほど良くはありません。
00:15:33おそらくアセットを一つ渡しただけで、
00:15:35追加のアセットを含めなかったからだと思います。
00:15:37ケーススタディの時のように要素を上手く切り分けることが
00:15:38できていないのかもしれません。
00:15:41でも、彼らが作ったものほど良くはありません。
00:15:43というのも、素材を一つしか与えなかったせいで
00:15:46他の素材を追加しなかったからだと思います。
00:15:48Impeccableがケーススタディで行ったように
00:15:51うまく分解してくれませんでした。
00:15:52プロンプトの問題かもしれませんね。
00:15:55それでも、ここならうまくいくという
00:15:57骨組みのようなものは見えてきます。
00:15:59ダッシュボードの作り方は気に入っています。
00:16:01ですから、最初に作った生のバージョンほど
00:16:05印象的ではないと思いますが、
00:16:09まあ、試してみようと思ったんです。
00:16:11では次に、既存のサイトを編集したらどうなるか見てみましょう。
00:16:14私のウェブサイト、実際のAIエージェンシーサイトを使って
00:16:18いくつかコマンドを実行してみます。
00:16:21Impeccableのドキュメント機能を使って
00:16:23コードからdesign.mdファイルをリバースエンジニアリングさせ
00:16:26監査や批評といったことを実行し、
00:16:29実際にライブで自分のサイトに対してもやり直して
00:16:32どんな広告が作れるか
00:16:36確認してみたいと思います。
00:16:37参考までに、これが私のAIエージェンシーのサイトです。
00:16:41標準的なヒーローセクションがあって、
00:16:43サービス内容に進み、AI導入に関する
00:16:47私の理念について説明し、
00:16:49最後にCTA（行動喚起）を置いて、
00:16:51依頼したい人が情報を入力できる
00:16:54フォームを設置しています。
00:16:55ブログなどのページもありますが、
00:16:57今回はとりあえずホームページだけに絞ります。
00:17:00まず最初に、「このコードベースで
00:17:02Impeccableドキュメントを実行しよう」と言って、
00:17:05Impeccableが今のサイトをどう評価するか見てみました。
00:17:08コードベース全体を走査して、
00:17:11現状のdesign.mdを作成してくれるんです。
00:17:16その土台をもとにして、
00:17:18編集作業を始めることができます。
00:17:19Impeccableがコードベースを解析した後、
00:17:21戦略的なコンテキストを示す3つのファイルを
00:17:23作成してくれました。
00:17:26「勝機」や「ノーススター（指針）」についてだけでなく、
00:17:29見つかった7つの違反事項についても書かれています。
00:17:33「青い球体」については、サービスカードのモックアップが
00:17:37クリップアートの詰め合わせのようだと指摘し、
00:17:40意図的なカードグリッドを求めています。
00:17:43グラスモーフィズムが嫌いなようで、それも良くないようです。
00:17:47読み込んだはずのフォントが使われていないという指摘や、
00:17:50他にもいろいろありました。
00:17:53コード上には存在する機能なのに、
00:17:54実際のUIには表示されていないものが
00:17:55いくつかあるようです。
00:17:58それから、色の問題も指摘されました。
00:18:02また、ウェブサイト上に私自身、
00:18:04つまり「チェイス」という人間がほとんど
00:18:07登場していないという戦略的なギャップについても触れられていて、これは図星ですね。
00:18:10批評コマンドを実行すれば、
00:18:12さらに深い批評を得ることができます。
00:18:15では、やってみましょう。
00:18:16批評コマンドを実行するように指示を出します。
00:18:18スペルミスをしてしまいましたね。
00:18:20ランディングページに対して批評コマンドを実行します。
00:18:23解析結果が出ました。結論は、
00:18:25「AIが作ったような手抜きサイト」の境界線だそうです。
00:18:2710項目にわたってデザインの健全性スコアが提示され、
00:18:33各項目は4段階評価でした。
00:18:343を超えるスコアはありませんでしたが、
00:18:371もなかったので、それは良かったです。
00:18:39総合得点は40点満点中25点で、「許容範囲」という評価でした。
00:18:43認知負荷については8点満点中5点で、不合格です。
00:18:46「背景の動きがコンテンツと競合している」とのこと。
00:18:51まあ、控えめだとは思うんですが、
00:18:54言いたいことはわかります。
00:18:56「重みが等しいCTAが2つあり、優先順位が曖昧」だそうです。
00:19:00サービスセクションには4つの異なる視覚的スキーマがあり、
00:19:03他にもいろいろ問題があるとのことです。
00:19:05全体的な印象としては「骨組みは良いが、
00:19:08もっと改善できる」という評価でした。
00:19:10最後には、1週間前と比べて3つの観点で
00:19:11分析が分かれています。
00:19:14正直、この批評は気に入りました。
00:19:16非常に深く掘り下げていて、参考になる材料が多く、
00:19:19何が悪いのか具体的に教えてくれます。
00:19:22内容に同意するかどうかは別として、
00:19:24考えるきっかけをくれるのは確かです。
00:19:26言われたことをすべて鵜呑みにするつもりはありませんが、
00:19:29そうですね、盲目的に全てを
00:19:31正しいと受け入れるつもりはありませんが、
00:19:32これらを確認していくことはできますし、もし私が望めば、
00:19:35これらすべてに目を通すこともできます。
00:19:36よし、これを変えてみよう、といった具合にね。
00:19:37では、Bを実行したらどうなるか見てみましょう。
00:19:40「デコレーション・ディシプリン（装飾の規律）」と
00:19:42呼ばれるものを少し試してみて、
00:19:44どのような変化が出るか確認してみます。
00:19:46どのような変化が起きたか見てみましょう。
00:19:48その変化は非常に微妙なものです。
00:19:51こちらがサービスセクションの
00:19:54更新されたバージョンです。
00:19:55色味を抑えて、テラコッタオレンジと白の
00:19:572色にまとまっていますね。
00:19:59左下にあったような青い霞のようなものが
00:20:03なくなっていることにお気づきでしょう。
00:20:04参考までに、これが以前のバージョンで、
00:20:07左下に青い色があり、その後に青と緑が続いていました。
00:20:09今回は2色に絞っているということですね。
00:20:13白、グレー、そしてオレンジの3色と言ったところでしょうか。
00:20:14アプローチセクションでもそれが確認できます。
00:20:17カードにマウスを合わせると、まだオレンジの輝きは残っていますが、
00:20:18オリジナル版では、この下にオレンジ色がありました。
00:20:20上部にカードの線が入っていて、
00:20:23いわゆる「AIスロット」のようなものだと判断したようです。
00:20:25装飾の規律に関する変更は以上です。
00:20:28かなり微妙な変化でしたね。他にも試したいものが
00:20:32いくつかあるようです。
00:20:36信頼性やコンバージョンに関することや、
00:20:41顔写真を追加するようなことですね。
00:20:43ですが、今は先に進んで
00:20:47ライブモードを見ていきましょう。
00:20:51それでは、ライブモードでウェブサイトを見てみます。
00:20:53例えば、このカードを少し変更したい場合、
00:20:54前と同じようにどうすればいいでしょうか？
00:20:56自由入力にするか、それとも
00:20:58プリロードされたコマンドから選ぶこともできます。
00:21:00今回は「Delight（喜び）」を試してみましょう。
00:21:02そして、3つのバリエーションを作成します。
00:21:05「Delight」を実行すると、そのコンポーネントに
00:21:08実際のパーソナリティ（個性）が加わります。
00:21:10生成されたバリエーションの一部を見てみましょう。
00:21:13用意されているコマンドから選ぶこともできます。
00:21:17では、この「delight（楽しませる）」を試してみましょう。
00:21:19そして、バリエーションを3つ作成します。
00:21:22「delight」を使うと、そのコンポーネントに
00:21:26実際の個性を加えることができます。
00:21:27生成されたバリエーションをいくつか見てみましょう。
00:21:30これは少しだけサイズが大きくなっていて、
00:21:32右下にこのような要素が追加されていますね。
00:21:35テキストの内容も変更されています。
00:21:37それに、この小さな要素も追加されました。
00:21:40もちろん、これまでと同様に
00:21:43調整を加えることも可能です。
00:21:45これは数字になるはずですが、少しずれていますね。
00:21:49そうですね、最初に作成したウェブサイトと
00:21:53ほとんど同じようなシナリオです。
00:21:55「Impeccable」におけるこのライブモードは、
00:21:57間違いなく最も強力なツールだと思います。
00:22:00コマンドラインですべてを行う必要がなく、
00:22:02実質的にグラフィカルなインターフェースから
00:22:04こうした微調整を行えるのですから。
00:22:06既存のコードベースを使用している時でさえ、
00:22:08まったく同じセットアップで作業できるのは
00:22:09素晴らしいことだと思います。
00:22:12全体として、私は「Impeccable」をとても気に入りました。
00:22:13これは100％習得しておくべきスキルであり、
00:22:17次のフロントエンドデザインに取り組む際には
00:22:20ぜひ試してみることを強くお勧めします。
00:22:21ゼロからウェブサイトを作成する場合であれ、
00:22:23既存のものに手を入れる場合であれ同様です。
00:22:26こうした細かい微調整を組み合わせると、
00:22:29つい1週間ほど前に追加された機能ですが、
00:22:31他のツールと差別化できる
00:22:32大きな特徴だと考えています。
00:22:34こうした微調整を、
00:22:35最初に行うプロンプトによるマクロなレイアウト生成と
00:22:38組み合わせることで、
00:22:41非常に強力なワークフローが実現できます。
00:22:43いつものように、感想を聞かせてください。
00:22:45リポジトリへのリンクは概要欄に貼っておきます。
00:22:47また、私の「Cloud Code」マスタークラスを入手したい方は、
00:22:49固定コメントにある「Chase AI+」のリンクを確認してください。
00:22:52それでは今回はこの辺で。
00:22:55またお会いしましょう。