CAS (the Cellular Agriculture Society) は、 食品を細胞培養によってつくり出す「細胞農業」を促進する為に設立された、国際的な非営利団体です。細胞農業とは、動物を飼育するのではなく、生物を構成している細胞をその生物の体外で培養することによって行われる、新しい生産の考え方です。monopo Tokyoは、CASが細胞農業の発展の中枢となるようにウェブサイトをリデザインしました。細胞農業という新しい分野をまだ知らない人々へその魅力を紹介するために、第一印象から興味を惹かれるようなサイトを作り上げました。
monopo TokyoはCASと連携し、ストラテジー、デザイン、ユーザーエクスペリエンス、コピーライティングを担当しました。
細胞農業は、食料生産に関する多くの問題を解決する手段として今注目が集まっています。食料生産を取り巻く環境は、畜産業による気候変動への影響や動物虐待の問題から、食品の大量生産から生まれる健康に対してのリスクまで幅広い問題を抱えていますが、細胞農業は多くの労力を必要とせずにこれらの問題を解決することが出来るかもしれません。しかし、このテーマに関する知識がないとアイディアを理解しがたい為、人々が細胞農業の未来を想像しやすく、更に科学の力によってそれは実現可能だということを表現することが必要でした。その結果、シンプルで分かりやすく明るいイメージを持たせると同時に、細胞農業の革新と高技術のレベルが伝わるような構成、デザインにしました。
細胞農業の正しいブランディングには大きな課題がありました。人々が想像するSFのようなものではなく、先見の明を持つことと自然に対する深い敬意と理解が起点にあることとの間で適切なバランスを見つける必要がありました。その結果、ポジティブで、パワフルだけど威圧感はなく、人工的に見えすぎることのないスマートなアートダイレクションになりました。 ポジティブかつ革新的であり、洗練されている様子を表現するために、カラーパレットは白、濃い青、金色の主な3色を使用しました。また、Sans-serifフォントSuisse Internationalを用いることによって、さらに洗練された印象に仕上げました。 また、抽象的な細胞の形状がメインのデザイン要素として使われており、アニメーションヘッダーからローディング時、ページ遷移間のアニメーションなど、Webサイト全体で様々な形で表示されます。細胞の形状は、有機的に動くようにデザインされています。更に、WOVEスタジオが制作した、人、動物、惑星が調和して生きる未来を描くキーヴィジュアルアニメーションによって力強い印象を与えています。
トップページは、細胞農業とCASのテーマが同じページ内に集約される様にデザインされています。そして、新しく興味を持ってくれた人に対して、多くの情報を詰め込むことによって混乱させないよう、CASのストーリーを簡潔に伝える4つのパートに分けました。画面の4つの端に広がるナビゲーションを使用し、そのまま説明を読む、または興味のあるストーリーにスキップも出来るように構成しました。また、別のページでは、CASの組織及び制作舞台裏で作業しているチームについての詳細を説明しています。
私たちは世界中の人達に細胞農業についてもっと知ってもらう為に、遊び心があるデザインにしました。細胞農業に対してポジティブで革新的な印象を残してもらえるよう、様々な要素がスムーズに作用するようデザインしました。メインページは、マウスに合わせてインタラクションする細胞をイメージした演出から始まります。ウェブサイト全体で同じ素材を使い、ホバーの3D軸状で画像が動き、メニューボタンはポインターに磁石のようにくっつきます。洗練度をさらに高める為に、要素の切り替え効果と見た目は、柔らかく滑らかになるように作成しました。 また、出来るだけユニークでインパクトのあるアニメーション・トランジションを目指しながら、その一方でユーザーの体験を邪魔をしないように処理を軽くし、デバイスに依存しないスムーズな使いやすさを追及しました。WebGLのセルアニメーションをはじめとして、端末のスペックや閲覧環境によって影響されないように、処理の方法の検討・調整を何度も重ねました。CMSとしてはワードプレスを使用し、運用面においてもシンプルでスムーズな体験を提供できるよう、カスタマイズしています。
このプロジェクトは、アメリカマイアミのCAS(クライアント)、イギリスのmonopo London(クリエイティブ/アートディレクション+デザイン)、日本のmonopo Tokyo(デジタル開発)の3つの国を越えたコラボレーションによって実現しました。時差という課題を乗り越えて、3つの非常に異なる視点からのみ生まれるウェブサイトを完成させました。
Creative Direction / Art Direction
Melanie Hubert-Crozetmonopo London
Graphic / Web Design
Melanie Hubert-Crozetmonopo London
Graphic / Web Design
Mai Takanomonopo London
Strategy / Account Management / Copywriting
Mattijs Devroedtmonopo London
Front-end Development
Ryo Miyakawamonopo Tokyo
Front-end Development
Taisei Dofukumonopo Tokyo
Back-end Development
Kenta Takahashimonopo Tokyo
Producer
Kenta Takahashimonopo Tokyo
Producer
Fred Mouniguetmonopo London
Technical Direction
Kenta Takahashimonopo Tokyo
Technical Direction
Shun Okadamonopo Tokyo
Concept Direction
Kristopher Gasteratos (CAS)
Hero Visual Animation
WOVE studio
Video Production
Luminary visuals, Tim Hawk
3D Artwork
Mihai Lacubovschi