AIウェブデザイン：Opus対Sol

この半年間、私たちはAI（私が「空のロボット」と呼ぶもの）にウェブデザインを含む様々な魔法を実現させるために尽力してきました。私は12歳の頃からウェブデザインに魅了され、10年以上にわたって何らかの形で関連業務に携わってきました。AIに美しいウェブサイトを作らせるという課題は2024年に取り組み始め、2025年には前職で機能をリリースしました。AIの進化は速く、たった2年で10年前のように感じられます。本記事では、特にOpus 4.8と新しくリリースされたGPT-5.6 Solという大型モデルに焦点を当て、そこで得られた知見と教訓を共有します。

画像はプロンプトに勝る この記事から一つだけ学ぶとしたら、AIに視覚的な文脈を与えることが、優れたデザインを生み出す最も強力で効率的な方法だということです。私はモデル提供企業が画像認識機能を追加した初期の段階でこれに気づきました。人間がデザインを考える際も、たくさんの画像を見て好みを形成するのと同じです。インテリアデザイナーと協力する時を想像してください。彼らは色見本、素材サンプル、ハードウェアの仕上げ、雑誌やPinterestから切り抜いた写真が載った「ルックブック」を持ってきます。最終デザインを決めるためではなく、あなたの視点を育てるためです。私たちの機能の一つに「Lookbook」（ルックブック）という名前があるのもそのためです。この機能はGPT Image 2.0（ウェブデザインのモックアップ作成に非常に優れており、別の記事で詳述します）を活用して、さまざまな美学や業界を網羅した1000以上のデザインを丹念に生成しました。軽快で遊び心のある保育園向けから、SaaS企業が好むスタイリッシュでダークモダンなものまで。この「ウィンドウショッピング」体験は、目的のデザインを見つけたり、知らなかった欲求を発見したりするのに役立ちます。Lookbookから選ぶにせよ、自身のインスピレーションのスクリーンショットを持ち込むにせよ、このステップは絶対に飛ばさないでください。「このスクリーンショットを元に、そのまま作って」という指示の方が、複雑なプロンプトを積み重ねるよりもはるかに成功します。

OpusとSolの比較 同じスクリーンショットを渡しても、両モデルは異なる結果を出します。Opusは、標準的でないデザインでもバランスの取れたタイプスケールを維持する傾向があります。Solは非常に大きなテキスト、特にヒーロー見出しを好みます。GPT-5.5ではこれが顕著でしたが、5.6では改善されています。ただし、依然として時々発生します。クリエイティブなレイアウト、例えば複雑なベントーボックスではSolが優れています。Opusはより安全な選択をします。どちらの傾向も間違っていません。自分がどのモデルと「議論」しているかを知ることが重要です。

スロップ（凡庸な出力）について AIデザインの記事では、部屋の中の巨大な象、つまり「スロップ」に触れずにはいられません。2026年半ばにおけるAIの基本デザイン能力は2024年や2025年をはるかに上回っていますが、スロップは依然として存在します。ウェブデザインにおけるスロップは、画像生成での6本指のように明らかではありません。私にとってスロップとは、特定のフォントや色の選択ではなく、装飾に熱心になりすぎた凡庸なデザインです。すべての要素に飾りが施され、理由がありません。まるで誰かがあなたに贈り物をしようとして「カエルは好き？」と聞き、「まあね」と答えたら、翌日カエル柄のシャツ、カエル型クリップのペン、「カエル大好き」と書かれたボブルヘッドフィギュアが、クリーム色の箱にテラコッタオレンジのリボンがかけられて届くようなものです。Solにも特徴があります。SaaSサイトでよく見られるミクロなパターンを好み、内容をシャープなボックスや水平・垂直の線で区切ります。Claudeは過剰に装飾し、Solは過剰に構造化します。

シグナル（本質的な情報） スロップを止めるには、モデルにノイズの中からシグナルに集中させる必要があります。スキルは有用ですが、多すぎると逆効果です。最新モデルでもAIは物忘れを起こします。コンテキストの劣化は現実的です。あのGitHubで5万スターを獲得したスキルも、すぐに劣化します。AIは最初の指示（システムプロンプト）と最後に言ったことを最もよく覚えています。コンテキストが増えるほど、中間のものは「カエル」になるリスクがあります。最善の策は、AIがコードに触れる直前に、明確なデザイン指示を与えるか、視覚的参考資料を含む独自のデザインプランを書かせることです。最も強いシグナルは最初と最後のプロンプトです。その間は、AIが最後のプロンプトに到達するのを助ける段階です。各モデルでこの振る舞いは異なります。Solは最後の「デザインプラン」のステップなしでは頑固で、出力は良くもあり、またスロップになることもあります。Opusも頑固ですが、以前に指示したことを覚えて守る傾向があります。Opusは言われたことを覚えていて、面白さを忘れます。Solは面白さを覚えていて、言われたことを忘れます。いずれにせよ、デザインプランが実行を支え、場合によっては救います。

OpusとSolの実践 以上を踏まえると、Opus 4.8は「より安全」で、GPT-5.6 Solは「より創造的」と言えます。安全は良いことです。信頼できます。しかし、退屈だったり、平凡だったり（スロップ）することもあります。創造的も良いことです。面白く、予想外ですが、良い意味でも悪い意味でもです（これもスロップ）。ワークフローを劇的に変える必要はありませんが、最初の出力に対する期待を調整することが重要です。両モデルとも、自分の失敗を修正し、ギャップを埋める能力に優れています。それが重要です。

サンプルデータ createcards.ioとopergo.comの再デザインを評価しました。Opus 4.8は平均コスト3.06ドル、時間8分、入力トークン260万、出力33,000、ビジュアルスコア0.936。Solは平均コスト2.22ドル、時間3分42秒、入力トークン170万、出力17,100、ビジュアルスコア0.970。Solはより美しい結果を出すだけでなく、より高速でトークン消費も少なかったです。特に出力トークンはSolが約半分で、ページも約1000ピクセル短く、スコアは高い。これは「より少なく」で勝ったのです。OperGoの例では、Solのレイアウト、構成、一貫性、抑制の効いたデザインが素晴らしかったです。

まとめ 画像を使うこと。視覚的な参考資料が最も強力なプロンプトです。スタイルを選び、統一感のあるルックを定義しましょう。AIと一緒に探索し、しっくりくるまで繰り返します。素材とコンテンツを準備します。AIを使って必要な文章を下書きします。ルックと素材を組み合わせ、トップからボトムまでのビルド計画を立てます。どのセクションが必要か、何を入れるか、タイポグラフィや画像、コンポーネントはどうするかを決めます。準備ができたら、空のロボットに任せ、反復して洗練させましょう。あなたのホームページは、ブランドとアイデアのデジタルで視覚的な表現です。フォント、画像、セクションレイアウト、インタラクションなどを通じて物語を語ります。さあ、あなたはどんな物語を語りたいですか？追記：本日、GPT-5.6 Solをデフォルトモデルに切り替えました。ぜひお試しください！