*

リニューアルされたApple公式サイトに見るWebサイトのトレンド

Appleトップページ



PracticalEcommerceに掲載されていた記事からです。

2015年8月6日にAppleの公式サイトがリニューアルしましたね。リニューアルしたAppleのサイトは最近の商業的Webサイトのトレンドが満載だと紹介されています。その特徴をひとつひとつ見ていきたいと思います。


存在感のある大きな写真や画像



Apple公式サイトのメニューから商品カテゴリを選ぶとまず「ど〜ん!」と存在感のある大きな画像が表示されます。そしてその画像の中にテキスト文字が書かれています。しかし、新しいサイトは明らかに文字による説明より、写真や画像で商品を印象づけることに重きを置いているのだいいます。



Apple Watch画像



例えば上の画像はApple Watchセクションのトップ画像なのですが、大きな写真にテキスト文字が書かれています。しかしよく見るとわかりますが、背景の画像の白く光っている部分のおかげで、文字が見えにくくなっています。



「通知も、アクティビティアプリケーションも・・・・」と書かれているのですが、「通知も、」の後ろが背景の白い光でほとんど読めません。Appleの意図はこの画像にこそあり、テキスト文字は多少読めなくてもいいと思っていることは明らかです。なぜなら、このサイトデザインにおいて、多くの社員がチェックしているはずであり、文字が読めなくなっているのは百も承知しているはずだというのです。



むしろApple Watchを腕にはめている女性はこうしたお取り込み中のシーンでも、通知を手首の振動で受け取ることができるという事に、Appleのメッセージが込められているというわけです。



しかもこの画像は見た目のサイズは大きいですが、ファイルのサイズはわずか195KBで、ユーザーのコンピュータには平均239ミリ秒(0.239秒)で表示される様に工夫されているといいます。


モバイルへの最適化



Webサイトにアクセスするデバイスは、近年iPhoneやiPadといったモバイルデバイスが中心になりつつあります。従って、AppleのWebサイトもモバイルデバイスからのアクセスを考慮してデザインされているということです。



iPad画像ノーマル



上の画像はiPadカテゴリのトップページを下の方にスクロールすると出てくる画像です。今回のサイトリニューアルの特徴である大きな画像とその中にテキスト文字で「ビジネスのためのiPad」という説明がなされています。実はこの画像はデスクトップやラップトップパソコンで表示するときの画像です。



IMG 2963



そしてこの画像がモバイルデバイス向けのiPadカテゴリページにある画像です。ご覧の通り、画面が小さいiPhone向けでは画像の中にテキスト文字を表示するのではなく、画像の下に説明書きがなされています。こうすることでモバイルでも読みやすい様にしているのだといいます。


パララックス(視差効果)スクロール



パララックス(視差効果)についてWAN55さんのサイトから引用してみます。

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。



Appleのサイトリニューアルでこのパララックススクロールをおもいっきり使用しているのが、iMac Retina 5Kディスプレイモデルのページです。



iMac Retina 5K



このぺージを開くと、大きな滝の前で両手を広げた人の写真が登場し、その写真の上にテキスト文字がじわっとあらわれます。そうすると画像の下部に「スクロール」の文字が現れるのでスクロールしてみるとダイナミックな視差効果が表示されます。



スクリーンショット 2015 08 17 0 02 20



スクロールすると滝の全景が徐々にあらわれ、人の姿が小さくなっていきます。更にスクロールしていくと次の様な画面になっていきます。



iMac 5K



つまりAppleはiMac Retina 5Kディスプレイモデルの解像度の高さをパララックススクロール効果で表現したわけです。とても効果的な使い方ですよね。


ビデオの有効活用



ユーザーはiPhoneやiPadについて、その概観デザインや使い方についてよく知っているので、詳細な使い方をAppleのサイトでは示しておらず、むしろ最新機種の特徴や新機能の説明を中心に構成されています。



Apple Watchビデオガイド



