hiyu / Design comparison

世界観から、動きへ。そして、仕事の流れが見える体験へ。

公開中のサイト ↗
V2 / 前回版・Motion別タブで開く ↗
公開中 / Atlas別タブで開く ↗

左右のデザインを選び、各画面を個別にスクロールして比較できます。スマホ幅は表示幅の確認用です。V1〜V3は保存版です。「公開中」では、導入相談への導線・文字のコントラスト・スマホでの読みやすさを調整した最新版を表示します。

比較分析と、第三案で改善したこと

評価の軸は、第一印象、内容の理解、動きの意味、読みやすさ、操作による納得感です。以下は実画面を比較したデザイン上の判断です。

デザイン長所短所・制約第三案への反映
V1 / Night深い青と光の図解に一貫性があり、AI基盤という世界観が伝わる。モデルとインフラの関係を丁寧に説明している。背景と図解が繰り返され、情報密度が高い。主要な行動への導線が弱く、読み進める負担が大きい。青の奥行きと接続の意味を継承。文章と図を絞り、明確な体験ボタンを設けた。
V2 / Motion大きな見出し、強いコントラスト、明快な導線。スマホでも構造を追いやすく、動きを停止できる。円とカードの印象が強く、動きの多くは装飾。AIが仕事を進める過程や、成果を受け取る体験までは見えにくい。見出しと余白を継承。動きを、依頼・分担・検証・成果の切り替えに結び付けた。
V3 / Atlas静かな司令室の世界観。操作できる実行フロー、成果物プレビュー、明暗を切り替えた構造図で理解を助ける。デモは構想の説明用サンプルで、実際のAI実行を示すものではない。内容が増えるため、小さい画面では縦に読む必要がある。サンプルを明示し、動きの停止と端末設定に対応。主要な説明文字を大きくし、各段階を直接選択できる。

参考資料:「SF・ハッカーUI リサーチアトラス」。特に、静かな司令室、状態変化と連動する演出、成果と根拠を確認する体験から着想を得ました。GMUNK / Oblivion GFX の機能と統一性を重視する考え方も参照しています。映画の画像・ロゴは使用していません。