Pixi.js を利用した圧倒的な表現力! 個性的なデザインやインタラクションが素敵な PRMO Inc. のウェブサイト

doxas : 2019-06-13 14:08:54

研ぎ澄まされたインタラクション

今回ご紹介するのは、PRMO Inc. という国内の企業さんのウェブサイトです。

サイト内は画像を利用したグラフィックスと英語だけで構成されているのですが、すごくおしゃれで、楽しい雰囲気に仕上がっています。

インタラクティブ性が非常に高いサイトで、カーソルを動かしたり、スクロール操作を行ったりするたびに、新しい発見が見つかる、そんな印象を受けました。

リンク:

PRMO Inc.

リボンのようなオブジェクトから広がる表現

今回のサイトは、ページが表示された直後の段階では、画面全体に黄色(山吹色のような感じ)が塗られたような状態になっているのですが、スクロールしてやると、リボンのような感じで事例が次々と現れるようになっています。

この事例紹介に使われているリボン部分は、平常時はグレーアウト……というとちょっと語弊があるのですが、全体が黄色の濃淡で表示された状態になっています。

そこにカーソルを乗せてやると、その部分だけがフワリと本来のカラーの状態に変化します。

また、上のキャプチャ画像を見てもわかりやすいとは思うのですが、カーソルの乗っている箇所がちょっと盛り上がったような感じで湾曲するようになっています。

これによって、より「リボンっぽい動き」が見事に表現されていて、薄い膜状のオブジェクトがふわっと動くように見えます。

カーソルを動かしてやると、それに応じてリボンが左右にスライドするようになっているので、最初は画面の右側に見切れてしまっている部分も、カーソルの位置次第でしっかりと閲覧できるようになっています。

ここまでの内容でも十分インタラクションとして面白いのですが、今回のサイトにはさらに隠された演出があります。

それは強めにスクロール操作を行ったときにだけ現れるのですが……

勢いよくスクロールすると、画面に滑り込んできたリボンの部分の UV が伸びるような演出を見ることができます。

少しずつリボン部分の画像が完成していく独特な演出になっていて、シンプルながら、本当に表現力が一気に上がったような感じがします。

本当におしゃれでかっこいい……

上下の方向に勢いよくスクロールすると UV が伸びる!

今回のサイトは、ユーザーの操作に対するインタラクティブな演出が本当に素晴らしくて、流れるような滑らかさや、良い意味での浮遊感のようなものが感じられます。

ふわふわしているけど、かといって伝えたいことがぼやけているわけでもなく、見やすさも保ったまま演出がうまく組み合わされているのが素晴らしいなと思いました。

洗練されたデザインセンスを感じさせる、非常に素晴らしいサイトだと思いました。

ぜひチェックしてみてください。

リンク:

PRMO Inc.

share

follow us in feedly

search

search

sponsor

social