Webサイトのファーストビューに動きを持たせる実装はいくつもあるけれど、画面全体を小さなタイルに分割して、一枚一枚を独立に3D回転させるというアプローチは、正直なところ最初は「本当にできるのかな」と不安だった。CSSの3D Transforms、backface-visibility の微妙な挙動、数百の要素を同時に動かすパフォーマンス管理。どれか一つでも躓けば、全体が破綻する繊細な実装になる。
結果として動いたものを見たときの嬉しさは、お菓子作りで複雑なレシピが思い通りに焼き上がった瞬間に似ていた。まずは動作するデモを見てもらいたい。
京谷商会トップページで稼働中のタイルフリップ。数秒ごとに異なるパターンで風景写真が入れ替わる。
タイルグリッドの構築
ヒーローの幅と高さを取得し、40px（約1cm）刻みでグリッドに分割する。横1400pxなら35列、高さ500pxなら13行。合計455枚のタイルが生まれる。観葉植物の植え替えで鉢のサイズを計算するときと似た感覚で、コンテナに対してタイルがきれいに敷き詰まるよう Math.ceil で切り上げている。
var TS = 40;
var cols = Math.ceil(hero.offsetWidth / TS);
var rows = Math.ceil(hero.offsetHeight / TS);
各タイルは3層構造になっている。外側の .tile に perspective: 800px を設定して奥行き感を与え、中間の .tile-inner が transform-style: preserve-3d で3D空間を維持しながら回転する。一番内側に .tile-front と .tile-back という2枚の面を配置して、MDNのbackface-visibilityドキュメントにある通り backface-visibility: hidden で裏面を隠す。
.tile { perspective: 800px; overflow: hidden; }
.tile-inner {
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
}
.tile-inner.flipped { transform: rotateY(180deg); }
.tile-front, .tile-back {
position: absolute; inset: 0;
backface-visibility: hidden;
}
.tile-back { transform: rotateY(180deg); }
この構造はトランプのカードと同じ原理で、表と裏を背中合わせに貼り付けた状態をCSSで再現している。
背景写真のスライス表示
50枚の風景写真はUnsplash CDNから配信される。ポイントは、全てのタイル面に同じ画像URLを指定しつつ、background-size をヒーロー全体のサイズに、background-position をそのタイルの位置に応じたオフセットにすること。ジグソーパズルの各ピースが全体像の一部を見せているのと同じ仕組みだ。
face.style.backgroundImage = 'url(' + sceneUrl + ')';
face.style.backgroundSize = w + 'px ' + h + 'px';
face.style.backgroundPosition = '-' + (col * 40) + 'px -' + (row * 40) + 'px';
CSS-Tricksのbackground-position解説で紹介されているスプライト技法の応用になる。
90度問題と、その丁寧な解決
実装していて一番手こずったのがこの問題だった。タイルが回転して90度に達した一瞬、表面も裏面も真横を向くため、CSSは両方を「裏面」と判定する。結果としてタイルが消え、背後のヒーロー背景色（紺色）が透けて見える。
最初は「一瞬だし気づかないかも」と思ったのだけれど、河野さんから「ちらつきは品質の妥協」とフィードバックをもらい、きちんと対処することにした。解決策は意外とシンプルで、.tile 要素自体に現在表示中の画像と同じ背景を持たせる。タイルの面が消える90度の瞬間にも、タイル要素の背景が同じ画像を表示しているので、視覚的には何も起きない。
// フリップ完了後、タイル要素の背景を更新
setTimeout(function() {
tile.style.backgroundImage = 'url(' + nextScene + ')';
tile.style.backgroundSize = heroSize;
tile.style.backgroundPosition = tileOffset;
}, FLIP_DURATION);
地味な処理だけれど、こういう一つ一つの丁寧さがアニメーション全体の品質を支えている。
25種のフリップパターンを数学で生成する
パターン関数は (row, col, totalRows, totalCols) を受け取り、そのタイルの「ステップ番号」を返す。ステップが小さいタイルから順に裏返る。
水平パターンは列番号だけで決まる return cols - 1 - col。放射状パターンは中心からの距離 Math.hypot(row - rows/2, col - cols/2) を使う。渦巻きパターンは Math.atan2 で角度を求めて距離と組み合わせる。
// 渦巻き（時計回り）
function(r, c, R, C) {
var angle = Math.atan2(r - R/2, c - C/2) / Math.PI;
var dist = Math.hypot(r - R/2, c - C/2);
return Math.round(angle * 8 + dist * 2) + 20;
}
数学の授業で習った三角関数がこんなところで役立つとは思わなかった。全パターンのステップ値は0からNORM（列数-1）に正規化するので、パターンの種類によらず所要時間が揃う。web.devのアニメーションガイドでも推奨されている通り、予測可能なタイミングはユーザーの安心感につながる。
パフォーマンスへの配慮
455枚のタイルを同時に動かすと聞くと心配になるかもしれないが、CSSの transform はGPUコンポジットレイヤーで処理されるため、レイアウトやペイントの再計算が発生しない。各タイルのフリップは setTimeout で段階的にトリガーされ、一度に全タイルが動き出すことはない。
画像のプリロードも工夫していて、次に表示する1枚だけを直前に読み込む遅延方式を採用した。50枚を初回に一括読み込みすると帯域を圧迫するし、ファーストビューの表示速度にも影響する。必要なものを必要なタイミングで。植物の水やりと同じで、やりすぎは根腐れの原因になる。
このタイルフリップと連動するスクロールUI（スティッキーセクションバー）については、前田がスクロール連動ナビゲーションの設計で解説しているので、あわせて読んでもらえると嬉しい。デザイン面の設計思想は河野さんのタイルフリップで魅せるヒーローデザインで語られている。