「iPhone X」などApple新製品ホームページに見るWebデザインでマネしたい5つのポイント
プロダクトのデザインに強いこだわりを持っている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」の文字が出てきますが、スクロールすると製品が現れるのです。
スクリーンショット:2017年9月
スクリーンショット:2017年9月
まるで「X」は*「次世代」、「8」は「無限、永遠」を意味する「∞」*を表しているかのように、これまでの数字以上に象徴的なものとして取り扱われています(これは「テン」を「10」ではなくあえて「X」と表記していることからも分かるのではないでしょうか)。
スクリーンショット:2017年9月
その他にも、各iPhoneのページには全画面を表示したパート、上半分を映したパート、ヒトが使用しているシーンを映したパートを度々使い分けて、ザイアンス効果を活用しています。
ザイアンス効果は、別名単純接触効果とも言い、出会う回数が多くなれば多くなるほど好感を持ちやすくするということです。
iPhone Xの発売日が遅くなったのは巷では部品などの調達による準備の影響だとも言われていますが、あえてiPhone 8と発売時期をずらしつつ、単純接触の回数を増やすことで期待を持ち上げる効果もあるのではないかと考えられます。
2. 突き刺さるマイクロコピー (Spiky Microcopy)
スクリーンショット:2017年9月
Apple製品のホームページを見て毎回感心するのが、マイクロコピーが秀逸だということです。
Webの世界のマイクロコピーはキャッチコピーに限らずボタンのラベルに至るまでのあらゆるテキスト部分のコピーを指しますが、ここでは製品の特徴を一言で捉えた短いコピーのことを指します。
分かりやすくも短く言い切りの形で説得力があり、大きなプロダクトの写真が添えられて、心にしっかりと突き刺さります。
こうしたマイクロコピーは非常に短いので書くのは簡単なように思えますが、試行錯誤を繰り返しながらどれがマーケティング上効果があるかを考え抜いていくことが大切です。
参考:
神は細部に宿る!ユーザーに振り向いてもらえるマイクロコピーを作るための5つのポイント
3. 可読性が上がったタイポグラフィ (Highly-legible Typography)
スクリーンショット:2017年9月
実は、これまでのAppleの製品ページと比べると、微細ながらも大きく変化したところがあります。
それが、タイポグラフィ部分です。
以前は、非常に細めの文字で繊細に表現を行なっていました。
それが、下のMacBook Proのようなページです。
しかし、今回は、思い切ってかなり太い文字が採用されています。
力強く、説得力があり、白い背景もあって可読性も格段に上がっています。
スクリーンショット:2017年9月
一般的に言えば、太字だけを多用してしまうと対称性(コントラスト)が失われ、どれが重要でどれが重要でないのかが分かりにくくなってしまいます。
しかし、Appleの新製品のページでは、タイポグラフィの大きさを規則的に変えてヒエラルキーを生み出すことで、そうした問題を回避することに成功しています。
参考:
エンゲージメント率を高める!デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ
4. さらに詳しく(More Details)
スクリーンショット:2017年9月
さらに、今回Appleの新製品のページで注目したいUIが、*「さらに詳しく」*というボタンです。
単なるボタンにしか見えないかもしれませんが、ホームページを見ていてすでに欲しいと思っているユーザーには最短距離で購入ボタンを押してもらい、まだ比較検討しているユーザーにはさらにピッチトークを行うという、重要な役割を担っているのです。
5. 微細なパララックス (Subtle Parallax)
スクリーンショット:2017年9月
最後に付け加えておきたいのが、「iPhone X」のホームページの至るところで取り入れられている微細なパララックス効果です。
パララックス効果と言えば大胆に活用する例がほとんどですが、iPhone Xの製品紹介ページの場合は、本当に確認できるかどうかというほどにかすかに使われています。
わずかなこと、小さなことのように思えるかもしれませんが、ボディランゲージと同様に、動きがあるほうが好感を持ちやすい、という心理学的な効果を利用しているとも考えられます。
まとめ
非常にシンプルでありながらも、今回は一段と製品が前面に押し出され、なおかつタイポグラフィも一新しているので、その意味では真新しく見えるのではないでしょうか。
iPhoneそれ自体の素晴らしさだけでなく、iPhoneのある生活を想像させるような余韻を残している点も、見習うべきポイントです。
ぜひ、ご自身のホームページにこうしたポイントを活かしてみてはいかがでしょうか。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ジャンプ率
- ジャンプ率とは、ホームページや商品パンフレットのデザインにおける、本文のサイズに対する見出しの大きさの比率のことをさします。本文のサイズに対して、見出しが大きければジャンプ率が高い、小さければジャンプ率が低い、となります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング