日産NOTE・ユニクロPinterestに学ぶ「ついつい、最後まで見てしまう」ウェブデザインの仕掛け

このエントリーをはてなブックマークに追加

日産NOTEのウェブサイトが古くて新しいウェブデザイン手法を採用しています。まずはこちらのサイトで体験してみてください。

「WHAT'S NEW日産 NOTE?」

“おっ!” 訪問者の心をキャッチするフィジカルな仕掛け

サイトを訪れた方はお分かりかもしれませんが、静的なイメージを持つクルマのプロダクトサイトに、「マウスのホイール操作に応じたコマ撮りアニメーションの効果」を取り入れることで、訪問者にちょっとしたユニークな体験と商品理解を提供する、フィジカルなサイトに作り込んでいます。

画面キャプチャーでその一部をおさらいしましょう。まずは冒頭。

「NOTE」の文字が...

電光掲示板のようにちらついて見える。

続いて、中盤。

男性と女性が...

クルマに乗り込む。

終盤。

クルマの4つの特徴が...

順に紹介される。

このサイト、Twitterでは日本国内外のウェブデザイン界隈で話題になっているようで、

「スクロールするという身体的な心地よさ×最後まで見たいという欲求。」

「Nissan’ın Note için tasarladığı inanılmaz internet sitesi」(トルコ語)

「Awesome Web hack」

と、ウェブデザインのプロの目も引くクオリティーだったようです。素晴らしいですね。

スクロール連動のコマ撮り、可能にしたのは「スクロールを操るjavascriptライブラリjquery-mousewheel」

では、このコマ送りスクロールサイトはどのように作られているのか。サイトの裏側を見てみましょう。今回はHTMLファイルの裏側を紹介します。

ページ内の一コマです。

サイト内のひとコマ

サイト内のひとコマ

こちらの裏側は、以下のようになっています。

サイト内のひとコマの裏側

サイト内のひとコマの裏側

大きく分けて、今回の表現のポイントは2つです。

・コマ切れにした画像の配置

・スクロールの制御によるコマ送り描写

・コマ切れにした画像の配置

<div class="frameBG">
				<img src="SHARED/IMG/FRAMES/03_POW_map_01.jpg" alt="" width="964" height="1200">
				<img src="SHARED/IMG/FRAMES/03_POW_map_02.jpg" alt="" width="964" height="1200">
</div>

まず、一番最初のdiv要素。ここでは、2枚の画像を配置しています。それぞれ、数コマの画像を一つにした画像です。読み込み速度の関係から1200px単位で区切って表示させているのでしょう。これだけでも、縦長のサイトはできてしまいます。しかし、これだけでは「コマ送り感」が再現できません。このスクロール体験を実現しているのが続いて紹介するスクロールの制御です。

・スクロールの制御によるコマ送り描写

<div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>
 <div class="frame h120"></div>

画像の下に書かれている、これらのコードが「コマ送り感」を演出してくれています。このclass=”frame h120″の要素ひとつひとつが“ひとコマの範囲”を指定しています。

通常のWebサイトであれば、ホイールを回転させれば、すぐにその分だけ下にスクロールされます。しかし今回のサイトでは回転させても、すぐにそのまま下にスクロールされません。

一定の量だけ回転させたときに初めて、下へスクロールしてくれます。

これが「コマ送り感」の正体です。この”一定の量”をHTMLで設定しているのが
class=”frame h120″の要素です。そしてこのスクロールの制御を実行しているのはjavascriptライブラリjquery-mousewheelです。以下のサイトで使用方法を紹介していますのでご参考にしてください。
マウスホイールでもスライドするJavaScript「horinaja for scriptaculous or jQuery」

ユニクロが展開したPinterestキャンペーンとの違い

このサイトを見た瞬間、ウェブデザインに携わる方なら想起されたと思うので、触れないわけにはいかないでしょう。ユニクロがPinterestを活用したことで世界で話題になった「UNIQLO Dry Mesh Project」です。(いまはすでに終了しているようなので、紹介記事をリンクしておきます)

UNIQLO Dry Mesh Project

このPinterestサイトはオフィシャルのキャンペーン紹介ムービーにもある通り、商品がすでにコマ撮り状態で写った縦長の画像を、UNIQLOのBoardにPinすることで、「マウスのホイール操作に応じたコマ撮りアニメーションの効果」を実現していました。逆にいうと、Pinterestサイトでは日産NOTEのサイトのような作り込みができないので、このような手法を選んだと言えます。いずれにせよ、異なる方法で同じ”効果”を生んでいたのです。

個人的には、UNIQLOの場合、Pinterest=普段からマウスのホイール操作で楽しむサイト、にこの”効果”を持ち込んだ点が素晴らしかったと思います。つまり、”いつもの…あれっ”という、効果を超えた”体験”を提供していたように思うからです。UIを超えたUX=ユーザーエクスペリエンスとも言えるでしょうか。「そのサイト=環境にあった表現がある」ということを再確認させられる事例でした。

ちなみに、サイト=環境にあった表現という視点では、あまりにも有名ですが、ブラジルの自動車保険「Bradesco Seguros Insurance」が自動車雑誌のiPad版に出稿したユニークな広告も素晴らしいです。ぜひ一度ご覧ください。

iPad=スワイプで楽しむ環境を生かした表現の代表例

話は大きく逸れてしまいましたが、NEW日産NOTEのサイトは「マウスのホイール操作」「コマ撮りアニメ」という、既存の表現手法を掛け合わせながらも、”こんな表現があるんだ” という新しさを感じさせてくれるサイトでした。

ちなみにサイトの最下部にある「TRY REVERSE!」をクリックすると、もうひとつ仕掛けが残されているので、もう一度試してみてくださいね。

「TRY REVERSE!」をクリックすると...

■関連リンク

NEW日産NOTE

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