しかし、Apple Watchは新しい製品ですから、ユーザーや購入を検討している人には機能や使い方がイメージできません。そこでAppleはWatchの主な機能についてひとつひとつ詳細な使い方に関するビデオを提供しています。



こうしたビデオガイドは目新しいものではありませんが、Appleが製品によって効果的に使い分けているところは他のサイトも見習うところがあるのではないでしょうか。


スクロールの有効活用



Appleサポートページ



かつて、優れたサイトとは重要な情報はトップ画面の上部に表示し、ユーザーがスクロールしなくても良いようにすべきだという考え方が主流でした。私もブログ運営のことを調べたときに、そのような文章を読んだことがあります。



しかし、最近のトレンドはそうではなく、まずページのトップでそのページの大まかなコンセプトを表現し、それに続いてスクロールすると詳細な説明、もしくはメニューがあらわれるというものだそうです。



Appleもそれに習い、今回のリニューアルでもAppleサポートページはまずAppleサポートページであることを大きな画像で表現し、スクロールすると、製品毎のリンクが表示される形式になっています。



特にすでに書きました様に、画面の小さなモバイルデバイスのことを考慮すれば、スクロールはどうしても必要になりますから、そうであればサイトの画面構成もそれに合わせて考え方を変更せざるをえなくなっているというわけです。



Appleのサイトがリニューアルされました。以上!ではなく、この様に最新トレンドをどの様に効果的に適応しているのか分析するのもなかなか面白いと思いました。



(本文おわり)

このApple Watchむちゃくちゃ安いのですが大丈夫かな?

人気の投稿とページ

Google Adsens

カテゴリー

2015/08/17 | Apple

人気の投稿とページ

Google Adsens

カテゴリー

関連記事

クパチーノのApple Parkに行ってきたよ!

こんにちはapprofanです。 出張で米国シリコンバレーに来てい...

記事を読む

ティムクックCEOがAppleの自動車プロジェクトとその目的について述べる

TechChrunchに掲載されていた記事からです。 Appl...

記事を読む

Appleは新社屋Campus 2の建設にもApple品質を要求。建設業者は困惑

こんにちはapprofanです。Dedital Trendsに掲...

記事を読む

ブランドロイヤリティ、蓋を開ければApple独占だった

こんにちはapprofanです。BGRに掲載されていた記事からご...

記事を読む

AppleがAirMacルータ製品のチームを解散したらしいです

iDownloadBlogに掲載されていた記事からです。 A...

記事を読む

新着記事

クパチーノのApple Parkに行ってきたよ!

こんにちはapprofanです。 出張で米国シリコンバレーに来てい...

記事を読む

Watch OS 4トイ・ストーリーフェイスのアニメはただ者ではない

iDownloadblogに掲載されていた記事からです。 WW...

記事を読む

iOS 11新しいFiles appの主要機能10選

iPhone Hacksに掲載されていた記事からです。 iOS...

記事を読む

新しいiPad ProモデルのパフォーマンスがMac Book Proより高い件

the Mac Observerに掲載されていた記事からです。 ...

記事を読む

あなたのiPhone 7、iPhone 7Plusをスピードアップする6つのTips

iPhone Hacksに掲載されていた記事からです。 デジタル...

記事を読む

コメント/トラックバック

現在、この投稿へのコメント/トラックバックは受け付けていません。

クパチーノのApple Parkに行ってきたよ!

こんにちはapprofanです。 出張で米国シリコンバレーに来てい...

Watch OS 4トイ・ストーリーフェイスのアニメはただ者ではない

iDownloadblogに掲載されていた記事からです。 WW...

iOS 11新しいFiles appの主要機能10選

iPhone Hacksに掲載されていた記事からです。 iOS...

新しいiPad ProモデルのパフォーマンスがMac Book Proより高い件

the Mac Observerに掲載されていた記事からです。 ...

あなたのiPhone 7、iPhone 7Plusをスピードアップする6つのTips

iPhone Hacksに掲載されていた記事からです。 デジタル...

→もっと見る

PAGE TOP ↑