SORATO NRT（ソラト ナリタ） / エアポートシティ | 制作実績 | 株式会社ファイブ（5ive Inc.）

構成、設計について

冒頭は、世界→日本→成田へとズームするアニメーションとし、プロジェクトの位置づけを直感的に理解できる構成としています。

サイト右上には、飛行機の窓から映る景色を配置。
時間帯に応じて、夕方は赤く、夜は暗くと、空の色が変化します。
プロジェクトのロゴマークが窓の形をモチーフとしている点から着想を得ています。

成田周辺のエリア説明セクションでは、成田空港と本プロジェクトの対象エリアとの関係性を伝えるため、アニメーションで表現しています。

全体を通して、「どこで何が起きるのか」が直感的に伝わる構成としています。

（ディレクション：金子）

デザインについて

この場所から新しいことが始まる、期待感を感じられるようなトーン設計を行いました。

また、世界各地・幅広い年代の方にご利用いただくことを前提に、誰にとってもわかりやすく扱いやすい設計を重視しています。紙芝居のように読み進められるアニメーションやモーダルを取り入れ、直感的に理解できるシンプルなデザインを目指しました。

（デザイン：中島）

演出について

全体的にスクロールに連動にしたアニメーションが多く、大胆に情報が伝わる楽しいサイトになりました。

特に実装に苦労したマップの表示が変化し続けるセクションでは、複数のSVGを使うことで、動きや色の変化に対応できるよう設計しています。

スピード感を求められるタイトなスケジュールでしたが、全体のクオリティを落とさないよう意識しました。こうした動きの多い構成においても、複雑な動きが重なってもストレスなく心地よく動作するよう細かく調整しています。

（実装、アニメーション：安達）