IT、マーケティングテクノロジー、フィンテック、投資などの分野を中心にビジネスを展開する日本のテクノロジー企業、デジタルガレージグループが、Digital Architecture Lab(DAL)チームのWebサイトを制作するにあたり、頼りにしてくれたのはパラダイムでした。様々な分野で活躍するデザイナーで構成されたDALチームは、最先端のテクノロジー(Web3やAI、NFTなど)の研究、メディアコンテンツの制作、政府への変革の呼びかけなどを行っています。そんな彼らは、現代において最も難しい社会問題の数々に対処するためのデジタルソリューションの発掘を任されていたのです。
制作するWebサイトでは、ペンタグラムのGiorgia Lupi氏が作り上げたDALの新たなブランドアイデンティティを全面に打ち出すことが目標でした。Giorgia Lupi氏がこのプロジェクトに込めた思いは、こちらの動画からご覧いただけます。私たちは、Lupi氏が考えた25色の平行四辺形、「ソフトピクセル」を最大限に活かし、アニメーションやインタラクションを加えることでDALのWebサイトに命を吹き込みました。DALのソフトピクセルは、「多様な個人が集まり、人を動かす力を備えたダイナミックなコミュニティ」を表しています。
ペンタグラムが策定したブランドガイドラインは細部まで丁寧に作り込まれており、特徴的なソフトピクセルの四方の角度に至るまで、そこに定められた仕様に従ってサイトを構築しました。
このプロジェクトで最も難易度が高かったのは、Webサイトのホームページを鮮やかに彩るインタラクティブなアニメーションですが、自信を持って誇れる出来栄えとなりました。パラダイムがソフトピクセルにアニメーションを付与することを提案し、DALチームと話し合いを重ねる中で、ソフトピクセルには禅の庭や鳥居、茶道など、日本を象徴する写真を取り入れることにしました。
新しいブランドアイデンティティを表現することももちろん重要でしたが、今回制作するWebサイトの主な目的は、チームが執筆した数々の記事と、ソートリーダーシップを発揮した様々なプロジェクトをアピールすることでした。そのため、DALチームも心を掴むデザイン要素には前向きでしたが、遊び心を盛り込みすぎて逆に気が散ってしまうようなものは避け、適度な落ち着きを持ったもWebサイトにしたいという要望を受けました。その要望を念頭に置き、パラダイムからは、ソフトピクセルを使ってDALチームの4人のメンバーのイラストを作成し、ホームページに掲載することを提案したほか、スクロールで動く控えめながら効果的なアニメーションを追加しました。
DALチームから依頼のあったインタラクティブな要素を機能させるために、Webサイトで使用するプラグインもカスタマイズしました。その一つがホバーエフェクトです。ブログ記事のサムネイル画像は、何もしていない時には普通の四角形で表示されていますが、デスクトップビューでマウスを画像の上に重ねたり、モバイルで画像をクリックしたりすると、四角形の画像がソフトピクセルに形を変えます。
こういったアニメーションをデバイスやブラウザに応じてうまく表示させるために、それぞれ異なるアプローチを取りました。
DALチームのWebサイトで最も重要になるのはブログページですので、記事の探しやすさを追求し、サイト上に検索バーを設置したほか、記事に広範なタグ機能を追加しました。SEO対策に必要なテクニカル要素も万全に整備し、検索エンジンで関連キーワードを検索した人々が、DALのことを見つけやすい仕組みになっています。
Digital Architecture Labのコンテンツリードを務めるJoseph Park氏は、感謝の気持ちを一文で綴ってくれました。「私たちの要望を叶えるために多大な努力をしてくれたパラダイムには、心から感謝しています」
Content Lead, Digital Architecture Lab