Command+Eye

新しいiPhoneとApple WatchのWEBを玄人目でチェック!

Appleの並々ならぬ公式サイトへのこだわり

文●笠井美史乃

Mac Fan独自の視点で、アップル周辺の最新ニュースや話題に切り込む!

自社商品を広く知ってもらううえで重要なのが、世界中の人々との接点になるWEBサイトだ。Appleは公式サイトでも、製品開発同様のこだわりを持って製品プロモーションを行っている。新しいiPhoneやApple WatchのWEBページに散りばめられた仕掛けをプロに分析してもらった。

 

新しいプロダクトの魅力を伝えるためのアップルらしい驚きのWEB表現

  • 5bfca8b842368b6a56739206682d8eab.jpg

 

 

始まりはMacプロ

本誌読者ならアップルの公式サイトを訪問したことのない人はいないだろう。シンプルなデザインながら、製品の特徴が的確に表現されていて、なおかつ見ていて〝欲しくなる〟仕掛けに溢れている。普通はその裏側に注目することはないだろうが、プロの目から詳細に見ると、そこにはとんでもないこだわりが詰め込まれているという。株式会社シフトブレインの鈴木慶太朗氏に話を聞いた。

シフトブレインはナショナル企業からスタートアップまで多数の企業・ブランドのクリエイティブを手がけ、多くの海外アワードも受賞している、業界トップを行くクリエイティブプロダクションだ。鈴木氏はそのデザインディレクターとして、アートディレクションやデザイン、UI/UXの設計などを手がけている。

「もう今から5年前になりますが、現在の円筒形のデザインのMacプロが初めて登場したとき、そのWEBページの表現の新しさに驚かされました。1つのプロダクトの紹介を縦長のシングルページ内に納め、ユーザのスクロールの速度に合わせてコンテンツがスムースに動作する仕掛けは、まるでプレゼンテーションを見ているかのような高いUXを提供していました。3Dモデルを使った動画素材と、ジャバスクリプト(JavaScript)を使ったコントロールの両方が非常に高いクオリティで組み合わせられています。シンプルなようで、実はとても手が込んでいるのです」

実際にそのWEBページは今でも見ることができる(1)。画面中央のMacプロは、3Dモデルを動かして作った47秒の動画だ。これがいくつかのパートに区切られ、閲覧者のスクロール操作にあわせて再生/停止を繰り返す。スクロール→動画再生→説明のテキスト表示。これを1つのセクションとし、もう一度スクロールすると次のセクションが表示される…という具合だ。

こうしたWEBページを作るうえでは、一般的に一連の動きを複数の画像に書き出し、連続的に切り替えて表示することで動画に見せる方法が用いられる。これはデバイスを問わず使える利点があるものの、尺と滑らかさを求めるほど画像の枚数は膨大になる。そして枚数が増えれば増えるほど、画像が高品質であればあるほどWEBページの表示は重くなり、快適な閲覧からは遠のく。つまりWEB制作において難しいのは、表現のクオリティと閲覧のしやすさという相反する命題をいかにバランスよく実現するかなのだ。Macプロのページでは一見写真のように見える高いクオリティの3Dモデルを軽量に実装し、滑らかな動画として見せている点が驚きなのだ。

(1)実はCG動画のMac Pro

  • a0c20d7374dd916c4c3b22d9fb80a4ee.jpg
  • 4df7b53f3df999961eb60bbfbcea5a02.jpg

Mac Proの製品ページ。スクロールに合わせて動く中央のMac Proは複数の画像が次々と表示されているわけではなく、CG動画。1枚の縦長のページ内で完結させるプレゼンスライドのようなスタイルもこの頃から。

 

当時アップルは、WEBでアニメーション表示等を行う規格「フラッシュ(Flash)」から、次世代HTMLの「HTML5」への移行を強く推していたことも背景にあったと推測できる。ビデオとアニメーションをここまで駆使したWEBページをHTML5でも構築できると示して見せたのだ。ストーリーを追うように1ページをセクションに区切って見せていくこのスタイルは、現在までに続くアップルの製品ページで定番となっている。

では、最新プロダクトのページはどうだろうか。鈴木氏に話を聞くと、「軽量化」「効率化」「スマホ最適化」、そして「ディテール」というキーワードが浮かび上がった。まずはiPhone XSのページを見てみよう。

 

画像を操り「軽量化」

まず注目したいのは、「Super Retina。迫力と大迫力。」と書かれたセクションだ。パソコンで見ると、iPhone XSとXS Maxの重なった画像がスクロールすると左右に別れて配置され、さらにスクロールするとiPhone 8も加わり3機種の比較が表示される(2)。この動きは、実は動画ではなく、静止画をジャバスクリプトで制御している。ここですごいのは、連番画像の方法を用いることを嫌って動画を採用したMacプロのページよりさらに軽く、たった4枚の画像で実現している点だ。

「滑らかに表示するには、通常1秒に24枚の画像が必要です。1枚の画像が数MBだとすると、それだけで40~50MBになります。アップルはそれを嫌って軽量化にこだわり、たった4枚の画像でクオリティを落とすことなく表現しています。スクロールに合わせて画像の位置をコントロールしてここまでの動きを作り込むには相当な手間がかかります」

また、このページの中では、グラデーションで塗られた文字が目を引く(3)。画像化された文字と思いきや、実はテキストだ。

「これはbackground-clipというCSSによって、背景に置いたテクスチャ画像に文字を重ねてクリップ(切り抜き)することで表現しています。効率的に多言語対応を行うためのものでしょう。グローバル企業であるアップルは多数の言語でWEBサイトを運用しています。テクスチャのために言語ごとに画像化していては制作・管理のフローが煩雑になりますが、このスタイルならテキストだけ差し替えれば作業が済むからです」

(2)たった4枚の画像で軽さを実現

  • c448c414ad804e737848bfb9067491bc.jpg
  • 3cb4ce4a282b36a75b38d1b6084f3ca9.jpg
  • 9e76fe20c8a90ad102a9413f2dccafde.jpg

iPhone XSの製品ページ。図のように、上から順にスクロールにあわせて、iPhone XSの表示が切り替わる。通常なら連番画像で表現するところだが、滑らかな描画には1秒間に24枚の画像が必要になり、WEBサイトが重くなる。Appleは、(図2枚目まで)たった4枚の画像を使い、JavaScriptで制御して実現している。

 

(3)カラフルな色文字のトリック

  • 82b419d7f71f3941adf3db820bb21c50.jpg
  • 87481d569b260dc734622d2db44e5374.jpg

背景にあるテクスチャを、上に乗せたテキストでクリップすることでこのように表示している。これならテキストを書き換えるだけで効率的に多言語対応が可能だ。




続きを読むためにはログインが必要です。
月額720円ですべてのコンテンツの閲覧が可能になります。
下のボタンより、お申込手続きを行ってください。

  • ログイン
  • 会員登録

同カテゴリ記事一覧