AI比較で見るWebデザイン力強いページを作るなら誰が優勢か

このページはAI要約版です。

動画内容をもとに自動整理しています。

あとから追記・修正して、正式な講座記事として更新します。

AI要約

今回は、Grokで見つけたNext.jsとTailwind CSSベースの高品質なリポジトリをナレッジとして取り込み、その土台を使ってGemini Flash、GPT-5.5、Claude Opus4.7がどんなWebページを出すかを比較している。

話の中心は、どのAIが一番すごいかだけではない。強いナレッジを先に持っておくと、どのAIでもある程度の品質へ寄せられる一方で、動きやフォント、演出の出し方には差が残るという点にある。

このページでは、文字起こし（SRT）に出ている内容だけをもとに、各モデルの出力傾向と、あとから再利用できる形へ落とす考え方を短く整理する。

最初にやっているのは、ホームページの現行最強構成をGrokで探すことだ。しょぼくないページを作るための細かい構成や、デザインの土台になるナレッジがGitHubにないかを見にいっている。

そこで見つかったのが、スター数のあるリポジトリと、Next.jsとTailwind CSSを使った構成だった。動画では、この時点で本質はナレッジをしっかり持っておくことだと置いている。

次にやっているのは、Grokのリサーチ文章をAntigravityに読ませ、そのGitHubリポジトリをクローンさせてワークスペースへ落とす流れだ。

こうしてリポジトリを先に取り込んでおけば、それをもとに様々なページを安定して作れるかもしれない。動画では、この土台の品質次第で毎回の出力も変わってくると見ている。

Gemini Flash側は、短いページを速くプロトタイプとして出す性格が強く出ている。カーソルでふわっと動く、メーターが動くといった要素はあるが、全体としては海外向けの雰囲気が強い。

悪くはないが、新しさは薄い。色味を鮮やかにした案もあったが、下の方は見えにくさが残り、レベルを上げて出した案でも空の要素や不自然さが残っていた。

GPT-5.5にも同じナレッジを使って作らせている。ここでは、動きは少しあるが、全体としてはかなりシンプルで静かなページという評価になっている。

動画では、Gemini、GPT、Claudeでかなり違うとしつつ、GPTは特に目立った動きが少なく、落ち着いた出力に寄っていたと話している。

一番差が出たとして扱っているのがClaude Opus4.7側だ。スクロール時の止まり方、ボタンや背景まわりの動き、特徴のあるフォント、マウスに追従する光の演出、流れるバー、数字の回り方など、各所の演出が細かい。

完全ではなく、改行の泣き別れのような崩れは残っている。それでも動画では、他のモデルよりデザイン側へ力が入っている印象が強いとしている。

後半の結論は、Claudeの出力をその場で褒めて終わることではない。Claudeが出した演出やデザインのノウハウを引き出し、それをナレッジ化してしまうことにある。

そうすれば、今後はGPTやGeminiでも同じ土台を使って近づけるかもしれない。動画では、そのナレッジをリポジトリに入れて、どのAIでも使えるようにすることが目的だとまとめている。

今回はGrokのリサーチから始まり、Gemini、GPT、Claudeのデザイン力を比較したところまでで終わっている。次は、そのナレッジを他モデルが使いこなせるかを試す流れへつながっていく。

講座の最新情報はSubstackで受け取れます。更新を追いたい方はここから登録してください。

AI活用・制作自動化の相談はこちら。