Share via


Office 2010: 外観上の変更点とブランド化

こんにちは、マイクロソフトの Office Design Group (ODG) でユーザー エクスペリエンスのデザイナーを務めている Keri Vandeberghe です。Office 2010 の外観についての取り組みとブランドの統合の背景をお伝えしたいと思います。現在のデザインの方向性の基になっている方針についての舞台裏をお見せします。

方針

Office 2010 は完全に開発し直されたものではありませんが、外観を改善して不要なビジュアル要素を排除することで、視点はユーザーのコンテンツに置かれ、ウィンドウのコンテンツの部分のフレーム ("クロム" と呼ばれます) を構成する境界とウィジェットに視点が置かれることが少なくなっています。これを実現するために、境界、ボックス、および水平方向の帯状の部分の数を減らして、6 ピクセル分の垂直方向のスペースがコンテンツの領域に戻されました。空白の部分を増やし、ビジュアル要素の配置を見直して、押し付けがましくなく、軽量で、ユーザーの自己表現の余地が広がるインターフェイスを作成するように努力しました。

Office 2007 では、リボンが UI の新しいパラダイムでした。機能を見つけやすくし、コントロールの関係を示して、メニューとダイアログの中に隠れていた機能を前面に出すために、ビジュアルのスタイルが強調されていました。各コントロールとリボンのグループ周囲のボックスと境界は、ユーザーを案内する "視覚的な手がかり" の役割を果たしていました。Office 2007 のリボンでは、Windows Vista の外観にマッチする光沢感のある色彩が使用され、新しいインターフェイスに驚きを加えていました。

RibbonCompare 
Office 2007 と Office 2010 のリボンの比較

Office 2010 では、UI は、リボンの全体の構造と機能を犠牲にすることなく成熟して洗練された外観になったように感じられます。Office 2010 のビジュアルの主要な変更点は、既定のテーマがブルーではなくなったことです。ドキュメントを作成する際の感覚の負荷を最小限にするために無色のパレットが選択され、派手な外観も過去のものとなりました。依然としてリボンは最も目立つ UI の要素で、他の UI を代表する存在です。リボンの下のユーザー インターフェイスは、さらに落ち着きのあるものになりました。ソフトな階調と明るさと色の使用は、特定の領域に注意を促したり、ユーザーの視線を引き付けたりするためのものです。余白と、対照的な数点の要素 (選択された状態を示す Office ブランドのオレンジや、製品によって異なる [ファイル] タブの色など) によって、ビジュアルのリズムが生まれます。

Office2007_2010compareLarge

これまでと同様に、引き続き、3 種類の UI テーマ (シルバー、ブルー、およびブラック) を使用できます。シルバーのテーマでのすべてのテキストは、背景と 5:1 のコントラスト比 (別の色の中に配置された場合に発生する、認識される色の違い) になりました。これは低視力のユーザーからの要望で、大部分のユーザーも強化された可読性と改善点から利点を得られることがわかりました。

image
テーマの切り替えのコントロールは、[ファイル] タブの [オプション]-[全般]-[配色] にあります。

optionsDialog

プラットフォーム全体での一貫性

Office アプリケーション、SharePoint、および Web アプリケーションの全体でのビジュアルのスタイルの一貫性が、このリリースでの主要な目標でした。ある製品から他の製品へ移動したときに、使いやすさと一貫性を感じる環境にしたいと考えていました。SharePoint の無色のカラー パレットによって、各企業のブランド化のためのプラットフォームが提供され、見栄えを良くするために必要な手間は非常に少なくなります。無色のカラー パレットを Web アプリケーションにも同様に使用することで、さまざまなホストのクロムとうまく組み合わさって、Office アプリケーションの環境との連携が取れます。

 platform_compare

ブランド戦略との調整

Office Design Group は、マイクロソフトのブランド チームと緊密に協力して、製品でのブランドに関しての評価、改善および確認を行いました。この共同作業によって、製品にブランドの効果があり、関連や区別を示していることが確認されました。

Office 2010 で、新しい Office のブランドの体系を発表しました。ロゴが進化し、Word、Excel、PowerPoint および Outlook を示す 4 色から、全体に Office のオレンジのブランドが採用されたマークに移行されました。また、Office XP まで使用されていたパズルのピースから、活力、インパクト、つながりを表すマークへの、ロゴの進化が完了しました。

OfficeBrand_compare

アプリケーションのアイコンは、Office 2010 のリリースのために、デザインが見直されました。新しいアイコンのデザインは、抽象的なデザインよりも文字と色を使用する方がユーザーはアイコンを見分けやすいという調査結果に応えています。Office ファミリーのさまざまな製品に、統一された方法で対応するために、アルファベットによる体系が採用されました。

ProductIcons

また、このリリースでは各アプリケーションのカラーを強調することを決定し、色のスペクトルを見直して、より鮮やかで純色のカラー パレットを使用しています。作業中の Office アプリケーションをすばやく識別しやすいように、[ファイル] タブと、Backstage ビューの数点の選択された要素に、製品のカラーを付けました。アプリケーションのカラーが付いた [ファイル] タブは、Backstage ビューが少しだけ見えていると考えてください。

FileTabCoreSet

Backstage_all

アニメーションを使用したスプラッシュ スクリーンで、新しい Microsoft Office ブランドの動きと、更新されたオレンジのカラー パレットが表示されます。このアニメーションによって、製品の起動に、活力と表現力、喜びの要素がもたらされます。

 splashsequence

単に表示が綺麗になっただけではありません
Microsoft Office のビジュアルのデザインと実装は、アイコンの問題や、単に "綺麗に見えるように" という以前からの要望の問題ではなくなっています。使いやすいものとそうでないものとの間の溝を埋めることや、ブランドの訴求力やブランドの確立の問題、また、ユーザーの日常のタスクに役立ち、妨げにならないようにすることについての問題です。この簡単な概要の説明で、Microsoft Office 2010 でのビジュアルの改善について深く理解していただけるようになることを願っています。

投稿日: 2009 年 12 月 11 日 (金曜日) 午後 9:34 投稿者: OffTeam

キーワード: ブランド化, ビジュアル

これはローカライズされたブログ投稿です。原文の記事は、https://blogs.technet.com/office2010/archive/2009/12/11/office-2010-visuals-and-branding.aspx をご覧ください。