AppleのWebサイトに施された7つの工夫。計算し尽くされた"製品体験"のデザイン

Appleの製品ページをスクロールすると、美しい製品の写真や、完成度の高いアニメーション、魅力的なコンテンツが次つぎと現れ、まるでデジタル世界を旅しているかのような感覚に浸れます。

この記事では、Appleの製品ページに施された7つの工夫について解説します。Webサイトの構造や外観、コンテンツ戦略まで、Appleの魅力の秘密をひも解いてみましょう。

1. チャンク化を採用する

まずは、AppleのWebサイトの構造を見ていきましょう。

ひとつめの工夫は、チャンク化（チャンキング）です。チャンク化とは、あるものをより小さな断片に分割したり、逆により大きな断片にまとめることを指します。

Appleは長文で製品を説明するかわりに、コンテンツを細かく分割して表示しています。各ページ最後の法的セクションをのぞいて、ユーザーが長い文章を読まされることはほぼありません。

Webサイト全体に散らばっている小さなテキストブロックは、文章を読むことのハードルをグッと下げています。

▲出典：Apple

一般的に、Webサイトに多すぎる情報を載せると、ユーザーに複雑な印象を与え、情報がうまく伝わりません。たとえば単なる数字の羅列を覚える際も、「454−678−007」と3つのセクションに別れているほうが、「454678007」と繋がっているよりも、覚えやすく感じませんか？

AppleのWebサイトはチャンク化を採用することで、ユーザーの離脱率を下げ、製品を覚えてもらいやすくする工夫をしているのです。

2. インタラクティブな体験を提供する

Appleの製品ページは、ただ情報を積み重ねているだけではなく、ユーザーにインタラクティブな体験を提供しています。

たとえば、以下のような要素です。

• スクロールにあわせて画像が移動する
• テキストがフェードインする
• 製品のアニメーションが流れる

製品情報をただ提示するだけではなく、Webサイトを通してユーザーを驚かせ、楽しませるような工夫が施されています。トランジションが常に変化しつづけ、製品がページ上で動いていたら、ユーザーはその製品に対して興味が湧いてくるはずです。

各段落に仕掛けられたサプライズ的演出は、Webページ上を冒険しているような体験をユーザーに提供できます。

3. 3Dアニメーションを取り入れる

従来のeコマースでは、おもに静的な商品画像とシンプルな説明で商品を販売していました。

しかしこの方法だと、商品の形状や質感をユーザーが十分に理解できない可能性も。だからといって長文で詳細に説明するのは、先述したとおりユーザーを混乱させます。

Appleは、たとえばAirPodsの製品ページにて、商品の構造に関する詳細な3Dアニメーションを提示しています。これによって製品の外観はもちろん、内部のテクノロジーについても効果的に伝えられるのです。

普段見えない部分の設計をアニメーションで表現することは、訪問者の購買意欲を後押しするはずです。

▲出典：Apple

また3Dで製品を表現することで、ユーザーは実際に製品を見ているような感覚になります。

3Dアニメーションの採用は、製品のオンライン購入を促進するためにも効果的なアプローチです。

4. ユーザーの体験談を含んだコンテンツを制作する

製品の美しい写真や印象的なアニメーション、大胆な見出しなどに加えて、Appleは「ユーザーの体験談」をWebサイトに組み込んでいます。

＜ユーザーの体験談を含むコンテンツ例＞

• iPhoneのポートレート機能によって、写真うつりが改善された経験を語るコンテンツ
• 年金受給者がApple Watchを買ったことによって、どのように人生が変化したかを語るコンテンツ
• 動画クリエイターが、新しいiPhoneで映画のような映像を撮影しているコンテンツ

▲出典：Apple

こうした体験談コンテンツをユーザーに提示することで、製品をインターネット上だけの存在ではなく、人々が日常的に使用しているツールとして認識させられます。

「Apple WatchやiPhoneがある生活はどういうものなのか？」その様子やメリットを具体的に想像させ、いままで不可能だったことが可能になるビジョンをユーザーに与えるのが、Appleの狙いです。

