世界でいちばんのウェブサイト 〜 Site of the Year Users' Choice 2018 〜
突然ですが、みなさん Web サイトは好きですか？
私は好きです。
最近 note を毎週書くようになり、 Web デザインアワードを見まくるようになって、素晴らしい Web サイトにたくさん出会えるようになってから、さらに好きになりました。
……しかし、最近、度肝を抜かれる Web サイトに出会いました。（実はささっと見たときは、そこまで驚かなかったんですが、すみずみまで見れば見るほど驚かされました……）
さて、今回は「 Awwwards 」にて「 Site of the Year Users' Choice 」を受賞した Web サイトを紹介します。「 Site of the Year Users Choice 」は 2018 年 1 月 1 日から 12 月 31 日までに「 Site of the Day 」を受賞した 365 の Web サイトのうち、「 Site of the Year 」にノミネートされた 30 の Web サイトの中から投票により選ばれます。
もちろん「 Site of the Day 」を受賞した Web サイトを見ても「そこまでやるか ?! 」って思うことはありますが、「 Site of the Year 」となると「そんなとこまで ?! 」って驚くようなこだわりを持ってつくられています。
「前々回」、「前回」は Web サイトをささっとまとめて見てきましたが、今回はすみずみまでじっくり見てみます。
Discover the Grobal World of Lexus ( https://discoverlexus.com/ )
プロダクションは「 RESN ( New Zealand ) 」、エージェンシーは「 Saatchi & Saatchi Tokyo ( Japan ) 」、ブランドは「 Lexus 」です。（「 RESN ( New Zealand ) 」は最近 Web デザインアワードを受賞しまくってますね……）
まずはこちらをご覧ください。
（こちらは”朝” Web サイトにアクセスしたときに撮影したスクリーンショットです）
次にこちらをご覧ください。
（こちらは”昼” Web サイトにアクセスしたときに撮影したスクリーンショットです）
最後にこちらをご覧ください。
（こちらは”夜” Web サイトにアクセスしたときに撮影したスクリーンショットです）
さてちょっと変わっていることがわかるでしょうか？
（私はしばらくわかりませんでした……）
……そう、朝は GOOD MORNING 、昼は GOOD AFTERNOON 、夜はGOOD EVENINGと”時間”によってメッセージが変わってるんですね。（ちなみに、”初めて” Web サイトにアクセスしたときは Welcome to Lexus、”再び” Web サイトにアクセスすると Welcome back to Lexus とメッセージが変わります）
”いつ” Web サイトにアクセスするか、”どれくらい” Web サイトにアクセスしているか、”タイミング” ”頻度”に応じてメッセージを変えています。
そこまでやるか ?!
め、めちゃくちゃ細けえ…!!
というわけで、ここまでこだわり抜いてつくられている Web サイトですから、「マイクロインタラクション」も半端なくこだわってつくられているはず……。ここからは「マイクロインタラクション」を紹介していきたいと思います。
まず、ローディングを見てみると……
LOADING
マウスカーソルが START ボタンになり、 START ボタンをクリックしたくなるよう設計されています。 START ボタンをクリックすると次のページに進みます。
EXPERIENCES 01
次のページに進むと、 Experiences → LEXUS DESIGN AWARDS → MORE EXPERIENCES という順番で文字が表示されます。 MORE EXPERIENCES はスクロールしたくなるようなアニメーションで演出されています。スクロールまたはボタンをクリックすると次のセクションに進みます。
EXPERIENCES 02
次のセクションに進んでから、上下にスクロールすると、ビジュアルが LEXUS DESIGN AWARD 2019 → JOURNEYS IN TASTE → NOTHING IS CRAFTED LIKE A LEXUS と切り替わります。ビジュアルは背面にぼかした写真をレイアウトして前面にぼかしてない写真をレイアウトしており、ビジュアルにカーソルを合わせたくなるよう工夫されています。（また中央上下にレイアウトされているボタンをクリックしても、ビジュアルを切り替えることができます）
NOTHING IS CRAFTED LIKE A LEXUS
マウスカーソルをビジュアルに合わせると、マウスカーソルがカーソルからボタンに切り替わります。 START ボタンをクリックすると、次のセクション のビジュアルが下から上にフェードインしてくることで、スクロールダウンを促す設計がされています。さらにここからスクロールすると、次のセクションのビジュアルが左右に広がるようになっており、クリックしたくなる仕掛けがされています。
SUPERHUMAN SENSES
中央下に ☓ ボタンがレイアウトされており、最後までスクロールすると、 ☓ ボタンは CLOSE というテキストが表示されながら左右に広がります。☓ ボタン（ CLOSE ボタン ）をクリックすると前のセクションに戻ることができます。最後まで読んだら前に戻るということをわかりやすく伝えるよう設計されています。（ちなみに MOVIE の PLAY ボタンも同じように設計されているので、ぜひチェックしてみてください）
さて、ここまで見ていただきましたがいかがでしょうか。まずは”なんだかよくわからないけど気持ちいい”って思わないでしょうか？
そしてそのひとつひとつが”なんとなく気持ちいい”ってだけじゃなくて、しっかり理由があって考えられていることがわかるんじゃないかと思います。
し、しかし、、
こんなとこまでこだわるのか…… ?!
……さあ、もうこれで最後です……このまま見ていきましょう…… !!
EXPERIENCES → HIGHLIGHTS
中央右にレイアウトされている罫線にカーソルを合わせると、 罫線が矢印に変わります。そして EXPERIENCES のビジュアル右側が透明になり HIGHLIGHT のビジュアルが透けて見えるようになっており、矢印をクリックしたくなる仕掛けがされています（いわゆるちら見せです）。
HIGHLIGHTS
スクロールダウンすると次のセクションに進みます。そしてビジュアルにマウスカーソルを合わせるとマウスカーソルがカーソルからボタンに切り替わり、クリックを促すよう設計されています。 START ボタンをクリックすると次のページ ENVISIONING THE FUTURE OF DESIGN AT DESIGN MIAMI/ に切り替わります。
ENVISIONING THE FUTURE OF DESIGN AT DESIGN MIAMI/
最後までスクロールすると、” SCROLL DOWN FOR UTOPIAN VISIONS - LEXUS AT THE 2018 MELBOURNE CUP ”と表示されます。これはページ最下部からスクロールダウンするとそのまま次のページに進むことができるんですね。
ENVISIONING THE FUTURE OF DESIGN AT DESIGN MIAMI/ → UTOPIAN VISIONS - LEXUS AT THE 2018 MELBOURNE CUP
つまり、次のページまでクリックして進むのではなく、スクロールするだけで進むことができるようになっており、次から次へとページを読み進めてもらうよう設計されていることがわかります。クリックして次のページに進むより、スクロールしてそのまま次のページに進める方が、たくさんページを読んでもらえるはずです。
……さて今回はひとつの Web サイトをすみずみまで見てみましたがいかがでしたでしょうか？「 そこまでやるか ?! 」って思うようなこだわりだけじゃなくて、「 そんなとこまで ?! 」って思うようなこだわりが伝わったでしょうか？（伝わらなかったらすみません……）
そして Web サイトってまだまだできることがたくさんあるじゃないか ?! とか、Web サイトってやっぱりおもしろい !! と思ってもらえたらこんなに嬉しいことはありません。（今年はもっともっといいものをつくれるようこだわって仕事しよう……）
それでは、またよろしくお願いします !!
----------------------------------------
「そこまでやるか ?! 」って思うような Web サイトを紹介しています。「そんなとこまで ?! 」って驚くようなこだわりを持った Web サイトがありましたら、ぜひ教えてもらえると嬉しいです !!
最後まで読んでいただき、ありがとうございました！