最先端の研究活動イメージをビジュアルに落とし込み、 海外からの反響もあるグローバルなサイトに刷新

組織のプロフィールへ寄り添う

お客さまから「一般的な大学組織のサイトとは一線を画すデザインにしたい」という要望をお聞きし、そのような考えに至った背景を理解するために、北海道大学 人間知×脳×AI研究教育センター（以下、CHAIN）がどのような目的で、どのようなことを研究しているかをヒアリングすることから始めました。また、CHAINが「人間知」というキーワードについても理解を深める努力をメンバーと行っていきました。

ヒアリングを重ねる中で

• ⽂理融合型のこれまでにない研究をされていること
• 国内/海外問わず研究者と共同で研究されていること

などがわかることで、ユーザーの絞り込みとターゲット層へのビジュアルのアプローチを細かく詰めていくことができました。

既存サイトのコンテンツを再構成する

既存サイト上でCHAINに関する情報は既に出揃っていましたが、コンテンツのカテゴライズがユーザー目線の見せ方になっていない部分があったため、メインユーザーである研究者向けのコンテンツとこれから履修したいと考えている学生向けのコンテンツとにカテゴリを大きく分離して、それぞれのターゲットユーザーにアプローチできるページ構成に再構築していきました。

各ページの役割とどのページにどのコンテンツを表示するかを視覚的に共有して行くために、サイトストラクチャー→ワイヤーフレームといったツールを使用して、お客様と一緒に内容を精査していきました。

前衛的なビジュアルを追求する

「いかにも大学というデザインにはしたくない！」というお客様の強い想いがありましたので、前衛的で知的な印象のイメージを持たせた方が良いのではないかと考え、ムードボードなどのツールを使用して、ビジュアルの方向性を固めて行きました。⽂理融合型の研究からイメージし、各セクションの背景には直線的な幾何学模様と⾃然の素材感のある写真を組み合わせてデザインしていきました。

各写真に鮮明に⾒える部分とぼかしている部分を作ることで、「研究によって明らかにされたもの」と「未だ解明されていないもの」の差を表現し、新しい領域の研究分野に多くの可能性があるということをビジュアルで伝えようと工夫を行いました。アニメーションにもリズム＆奥行きを持たせることを意識し、ページ全体はイメージ画像と余⽩を多めに取り、1画面に収まる情報量が多くなりすぎないように気をつけて構築していきました。

タイムテーブルのようなイベント情報を実装

CHAINでは頻繁に研究者を招いてイベントを開催しており、開催報告もアーカイブ化して情報を公開していることから、未来のイベント情報も過去のアーカイブ情報も興味を掻き立てるような一覧にしたいと考え、音楽フェスのタイムテーブルのように時系列で一覧を表示して、講演者のプロファールはアーティスト紹介のようなイメージで掲載することにしました。

Englishページへのこだわりとアワードの授賞

海外の研究者に向けて情報を発信していることから、Englishページへの導線、フォント、文章の行間、文字間隔にも大学の先生方にご協力いただき、Engliashサイトとしての読みやすさにもこだわりました。海外の方にもアプローチできるサイトに仕上がったこともあり、革新的なWebサイトを対象する国際的なWebデザイン・開発アワード「CSS Design Awards」の特別賞である「Special Kudos」を受賞をすることができました。

「CSS Design Awards」以外の国際的なWebデザインアワードに複数ノミネートされています。
Awwwards：
https://www.awwwards.com/sites/hokkaido-university-chain

CSS Winner：
https://www.csswinner.com/details/hokkaido-university-chain/14639

The FWA：
https://thefwa.com/cases/hokkaido-university-chain