美術館で一枚の絵画の前に立ったとき、視線は画面全体を一度に捉えるのではなく、色彩の変化や筆致の流れに沿って自然と動いていく。この「視線の誘導」という原理を、Webサイトのヒーローセクションに持ち込めないかと考えたのが、タイルフリップアニメーション開発のきっかけだった。
画面全体を約1センチ角の小さなタイルに分割し、世界各地の風景写真を多彩なパターンで切り替えていく。静止画のスライドショーでもなく、動画の埋め込みでもない。一枚一枚のタイルが独立して回転するという、まるでモザイクアートが呼吸するような表現である。
上のデモは実際に動作するタイルフリップアニメーション。数秒ごとに異なるパターンと風景で画面が入れ替わる。
なぜスライドショーではなく「タイル」なのか
従来のスライドショーは画像全体が一度に切り替わる。見慣れた手法だからこそ、訪問者は無意識に「あ、またスライドか」と認識して注意を逸らしてしまう。Nielsen Norman Groupの調査でも、自動回転するカルーセルがユーザーに無視される傾向は繰り返し指摘されている。
一方でBaymard Instituteのホームページ・カテゴリUX調査では、カルーセルそのものが悪いのではなく「ユーザーが操作できないこと」が問題だと整理されている。タイルフリップは操作を要求しない代わりに、パターンの変化自体が情報として機能する点で、従来のカルーセルとは設計思想が根本的に異なる。
私がタイルフリップに惹かれたのは、北欧のテキスタイルデザインに通じる「パターンの美しさ」にある。規則的でありながら予測しきれない動き。右端から左端へ波のように裏返るときもあれば、中心から放射状に広がるときもある。渦を巻くように回転するパターンもある。この変化が人の視覚システムに作用して、見ていたいという気持ちを引き出す。
25種のパターンが生む視覚的リズム
音楽にリズムがあるように、アニメーションにもリズムがある。同じパターンの繰り返しは最初こそ印象的だが、すぐに退屈になる。Awwwardsに掲載されるサイトの多くが単一パターンのアニメーションを採用する中で、私たちは25種のフリップパターンを用意した。
水平方向の掃引、対角線のカスケード、放射状の広がり、渦巻き、そしてランダムな散布。これら25のパターンが50枚の風景写真と非同期でループする。25と50の組み合わせで、同じパターンと同じ写真が重なる確率は極めて低い。来るたびに違う表情を見せるヒーローは、まるで季節ごとに展示が入れ替わる美術館のようだと自負している。
具体的には、各パターンはタイルのインデックスに基づいて遅延時間（transition-delay）を算出している。例えば水平掃引なら列番号×30ms、渦巻きなら中心からの距離×20msという具合だ。この遅延値の設計が、パターンごとの「性格」を決定づける。
半透明オーバーレイという「額縁」
風景写真はそのままでは色彩が強すぎて、テキストの可読性を損なう。かといって写真の彩度を下げれば、タイルフリップの視覚的なインパクトが失われる。
この矛盾を解消するために、rgba(26, 74, 138, 0.65) の紺色オーバーレイを写真の上に重ねた。美術館に例えるなら、これは「額縁」の役割を果たしている。どんなに鮮やかな絵画も、額縁がなければ壁との境界が曖昧になり、作品としての存在感が薄れる。紺色のオーバーレイはブランドカラーとしての統一感を保ちながら、白文字のコントラスト比をWCAGの達成基準1.4.3が求める4.5:1以上に確保する。Material Designのカラーガイドラインで示される「サーフェスとコンテンツの関係」を参考に、0.65という不透明度を選定した。
配色の考え方について詳しく知りたい方は、同じUXDポータルの健康食品LPの配色戦略でも実例を交えて解説している。色が与える心理的効果とコンバージョンの関係は、ヒーローデザインでも見逃せない要素だ。
90度の瞬間に見えるもの
タイルが回転する途中、ちょうど90度に達した瞬間、表面と裏面の両方が消失する。CSSの backface-visibility: hidden は裏面を隠すプロパティだが、90度では表裏どちらも「裏向き」と判定されてしまう。
この問題はデザイナーとして見過ごせなかった。一瞬でもちらつきが発生すれば、アニメーション全体の品質が崩れる。解決策として、タイル要素自体に現在の画像と同じ背景を持たせることで、面が消えても隙間が見えないようにした。この手法はCSS transform-style: preserve-3dと組み合わせることで初めて安定する。細部へのこだわりは、ピラティスで体幹を鍛えるのと同じで、表面からは見えないが全体の安定感を支えている。技術的な実装の詳細は、石井がCSS 3D Transformsの実装解説で丁寧に解説してくれている。
パフォーマンスとGPUアクセラレーション
数百枚のタイルが同時にアニメーションする以上、パフォーマンスへの配慮は不可欠だ。CSSの transform と opacity だけを変化させることで、ブラウザのコンポジターレイヤーで処理が完結し、メインスレッドのレイアウト再計算を回避している。
さらに、アニメーション開始直前に will-change: transform を付与し、完了後に削除するライフサイクル管理を行っている。常時付与するとGPUメモリを浪費するが、必要なタイミングだけ宣言すれば、ブラウザが事前にレイヤーを昇格させる猶予を得られる。デスクトップで約600枚、モバイルで約150枚のタイルを同時に扱っても、60fpsを維持できているのはこの設計による。
アクセシビリティへの対応
動きのあるUIは視覚的なインパクトを生む一方で、前庭障害や注意欠如のあるユーザーにとっては負担になることがある。WCAG 2.2の達成基準2.3.3（インタラクションからのアニメーション）はこの課題を明確にしている。
タイルフリップでは、OSの「視覚効果を減らす」設定を prefers-reduced-motion メディアクエリで検知し、有効な場合はアニメーションを停止して静止画のクロスフェード（opacity遷移のみ）に切り替えている。動きを完全に排除するのではなく、穏やかな代替表現を用意することで、情報伝達の本質は保ちながらアクセシビリティを確保した。
モバイルでの「引き算」のデザイン
デスクトップで機能する表現を、そのままモバイルに持ち込むのは安易な判断だ。画面の小ささは制約ではなく、本質を問い直す機会だと私は考えている。
モバイル版では「Go Crazy with Harmony」を1単語ずつ改行した大きな縦組みレイアウトに変え、企業説明のテキストは思い切って省略した。残したのは3つの数字だけ。Googleのモバイルファーストインデックス時代において、モバイルのヒーローに求められるのは「情報の全て」ではなく「印象の核」である。
タイルアニメーションはモバイルでも動作するが、画面が小さいためタイル数は自動的に減り、パフォーマンスの心配もない。LP全体のモバイル最適化についてはランディングページのCVR改善チェックリストも併せて参照してほしい。
スクロール体験への接続
ヒーローの直下には、18のポータルセクションがカラーバーで区切られて並ぶ。このスティッキーセクションバーの設計については、前田がスクロール連動ナビゲーションの設計原則で詳しく解説している。タイルフリップの「面の回転」から、セクションバーの「色の入れ替わり」へ。異なる手法でありながら「動きによる文脈の伝達」という共通原理でつながっている。
優れたWebデザインは、個々のセクションの見栄えだけでなく、スクロールという行為を通じて訪問者が受け取る一連の体験の質で評価される。タイルフリップはその最初の一音であり、続くセクションバーの色彩変化が旋律を紡いでいく。