美術館で一枚の絵画の前に立ったとき、視線は画面全体を一度に捉えるのではなく、色彩の変化や筆致の流れに沿って自然と動いていく。この「視線の誘導」という原理を、Webサイトのヒーローセクションに持ち込めないかと考えたのが、タイルフリップアニメーション開発のきっかけだった。

画面全体を約1センチ角の小さなタイルに分割し、世界各地の風景写真を多彩なパターンで切り替えていく。静止画のスライドショーでもなく、動画の埋め込みでもない。一枚一枚のタイルが独立して回転するという、まるでモザイクアートが呼吸するような表現である。

上のデモは実際に動作するタイルフリップアニメーション。数秒ごとに異なるパターンと風景で画面が入れ替わる。

なぜスライドショーではなく「タイル」なのか

従来のスライドショーは画像全体が一度に切り替わる。見慣れた手法だからこそ、訪問者は無意識に「あ、またスライドか」と認識して注意を逸らしてしまう。Nielsen Norman Groupの調査でも、自動回転するカルーセルがユーザーに無視される傾向は繰り返し指摘されている。

私がタイルフリップに惹かれたのは、北欧のテキスタイルデザインに通じる「パターンの美しさ」にある。規則的でありながら予測しきれない動き。右端から左端へ波のように裏返るときもあれば、中心から放射状に広がるときもある。渦を巻くように回転するパターンもある。この変化が人の視覚システムに作用して、見ていたいという気持ちを引き出す。

25種のパターンが生む視覚的リズム

音楽にリズムがあるように、アニメーションにもリズムがある。同じパターンの繰り返しは最初こそ印象的だが、すぐに退屈になる。Awwwardsに掲載されるサイトの多くが単一パターンのアニメーションを採用する中で、私たちは25種のフリップパターンを用意した。

水平方向の掃引、対角線のカスケード、放射状の広がり、渦巻き、そしてランダムな散布。これら25のパターンが50枚の風景写真と非同期でループする。25と50の組み合わせで、同じパターンと同じ写真が重なる確率は極めて低い。来るたびに違う表情を見せるヒーローは、まるで季節ごとに展示が入れ替わる美術館のようだと自負している。

半透明オーバーレイという「額縁」

風景写真はそのままでは色彩が強すぎて、テキストの可読性を損なう。かといって写真の彩度を下げれば、タイルフリップの視覚的なインパクトが失われる。

この矛盾を解消するために、rgba(26, 74, 138, 0.65) の紺色オーバーレイを写真の上に重ねた。美術館に例えるなら、これは「額縁」の役割を果たしている。どんなに鮮やかな絵画も、額縁がなければ壁との境界が曖昧になり、作品としての存在感が薄れる。紺色のオーバーレイはブランドカラーとしての統一感を保ちながら、白文字のコントラスト比をWCAG基準の4.5:1以上に確保する。Material Designのカラーガイドラインで示される「サーフェスとコンテンツの関係」を参考に、0.65という不透明度を選定した。

90度の瞬間に見えるもの

タイルが回転する途中、ちょうど90度に達した瞬間、表面と裏面の両方が消失する。CSSの backface-visibility: hidden は裏面を隠すプロパティだが、90度では表裏どちらも「裏向き」と判定されてしまう。

この問題はデザイナーとして見過ごせなかった。一瞬でもちらつきが発生すれば、アニメーション全体の品質が崩れる。解決策として、タイル要素自体に現在の画像と同じ背景を持たせることで、面が消えても隙間が見えないようにした。細部へのこだわりは、ピラティスで体幹を鍛えるのと同じで、表面からは見えないが全体の安定感を支えている。技術的な実装の詳細は、石井がCSS 3D Transformsの実装解説で丁寧に解説してくれている。

モバイルでの「引き算」のデザイン

デスクトップで機能する表現を、そのままモバイルに持ち込むのは安易な判断だ。画面の小ささは制約ではなく、本質を問い直す機会だと私は考えている。

モバイル版では「Go Crazy with Harmony」を1単語ずつ改行した大きな縦組みレイアウトに変え、企業説明のテキストは思い切って省略した。残したのは3つの数字だけ。Googleのモバイルファーストインデックス時代において、モバイルのヒーローに求められるのは「情報の全て」ではなく「印象の核」である。

タイルアニメーションはモバイルでも動作するが、画面が小さいためタイル数は自動的に減り、パフォーマンスの心配もない。

スクロール体験への接続

ヒーローの直下には、18のポータルセクションがカラーバーで区切られて並ぶ。このスティッキーセクションバーの設計については、前田がスクロール連動ナビゲーションの設計原則で詳しく解説している。タイルフリップの「面の回転」から、セクションバーの「色の入れ替わり」へ。異なる手法でありながら「動きによる文脈の伝達」という共通原理でつながっている。

優れたWebデザインは、個々のセクションの見栄えだけでなく、スクロールという行為を通じて訪問者が受け取る一連の体験の質で評価される。タイルフリップはその最初の一音であり、続くセクションバーの色彩変化が旋律を紡いでいく。