手作りの「匠の技」を折り紙をモチーフに WebGL で再現した Lexus ブランドのウェブサイト

doxas : 2018-03-05 13:49:20

結構繊細な操作が必要?

今回ご紹介するのは、日本が世界に誇る自動車メーカー、トヨタ関連の海外向けウェブサイトです。

トヨタは、独自の高級車ブランドとしてレクサス(Lexus)を展開していますが、このレクサスに関連したウェブサイトですね。

このサイトでは、ハンドメイドの匠の技を強く意識した作りになっており、その手仕事を折り紙という形でブラウザ上に再現しています。

結構繊細な操作が必要なので、スマートフォンなどのタッチデバイスのほうが操作しやすいかもしれません。

折り紙を折るだけでなく、折り目をしっかりとつける

今回のサイトはコンテンツの規模としてはそれほど大きくなく、ほんの数分で体験できる一種のミニゲームのような感じになっています。

最初にページのロードが完了すると、匠という漢字をあしらったドラッグ可能なアイコンが置かれた状態になります。

匠という漢字の、中身の「斤」の部分を取り囲むように点線が書かれていますので、それをなぞるようにしてアイコンをドラッグしてやると折り紙を折っていくゲーム風のコンテンツが現れます。

折っていく操作の手順そのものは、常にドラッグ可能な白くて丸いアイコンが出ているので、その手順を追いかけていくだけで難しくありません。

日本人は小さなころから折り紙は結構慣れ親しんだ素材でもありますし、直感的にイメージしやすいです。

海外の方だと、どういうふうに見えるんでしょう。ちょっと想像するのは難しいですが、すごく新鮮なものとして見えるという人もいるのかもしれません。

折り紙の操作は、折って形を作るだけでなく、折り目部分を再度なぞってやり、しっかり折り目をつける操作なども必要となっていて、なかなか本格的な折り紙の雰囲気が出ているような気がします。

操作可能な時間は一応 90 秒という制限時間付きです。

ただ、普通にやっていけばまず間に合わないということは無いと思います。

全ての作業が終わると、最終的にその経過時間やクオリティなどが数値化して画面に出てくるのですが、より正確にドラッグ操作を行うことができたほうがスコアは高くなるようですね。

高得点を狙おうとすると結構難しい……

また途中には裏返す操作なんかもあって、飽きさせずにユーザーに操作を促す仕掛けもうまく取り入れてあるなあという感じがしました。

惜しむらくは、ちょっとダウンロードの速度が遅いのかなあという感じがする点ですかね……

ダウンロードがスムーズに行われない環境だと、ドラッグ操作を行うことができるまでにタイムラグがあったりするだけでなく、背景で再生されている動画が切れ切れになってしまうのですよね。

せっかく高級感のある雰囲気が再現されているだけに、通信に関する部分で体験が損なわれてしまうのはすごくもったいない感じがしました。まあ海外のコンテンツなので、特に日本だとそうなりがちなだけなのかなという感じもしますけれども……

匠の技を、折り紙というテーマでうまく表現していると思います。

気になる方は、ぜひチェックしてみてください。

リンク:

Lexus Craftsmanship | Lexus Europe

share

follow us in feedly

search

search

monthly

sponsor

social