*

リニューアルされた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

関連記事

slooProImg_20170122225000.jpg

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

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

記事を読む

slooProImg_20161122002200.jpg

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

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

記事を読む

slooProImg_20161121072215.jpg

ここまで見せちゃっていいの?Apple 製品写真集全ページ大公開動画

BGRに掲載されていた記事からです。 Apple製品写真集「D...

記事を読む

slooProImg_20161119040711.jpg

これ観たら欲しくなるじゃん!Designed by Apple in California

MacRummorsに掲載されていた記事からです。 もうすでに話...

記事を読む

slooProImg_20160827204234.jpg

マイクロフォンの技術がSiriを進化させるカギになる

こんにちはapprofanです。Cult of Macに掲載され...

記事を読む

新着記事

slooProImg_20170123211933.jpg

女子高生の8割、女子大生も7割以上がiPhoneユーザー

こんにちはapprofanです。iTmediaに掲載されていた記...

記事を読む

slooProImg_20170122225000.jpg

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

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

記事を読む

slooProImg_20170121223711.jpg

iPhone 5sをiPhone 7 miniに変身させるキット

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

記事を読む

slooProImg_20161126105436.jpg

iPhone SEはアップグレードされないみたいですね

Investor's Businerss Dailyに掲載され...

記事を読む

slooProImg_20161123134945.jpg

Appleスマートフォンの利益シェアが91% (2016年第3四半期)

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

記事を読む

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

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

Google Adsens

slooProImg_20170123211933.jpg
女子高生の8割、女子大生も7割以上がiPhoneユーザー

こんにちはapprofanです。iTmediaに掲載されていた記...

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

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

slooProImg_20170121223711.jpg
iPhone 5sをiPhone 7 miniに変身させるキット

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

slooProImg_20161126105436.jpg
iPhone SEはアップグレードされないみたいですね

Investor's Businerss Dailyに掲載され...

slooProImg_20161123134945.jpg
Appleスマートフォンの利益シェアが91% (2016年第3四半期)

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

→もっと見る

PAGE TOP ↑