一般的なAIらしさを超えたデザイン
ほとんどのAIランディングページは、角丸、やわらかなグラデーション、そしてどれも似たような一般的なイラストで、まったく同じに見えます。新しいツールを見て回るたびに、同じSaaSブルーの配色と、親しみやすいけれど印象に残らないビジュアルを目にします。高性能なエンジニアリングツールが持っていた切れ味が失われているように感じます。
架空のAI駆動プロジェクト管理スイート「EigentFlow」のインターフェースを構築しようとしたとき、私は違うものを作りたかったのです。高級感のあるIDEやターミナルベースのコマンドセンターのようでありながら、現代的なWeb体験としての洗練も備えたものにしたかった。私はこの美学をNeural Industrialと呼んでいます。
この抽象的なデザイン哲学と本番対応の実装とのギャップを埋めるために、Eigentのフロントエンドデザイン機能を使いました。どのように作ったのかを紹介します。
ビジュアルアイデンティティの定義
最初のステップは、デザインシステムの制約を決めることでした。一般的なライトモードではなく、深い黒曜石のような黒い背景に、高コントラストのシアンアクセントが発光する回路のように感じられるものを目指しました。
まず、プロジェクト全体を支えるCSS変数のシステムを定義しました。ダークな配色（#0A0A0B）と、鮮やかな「Neural Cyan」（#00F5FF）を採用しました。タイポグラフィでは、見出しにセリフ体フォントを使ってエリートで編集的な印象を与え、技術的な詳細には等幅フォントを組み合わせました。
エージェントへのプロンプト
定型コードを自分で書く代わりに、デザイン哲学と必要なインタラクティブモジュールを含んだ、非常に具体的なプロンプトをEigentに与えました。
フロントエンドデザイン機能を使って、EigentFlowの本番品質のランディングページをデザインし、構築してください。ダークな配色、シアンのアクセント、Playfair DisplayとJetBrains Monoフォントの組み合わせを使ったNeural Industrialテーマにしてください。ユーザーがContextual Densityを操作できる、インタラクティブなデモモジュールを含めてください。
Eigentはすぐに構造設計を始め、体験全体が自己完結し、デプロイしやすくなるように、単一ファイルでの実装を優先しました。
テクスチャで奥行きを作る
ダークモードデザインの大きな問題は、平坦に見えやすいことです。これを解決するために、Eigentにはグレインオーバーレイと放射状グリッド背景を実装してもらいました。
グレインオーバーレイは、低い不透明度でビューポートに固定されたSVGノイズテクスチャです。画面に物理的で触感のある質感を与えます。その下では、ダイナミックなグリッド背景が放射状グラデーションでマスクされ、線が画面の端に向かって徐々に消えていくことで、視線を中央へ引き寄せます。こうした繊細な工夫が、「テンプレート」とカスタムデザインを分けるのです。
ヒーロー体験の設計
ヒーローセクションは、単に見出しを表示するだけでは不十分です。ページ全体のリズムを作る必要があります。私は、要素を一つずつ紹介するために、段階的なスクロール表示アニメーションを使いました。
これを処理するために、EigentはVanilla JSでカスタムのintersection observerスクリプトを書きました。スクロールすると、まず「Neural Engine Status」のタグが表示され、その後に斜体の見出しとCTAボタンが続きます。この意図的な間の取り方によって、ツールは静的なページではなく、力強く設計されたものとして感じられます。
インタラクティブなエンジンデモの構築
ランディングページの中心となるのは、「Autonomous Task Architecture」のデモです。ユーザーがAIの内部状態を「操作」できるようにしたかったのです。
そこで、「Contextual Density」とラベル付けされたレンジスライダーを備えたモジュールを作りました。ユーザーがスライダーを動かすと、基盤となるJavaScriptがビジュアル更新をトリガーします。CSSアニメーションのニューラルサークルが拡大・縮小し、背景のシミュレートされたデータストリームが加速します。これは単なる見た目の演出ではありません。言葉では伝えにくいAIエンジンの「流動性」を示しています。
パフォーマンスの最適化
最後に、コードベース全体が最適化されていることを確認しました。カスタムアニメーションや重めのフォントを使っていても、最終的なindex.htmlファイルは軽量で、高い応答性を持っています。
すべてのデザイントークンにCSS変数を使うことで、後からブランドカラーを切り替えるのも非常に簡単です。EigentはLucideアイコンもCDN経由で含めており、アセットのフットプリントを最小限に抑えながら、あらゆるデバイスサイズで高品質なベクタービジュアルを確保しています。
これが重要な理由
このワークフローは、Eigentの働き方について重要なことを示しています。AIエージェントの本当の力は、コードを生成することだけではなく、高レベルな美的指示を解釈し、それを一貫した技術アーキテクチャへと変換することにあります。
最初のプロンプトで、すべてのhexコードやアニメーション時間を指定する必要はありませんでした。フロントエンドデザイン機能はデザイン原則を理解しているため、私が描いたNeural Industrialテーマのビジョンと実際のCSS実装の間を補完できたのです。
次に試すこと
同じNeural Industrialデザインシステムを使って、ダークテーマの分析ダッシュボードを作成する。 このランディングページのタイポグラフィと配色に合わせた、EigentFlow APIのドキュメントページを構築する。 サイト全体のセリフ体見出しをJetBrains Monoに置き換える「ターミナルモード」切り替えを追加する。
これらはいずれも、同じデザイントークンと美的ロジックを活用しており、追加のセットアップは必要ありません。
より良い結果を出すためのヒント
- デザイン重視の形容詞を使う。 Neural Industrial、Obsidian、Cinematicのような言葉は、nice や modern よりも、Eigentが美的範囲を絞り込むのに役立ちます。
- フォントの組み合わせを指定する。 特定の雰囲気が欲しい場合は、どのフォントを組み合わせるかをEigentに伝えてください（例: 見出しはSerif、データはMonospace）。
- 奥行きを具体的に求める。 デザインが平坦に感じる場合は、グレインテクスチャ、放射状マスク、控えめなドロップシャドウを追加するようEigentに依頼してください。
- 単一ファイルでの納品。 単一ファイルのソリューション（HTML/CSS/JSを1つにまとめる）を依頼すると、UI全体をすぐにレビュー・テストしやすくなります。