また他人が製品を使用しているところを見ると、ユーザーはその製品を信頼するようになるという効果もあります。他人の客観的な意見を聞くことで、購入をためらっていた潜在顧客が製品購入を決める可能性が高くなります。

5. 遊び心あふれるリズミカルな文体を使う

▲出典：Apple

Appleは、ハイテクな製品を販売するハイエンドブランドでありながら、親しみやすく遊び心がある文体を採用しています。これは、テクノロジーを、誰でも使える理解しやすいものとして伝えるための工夫です。

たとえばiPhone SEの製品ページでは、防水機能について以下のようなテキストが掲載されています。遊び心あふれるリズミカルな文体でありながら、ユーザーの懸念にもしっかり応えています。

「水滴。水しぶき。水はね。水濡れ。何でもこい。iPhone SEは最大水深1メートルで30分間の耐水性能を持っています。コーヒーや紅茶、炭酸飲料が少しくらいかかっても大丈夫。埃だってご心配なく。」

6. ユーザーにとってイメージのしやすい文言を使う

みなさんは商品の説明ページを見ているとき、このように感じたことはありませんか？

• 10メガピクセルと20メガピクセルでは、どれくらい容量が違うの？
• 新しいバッテリーと以前のバッテリーでは、どれくらい持ちが違うの？

商品説明のページに掲載されている情報は、過去製品よりもいまの製品のほうが優れているという印象を受けるでしょう。こうした情報は正しい一方で、以前の機能とどれくらい差があるのかをイメージしづらい場合も。

新しいデジタル製品を購入するときに、すべてのユーザーが専門用語や機能面を正確に理解するのは難しいです。そういった問題に対して、Appleはどのような工夫をWebサイトに施しているのでしょうか。

新しいiPhone SEのバッテリーについて説明しているページを見てみましょう。

▲Apple

数字を羅列するかわりに、「一気見できるバッテリー駆動時間」という文字を大きく表示しています。

これにより、「Netflixの番組を3時間観続けられる」といった場面が思い浮かぶため、数字や技術用語よりも格段にイメージが伝わりやすいですね。

以下でもうひとつ、iPhone 11 Proの広角カメラ用のコピーを見てみましょう。

▲出典：Apple

「撮りたいもの全部がフレームに入りきらないなら、ズームアウトするだけ。新しい超広角カメラが従来比で4倍のシーンを写します。足を動かしていないのに、何歩も後ろに下がっていく感覚になるでしょう。雄大な山脈、そびえる大聖堂、立ち並ぶ摩天楼。どんなものでも受け止めます。」

広角カメラの技術的な側面だけに焦点をあてるのではなく、誰もがイメージできる具体的な場面を例に挙げて製品を解説しています。

広角写真を撮るのはどんな感じで、いままでとどう違うのか、見た人が自分の経験をもとにイメージできるような工夫がされていますね。

7. ユーザーの不安や疑問を先取りする

新製品の情報を集めたり、実際に購入したりするのはワクワクしますが、同時に不安もつきまといます。とくに過去にApple製品を使ったことがなく、デバイスを切り替えるような人にとってはなおさら不安が大きいでしょう。

Appleはこうした不安を払拭するために、デバイスの切り替えに関する専門のページを設けています。

▲出典：Apple

「iPhoneに乗り換えるのは簡単ですか？」という見出しの下に、具体的な説明が記載されています。

Webサイトにこのようなガイダンスが提供されているため、ユーザーはサポートページで直接不安を解消することが可能です。

おわりに

Appleの製品ページを、感覚的に「かっこいい」「わかりやすい」と感じている人は多いでしょう。しかしその魅力を丁寧に紐解いていくと、どのような点が優れているのかが具体的に分析できます。

Appleのこうした工夫は、事業内容を問わず参考にできるはず。ぜひこの記事を参考に、Webサイトの構成やデザイン、コンテンツ戦略などを見直してみてください。

（執筆：bernd b　翻訳：Nakajima Asuka　編集：Kimura Yumi）