Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント
Post on:2010年2月8日
sponsors
Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。
15 Design Tips to Learn From Apple
下記は各ポイントを意訳したものです。
サイトのキャプチャは可能なものは日本サイトのものにしています。
はじめに
Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。
ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。
1. Keep it Simple
Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。
例えば、空港でトイレを探していると想像してください。ターミナルでトイレのサインを探そうとすると、非常に多くのサインが目に入ります。これはマップデザイナーが人々が望むすべての情報を与えている、ということです。
このような例はウェブサイトにもあります。ロゴを可能な限り大きく目立たせ、すべてのプロダクトカテゴリーを詳細に説明し、果てしない機能をリストしています。これらはAppleによれば、悪です。
Appleのウェブサイトでは最新の情報のみを引き立たせ、そして個々のユーザーが望むインフォーメーションは少数のカテゴリーから提供されています。
ミニマルでありながら、ユーザービリティを損ねることなく魅力的なデザインを提供しています。
2. 商品のかっこいい画像
Appleのサイトで余分な画像を使用しない理由の一つは、本当に重要なものを引き立たせることです。
このプロダクトのページを見てみてください。あなたの目がプロダクトに焦点を合わせるようにしないことはほとんど不可能です。
あなたのプロダクトがAppleと同じように見栄えよくできると信じませんか？ 腕のよいデザイナーならあらゆるプロダクトを見栄えよくすることができます。
3. コントラストを効果的に
Appleのプロダクトの画像を素晴らしく見せているもう一つのポイントは、シンプルです。人間の脳はコントラストに反応します。真っ白な背景に真っ黒でピカピカのiPhoneが置かれていると、思わず「おお！」と感嘆するのがその理由です。
Appleはプロダクトの画像にコントラストをたんに適用しているだけではありません。上のキャプチャを一目見て、あなた自身がどこに注目するか考えてください。
それはおそらく、大きいブルーのダウンロードボタンではないですか？ Appleのサイトを巡回してみてください。あなたが何かをダウンロードしたり、買ったりするシーンにはほとんどいつもこの明るいブルーのボタンがあなたの注意力をつかむ役割をしています。
4. 細部も作りこむ
Appleのサイトではすべての小さなパーツも丁寧に作りこまれています。決して目立つことはありませんが、サイトのすべての小さなパーツが見事な出来となっています。
5. Flashは避ける
私はFlash嫌いの集団に参加したことはありませんが、事実は次のとおりです。
Wiredに掲載されたSteve Jobsのコメントによると、Flashはバグが多く、Macがクラッシュする場合多くの原因はFlashにあります。将来Flashは誰も使わなくなり、世界はHTML5に引越しをするでしょう、と言っています。
これは技術の世界でリーダーシップをもち崇拝された男からの強いメッセージです。正直言って、彼が言うことの多くが私には真実に聞こえます。
ウェブ開発者としてFlashのボイコットをしても、おそらくあなたは後悔しないでしょう。また単にFlashを可能なところにはどこでも使用するのを避けるように、Flashに対してアクティブなスタンスをとるということをしなくてもよいでしょう。
6. フレンドリーを忘れずに
Appleは何年もの間、フレンドリーではない、というブランドで認知されていました。そして、彼らはいっそう親しみやすくなるためにイメージを再構成しました。
技術サポートやアップルストアなど実務での改善はもちろんのこと、これらのすべてにほのぼのと微笑んだ表情のグラフィックが大きな影響を与えています。
上のキャプチャのような微笑んでいる従業員はAppleのサイトでほかにも見つけることができるでしょう。
こういったほのぼのとした表情と魅力的ではない技術ベースのデザインが絶妙なバランスを形成しています。
あなたが売っているにも関わらず、それをよりフレンドリーに見えさせて、そして更にそれを手に入れるために何をすることができるかについて考えることが適当であるかどうか考えてください。
7. グリッドを活用
Appleでは上のキャプチャのように大胆で厳密なグリッドを採用しています。目的？ 上記のページでどれぐらいのインフォメーションがあるか調べてみてください。これだけの圧倒的なボリュームでもとても魅力的にレイアウトされています。
処理の簡単なセルの中にインフォメーションを散発的におさめることは、ビジュアルから取り散らかしと混乱を減少させます。
それぞれのセルがテキストだけでなく、ビジュアルを含んでいることに気が付いてください。これらのビジュアルはすべて非常に類似して見えて、そして全体的なAppleのテーマに適切なものとなっています。
たとえ、あなたがストックフォトを使用していても、ページのあらゆる箇所に散乱させた画像にはビジュアル的な相違がなく、類似したテーマを保守しようとしてください。
8. 教育の援助
マウスの先端がマルチタッチであるというメッセージを強調するために、Appleは上の画像を使用しました。見出しさえもなく、ほとんどの人がこの画像で理解することができ、この珍しい技術をどのように使うべきかを理解するでしょう。
そしてAppleはイラストよりも更に上にいきます。ほとんどのハードウェアやソフトウェアがどのように機能するかを示す動画も用意されています。これは技術サポートを減らす良い方法です。これらの動画は理解することがより容易なものとなっています。
Apple's library of instructional videos
9. 一貫性をもたせる
iTunesストア
上のキャプチャはiTunesストアのスクリーンショットです。よく知られているように見えますか？ もしこれがApple.comのように見えると思っているなら、あなたは正しいです。
Mac OS Xのファインダを一目見てください。この強いグリッドベースのデザインは多くの白い金属の質感をもつテクスチャを使用しています。そして最終的には、これらのテクスチャとデザインエレメントがAppleの実世界のハードウェアにも見ることができます。
あなたはどれくらい多くのものを統合することができますか？ もしあなたがブランドを展開する仕事を課せられたなら、テレビのCMやウェブサイトから製品自身まですべてのフェーズをみてください。そして、これらすべての異なるエレメントをどのように統合できるかを考えてください。
10. 巨大なショップではありません
右上の「今すぐ購入」をクリックすると
Appleは成功したEコマースサイトにおける大きなケーススタディです。彼らのプロダクト、サイトの全部があなたに買うように決断させ、そして教育されていることにも気が付いてください。しかしながら、サイトは一つの巨大なショップのようには感じません。
Appleでは上のキャプチャのようにプロダクトには巧妙な見出しが使用され、それがどれだけ素晴らしいかを伝えるものとなっています。このことが通常のショップではないことに気が付いてください。通常のショップでは買い物ボタンをクリックし、次のページへ移動します。しかし、Appleではビジュアル満載の詳細ページ用意し、ユーザビリティにフォーカスを合わせています。
11. 自信をもつ
まずは見てください。Appleのプロダクトはただ驚くばかりです。しばらくの間Appleのサイトをクリックしてください。そうすればあなたは彼らが謙虚ではないことに気が付くでしょう。彼らの見出しは革命的で、美しく、力強さもあり、そして楽しい形容詞で満ち溢れています。これらのプロダクトは同一商品の中で最も良いものである、ということを知らせます。これは少々傲慢に聞こえるかもしれません。しかしながら、カジュアルなビジターはただうなずくばかりでしょう。
もしあなたが自分達のプロダクトに自信があるなら、それを伝えようと努力してください。あなたのサイトに関するすべてがなんと偉大であることかを確信させるようにフォーカスをあわせます。
もちろん、限界はあります。いらだちになるほどの自己賞賛をつぎ込んでいないことを確認するために、あなたはコピーを必ず確認するようにしてください。
12. リーガルコピーは読みやすく
これは小さいことですが、重要です。
Appleではこれらの法的なコンテンツは充実しており、読み取りが可能なようにサイズやコントラストを調整しています。こういったページのゴールは、誰もがアクセス可能で、見つけやすく、そして読みやすいということです。
13. ナビゲーションを配置したフッタ
上のキャプチャでフッタをチェックしてください。Appleではそれぞれのページのフッタにきわめて役立つナビゲーションを配置しています。ヘッダのプライマリナビゲーションですべてのセクションへのリンクを満たすのではなく、むしろフッタで一般的なカテゴリへのリンクを確保しています。
目立たせるようにしていないことに気が付いてください。これで充分です。もしあなたがナビゲーションの手助けを必要せずに目的のページを見つけることができるなら、再考するまでもないことです。
14. オリジナルの美しいアイコン
Mac OS Xの導入でAppleは新しい領域のアイコンをもたらしました。その時からこの魅力的なアイコンがウェブにもあふれ出ました。
ウェブには無料のアイコンがダウンロードできます。しかし、それをする前にあなた自身で作成してみることを試してみてください。そして素晴らしいオリジナルのアイコンを作ってください。
15.インタラクティブでダイナミックなコンテンツ
Appleのサイトではほとんどのページでスライドショーやアコーディオンやビデオなどインタラクティブなコンテンツが用意されています。これらのゴールはユーザーの注意を保持することです。スタティックなコンテンツは少し退屈で、なにか面白いものを探しているユーザーは立ち退かせてしまうかもしれません。
こういったコンテンツを設置する際の注意点は、まず第一にプラグインを必要としないものにすることです。より多くの環境で動作する技術を使用してください。
sponsors
