1. 現状分析とステークホルダーヒアリング

プロジェクト開始にあたり、まず多角的な現状分析を実施しました。社内メンバー、所属クリエイター、既存顧客へのヒアリングを通じて、自社の魅力や強みの解像度を高めることから始めました。

ヒアリング対象と目的

• 経営層：事業戦略と今後の展望の把握

• 営業・マーケティングチーム：顧客からのよくある質問、訴求ポイントの確認

• 所属クリエイター：クリエイターから見た会社の強みと魅力

同時に、GA4のデータ分析により、ユーザー行動の定量的な把握を実施。平均セッション時間の短さ（1分17秒）と直帰率の高さが、情報設計の複雑さに起因していることがわかりました。

旧サイトのスクリーンショット。Projects（実績）とInformation（ニュース）でコンテンツが重複、混在しておりユーザーの離脱を招いていた

2. 競合リサーチと情報設計

業界・業態を問わず複数の事業を展開している企業のコーポレートサイトを分析し、情報の出し方、コンテンツの深度、ビジュアル表現の傾向を調査しました。特に注目したのは以下の点です。

• 複数事業をどのように整理して見せているか

• どのようなコンテンツでブランドの個性を表現しているか

• 問い合わせまでの導線設計

リサーチ結果を踏まえ、IA（Information Architecture）を再構築。複雑だった情報構造をシンプにし、「事業」「クリエイター」「会社情報」という3つの大きな柱で整理。サイトストラクチャ、ワイヤーフレームに落とし込みました。

作成したサイトストラクチャ

情報設計の判断

• セクションの区切れ目が明確なレイアウト

• ホームから2クリック以内にすべてのコンテンツへアクセスできる設計

• 過去サイトでランディングが多かったクリエイターコンテンツをよりリッチに

ユーザージャーニーを意識し、ランディング→理解→興味喚起→問い合わせという流れがスムーズになるよう導線設計を行いました。

3. 要件定義と技術選定

要件定義では、以下の項目を明確化しました。

技術スタックについては、パフォーマンスと保守性を重視してNext.jsを採用。複数の制作会社から相見積もりを取り、モダンな技術スタックでの実績が豊富な制作会社を選定しました。開発体制は、制作会社のエンジニアと私の2名体制で進行しました。

4. デザインシステムの活用とデザイン制作

このプロジェクトの特徴は、デザインシステム「Interstellar」を格的に活用した初めての大規模案件だったことです。すべてのデザイントークン（カラー、タイポグラフィ、スペーシング、エレベーション）とほぼすべてのコアコンポーネントをそのまま活用することで、デザインの一貫性を保ちながら制作スピードを大幅に向上させました。

デザインシステム活用の実際

• カラー：セマンティックトークンをそのまま活用

• タイポグラフィ：Inter Display、Noto Sans JPのタイプスケールを使用

• スペーシング：8pxグリッドベースのスペーシングトークンで余白を統一

• コンポーネント：カード、フォーム要素等を再利用

ただし、ボタンについてはよりリッチなインタラクションが必要だったため、デザインシステムのベースを拡張し、サイト専用のコンポーネントを新規作成しました。
また、PCレイアウトについては12カラムのグリッドを設定、単に3分割や4分割するガイドとして利用するのではなく、5col:7colといった単に分割するだけではないレイアウトを組み、レイアウトが単調にならずリズムが感じられつつも、システマティックな美しさが感じられるデザインにできたと思います。

12カラムグリッドを用いたレイアウトの例。

5. マイクロインタラクションとプロトタイピング

ユーザー体験を向上させ、スターミュージックらしいエンタメ感をを表現するため、主要なインタラクションポイントに独自のアニメーションを実装し「遊び心」を表現ました。

実装したマイクロインタラクション

1. ボタンホバー時のスロット回転
テキストがスロットように切り替わるインタラクション。エンターテインメント企業らしい遊び心を表現し、ユーザーの興味を引きつけます。Figmaでイージングとタイミングを細かく調整し、心地よい動きを追求しました。

2. メニュー展開アニメーション
グローバルメニューを開いた際の展開アニメーションは、中間ステートを多用し、滑らかで心地よい開閉動作を実現。

3. ページ遷移アニメーション
ページ切り替え時にブランドカラーの幕をスライドインさせるアニメーションを実装。シームレス感とブランド訴求を強化。

これらのインタラクションをFigma上でプロトタイプとして実装したことが、プロジェクトの大きな転換点となりました。経営層へのプレゼンで「動きが見える」ことが大きな説得力となり、デザインの意思決定が劇的にスムーズになりました。
通常であれば、静的なデザインカンプでは完成形がイメージしづらく、複数回の修正が発生します。しかし今回は、プロトタイプで実際の動きを体験してもらうことで、ほぼ一発で承認される結果となりました。このアプローチにより、プロジェクト全体のスケジュールを大幅に短縮できました。

6. 開発ディレクションとコラボレーション

開発フェーズでは、エンジニアとの密なコミュニケーションを重視しました。デザインシステムのトークンをJSON形式でエクスポートし、コードベースで管理しやすい形で提供。これにより、デザイナーとエンジニア間の意思疎通が容易になり、実装の手戻りを最小限に抑えることができました。

コラボレーションの工夫

• 週次レビューミーティング：実装状況の確認と細かなUI調整

• デザイントークンの共有：カラー、タイポグラフィ、スペーシングをJSON形式で提供

• プロトタイプの共有：マイクロインタラクションの動きを正確に伝達

• ブラウザでの確認：実際の動作を見ながらイージングやタイミングを調整

特にマイクロインタラクションについては、実際にブラウザで動作を確認しながら、イージングやタイミングを細かく調整しました。デザイナーとエンジニアが同じ画面を見ながら「もう少し速く」「もう少し滑らかに」といった調整を繰り返すことで、理想的な動きを実現できました。

7. テストと調整

開発完了後、複数のデバイスとブラウザでのテストを実施しました。

• 機能テスト：フォーム送信、ナビゲーション、リンクの動作確認

• レスポンシブテスト：モバイル、タブレット、デスクトップでの表示確認

• アニメーションテスト：マイクロインタラクションの動作とパフォーマンス確認

• アクセシビリティテスト：スクリーンリーダー、キーボードナビゲーションの確認

特にアニメーションについては、パフォーマンスとビジュアルのバランスを慎重に調整。滑らかな動きを保ちながら、ページの読み込み速度やスクロールのパフォーマンスに悪影響を与えないよう、アニメーションの実装方法を最適化しました。

8. 公開と運用体制の構築

2024年10月に新しいコーポレートサイトを公開しました。公開後も継続的な改善を行うため、運用体制を整備しました。

• GA4による継続的なモニタリング：セッション時間、直帰率、ユーザーイベントの追跡

• 定期的なコンテンツ更新：ニュースや実績の追加

• フィードバックの収集：社内外からの意見を収集し、改善に反映