CEKARO.

型づくりに始まり、鋳造、手作業での彩色まで、1995年からすべてを自社の工房で手がけるポーランドの装飾フィギュアメーカーのウェブサイトです。フィギュアはヨーロッパ各地のお客様に届くため、3つの言語で展開しています。

火花

始まり

最初にできたのはロゴでした。その翌日には、サイトの案が三つ出そろいました。クライアントから届いた素材に近い案、見た目を一新した案、そして大胆な3Dの案です。

本番のサイトには、3D案から背景の構成がそのまま引き継がれました。グラデーション、床のグリッド、そして大きなブランド名の文字です。これはクライアントの判断です。

「会社概要」の文章は会社自身が、最初からポーランド語・英語・ドイツ語で用意しました。そのため、サイトは初めから3言語で計画されていました。

つくり方

ギャラリーでは、カテゴリーごとにカタログのフィギュアの3Dモデルを置いています。フィギュアはゆっくりと揺れ、カーソルに反応します。360度回転する動きは外しました。モデルの背面は推測でつくるしかなく、このサイトは本物の製品を見せるためのものだからです。

ファーストビューには、カタログのフィギュアをレンダリングした画像を使っています。金の角を持つ雄牛、頭部の像、ゴリラ、テディベアです。以前は画像生成ツールでつくった画像でしたが、製品の見た目まで描き変えてしまっていたため、差し替えました。

背景の大きな「CEKARO」の文字は、スクロールに合わせて金色で満たされていきます。チームの写真は会社紹介の文章の横で画面に固定され、その下に空白が残らないようにしています。

中のしくみ

言語ごとに専用のURLと検索エンジン向けのデータがあるため、Googleからは、切り替えボタンの付いた一つのサイトではなく、三つの独立したサイトとして見えます。ドイツ語版は卸売市場向けなので、丁寧な二人称の「Sie」でお客様に語りかけます。

3Dモデルは公開前に、自作の軽量化スクリプトを通します。87MBのスキャンデータが、サイトでは366KBのファイルになります。

技術的な判断

コードに関心のある方へ

Next.js 16、静的プリレンダリング

コンテンツはサーバーから完成した状態で届き、three.jsはブラウザ側で後から読み込まれます。そのため、文章が3Dグラフィックを待つことはありません。

three.js、全タイルで一つのWebGLコンテキスト

すべてのモデルが一つのコンテキストを共有します。読み込みに失敗したモデルがあってもタイルには代わりの形状が残るため、ギャラリーが空になることはありません。

自作スクリプトでgltf-transform

数十MBあるスキャンデータを、サイトに載せる前に数百KBまで軽くします。

PL・EN・DE、canonicalとhreflang

言語ごとに専用のURL、サイトマップ、シェア用の画像があり、x-defaultはヨーロッパのその他の地域に向けて英語版を指します。

GSAP、ScrollTrigger、Lenis

動きはスクロールに連動し、prefers-reduced-motionが有効な場合はアニメーションとスムーズスクロールがオフになります。

JSON-LD LocalBusiness

検索エンジンが、創業年を含む会社情報を理解できる形で受け取ります。