# Twin Perspectives,
One Vision.

ヒーローセクション：フルスクリーンビジュアルと粒子アニメーションで構成される没入型のランディングエリア。
キャッチコピーとリードテキストがビジュアルの中心に配置され、CTAボタンへ視線を誘導する。

EXPLORE
SCROLL
02ABOUT

## Logical
Thinking

左パネル：論理的思考を表す半透明の人物シルエットと幾何学的なライングラフィックで構成される。データと分析を軸としたブランドの一面を視覚的に表現するレイアウト。

## Creative
Agility

右パネル：創造的俊敏性を象徴するアーティスティックなポートレートと抽象的な幾何学図形で構成される。ブランドのクリエイティブな側面を伝えるビジュアルエリア。

03
SERVICE

## Multifaceted Solutions

### Analysis

サービスカード：アイコン、サービス名、説明テキストで構成されるカード型レイアウト。ホバー時にティールカラーの発光エフェクトと浮き上がりアニメーションが発動し、インタラクティブな操作感を演出する。

VIEW MORE

### Design

サービスカード：ペンニブアイコンを用いたデザインサービスの紹介エリア。グラスモーフィズム効果の背景と、ダークテーマに映えるティールアクセントカラーによる統一されたビジュアル体験を提供する。

VIEW MORE

### Development

サービスカード：コードアイコンを用いた開発サービスの紹介エリア。3カラムグリッドの最終カードとして配置され、全体のバランスを保ちながら各サービスの特性を視覚的に区別するデザイン構成。

VIEW MORE
04
WORKFLOW

- 01 DISCOVER
- 02 DEFINE
- 03 DESIGN
- 04 DEVELOP
- 05 DELIVER

## Synchronized Process

DISCOVER

ワークフローセクション：左カラムにステップ番号リストを固定表示し、右カラムで現在のステップの詳細コンテンツをスクロール表示するスティッキーUIレイアウト。各ステップの選択に応じてコンテンツが動的に切り替わる設計。

- プロセスの各段階を視覚的に整理し、プロジェクトの進行状況を直感的に把握できるデザイン構成
- ステップインジケーターとコンテンツエリアが連動したインタラクティブなナビゲーション体験
- スティッキーポジションにより、長いスクロールでも現在地を常にユーザーに提示するUXデザイン

05
WORKFLOW

## Data Intelligence

99%
Client Satisfaction
150+
Projects Completed
5.2x
Average ROI
200
2020
2021
2022
2023
2024

棒グラフ：年次データをグラジエントバーで視覚化したインタラクティブチャート

Web 45%
Mobile 30%
System 15%
Other 10%
06
ROADMAP

## The Orbit

2023
基盤の強化
タイムラインの起点：組織体制の構築と技術基盤の強化を実施。ロードマップの左右交互レイアウトで時系列の変遷を視覚的に表現する。
2024
事業の拡大
タイムライン中間点：右サイドに配置される偶数エントリ。中央垂直ラインからドットと矢印で各マイルストーンへの視線誘導を実現するレイアウト設計。
2025
グローバル展開
タイムライン後期：左サイドに戻る奇数エントリ。海外市場への本格展開を示すマイルストーンとして、進行中の展望を視覚的に伝える。
2026 and Beyond
未来への共創
タイムライン終点：最も遠い未来を表す右エントリ。テクノロジーと人間の共創という長期ビジョンを表現し、ロードマップ全体を締めくくる設計。
07
INTERACTION

## Dialogue

FAQセクション：アコーディオン形式の質問と回答エリアのレイアウト構成について
アコーディオンUIは、クリックで開閉するインタラクティブなFAQコンポーネントである。開いた状態ではティールカラーのボーダーと背景色変化が発動し、ユーザーに現在の状態を視覚的にフィードバックする設計。クエスチョンアイコンとプラス/マイナストグルアイコンで操作を促す。
インタラクションデザイン：スムーズな開閉アニメーションの実装方法について
回答エリアはmax-heightのCSSトランジションで滑らかに展開する設計。クリック時にプラスアイコンがマイナスに切り替わり、回答コンテンツが自然に展開するアニメーションで視覚的な一貫性を保つ。
レイアウト設計：ダークテーマにおける可読性と視認性の確保について
深いネイビー背景に対して、ティールアクセントと高明度の白テキストを組み合わせることで十分なコントラスト比を確保。各アイテムの境界線と背景色の微妙な変化により、インタラクティブ要素を明確に区別するデザイン設計。