ANAI Corporate Site — Case Study

Apr 25, 2024

Design

ANAI のコーポレートサイト制作にあたっては、企業の手がける事業や展開しているブランドを考慮し、高潔かつ創造的な印象の達成を目指した。目や手に馴染む使用感を考慮する一方で、一枚の絵としても成立する洗練の度合いが高いデザインを心掛けている。企業がもつ属性を表現するものとして、またプロジェクト実績や展開ブランドを魅力的に伝えるための方策として動的なアニメーションを適宜利用した。

デザイン段階から、肝となる表現については実装デモを作りながら制作をおこなった。結果として、実装過程においても、調整が行いやすくなったと感じている。

HOME のデザインにおいては、繰り返しのデザインを避けた。そちらにより各コンテンツ、各セクションが埋没しない手法をとっている。一方で、共通パーツにおいては同様の UI デザインを施すことで、初見の閲覧者でも迷いなく操作がしやすいような工夫を行っている。

PROJECTS の一覧ページは、特徴的なものとした。スクロールやドラッグに対応した無限ループのスライダーとしている。常に中央にアクティブなプロジェクトが表示することによって、ユーザーは視線を動かすことなく好みのプロジェクトを閲覧、選択できる。

Animation

アニメーションにもテーマを設けている。ANAI は木を扱う企業であり、製材まで行う。木一本一本が個性をもって森の中で成長する自然性、そして ANAI が木材を整形することで生まれる規則性をアニメーションに取り入れられないかと考えた。

テキストアニメーションでは、木が地面から空へ向かって育つことをイメージし、下から上に向かって表示されるマスクアニメーションを採用した。加えて、木の個性を表すことを目的にランダム性のあるフェードインを組み合わせた。ウェブサイト利用にあたっての見栄えや使用感もあわせて調整し、ANAI らしい独自性のある印象となったと感じている。

その他、PROJECTS、BRANDS 詳細に記載されているクレジット情報付近に表示した木の断面図は、表示するたびに若干の差異を持たせている。これは Canvas を使って生成している。この Canvas はオフスクリーンキャンバスを利用し処理の一部を Web Worker へ移すことでメインスレッドの負荷を軽減している。

整形された木材がもつ規則性を表現するために、スクロールと連動したアニメーションが、最終的に意図した位置におさまるように設計している。全てのページで下記のようにレイアウトグリッドに沿った配置になるようにデザインと実装を行っている。

Transition

ページを遷移する際の表現も準備した。

Home → Brands Details
Home → Projects Details
Brands → Brands Details
Projects → Projects Details

上記など特定のページから特定のページへ遷移する場合、選択した画像やテキストが維持されるように設計した。一方で、戻るボタンをなどを利用したブラウザバックの際は、シンプルなフェードイン／アウトに動作を変更することで待ち時間を減少させるような工夫を施している（※一部、日本語サイトのみ適用）

Technology

Jamstack 構成を採用した。フロントエンド側をNuxtで作り、ANAI の担当者が自身で更新できるようHeadless CMS である Contentful と連携させ、プロジェクトのデータを管理・取得している。最終的に、 Netlify が変更を検知し Nuxt を静的 HTML に変換する仕組みとなる。

この構成の利点として、ウェブサイトの表示の高速化ならびにセキュリティの強化向上が期待できる。ほか、開発のリポジトリとも連動しているため、環境を整えてしまえば更新から反映が容易になる点がある。

WebGL Forest

メニューの背景は、3D の森をイメージし WebGL で実装した。

実装コストや描画コストを優先することも考えたが、コーポレートサイトとして林業を営む会社であることを印象づけたいと考え、デザイン段階から試作を繰り返した。現在のコーポレートサイトでは閲覧する時間帯によって少しだけ森の色を変えるような仕様としたが、WebGL で実装することで、他にも様々な色合いを表現することが可能となる。