AUGUST 2025
担当範囲
Motion Design / Web Development
制作期間
デザイン・コーディング：7日
調整・公開：10日
使用したテックスタック
HTML / CSS / JavaScript / GSAP

概要

FOR STOCKISTS EXHIBITION 2025年度のWebサイトを制作しました。
今年で展覧会は20周年を迎え、テーマは「二重」。このテーマに合わせてサイト全体をデザインし、要素を二重に重ねる表現を取り入れています。
PC版とスマホ版では異なるインタラクションを実装。マウスがホバーしている位置の反対方向に応じて二重の効果を表現し、スマホではスクロールの慣性に応じて二重の効果を表現します。
「20」という数字を直接見せるのではなく、二重の要素があふれる中で20周年を感じてもらえるサイトを目指しました。

目的

FOR STOCKISTS EXHIBITION 2025年度を告知し、チケット販売につなげること。

デザイン

「二重」をテーマにしたモーションをデザインしました。
PCではマウスの位置に合わせて二重部分が反対方向に動き、スマホではスクロールにあわせてメインビジュアルが二重になります。
さらに、ナビゲーションをクリックすると、その項目に二重影のようなアニメーションが現れる仕掛けを加えています。

情報設計

ページ全体は二つの階層に分かれています。
メインビジュアル（および中の文字）とナビゲーションが一つの階層で、展覧会の詳細がもう一つの階層です。文字サイズによって二つの階層を区別しています。
ナビゲーション内の文字は、ウィンドウの幅にかかわらず、常にメインビジュアル内の文字と同じサイズになるようにしています。ナビ項目とビジュアルを区別するポイントは「動き」です。ビジュアルはユーザーのインタラクションによって常に動いているのに対し、ナビ項目はクリックしたときに初めてアニメーションが出ます。同じスタイルとサイズでありながら、「動」と「静」によって階層を分けています。
展示情報の部分にはアニメーションを入れず、静的に見せています。情報をシンプルに読み取れるようにし、内容そのものの伝達を妨げないことを意識しました。

クレジット

AD+D. Yui Takada
AW. Masanao Hirayama
Web. LIU Kecheng
CL. FOR STOCKISTS EXHIBITION