Concept Work / Self-Initiated Project
NexLeaf Technologies
自然とテクノロジーが、未来の可能性を育てる。
企業理念と取り組みを、体験として伝えるコーポレートサイト。
Project Overview
自主制作として設計した、企業サイトのコンセプトワーク。
- Project
- NexLeaf Technologies
- Production Type
- 自主制作 / Concept Work
- Category
- Corporate Site
- Theme
- 自然とテクノロジーの共存
- Role
- 情報設計 / UIデザイン / Next.js実装
- Stack
- Next.js / TypeScript / Tailwind CSS / microCMS / GSAP / Lenis
この制作事例は、実案件ではなく自主制作のコンセプトワークです。成果や数値は掲載していません。
Design Theme
説明よりも先に、企業の姿勢が伝わる体験へ。
設計テーマ
自然とテクノロジーの共存を、企業の姿勢として直感的に伝えること。
制作目的
企業理念、サービス、サステナビリティ、採用情報までを一つの流れとして整理し、 訪問者が企業の価値観と取り組みを自然に理解できるコーポレートサイトを目指しました。
想定した利用者
- 企業の取り組みを知りたい見込み顧客
- 協業や取引を検討する企業担当者
- 採用情報を確認する求職者
- ニュースや企業情報を確認する訪問者
Information Architecture
理念から問い合わせまで、自然につながる情報設計。
- 企業理念
- サービス
- サステナビリティ
- ニュース
- 会社情報
- 採用
- お問い合わせ
Implemented Scope
現在実装している範囲。
- Next.jsによる企業サイト構築
- TypeScript
- Tailwind CSS
- microCMS連携
- News一覧、詳細
- Services
- Sustainability
- Company
- Recruit
- Contact
- GSAP、Lenisによる基本アニメーション
Future Experience Plan
ブランド体験をさらに深めるための拡張構想。
以下は現在の実装を土台に、今後展開予定の演出として設計しています。完成済みの機能ではありません。
- 街並みから木々が育つ演出
- 鳥や人物がふわっと現れる演出
- 立体絵本のようなスクロール体験
- 自然とデータラインが融合する演出
Visual Design Direction
透明感と奥行きで、自然と技術の共存を描く。
グリーン、ホワイト、透明感のある配色
自然とテクノロジーが共存する表現
企業サイトとしての信頼感
光、レイヤー、奥行きを使った立体感
広い余白と滑らかな視線誘導
Technology Stack
更新性と表現力を両立する構成。
- Next.js
- 企業サイト全体のページ構築
- TypeScript
- 保守性を意識した実装
- Tailwind CSS
- 画面ごとのUI設計とスタイリング
- microCMS
- News一覧、詳細のコンテンツ管理
- GSAP
- 基本アニメーションの制御
- Lenis
- 滑らかなスクロール体験
Screenshot Preview
現在実装しているファーストビュー。
