【ShinのAI活動ログ】トップページがごちゃついてきたので、整理した話

ページが、にぎやかすぎる

サイトを作り込んでいくうち、トップページの上から下までウィジェットがずらりと並ぶようになっていました。

コンセプトバナー、セキュリティ診断、AIニュース、固定ページへの案内カード、ツール紹介のバナー。

どれも作っているときは「これはこれで良い」と思っていたのに、並べてみると情報量が多すぎて、どこを見ればいいのか分からなくなっている。そんな状態でした。

ここで一度、全体を見直すことにしました。

まず引き算から

最初に手をつけたのは、キャラクター紹介セクションの削除です。

ヘッダーメニューに同じ内容の固定ページがすでにあるので、トップページに重複して置いておく理由がありません。これだけで、1ブロック分すっきりしました。

帯をコンパクトにする

次に取りかかったのが、ツール紹介のバナーです。

元は左右に大きく分かれたレイアウトで、画面の専有面積も大きめでした。

これを横長の1行帯に縮小し、中央の空いた部分には実際に使っているAIツール名(Claude、ChatGPT、Geminiなど)が流れるアニメーションを入れてみました。

ただ、文字の流れる速度が速すぎて目が疲れる、流れる方向が読む向きと逆で違和感がある、といった小さな引っかかりが次々出てきて、その都度直していくことになりました。

思い切ってスライドに統合する

ここまで整理しても、まだ縦に長く感じます。

そこで方針を変え、コンセプトバナー・セキュリティ診断・ツール紹介の3つを、個別のウィジェットとして置くのではなく、メインビジュアルのスライドの中に統合することにしました。

もともとメインビジュアルには「SHIN’S GENAI COLLAB」のロゴを表示する、ホログラムプレート風のスライドがあったので、その同じデザイン言語(枠、スキャンライン、グリッド、グロー効果)を流用して、3つのバナーをそれぞれ1枚のスライドに作り直していきます。

セキュリティ診断は、元はクリックして開くアコーディオン形式でしたが、スライドの中では自動で切り替わってしまうので、4つの診断結果をクリック不要でそのまま見せる形に変えました。

色で見分けられるようにする

3枚とも同じ枠組みで作ったぶん、並べると今度は違いが分かりにくくなってしまいました。

そこで、スライドごとに配色を変えていきます。

最初はコンセプトスライドをピンク系の発光にしてみたのですが、暗い背景と混ざって彩度が沈み、なんだか思っていた色と違う仕上がりに。

そこで思い切って方向を変え、プレート自体の地色を明るいクリーム色にしてみると、他の暗いスライドとの明暗の対比がはっきりつき、一目で見分けられるようになりました。

ツール紹介のスライドも、同じように地色から変えています。

最初はオレンジ系の暗い色を試したものの、まだ他との違いが薄く、最終的には純粋な黒に落ち着きました。

虹色グラデーションのタイトル文字は、黒地の上でいちばん映える組み合わせでした。

セキュリティのスライドは、もともとのマトリクス風の深い緑をそのまま活かしています。

結果として、コンセプトは明るいクリーム色、ツールは黒地に虹色、セキュリティは深い緑と、3つの個性がはっきり分かれたスライド構成に落ち着きました。

おわりに

トップページが情報過多になってきたとき、最初は要素を削ることばかり考えていました。

でも結局うまくいったのは「減らす」のではなく「まとめて配置を変える」というアプローチでした。

スライドという形式に統合することで、情報量自体は変わらないまま、画面の見た目はずっとすっきりしたものになります。

色についても、最初から正解が分かっていたわけではありません。試して、違和感を感じて、また別の方向を試す。その繰り返しの中で、明暗をはっきり逆転させるという一手がいちばん効いたのは、自分でも少し意外な発見でした。