Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント

Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。

サイトのキャプチャ

15 Design Tips to Learn From Apple

下記は各ポイントを意訳したものです。
サイトのキャプチャは可能なものは日本サイトのものにしています。

はじめに

Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。
ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。

1. Keep it Simple

サイトのキャプチャ

アップル

Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。

例えば、空港でトイレを探していると想像してください。ターミナルでトイレのサインを探そうとすると、非常に多くのサインが目に入ります。これはマップデザイナーが人々が望むすべての情報を与えている、ということです。

このような例はウェブサイトにもあります。ロゴを可能な限り大きく目立たせ、すべてのプロダクトカテゴリーを詳細に説明し、果てしない機能をリストしています。これらはAppleによれば、悪です。

Appleのウェブサイトでは最新の情報のみを引き立たせ、そして個々のユーザーが望むインフォーメーションは少数のカテゴリーから提供されています。
ミニマルでありながら、ユーザービリティを損ねることなく魅力的なデザインを提供しています。

2. 商品のかっこいい画像

サイトのキャプチャ

iMac

Appleのサイトで余分な画像を使用しない理由の一つは、本当に重要なものを引き立たせることです。
このプロダクトのページを見てみてください。あなたの目がプロダクトに焦点を合わせるようにしないことはほとんど不可能です。

サイトのキャプチャ

We Shoot Cans

あなたのプロダクトがAppleと同じように見栄えよくできると信じませんか? 腕のよいデザイナーならあらゆるプロダクトを見栄えよくすることができます。

3. コントラストを効果的に

サイトのキャプチャ

iTunes

Appleのプロダクトの画像を素晴らしく見せているもう一つのポイントは、シンプルです。人間の脳はコントラストに反応します。真っ白な背景に真っ黒でピカピカのiPhoneが置かれていると、思わず「おお!」と感嘆するのがその理由です。

Appleはプロダクトの画像にコントラストをたんに適用しているだけではありません。上のキャプチャを一目見て、あなた自身がどこに注目するか考えてください。
それはおそらく、大きいブルーのダウンロードボタンではないですか? Appleのサイトを巡回してみてください。あなたが何かをダウンロードしたり、買ったりするシーンにはほとんどいつもこの明るいブルーのボタンがあなたの注意力をつかむ役割をしています。

4. 細部も作りこむ

サイトのキャプチャ

Appleのサイトではすべての小さなパーツも丁寧に作りこまれています。決して目立つことはありませんが、サイトのすべての小さなパーツが見事な出来となっています。

5. Flashは避ける

サイトのキャプチャ

私はFlash嫌いの集団に参加したことはありませんが、事実は次のとおりです。
Wiredに掲載されたSteve Jobsのコメントによると、Flashはバグが多く、Macがクラッシュする場合多くの原因はFlashにあります。将来Flashは誰も使わなくなり、世界はHTML5に引越しをするでしょう、と言っています。
これは技術の世界でリーダーシップをもち崇拝された男からの強いメッセージです。正直言って、彼が言うことの多くが私には真実に聞こえます。

ウェブ開発者としてFlashのボイコットをしても、おそらくあなたは後悔しないでしょう。また単にFlashを可能なところにはどこでも使用するのを避けるように、Flashに対してアクティブなスタンスをとるということをしなくてもよいでしょう。

6. フレンドリーを忘れずに

サイトのキャプチャ

Macをはじめよう

Appleは何年もの間、フレンドリーではない、というブランドで認知されていました。そして、彼らはいっそう親しみやすくなるためにイメージを再構成しました。

技術サポートやアップルストアなど実務での改善はもちろんのこと、これらのすべてにほのぼのと微笑んだ表情のグラフィックが大きな影響を与えています。
上のキャプチャのような微笑んでいる従業員はAppleのサイトでほかにも見つけることができるでしょう。

こういったほのぼのとした表情と魅力的ではない技術ベースのデザインが絶妙なバランスを形成しています。
あなたが売っているにも関わらず、それをよりフレンドリーに見えさせて、そして更にそれを手に入れるために何をすることができるかについて考えることが適当であるかどうか考えてください。

7. グリッドを活用

サイトのキャプチャ

Appleでは上のキャプチャのように大胆で厳密なグリッドを採用しています。目的? 上記のページでどれぐらいのインフォメーションがあるか調べてみてください。これだけの圧倒的なボリュームでもとても魅力的にレイアウトされています。

処理の簡単なセルの中にインフォメーションを散発的におさめることは、ビジュアルから取り散らかしと混乱を減少させます。
それぞれのセルがテキストだけでなく、ビジュアルを含んでいることに気が付いてください。これらのビジュアルはすべて非常に類似して見えて、そして全体的なAppleのテーマに適切なものとなっています。
たとえ、あなたがストックフォトを使用していても、ページのあらゆる箇所に散乱させた画像にはビジュアル的な相違がなく、類似したテーマを保守しようとしてください。

8. 教育の援助

