プロダクトのデザインに強いこだわりを持っているAppleですが、製品だけでなくホームページにも強いこだわりを持っているようです。
単に機能紹介で終わらせようとするのではなく、ホームページ自体がキーノート(基調講演)であるかのようなピッチトーク(売り込みをするためのプレゼンテーション)であるかのようにさえ見えます。

2017年秋に登場した新製品のホームページも、例外ではありません。
もしかしたらiPhone 8やiPhone Xが目新しい機能が付いていないからという理由で買うのをパスしているようであれば、一度ホームページを覗いてみてください。
なぜだか、欲しくなってしまうのです。

今回は、「iPhone X」などApple新製品ホームページに見るWebデザインでマネしたい5つのポイントをご紹介していきます。
単なる製品紹介を超えて、心に訴えかけるのは、ホームページにどのような工夫を施しているからでしょうか。

「iPhone X」などApple新製品ホームページに見るWebデザインでマネしたい5つのポイント

1. プロダクトファースト (Product-First)

Apple製品のページは、どのページも一貫してプロダクトの写真を前面に押し出しています。
余白を十分に取り、ジャンプ率を高くしながらも、スクロールしながら必ず製品の画像が大きく映るように設計されています。

また、今回特に新製品として印象に残るのは、「iPhone X」「iPhone 8」のホームページの冒頭のスクロールエフェクトです。
ページを移動すると、それぞれに「X」「8」の文字が出てきますが、スクロールすると製品が現れるのです。

xintro.gif
スクリーンショット：2017年9月

8intro.gif
スクリーンショット：2017年9月

まるで「X」は「次世代」、「8」は「無限、永遠」を意味する「∞」を表しているかのように、これまでの数字以上に象徴的なものとして取り扱われています(これは「テン」を「10」ではなくあえて「X」と表記していることからも分かるのではないでしょうか)。

product1.png
スクリーンショット：2017年9月

その他にも、各iPhoneのページには全画面を表示したパート、上半分を映したパート、ヒトが使用しているシーンを映したパートを度々使い分けて、ザイアンス効果を活用しています。
ザイアンス効果は、別名単純接触効果とも言い、出会う回数が多くなれば多くなるほど好感を持ちやすくするということです。

iPhone Xの発売日が遅くなったのは巷では部品などの調達による準備の影響だとも言われていますが、あえてiPhone 8と発売時期をずらしつつ、単純接触の回数を増やすことで期待を持ち上げる効果もあるのではないかと考えられます。

参考：
ザイオンス効果とは - Webマーケティング用語

2. 突き刺さるマイクロコピー (Spiky Microcopy)

copy1.png
スクリーンショット：2017年9月

Apple製品のホームページを見て毎回感心するのが、マイクロコピーが秀逸だということです。
Webの世界のマイクロコピーはキャッチコピーに限らずボタンのラベルに至るまでのあらゆるテキスト部分のコピーを指しますが、ここでは製品の特徴を一言で捉えた短いコピーのことを指します。

分かりやすくも短く言い切りの形で説得力があり、大きなプロダクトの写真が添えられて、心にしっかりと突き刺さります。
こうしたマイクロコピーは非常に短いので書くのは簡単なように思えますが、試行錯誤を繰り返しながらどれがマーケティング上効果があるかを考え抜いていくことが大切です。

参考：
神は細部に宿る！ユーザーに振り向いてもらえるマイクロコピーを作るための5つのポイント

3. 可読性が上がったタイポグラフィ (Highly-legible Typography)

typo1.png
スクリーンショット：2017年9月

実は、これまでのAppleの製品ページと比べると、微細ながらも大きく変化したところがあります。
それが、タイポグラフィ部分です。

以前は、非常に細めの文字で繊細に表現を行なっていました。
それが、下のMacBook Proのようなページです。

old

しかし、今回は、思い切ってかなり太い文字が採用されています。
力強く、説得力があり、白い背景もあって可読性も格段に上がっています。

typo2.png
スクリーンショット：2017年9月

一般的に言えば、太字だけを多用してしまうと対称性(コントラスト)が失われ、どれが重要でどれが重要でないのかが分かりにくくなってしまいます。
しかし、Appleの新製品のページでは、タイポグラフィの大きさを規則的に変えてヒエラルキーを生み出すことで、そうした問題を回避することに成功しています。

参考：
エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

4. さらに詳しく(More Details)

detail
スクリーンショット：2017年9月

さらに、今回Appleの新製品のページで注目したいUIが、「さらに詳しく」というボタンです。

単なるボタンにしか見えないかもしれませんが、ホームページを見ていてすでに欲しいと思っているユーザーには最短距離で購入ボタンを押してもらい、まだ比較検討しているユーザーにはさらにピッチトークを行うという、重要な役割を担っているのです。

5. 微細なパララックス (Subtle Parallax)

parallax.gif
スクリーンショット：2017年9月

最後に付け加えておきたいのが、「iPhone X」のホームページの至るところで取り入れられている微細なパララックス効果です。

パララックス効果と言えば大胆に活用する例がほとんどですが、iPhone Xの製品紹介ページの場合は、本当に確認できるかどうかというほどにかすかに使われています。
わずかなこと、小さなことのように思えるかもしれませんが、ボディランゲージと同様に、動きがあるほうが好感を持ちやすい、という心理学的な効果を利用しているとも考えられます。

まとめ

非常にシンプルでありながらも、今回は一段と製品が前面に押し出され、なおかつタイポグラフィも一新しているので、その意味では真新しく見えるのではないでしょうか。

iPhoneそれ自体の素晴らしさだけでなく、iPhoneのある生活を想像させるような余韻を残している点も、見習うべきポイントです。
ぜひ、ご自身のホームページにこうしたポイントを活かしてみてはいかがでしょうか。