《あのWebサイトの裏側 Vol.2｜セイタロウデザイングループ》オブジェクトの“動き”で自由な実験空間を表現
丸や三角、四角といった図形がゆっくりとWebページを自由落下していく。セイタロウデザイングループのサイトに見られるシンプルながら深淵な表現に込められたデザインコンセプトと実現するためのテクノロジーについて、IN FOCUS株式会社のデザイナー志村徹朗さんとエンジニアの高橋龍さんが解説します。
話してくれた人
志村徹朗 さん
IN FOCUS株式会社 デザイナー。セイタロウデザイングループのプロジェクトでは、デザインのコンセプト立案などを担当しています。
高橋 龍 さん
IN FOCUS株式会社 エンジニア。本プロジェクトでは、物理演算で落下するオブジェクト表示の実装やヘッドレスCMSの導入を担当しています。
プロジェクト概要
代表の山崎晴太郎氏が2008年に設立したセイタロウデザイングループは、プロジェクトデザインブランディングやプロモーション設計を中心に、グラフィック、Web・空間・プロダクトと多様なチャネルのアートディレクションを手がけています。
制作を担当したIN FOCUS株式会社は、Web制作だけでなくブランディング、写真、映像、アートディレクションなどを幅広く手がけています。本プロジェクトではWeb制作のみを担当し、デザイン表現を追求する実験的な企画となりました。
POINT①｜プリミティブな形態、⾊、線、タイポグラフィによる表現の探究
今回、IN FOCUSが手がけたセイタロウデザイングループのサイトは、代表の山崎晴太郎さんが著名なデザイナー・アートディレクターということもあり、シンプルにWeb表現のみでデザイングループ全体のメッセージや世界観を表現するという実験的でチャレンジングなプロジェクトとなりました。
サイト自体の役割は、ブランディング、映像制作、インテリアデザイン、アート活動、グラフィック、IP管理やマネジメントといったグループを構成するさまざまな事業会社共通の問い合わせを担うポータルサイトとなります。IN FOCUSでは、このグループサイトとブランディング事業の「セイタロウデザイン（https://seitaro-design.com）」の制作を担当しました。
制作プロセスは一般的なWebサイトと大きく変わるものではありませんが、コンセプトの理解に時間を費やし、ワークショップのような話し合いを2回ほど重ねることで全体の方向性が決まっていきました。制作期間はおよそ3カ月となります。
デザインの方向性を考える際には、山崎さんの著書である『余白思考』などを手掛かりに、一過性のものではなく「普遍的な感情や感覚」から本質的な価値を可視化することを目指しました。幾何学的な図形がアンコントローラブルな動きをするという提案は、すぐに納得いただくことができました。
POINT②｜余⽩や偶然性が⼊り込む仕掛けの導入
ページ自体は、概要やコンセプトメッセージ、グループサイトへのリンクやニュース、問い合わせ先などのシングルページ構成。機能的には画面のスクロールを促す狙いもあり、ファーストビューで落下してきたオブジェクトのうち、テキストが書かれたボタンはクリックで該当のセクションに移動できます。
この落下時のモーションは物理演算によって表現され、どのように配置されるのかはページを読み込むたびにランダムに動きます。また、一定時間が経過すると、積み上がったオブジェクトが順番に消えていくことで画面がリセットされます。このような動きにした理由は、山崎さんが自分で思いどおりの住まいをデザインして、実際に住んでみたら毎日が退屈に感じられてしまったというエピソードがヒントとなっています。
デザインには偶然性や他者性、自分の力だけではコントロールできない要素を取り入れることが重要と考えています。訪れるたびにランダムな動きで新しい体験ができるデモをお見せしたところ、山崎さんにも喜んでいただけました。
また、ファーストビューで一部が見えないという違和感を作り出すために白いオブジェクトを追加し、それが動いたり背景色が変わることで解消される展開を作り出すことも、セイタロウデザイングループの世界観の表現につながりました。
POINT③｜物理演算ライブラリ「matter.js」を徹底的にカスタマイズ
オブジェクトの表現に、「matter.js」のライブラリが使えることは制作の初期段階で想定していました。しかし、用意された手順ではデザイン通りの実装が難しく、特にページ全体を使ってのCanvas描画は負荷が高くアニメーションが固まってしまうことがありました。
その場合、ファーストビューの一部だけCanvasを適用するのが一般的な回避策ですが、私たちは物理演算の結果をCanvasではなくタグやタグ内に座標やサイズをリアルタイムで書き出し、同時にCSSによってオブジェクトの位置や形と合致させるという別のアプローチを採用しました。
POINT④｜情報設計と運用性をCMSで効率化する
物理演算ライブラリのカスタマイズ以外に新たに取り組んだことは、ヘッドレスCMSの採用が挙げられます。導入の理由としては、ポータルであるセイタロウデザイングループのサイトとブランディング事業の「セイタロウデザイン」のサイトでコンテンツ運用の効率を上げたいという狙いがあります。これにより、山崎さんのメディア出演などのニュースが一度の作業で同時に掲載されるようになりました。
APIによるコンテンツ配信は技術的な利点があっても、採用事例はまだ多くありません。しかし、これまでのIN FOCUSの活動実績を信頼いただき、任せていただいたことを嬉しく思っています。
POINT⑤｜実験的なプロジェクトからWeb表現の可能性を見つめなおす
通常の業務において、導入実績の少ないWeb技術を積極的に採用することは躊躇われるという制作会社もあるのではないでしょうか。しかし、幸運なことに「実験精神」をコンセプトに据えたセイタロウデザイングループのサイト制作プロジェクトでは、短期間にもかかわらずWeb技術の可能性をとことん追求することができました。また、同サイトに訪れるユーザーはアートやデザインへの関心が高いと思われますので、Web表現の意外性や奥深さについても感じとっていただけたかもしれません。シンプルに見える点と線、それを組み合わせた図形の持つ力強さは、リッチコンテンツとは異なるストーリーを伝える力があるのです。
取材・文：栗原亮（Arkhē）
※本記事は「Web Designing 2024年12月号」に掲載された内容を一部修正・再編集して公開しています。