サイトのキャプチャ

Magic Mouse

マウスの先端がマルチタッチであるというメッセージを強調するために、Appleは上の画像を使用しました。見出しさえもなく、ほとんどの人がこの画像で理解することができ、この珍しい技術をどのように使うべきかを理解するでしょう。

そしてAppleはイラストよりも更に上にいきます。ほとんどのハードウェアやソフトウェアがどのように機能するかを示す動画も用意されています。これは技術サポートを減らす良い方法です。これらの動画は理解することがより容易なものとなっています。
Apple's library of instructional videos

9. 一貫性をもたせる

iTunesストアのキャプチャ

iTunesストア

上のキャプチャはiTunesストアのスクリーンショットです。よく知られているように見えますか? もしこれがApple.comのように見えると思っているなら、あなたは正しいです。
Mac OS Xのファインダを一目見てください。この強いグリッドベースのデザインは多くの白い金属の質感をもつテクスチャを使用しています。そして最終的には、これらのテクスチャとデザインエレメントがAppleの実世界のハードウェアにも見ることができます。

あなたはどれくらい多くのものを統合することができますか? もしあなたがブランドを展開する仕事を課せられたなら、テレビのCMやウェブサイトから製品自身まですべてのフェーズをみてください。そして、これらすべての異なるエレメントをどのように統合できるかを考えてください。

10. 巨大なショップではありません

サイトのキャプチャ

Time Capsule

右上の「今すぐ購入」をクリックすると

サイトのキャプチャ

Time Capsule - 1 TB

Appleは成功したEコマースサイトにおける大きなケーススタディです。彼らのプロダクト、サイトの全部があなたに買うように決断させ、そして教育されていることにも気が付いてください。しかしながら、サイトは一つの巨大なショップのようには感じません。

Appleでは上のキャプチャのようにプロダクトには巧妙な見出しが使用され、それがどれだけ素晴らしいかを伝えるものとなっています。このことが通常のショップではないことに気が付いてください。通常のショップでは買い物ボタンをクリックし、次のページへ移動します。しかし、Appleではビジュアル満載の詳細ページ用意し、ユーザビリティにフォーカスを合わせています。

11. 自信をもつ

サイトのキャプチャ

まずは見てください。Appleのプロダクトはただ驚くばかりです。しばらくの間Appleのサイトをクリックしてください。そうすればあなたは彼らが謙虚ではないことに気が付くでしょう。彼らの見出しは革命的で、美しく、力強さもあり、そして楽しい形容詞で満ち溢れています。これらのプロダクトは同一商品の中で最も良いものである、ということを知らせます。これは少々傲慢に聞こえるかもしれません。しかしながら、カジュアルなビジターはただうなずくばかりでしょう。

もしあなたが自分達のプロダクトに自信があるなら、それを伝えようと努力してください。あなたのサイトに関するすべてがなんと偉大であることかを確信させるようにフォーカスをあわせます。
もちろん、限界はあります。いらだちになるほどの自己賞賛をつぎ込んでいないことを確認するために、あなたはコピーを必ず確認するようにしてください。

12. リーガルコピーは読みやすく

サイトのキャプチャ

Legal Information

これは小さいことですが、重要です。
Appleではこれらの法的なコンテンツは充実しており、読み取りが可能なようにサイズやコントラストを調整しています。こういったページのゴールは、誰もがアクセス可能で、見つけやすく、そして読みやすいということです。

13. ナビゲーションを配置したフッタ

サイトのキャプチャ

Mac

上のキャプチャでフッタをチェックしてください。Appleではそれぞれのページのフッタにきわめて役立つナビゲーションを配置しています。ヘッダのプライマリナビゲーションですべてのセクションへのリンクを満たすのではなく、むしろフッタで一般的なカテゴリへのリンクを確保しています。

目立たせるようにしていないことに気が付いてください。これで充分です。もしあなたがナビゲーションの手助けを必要せずに目的のページを見つけることができるなら、再考するまでもないことです。

14. オリジナルの美しいアイコン

サイトのキャプチャ

Mac OS Xの導入でAppleは新しい領域のアイコンをもたらしました。その時からこの魅力的なアイコンがウェブにもあふれ出ました。

ウェブには無料のアイコンがダウンロードできます。しかし、それをする前にあなた自身で作成してみることを試してみてください。そして素晴らしいオリジナルのアイコンを作ってください。

15.インタラクティブでダイナミックなコンテンツ

サイトのキャプチャ

Appleのサイトではほとんどのページでスライドショーやアコーディオンやビデオなどインタラクティブなコンテンツが用意されています。これらのゴールはユーザーの注意を保持することです。スタティックなコンテンツは少し退屈で、なにか面白いものを探しているユーザーは立ち退かせてしまうかもしれません。

こういったコンテンツを設置する際の注意点は、まず第一にプラグインを必要としないものにすることです。より多くの環境で動作する技術を使用してください。

sponsors

top of page

©2018 coliss