ingCloud は、バネを使わずに重力で動き、身体をやわらかく受け止める椅子です。その「ふわりと沈み、静かに落ち着く」感覚を、ページをスクロールする手ざわりにも持たせるため、PC では慣性スクロールを取り入れています。ホイールの入力をそのまま画面に伝えるのではなく、少し遅れてなめらかに追いかけるように動かし、止まるときも急停止させずに減速しながら静止させます。座った瞬間に身体を受け止め、ゆっくりと落ち着く ingCloud の動きを、スクロールの感触に重ねたものです。

写真には、ページ全体でパララックス効果をかけています。写真を枠より少し大きく表示し、スクロールの半分ほどの速さで枠の中をずらしていきます。枠は動かずに中身だけがゆっくり動くので、写真が画面の一枚奥に浮かんでいるような奥行きが生まれます。メッシュに身体を預けたときの「沈み込み」や、空間に浮かぶような椅子の佇まいを、平面の画面の上でも感じてもらうための演出です。

機能紹介では、実際の図面をもとにした線画で 3D ウルトラオートフィット機構を説明しています。「3D Ultra Auto fit」「3D Hammock Mesh」「Triple Gliding」のタブを切り替えると、該当する部位だけが図の上で動きはじめます。

椅子の線画を1枚の画像として置き、メッシュとグライディングの部位はそれぞれの形をした画像でマスクして、その中だけを CSS アニメーションで動かしています。メッシュは斜めのストライプを流し続けることで「編まれた面」を、グライディングは三角関数で明滅させることで「動く箇所」を表しています。どちらもタブで選んだときだけアニメーションを再生します。

可動域の図には OFF / ON のセレクターを付け、リクライニングの範囲の違いをクロスフェードで見比べられるようにしました。

ブランドサイトの「体感する」ボタンの先に、ing シリーズを実際に試せる場所を探す「体感場所を探す 」ページの実装も行いました。ショールームやライブオフィス、販売店などコクヨの全国の拠点から、取り扱いシリーズ・店舗形態・予約の有無・エリアで絞り込めます。

店舗の情報は、データ管理用のスプレッドシートをデザインし、クライアント担当者様にて容易に更新が可能な仕組みを実現しました。