Microsoft の設計原則
優れたデザインが生まれる原点
Microsoft の設計原則に従うと、ユーザーを喜ばせるすばらしいストア アプリを作ることができると考えています。アプリの計画を立てるときはこの原則を参考にし、設計と開発で何かの選択をするときにはこの原則に従ってください。
.png "最新の文字体裁グリッドはコンテンツに一貫性を提供するスキャフォールディング")
階層とバランス
アプリの視覚的な階層をユーザーがはっきりと理解できるようにするには、さまざまなプロパティを使って各種情報を表示します。フォント サイズ、フォントの色、配置、間隔を使うと、階層内のそれぞれのレベルを区別して表示できます。一貫した方法でさまざまなプロパティ値を使うと、ユーザーはアプリのリズムを把握し、各レベルは明確になりすぐに認識できるようになります。
モダン デザインについて
Microsoft は長らく、多くの分野と製品でテクノロジ リーダーでした。最近になって、よりデザインを中心とする変更に着手しました。こうした変更は、強力な基盤、周囲を巻き込むようなワクワクするアイディア、優れた手法を特徴としていて、その他の手法を古臭く感じさせることになります。この変更の考え方が、Microsoft の設計原則になりました。 Microsoft の設計哲学は、すばやく動作し、最小限の入力で済み、新しい情報や更新された情報を自動的に通知する、明瞭で簡潔なアプリ画面で裏付けられています。ユーザーは、コンテンツを表すコントロールではなく、コンテンツを操作します。さらに、視覚要素により、優れた適合性と完成度が実現します。 モダン デザインの原点 モダン デザインには、"フラット デザイン" というラベルで表すよりもはるかに奥行き、特徴、背景があります。Microsoft のデザイン言語は、次に示す3種類の考え方に基づきます。 The Bauhaus: 1919 年に創設されたこの象徴的なデザインを専門とする学校は、不要なものの排除など、確固としたデザイン思想を奨励してきました。アプリの主要機能を理解することがその1つですが、機能がその核となる機能だけになるように自制を要します。アントワーヌ・ド・サン=テグジュペリは、完璧であるということは、これ以上取り除くものがなくなったときに実現すると述べています。簡潔さは美しさだけでなく、操作性にもつながります。 国際タイポグラフィー様式 (スイス スタイル): Microsoft デザインは、太字できれいで美しい書体などの成果をスイス スタイルよりインスピレーションを得ています。このスタイルでは、中心的なテーマとしてクリアであること、読みやすいこと、客観的であることを奨励しています。このスタイルから、タイポグラフィーおよび視覚のいずれにおいても、グリッドの必要性を解消し、原則に沿った美しい方法で非対称的なレイアウトを採用しました。 アニメーションのデザイン: アニメーションは、エクスペリエンスを生き生きとさせ、洗練された印象をもたらします。弊社は、映画の美しいタイトル文字を作るために書体やデザイン、そしてアニメーションを活用した先駆者である Saul Bass などからインスピレーションを得ました。優れたアニメーション デザインは、楽しみを広げるだけでなく、タスクを実行する方法をユーザーに説明するのに役立ちます。 デザインの要点について詳しくは、Microsoft のモダン デザインに関するページをご覧ください。 これらのインスピレーションは、あらゆるデザインの指針となる原則へとつながりました。Microsoft が選んだこうした原則は、すべてのデザインで何らかの遍在性を持つものであり、プラットフォーム上でのブランドの存在感を高めるためにお役に立てばさいわいです。Microsoft の設計原則は次のとおりです。 ●作品へのこだわりを示す ●より少ない要素でより大きな効果を上げる ●軽快かつ柔軟 ●真のデジタル化を心がける ●全体で勝つ作品へのこだわりを示す
この原則は、ある理由から基本原則になっています。クリエーターや、建築家、デザイナーは、プロフェショナルとしてそれぞれの仕事に誇りを持つことで、歴史に名を残してきました。この原則は、多くの人々が無意識に理解するディテールに時間や、エネルギー、情熱を注いで磨きをかけます。この作業は、アプリ画面に配置するグリッドのピクセルに始まり、色や文字体裁まで、各段階で磨き上げたデザイン エクスペリエンスを提供するものです。開発の各段階で、プライドを持って作品へこだわりを持つことが求められます。 グリッドの表示 グラフィック デザインにおいて、最新の文字体裁グリッドは、コンテンツに一貫性を提供するスキャフォールディングです。均整のとれた要素の配置には、外観に関する利点と実用的な利点の両方があります。ユーザーはページをすばやく快適に扱うことができます。
階層とバランス
アプリの視覚的な階層をユーザーがはっきりと理解できるようにするには、さまざまなプロパティを使って各種情報を表示します。フォント サイズ、フォントの色、配置、間隔を使うと、階層内のそれぞれのレベルを区別して表示できます。一貫した方法でさまざまなプロパティ値を使うと、ユーザーはアプリのリズムを把握し、各レベルは明確になりすぐに認識できるようになります。
.png "アプリの視覚的な階層をユーザーがはっきりと理解できるようにする") |
.png "アプリの視覚的な階層をユーザーがはっきりと理解できるようにする") |
| 階層 | 不十分な階層 |
大きなテキスト、ハイコントラスト配色。前の例では、"スレッド" は、選んだピボット項目のヘッダーです。これは、その下に表示されるコンテンツのコンテキストを確立します。ヘッダーはハイコントラスト (黒地に白) で、ページ上の選ばれた項目であることを示します。他の項目のヘッダーは、コントラストが低くなり (黒地に灰色)、その項目を目立たないようにします。
次に大きいテキスト。一連のスレッドで最も重要な情報は、メッセージを送る相手の名前です。
最も小さいテキスト。次に重要なのは、各メッセージの1～2行目です。色を使って、既読メッセージと未読メッセージをそれぞれ区別し、名前とも区別しています。
間隔と配置。スレッドどうしの間隔は広く、スレッド内の間隔は狭くして、階層を表します。メッセージのタイムスタンプを右揃えにするだけで、タイムスタンプは目立ちます。
不十分な階層。階層を使わないと、ページは意味を失い、読みにくくなります。デザイン性が失われ、さらに重要なことに、操作性も失われます。
個性
アプリの個性を最もよく表す文字体裁を探します。アプリを補完し、定義に役立つ文字体裁の例を次に示します。
.png "従来の書体でこのニュース ソースの深刻さを表す")
ニューヨーク タイムズ アプリ。従来の書体で、このニュース ソースの深刻さを表しています。
.png "このアプリの書体は現代的で滑らかな形")
Camera360。このアプリの書体は現代的で滑らかな形です。
要約とチェック リスト
●細部までこだわります。
●安全で信頼できるアプリを作成します。
●バランス、対称性、階層を使います。
●アプリをグリッドに合わせて配置します。グリッドは、アプリの新しいレイアウトです。
●障碍を持つ人も含め、できるだけ多くの人がアプリを利用できるようにします。アクセシビリティの設計ガイドラインに関するページをご覧ください。
ニューヨーク タイムズ アプリ。従来の書体で、このニュース ソースの深刻さを表しています。
Camera360。このアプリの書体は現代的で滑らかな形です。
要約とチェック リスト
●細部までこだわります。
●安全で信頼できるアプリを作成します。
●バランス、対称性、階層を使います。
●アプリをグリッドに合わせて配置します。グリッドは、アプリの新しいレイアウトです。
●障碍を持つ人も含め、できるだけ多くの人がアプリを利用できるようにします。アクセシビリティの設計ガイドラインに関するページをご覧ください。
より少ない要素でより大きな効果を上げる
この原則により、アプリはその主要機能のみに限定されます。"クロムよりもコンテンツを優先する" と考えてください。コンテンツには、画像、メール、ニュース記事などのさまざまな形式が使われます。クロムは削除し、最も関連性が高い要素だけを画面上に残します。 さらに、可能であれば、"コンテンツ自体から" ナビゲーション要素を作ります。没入できる簡潔なエクスペリエンスにすることがルールです。画面上の各要素は、価値あるものであり、明確な目的を持つことが必要です。 この原則では、直観を犠牲にするわけではありません。ナビゲーション要素によってユーザーがアプリの操作方法を見つけることができれば、デザインは成功です。優れたデザインでは、直観と簡略化のバランスがとれた結果として、明確で美しい最終製品になります。 クロムよりもコンテンツを優先する ユーザーが直接コンテンツを操作できるようにします。クロムを削除し、フォント、スケール、色を使うことにより、コンテンツの見た目がより簡単にしあがります。この例では、名前と件名がわかりやすくなっています。.png "ユーザーが直接コンテンツを操作できるようにする") |
.png "ユーザーが直接コンテンツを操作できるようにする") |
| コンテンツにこだわる | クロムに煩わされる |
コンテンツに息を吹き込む
関連するコマンドと機能ははっきりと表示されているため、簡単に理解、操作することができます。
.png "関連するコマンドと機能ははっきりと表示されているため、簡単に理解、操作することができる")
要約とチェック リスト
●さまざまな機能で平均点を目指すのではなく、1つの機能に突出した設計を目指します。
●クロムよりもコンテンツを優先します。
●グラフィックによってユーザーを導き、目的のコンテンツに没入できるようにすることで、ユーザーは自分で探すようになります。
●ユーザーに安心感を与えます。
●UIの冗長さを減らします。
.png "ライブ タイルは、反応が良く、ライブ感があり、魅力的である")
アニメーション
意味のあるアニメーションを使って、アプリの操作に連続性とストーリー性を持たせます。アニメーションにより、ユーザーに対して操作の開始や各種アクションの区別を求めます。ロック画面はタップするとバウンドし、上にスライドできることが示されます。項目の終了の切り替えは、その項目をスワイプしてもう一度表示する方法を示しています。
.png "アニメーションを有効に使う")
要約とチェック リスト
●ユーザー操作にすばやく応答し、次の操作に備えるようにします。
●タッチ操作や直接的な操作に対応します。
●アニメーションでユーザーを楽しませます。
●前後の操作へスムーズに接続します。
要約とチェック リスト
●さまざまな機能で平均点を目指すのではなく、1つの機能に突出した設計を目指します。
●クロムよりもコンテンツを優先します。
●グラフィックによってユーザーを導き、目的のコンテンツに没入できるようにすることで、ユーザーは自分で探すようになります。
●ユーザーに安心感を与えます。
●UIの冗長さを減らします。
軽快かつ柔軟
この原則は、軽快で没入できるエクスペリエンスを提供します。ユーザーの期待を裏切ることなく、インターフェイスを実現し、ユーザーが楽しめるような魅力的なアニメーション、切り替え、応答を促進します。この原則では、テクノロジよりもユーザーとタスクが優先されます。 アプリがタブレット アプリまたは Phone アプリの場合、"外出中" のユーザーに適したアプリでは、シンプルですぐに使えるシナリオに焦点を当てていることに注意してください。そのような場合には、迅速さを維持しながらユーザーが望むものを正確に提供することに専念したうえで、デザインを洗練させます。 ライブ感 ライブ タイルは、反応がよく、ライブ感があり、魅力的です。また、新着メールの通知から、お気に入りバーのお勧めのドリンクに関する内部情報の提供まで、ありとあらゆる想像を巡らせることができます。
アニメーション
意味のあるアニメーションを使って、アプリの操作に連続性とストーリー性を持たせます。アニメーションにより、ユーザーに対して操作の開始や各種アクションの区別を求めます。ロック画面はタップするとバウンドし、上にスライドできることが示されます。項目の終了の切り替えは、その項目をスワイプしてもう一度表示する方法を示しています。
要約とチェック リスト
●ユーザー操作にすばやく応答し、次の操作に備えるようにします。
●タッチ操作や直接的な操作に対応します。
●アニメーションでユーザーを楽しませます。
●前後の操作へスムーズに接続します。
真のデジタル化を心がける
この原則は、制限を受けないデジタル領域で実現できる技術革新の可能性を利用します。スキューモーフィズムでは、デザイン メタファーを伝達するために現実世界の規則とプロパティに着目します。ただし、Microsoft は、中庸の効果、言語、一意の可能性を採り入れます。 Bauhaus デザイン学校が不用なデザイン要素を取り除くよう指導したように、この原則では、革や生地の効果、縫い目、影、反射など、デジタル的な比喩を取り除くことをお勧めしています。より強力でスケーラブルなデザイン言語を利用してください。これが本当のデジタル原則の根拠です。 情報を含める 単なる図像ではなくインフォグラフィックを使います。情報提供が主な目的のため、不要な情報に埋もれないようにしてください。インフォグラフィックの方法を採用すると、コンテンツがすっきりして、情報は実用的となり、無駄な情報がなくなります。.png "単なる図像ではなくインフォグラフィックを使う") |
.png "単なる図像ではなくインフォグラフィックを使う") |
| 図像 | インフォグラフィック |
要約とチェック リスト
●ダイナミックで生き生きとしたコミュニケーションを促します。
●美しいタイポグラフィを使います。
●大胆で力強い色を使います。
●クラウドに接続して、ユーザーのつながりを実現します。
.png "アプリがデバイスとフォーム ファクターのエコシステムでどのように動作するかを検討する")
要約とチェック リスト
●UIモデルを使います。
●アプリ コントラクトに参加することで他のアプリを操作し、シナリオを実現します。
●マイクロソフトが提供するツールやテンプレートを使って、一貫性を高めます。
優れた設計原則とは、ブランドのビジュアル表現に関係なく通用するものです。原則に沿ったデザインにより、ユーザーに愛用されるエクスペリエンスが得られます。
全体で勝つ
この原則は、独自の作業を統合し、可能な場合は一般的なエコシステムと調整して、必要に応じて革新的なことを行います。作業を分解して、異なるプラットフォーム上のアプリとユーザー シナリオが1つの使い慣れたエクスペリエンスとして、また1つのブランドとして一体となって動作するようにします。ユーザーは、習熟が進むにつれて効果的に使用できるようになりますが、操作を繰り返し覚えたくはありません。そのため、Microsoft のソフトウェアとサービスの共通するプラットフォームに基づきます。エクスペリエンスは実績のある一般的なコントロール、ジェスチャ、対話式操作パターン、アニメーション、さらに一般的な認証サービスとクラウド ストレージ サービスを基盤としています。 つまり、わざわざ一からやり直さないようにしてください。技術革新はすばらしいことですが、ユーザー エクスペリエンスが低下するのは望ましくありません。また、すべてのアプリでは、一定のトーンの音声が伝達されます。これはユーザーの共感を呼ぶ個性です。Microsoft による音声への取り組みを確認し、アプリで音声を使う方法について考えてください。アプリにとって何が役立つかを理解し、効果的と判明したものを遠慮なくエミュレートしてください。 プラットフォームについて考える アプリが Microsoft デバイスとフォーム ファクターのエコシステム全体でどのように動作するかを検討します。"このデバイスが何において最適なのか" を自問し、その独自の長所に合わせてエクスペリエンスを最適化します。複数のプラットフォームを使うと、1つのプラットフォームのみで構築した場合には実現できないシナリオ向けに設計できます。
要約とチェック リスト
●UIモデルを使います。
●アプリ コントラクトに参加することで他のアプリを操作し、シナリオを実現します。
●マイクロソフトが提供するツールやテンプレートを使って、一貫性を高めます。
優れた設計原則とは、ブランドのビジュアル表現に関係なく通用するものです。原則に沿ったデザインにより、ユーザーに愛用されるエクスペリエンスが得られます。