AI ツールによる Web デザインは誰でも簡単にプロフェッショナルな見た目のサイトを作れる時代になったが、同時に多くのサイトが似通ってしまうという課題も生まれている。Y Combinator のデザインレビューでは、Raphael Shod 氏を招き、バイブコーディングされたスタートアップの Web サイトを検証。パープルグラデーション、不要なホバーエフェクト、スクロールジャックなど、AI デザインツールが生み出す典型的なパターンを分析し、これらの「超能力」を正しく活用してブランドの独自性を確立する方法を探る。
AI デザインの光と影を検証する
今回のデザインレビューには、Y Combinator の最新ビジティングパートナーの一人である Raphael Shod 氏をお迎えしました。Raphael 氏は、モダンなカレンダーツールである Kron の共同創業者で、後に Notion に売却された経験を持つ、トップデザイナーの一人です。今日は AI を活用したデザインのトレンドについて、良い点も悪い点も含めて掘り下げていきます。
Raphael 氏、Y Combinator に戻ってきて、次世代の創業者たちが象徴的な企業を築くのを支援できることは本当に楽しいですね。
今日のテーマは AI デザイントレンドです。ネガティブな面では AI デザインスロップ(粗悪な AI 生成デザイン)がありますが、ポジティブな面では、デザイナーでなくても誰でも簡単に構築できる AI デザイントレンドがたくさんあります。
最近よく見かける AI デザインのトレンドには、どんなものがありますか。
そうですね。これは深夜にふと思いついてツイートしたことから始まったんです。最近のスタートアップのランディングページには、おそらくバイブコーディングされたと思われる、無意味なホバーエフェクトが多いなと。それで、こういった私が無意味だと思っていたエフェクトが、どうやって LLM に組み込まれ、なぜどこにでも存在するようになったのか、その背景を探りたくなったんです。
他に特定したトレンドとしては、パープルグラデーションがありますね。突然、すべてのスタートアップの Web サイトにパープルグラデーションが使われるようになりました。あとは、スクロールに合わせてフェードインしたりフェードアウトしたりするセクションなどです。
そうですね。これらが本質的に悪いわけではないんです。パープルグラデーションが悪くて、誰も使うべきではないということではありません。問題は、今ではどこにでもあるので、意味や特別感、独創性が失われてしまっているということです。
まったくその通りです。重要なポイントは、以前は良い Web サイトがトレンドを確立しても、他の人がそのトレンドをコピーするのに時間がかかりました。でも今は LLM があるので、パープルグラデーションを使った良い Web サイトがあれば、多くのリンクが張られて良い例として LLM が学習するため、その翌週には、すべてのスタートアップの Web サイトが同じように見えてしまうんです。
そうなんです。これは正しく使えば良い面も悪い面もあるパワーです。今日は、AI コーディングツールで構築された Y Combinator の企業の Web サイトをいくつか見ていきます。これらを使って、本当にうまく活用されている方法と、自分たちがデザインするなら違うやり方でやりたい点を見つけていきましょう。では、早速見ていきましょう。
Noo-Noo AI:パープルグラデーションの典型例
最初は Noo-Noo AI です。「AI エージェントでゲームテストを解決。AI エージェントを使って大規模なエンドツーエンドテストを実行し、無数の手動ゲーム QA の時間を節約」とあります。
パープルグラデーションですね。
一番最初に目に飛び込んでくるのは、非常にパープルなサイトだということです。これは、さっき話していた最も一般的なものの一つですね。面白いのは、事前に見たときは本当に素敵に見えたのに、今見ると「これ AI でデザインしたな」と思ってしまうことです。実際そうでないかもしれませんが、そう叫んでいるように見えます。
さて、スクロールを始めると、上下についてくる線があります。面白いのは、この線が少し気が散る要素になっていることです。注目してほしいと思われるものよりも、この線の方に注意が向いてしまいます。
これは人間にとっては実装が難しいもので、AI 以前には実際にこれをコーディングしようとは思わなかったでしょう。そして、今はできるから、LLM がこういった SVG のビルドアップやトランスフォームが得意だからといって、それが実際に良いデザインで、訪問者を顧客に転換するのに役立つとは限りません。
そうですね。「ここに線を通す必要がある。ゼロからコーディングしよう」と考える人は誰もいません。これを実装するのは、やるのが簡単だったからこそです。
でも、実際に価値を加えているとは思いません。むしろページの他の部分から気を散らせていると思います。これらのセクションから何も覚えていません。
さて、下に進むと「すべてが一箇所に」とあります。これは読みにくいですね。とても薄い色です。私が年を取っただけかもしれませんが。
コントラストを少し改善できそうですね。これらのカードは面白いですね。
これはクールです。実際にかなり良いです。これはおそらく以前なら高コストすぎてできなかったか、本当に優れた Web サイトデザイナーだけがこういったカードのホバーアニメーションをやっていたでしょう。でも AI を使えばとても簡単にできて、これは LLM のパワーを活用してより魅力的な Web サイトを構築する、かなり洗練された方法です。
クールなのは、ブランドを確立するのに役立っていて、ユニークで、クリエイティブで、楽しいということです。マルチプレイヤーのような、稲妻でつながった2つのコントローラーを表現しようとしています。そして、ここで伝えようとしているポイントを実際に強化しているんです。これは、ページを下にたどる線があまり価値を加えなかったのとは対照的な、素晴らしい例です。これは本当に難しかったはずですが、今では無料で手に入るようなものです。
試してみたいことがあります。ここにメインナビゲーションがあります。目立つのは、ホバーすると通常は要素をポップさせたくなるのですが、ここでは実際に消えてしまうことです。つまり、クリックして話しかけることを促すのではなく、背景に溶け込んでしまうんです。
ここも同じです。これらのメニューポイントの一つをアクティブにすると、フェードアウトしてしまいます。これはデザイナーならほぼ絶対に選ばないことです。ブラウザのデフォルトもそうは動きません。それなのに LLM が何らかの理由で、これが良いホバーエフェクトだと判断したんです。でも、意味がありません。
こう考えてみてください。ブラウザには CSS なしでも無料の組み込みホバーエフェクトがあります。カーソルが手の形に変わるんです。これだけで「ここをクリックできる」と示しています。だから、明るいパープルのままにして、手の形に変わるだけで、クリックできることがわかります。CSS エフェクトを追加したいなら、少しポップさせるとか、1段階明るくするとか、アクティブな感じにするとか、周りに少し光を加えるとかすればいいんです。でも、消してしまうのはやめましょう。
ホバーエフェクトをデザインするとき、適切なホバーを考える際の経験則はありますか。
クリック可能にすることですね。Steve Jobs は昔、Aqua インターフェースで「なめたくなる」ものを作りたいと言っていました。クリックを誘いたくなるものを作ることだと思います。かなり標準的なものに従うことです。手の形がクリック可能なことを示すので、それ以上のことはあまりしない方がいいでしょう。
もう一つ、ホバーがよく使われているのは、追加情報を明らかにするためです。UI をより生き生きとさせるホバーエフェクトだけでなく。ホバーは UI をより生き生きとさせるのに素晴らしいツールです。でも、追加の重要な情報や機能を開示するためにますます使われているのを見かけます。そして、それはホバーの最良の使い方ではないと思います。
この全体的なトレンドは、おそらく macOS が長年かけて始めたもので、非常にクリーンなインターフェースにして、機能やツール、ボタンをすべて隠してコンテンツのためのスペースを作るというものです。でも、私のコンピューターがただコンテンツだけであってほしくないんです。実際には、心のための自転車、つまりツールであってほしいんです。
追加の機能をホバーでのみ表示して、ツールが実際に何ができるかを探さなければならないというのは、アンチパターンだと思います。
そうですね。モバイルにはホバーの概念がないということも忘れてはいけません。
長押しがホバーと同等のものですが、モバイルではあまり定着しませんでした。
おそらく発見しにくいからでしょうね。ずっと長押しして、何か追加のものがあるかを確かめたくないですよね。
デスクトップインターフェース、ツールで、機能が実際にどこにあるかを発見するために、どこでもホバーしなければならないと想像してみてください。開示矢印やメニューを隠したり、追加機能にアクセスするためのドットメニューにしたり。それがすべてホバーの背後に隠れていたら、ソフトウェアの機能を効率的に伝えられません。
全体的に、これは非常によくデザインされたサイトだと思います。AI デザインツールや LLM を使ってプロフェッショナルな見た目のサイトを作るのは、これまでになく簡単になりました。今ではやらない言い訳はほぼありません。
特に Y Combinator の応募を審査していると、デモを見たときにそのデモが基本的な品質のデザインを持っていなければ、その人は試そうとすらしなかったように見えます。
今はとても簡単にできるからです。
Noo-Noo、本当にクールなサイトで、AI を使った非常に興味深い応用例がありました。よくできています。
Rosebud AI:再びパープルグラデーション
次は Rosebud AI です。「AI でゲームを作成」とあります。そして、またもやトレンドが見えてきますね。パープルグラデーションが再び登場です。非常に似たピンクがかったパープルのアクセントカラーがここにあります。
これが問題なんです。一つだけ見れば、クールで、モダンで、すべて良く見えます。でも、次々と見ていくと、みんな似たように見え始めて、ほとんどの創業者がサイトに求めているコアのブランドや独創性が失われてしまうんです。
では、掘り下げてみましょう。これは初めて生で見ています。
Rosebud AI、AI でゲームを作成。プロンプトからゲームへのインタラクションがあるようです。
クールですね。すぐにプレイできるものがあります。
試してみましょう。
おお、ブラウザで 3D ゲームですか。クールですね。
人が歩き回っています。
矢印キーは使えますか。
行けました。昔ながらのゲームですね。
ジャンプもできます。
では、ここから抜けましょう。でも、クールです。確かに魅力的です。これが実際に Web サイトで動いている製品コードなのか、それともバイブコーディングされたサンドボックス環境なのか気になります。
これは彼らの製品で作れるタイプのものだと思います。でも、面白い点は、実際にはそう言っていないことです。
「私たちの製品で作られたゲームを今すぐプレイ」とは書いていません。興味深いですね。このトップバーは私たちを追いかけていますか。
これらはただのアンカーで、縦に飛んでいるだけです。
面白いですね。そのとき気づかなかったんですが、プレイしたものは「ゲームを修正」の下にありました。だから、これはすでに作成されたゲームで、リアルタイムで修正できることを見せようとしているのかもしれません。作成部分ではなく。
そうですね。ここから得られる教訓は、この標準的でないナビゲーションを使うと、この Web サイトの使い方について少し混乱してしまうということです。
もう一つ目立つのは、赤いロゴとパープルをアクセントカラーとして組み合わせようと考える人はいないだろうということです。必ずしも補色ではありません。そして、絵文字を使っているのを見るたびに、システム絵文字ではないとしても、ちょっと手抜きな感じがします。LLM には本当の IP がないので、簡単な道を選ぶんだと思います。物事を寄せ集めている大きなモデルなので、どこでもこういった標準的なアイコンを使って、すぐにわかってしまいます。
ここでもっとコンテキストが必要だと思います。会社名がここにあって、見出しの一部のように見えますが、ロゴのそばにあることを期待します。
そして、価値提案がもっと明確になるべきです。AI でゲームを作成、何々何々。H1 で重要なのは、通常「それは何か、誰のためのものか、そしてどんな目的か。そのターゲットの人はなぜ気にすべきか」ということです。この3つとコールトゥアクションが最初のビューに入っていなければ、訪問者を転換するのは難しくなります。
ゲームの例があるようです。Rosebud AI で作成されたゲーム。これは面白いですね。カーソルの周りのエッジに光がついてきています。これも、コストがかからないから「入れてみよう。楽しくて遊び心がある」となるタイプのものです。でも、これをコーディングして正しく動作させるのに1週間かけなければならなかったら、「それだけの価値はない」と言うでしょう。
たくさんのゲーム例があります。これがサイトの残りの部分のようです。
そしてフッターに到達しました。
リミックスがありますね。
そう、プロジェクトのいくつかをリミックスできて、コンバージョンウォールが表示されます。これはランディングページを超えた部分ですね。
素晴らしいです。Rosebud、よくできています。
Get Crux:スクロールジャックとフェードイン
次は Get Crux です。最初に気づいたのは、フェードインです。自動的なフェードインがありました。
そして、もう一つ気づいたのは、スクロールがハイジャックされていることです。
画面では少し見づらいかもしれませんが、確実にスクロールジャックのロジックが働いています。そして、固定ヘッダーメニューと分離したものの両方が同時に見える状態があります。ちょうどこの辺りです。
通常、スティッキーヘッダーはスムーズに移行するべきです。でも、ここでは明らかに2つの別々のメニューで、たまたま同じになっているだけです。
画面を追いかけ回すボタンに気を取られて申し訳ないです。
これによって、創業者ともっと話したくなりますか、それとも話したくなくなりますか。
気が散りますね。何をしているのか注意を払っていません。ただ「なぜこのボタンが追いかけてくるんだ」と思っています。確かに注目は集めましたが。
最初に気づいたもう一つのことは、角度から流れ星のように降りてくるものです。あそこに見えます。
これも、ゼロから構築しなければならなかったら、時間をかける価値はないと感じるタイプのものです。でも、とても簡単にできるので、人々は「入れてみよう。クールに見える」となります。でも、実際には少し気が散ると思います。製品に価値を加えているとは思いません。
ヒーロースクリーンショットは、動画のポスター画像のようです。そして、まったく異なる動画に移ります。
混乱しました。
ポスター画像がとてもぼやけています。これが AI を使用したアーティファクトなのかわかりませんが、一般的なデザイン原則として、すべてのアセットは高解像度、高品質であるべきです。これはとてもぼやけて見えます。
ボタンについてもう一度触れますが、ここまで下がっても、まだ追いかけてきています。これも、簡単だからこそやるタイプのものです。でも、簡単だからといってやる価値があるわけではありません。AI で今では指先で何でもできるようになりました。想像できることは何でも可能です。でも、可能だからといって、イエスと言うべきではありません。
ここでは、視覚的な一貫性が少し欠けています。これは、上で見てきたものとはまったく異なる視覚言語に見えます。
どこから来ていると思いますか。
Web サイトの異なるセクションが、ツールの異なる部分で作られたのかもしれません。あるいは、これが Web サイトのコンテンツとは大きく異なって見えることが原因かもしれません。ときには、少しのテキスト、見出しとサブテキストだけのクリアな画像が大いに役立ちます。
今、ページの半分くらいまで来ています。彼らが何をしているか聞かれたら、答えられません。上に戻って思い出しましょう。「効果のある広告を作る AI クリエイティブストラテジスト」。広告を作る何かですね。
面白いですね。これらの画像のいくつかには、ほぼ縦方向のモーションブラーのようなものがカラーグラデーションにかかった視覚的なスタイルがあります。ここやここ、ここ、ここにも見られます。でも、一部の要素に限定されていて、ここでは少し使いすぎな感じがします。読みにくいですし、レインボーのようで、注目を集めるというより。でも、ここにはまったくそのスタイルがありません。それがさっき指摘していたポイントかもしれません。ここの背景がこのタイプのスタイルをもっと反映していれば、ページ全体を通してそれが続くかもしれません。
ページを素早くリロードして試してみましょう。
これらのセクションがすべてフェードインしているのが見えます。そしてここでもまた、フェードインしています。一つ気づいたのは、スクロールすると既に動きがあるのに、フェードインする必要がないということです。なぜそこにそのまま表示されていないのでしょう。そして、得られるのはこういった奇妙な結果です。例えば、ここです。「すべての質問にお答えします」と言っていて、質問が一つだけあって、ここで途切れています。最初は「FAQ が Q&A 一つだけなんてお粗末だな」と思いました。でも、それから「ああ、まだ来ていないだけだ」と気づきました。このパターンは好きではありません。
フェードインで私がよく気になるのは、タイマーで動いているときです。すばやくスクロールしていると、上部でフェードインし始めているときにセクションをすべて通り過ぎてしまって、コンテンツを完全に見逃してしまうことがあります。
ここで試してみたいです。下にズームしていくと、これらはページの下部にあるときに少なくともフェードインするようです。
でも、糖蜜の中を進んでいるように感じます。すべてスクロールがチェックされていて、ネイティブブラウザのスクロールをハイジャックして、JavaScript でこれらのアニメーションを行うための何か派手なことをしているからです。
全体的に非常にクリエイティブです。よくできています、Get Crux。
Sphinx:視覚的階層の問題
次は Sphinx です。「あなたの最後のコンプライアンス採用」。何かアニメーションが起こっています。これまで見てきたトレンドの一つは、3年前よりもはるかに多くのアニメーションがあることです。おそらく、これらの AI デザインツールがとても簡単にできるようにしたからでしょう。
階層について簡単に話しましょう。まず、会社名 Sphinx のスタイライズされたロゴタイプから始まります。左上、かなり標準的です。でも、H1 も良くて、サブテキストもあります。でも、この中間のような4番目のスタイルもあります。これは、デザイナーやエンジニアが自分のランディングページで思いつくのを見たことがないものです。
LLM が多くのスタイルを混ぜるのは、このような追加のラベルをここに入れるのが賢いと LLM がどういうわけか思ったからです。でも、会社名はすでにあるし、3つの異なるスタイルがすでにあります。これを数えると4つのスタイルで、これが5つ目を追加しています。階層を複雑にしているだけで、実際には何も加えていません。垂直スペースを追加していて、H1 を少し上に移動させれば、そのバリュープロポジション、信頼ロゴはすでに少し高くなっているでしょう。これは、LLM が夢見るもので、タイトな情報階層やグラフィックデザインとは言えません。
これらを見ていくたびに、何でも簡単にできるという概念に立ち戻ります。ループにいる人間として、何が正しいことだと思うかについて、意見を持たなければなりません。すべての変更を受け入れるだけではだめです。
今や編集者の提案、イエス、イエスの立場にいるんです。そして、もう一つ気づいていることは、右側のこのセクションが入れ替わり続けていることです。
このアニメーションをしばらく見てみましょう。ここの大きな星のようなボタンが動き回っていて、今度は円形のボタンになりました。これはボタンだと思います。クリック可能だと思います。そして、左側に戻って、大きな角丸長方形のようなボタンになります。多くの異なるボタンスタイルがあります。なぜこのように動いているのかわかりません。非常に混乱します。
実際にはボタンではありません。手の形は表示されますが、それはフェイクです。
クリックしても実際には、まあ「次へ」ボタンのようなものだと思いますが、
自動で進みます。
これは非常に混乱します。何を示しているのかわかりません。このアニメーションで何が起こっているのかもわかりません。何らかのワークフローのようです。
実際には、どこでもクリックできて、進みます。このボタンだけではなく、全体がクリックターゲットです。
これも、人間が「3つの異なるスタイルのボタンを用意して、クリックするたびに再配置したり移動したりしよう」と考えるのは想像しにくいです。AI デザインツールが提案して、「クールそうだね」と言ったタイプのものに感じます。
LLM のハルシネーションを視覚的に具現化したような感じです。メニューを見てみましょう。かなり標準的なものです。メニューが間で消えるのは好きではありません。
隙間があって、消えることがあります。
右側のいくつかで何が起こっていますか。2つあって、右側にグリッドのようなものがあります。アイコン付きで。
インタラクティブですか、それとも。
いいえ。LLM がかわいいと思ったものです。
ホバーしたらどうですか。そうですね。異なるアイコンが表示されます。
アイコンは実際にかわいいですね。これはやや独創的で、ブランドに合っています。オンボードが四角に4つの円が並んだものであることを示したいなら、それが重要なら(重要には見えませんが)、おそらくここにアイコンを置くでしょう。ホバーで明らかにしなければならない重要なものがあるなら、おそらく非必須なので、省略できるでしょう。さらに下に行くとどうなりますか。
「信頼され評価されています」。たくさんの線があちこちにあります。
ページを下にたどる線のパターンが再び登場です。
今度はスクロールジャックされています。このアニメーションを構築するために、Web サイトのこの位置にロックされています。
なぜこのアニメーションを構築するために、このポイントで私を捕まえることが重要なのか疑問です。すでに構築された状態で見せるのではなく。
アニメーションがすべての注目を集めていて、左側のここに書かれていることにまったく気づきません。このコンテンツを見ていません。右側は、彼らが何をしているのか、製品がどう機能するのかについて、価値のある視覚情報を十分に与えてくれていないので、側面のすべてを見逃してしまいます。アニメーションが気を散らせすぎます。
成果。
また、これらのランディングページで構築され、しばらくセクションに留まるタイプのものは、本を読んでいるときにどれくらい進んだかを知るのが本当に難しいです。
物理的な本なら、「ああ、半分まで来た」とわかります。ここでは、半分まで来た感じがしますが、もしかしたら、本当にリッチなビルドアウトのあるランディングページであと15秒捕まえられるかもしれません。だから、スクロールインジケーターはランディングページのどこにいるかを把握するための本当に重要なツールだと思います。ここでは完全に機能していません。Web サイトのどこにいるのかわかりません。
全体的に、視覚的には素敵に見えると思います。モダンに見えます。テーマがあって、オレンジのアクセントカラー、主要なブランドカラーとしての黒があります。ページを下にたどる線があって、私の推測では、製品がどのように見えるかを再現しているのだと思います。製品自体にオレンジの線があるワークフローが繰り返し見られるからです。それがここで伝えようとしていることだと思います。だから、意味があります。
上部の見出しは、それが何で誰のためのものかを説明するのに素晴らしい仕事をしていると思います。本当にうまくいっています。
素晴らしい。Sphinx、よくできています。
Build Zero:典型的な AI デザインパターン
次は Build Zero です。見てみましょう。「AI でカスタム社内アプリを構築」。最初から、パープルグラデーションがあります。
再び登場しました。そして、見てください。私の嫌いなもの、無意味なホバーエフェクトです。何も加えていません。この縦の動きは気が散るだけでクールではありません。また、エフェクトのせいで、
メニュー全体が水平にシフトしていて、バグのように見えます。そして、ここにもエフェクトがあります。矢印が何らかの理由で縦に動かなければなりません。なぜですか。
矢印も右に行くべきです。ホバーすると、
後ろに下がるように見えます。このホバーエフェクトは気になりません。白黒のボタンで、主要なブランドカラー、この場合はパープルに変わります。悪いホバーエフェクトではありません。
これはかなり悪いです。
他に何がありますか。インタラクティブな要素がここにあります。クリックできます。
選択に何かバグがあるようです。
これが手でコーディングされていたら、誰も気づかないわけがありません。ワンショットでランディングページを作ったとき、ゼロから構築したときと同じ注意を払って実際に使うかどうか疑問です。使わないから、気づかない小さなバグがある LLM が作ったものをそのまま出荷してしまうんです。
エンジニアタブに戻ってください。これが彼らの製品なら、目立つもう一つのことは、このダッシュボードです。赤、緑、青、パープルのようなコールアウトがここにあります。これは、多くの AI デザインツールが実際に作成する典型的な特徴の一つです。
すべての偽ダッシュボードは基本的にこのようなものに見えます。
明るい背景色の濃い色のアイコンがあります。通常は Google カラー、赤、黄、緑、青のような基本色です。
そうですね。よく見かけます。アイデアから数分で動作するアプリへ変換。
この Bento ボックスは悪いパターンではありません。でも、非常に独創性に欠けています。LLM は上部にアイコン、テキストが少しあって、この場合は3×2のようなものをよく思いつきます。かなり一般的です。
引用文があります。パープルグラデーション。よくある質問があって、さらにグラデーション。
これらをいくつか見てきましたが、同じパターンがたくさん繰り返されているのが見えます。これは、どれほど普遍的になったか、そして、ほとんどの企業が作りたいと思っているブランドや独創性から、ほぼ奪っているということを強調していると思います。
他のすべてのサイトやすべての製品が持っている要素があると、そういったことになります。
AI ツールの本当にクールなところは、技術的な細部をいじらなくてもよくなることです。だから、オファリング、製品、会社の難しい問題、つまり何を、誰のために作っているのか、なぜそれがその人にとって価値があるのか、といったことに本当に取り組めます。それがクールな面です。
でも、私たちが AI スロップと呼ぶものを作るためだけに使うなら、このようなパワーを責任を持って使うべきだという考えが少し無駄になってしまいます。だから、それが2026年のビルダーにとって歩むべき細い線だと感じます。
これには本質的に悪いものはありません。ただ、いくつか見てきて、以前に見たことがあるということです。それがまさに感じることです。以前に見たことがある。他の視聴者にとっても、顧客があなたの製品を見ていて「これは他で見たことがあるものに似ている。おそらく AI で構築してデザインしただけだ」と言っているとき、少し信頼性を失うと思います。そうだとしたら、実際の製品はどれくらい良いのか。それもバイブコーディングしているのか、という感じです。
AI を使ってこれを構築することは、決して否定しません。でも、出力を本当に評価して、AI を使ってさらに良く、より独創的にして、ワンショットで節約した時間を使って、メッセージングについて本当に考え、顧客に見せられる素晴らしい製品をデザインすることに費やすべきです。
それは素晴らしいアドバイスです。Build Zero、ありがとうございました。
Zarna:情報不足とユーザビリティの問題
次は Zarna です。「プライベートキャピタル市場のための AI アソシエイト」。またスクロールジャックされています。
すべてが10倍です。アンロックされた IRR、このサイト。糖蜜の中にいるような感じです。使うのがとてもぎこちないです。情報もあまりありません。取引量10倍のようなものも、
すべて10倍というのは作り話に感じます。スペースがとても多い感じがします。何がこれなのかを理解するのに役立つものを得るために、この糖蜜の中を永遠にスクロールしなければならないように感じます。
個人的に好きなことの一つは、一番上に行くと、現在、背景が垂直スペースの100%を使っています。
これは視覚的にほぼロックされた感じで、もう何もないように見えます。
「もっと見るにはスクロールダウン」と書く人が嫌いです。Web サイトにいるんだから、スクロールダウンの仕方くらいわかっています。個人的に好きなことの一つは、視覚を少し中断することです。ランディングページをこんな感じで始めるんです。上部に何かがあります。でも、ここに良いものがもっとあることがわかります。
良いものは本当に良くなければなりません。「取引をより速くクロージング」はあまり多くを語っていませんが、10ピクセルくらいの素晴らしいヒーロー画像が覗いているとか、そういうものがあればクールです。そうすれば、指示なしに、すぐにスクロールダウンして発見したいと思えます。
ここで止まったのは完璧なポイントです。上部のナビゲーションバーには何も見えません。
背景に何があるかを知っていた方が良いですね。動画のような動的な背景があって、あらゆる明るい色があるかもしれません。突然、明るいメニューが読めなくなります。
これは面白いです。
ここで拾い上げました。スマートですが、背後に動画があるときはスマートではありません。
それが微妙な違いですね。これらはクリックできません。クリックできると思っていました。
シェブロンかもしれません。
何が起こったのかわかりません。これでクリックできます。
一部はクリック可能で、一部は違うようです。そして、画面上を上下に飛ばされています。独自のタイマーで動いているようで、何もさせてくれません。混乱します。
そして、これも、意図的にこのように動作するようにデザインするとは思えません。代わりに、コンポーネントを作って、それがときどき機能するというだけです。
ネストされたものだけです。他のものを試すと、何も起こりません。
ここの「より良い」ラベルは非常に隠れています。シェブロンがあるときもあり、ないときもあります。これは少しずさんかもしれません。
1つのエージェント層、投資メモを生成。ここの小さな動きも、AI が無料でくれるタイプのもので、「それでいこう」となります。でも、自分では決して作りません。何をすべきかすらわかりません。
ホバーすると少し拡大しますが、何もクリックできません。フェードインがあります。有用な情報が正しい方法で提示されていないように感じます。少なくともパープルではありませんが。たくさんの青があります。
仕上げやコンテンツの充実さ、明確なメッセージングが少し欠けているかもしれません。でも、これをスクロールしなくてもいいなら、視覚的なスタイルは実際には新鮮です。Lovable のような、背景に粒子感のある拡大画像があるものを思い出させます。
背景のこれらのボックスが何を表しているのかわかりません。
奇妙なアーティファクトですね。
Zarna、ありがとうございました。
総括:AI デザインツールの賢い使い方
皆さん、サイトを提出してくれてありがとうございました。Raphael、いくつか見てきましたが、主な要点は何ですか。
確実にたくさんのパープルグラデーションです。そして一般的に、同じパターンがたくさん見られました。アニメーションのためのアニメーション、今では可能だからというだけの理由です。最初の Web サイトを作ったとき、こういった AI の超能力があったら良かったのにと思います。だから、持っていることは素晴らしいと思います。でも、思考を LLM に外注するのではなく、実際にツールとして使って、素晴らしいアイデアやデザイン、斬新なインタラクションを Web に出して、顧客を魅了するべきです。それが最終的にランディングページがすべきことだと思います。
顧客獲得チャネルですよね。製品ではありません。Web 上のクールなものとしての Web サイトではありません。そういうスペースもありますが、これらはスタートアップのランディングページで、基本的には顧客獲得チャネルです。だから、そのようにこれらのツールを使うべきです。
完全に同意します。いくつか他にも追加したいと思います。一つは、すべてを QA することが本当に重要だということです。何かを作るのはとても簡単ですが、見ていく中で、癖やバグ、混乱する要素をいくつか見つけました。最終的には、創業者であるあなた、人間であるあなたが、インタラクションやその他すべてが正しく機能することを確認するために見ていく必要があります。
もう一つは、サイトとブランドが、会社を代表したいものとして現れることが重要だということです。そして、独創性や違って感じられることが大切です。他のみんなが使っているのと同じツールを使って、同じ場所に行き着くのは非常に簡単です。違う場所に行き着くことを意図的にしなければなりません。
だから、AI が吐き出したものから始めて、それを微調整するのではなく、どんなカラーパレットを使いたいか、ブランドは何か、どうやってシステムに入力できるか、から始めるべきです。それを使って、AI が吐き出したものをただ受け入れるのではなく、自分たちを表す最終目標に到達するようにします。
多くの人がそうしているのを見ましたが、あなたが言ったように、今まで不可能だったこと、永遠に時間がかかっていたことを、一瞬でできる最も強力なツールの一つです。だから、それを実際にレバーを上向きに動かし、サイトをより魅力的にして、コンバージョンを良くする方法に使うことが、できる最も強力なことの一つです。
Raphael、参加してくれて本当にありがとうございました。あなたの視点を聞けて素晴らしかったです。そして、Web サイトを提出してくれたすべての皆さん、ありがとうございました。次回のデザインレビューでお会いしましょう。
コメント