2015年5月15日 9:02 AM

Windows 10 の設計: 適切なバランスの追求

本ブログは、Blogging Windows の “Windows 10 Design: Getting the balance right” の抄訳です。

皆様、こんにちは。マイクロソフトの Albert Shum です。オペレーティングシステムグループで設計チームのリーダーを任されています。このブログはいつも愛読していますが、投稿するのは今回が初めてですので、どうぞお手柔らかにお願いします。私たちのチームは Windows Phone やタブレット、PC などのデバイスから、Windows ストア、アカウント、MSN といったサービス、Xbox、さらには「モノのインターネット」や、HoloLens、Surface Hub などの新たなエクスペリエンスまで、さまざまな設計に携わっています。また、マイクロソフトの Bing、Office、Outlook、OneDrive、OneNote などの設計チームとも密に連携を取っています。

この記事では、スマートフォン向け Windows 10 の設計作業についてお伝えします。私とチームメンバーの多くは Windows Phone 7 からスマートフォンの設計に取り組んでおり、その成果に誇りを持っています。しかし、作業は常に完璧とはいきません。現在のフライティングについては多くのご意見が寄せられています。Windows Insider Program に参加されている皆様には、開発段階のプレビュー版をお試しいただき、お気付きの点についてご意見を伺っています。皆様の積極的なご協力に心から感謝しております。たとえば現在はハンバーガー (メニューアイコン) について多くのご意見が飛び交っているようです。私は以前チリマヨネーズと目玉焼きを挟んだラーメンバーガーに、パパイヤサラダを添えたものを作ったことがありましたが、その日から今日に至るまで、こんなにも多くの人々がハンバーガーについて熱心に議論しているのを耳にしたことはありません。テクノロジもレシピも同様に、新しいものを考案することはそう簡単ではなく、適切なバランスを取るまでに試行錯誤が必要です。

今回は、適切なバランスを取るために私たちのチームがどう取り組んでいるかをお伝えしたいと思います。現在 Windows 10 のフライティングが進行中で作業を確認しやすいことから、まず私たちのアプローチについて簡単にお伝えします。新しいレシピを考案するときと同様にまだ設計途中の段階ですが、最も多くのご意見が寄せられた分野に関して具体的な情報をお伝えすると共に、エクスペリエンスの向上に対する私たちの取り組みをご紹介します。皆様からご意見が寄せられる前に計画を変更している場合もあれば、ご意見を基に方針を修正する場合もありますが、フィードバックを頂けるのは本当にありがたいことです。こうした取り組みはすべて、最高の Windows を提供するという目標につながっています。

私たちは、設計を 1 つの手段としてパーソナルコンピューティングや生産性、楽しみをさらに進化させ、マイクロソフトのみならず業界全体に影響を与えることに、かつてないほどの喜びを感じています。しかし、その喜びにはある種の厳しい犠牲を伴います。また、設計を次のレベルへと高めるには新たな課題に取り組み、問題を解決しなければなりません。私たちは今こういった状況にあるのです。

設計のアプローチについて

私たちの設計アプローチは、興味深い歴史がある交通機関のグラフィックと国際タイポグラフィ様式を基に展開しています。現在採用しようとしているのは、都市の設計に若干似たアプローチです。私たちは都市機能の秩序と基準を維持する基盤、あるいは電力網と呼べるものを作り上げているところです。これによってさまざまな表現や都市の特徴を明確に打ち出せる柔軟性も確保されます。

私たちは設計の基盤として、共通のパターンとコントロールをいくつか定義する必要がありました。一連のデバイスに合わせて柔軟に変化するエクスペリエンスを提供するためです。また開発者からは、他のプラットフォームから参入する人々にとって使いやすいものにする必要がある、というご意見をよく頂いています。こうした理由から、新しく柔軟性の高いグローバルコントロールを定義すると共に、「アダプティブな UX」を確立したのです。

私たちはまず、設計システムの境界線を突き破るためにコンセプトについて検討しました。適度な変化ではなく大きな変化を求め、新しいパターンやコントロール、新しいタイプの処理、大胆な色使いなどを試しました。そして、システムでコンテンツの表現方法をさらに広げる方法を検討し、個人的な表現を可能にしつつも全体ではシンプルさを保つように努めました。下の画像は、昨年チームが Windows 10 の設計作業を始めたときのサンプルです。

多様な設計への取り組み

方向性が具体化すると設計上の意図をアプリに反映し、正式な計画を策定するためにビルド、フライティング、学習、反復、再反復を繰り返して、継続的に改善に取り組みました。

設計して多くを学ぶ

私たちは初期の PC 向け Windows のフライティングから多くのことを学びました。また 1 月のスマートフォン向け Technical Preview からもさらに多くのことが明らかになっています。チームにとって興味深いプロセスです。Windows 10 の開発はチームで予測し、期待する方向に進んでいますが (ただし、一貫した設計要素と仕上げを適用する前に若干の不備が明らかになりました)、このプロセスは Windows Insider Program にご参加いただいている皆様との新たな共同作業による開発モデルで公式に採用されました。皆様からのフィードバックを取り入れようとする意欲を称えてくださる方が大勢いる一方で、うまくいくのか疑問を持つ方も当然いらっしゃいます。

ブログや Twitter では「スマートフォン向けのフライティングはかなり粗い。完成には程遠いと感じているのがマイクロソフトに伝わるといいけど」といった投稿を目にしました。ご心配なく。ビルドをリリースした時点ではまだまだ不十分だとわかっていました。この「粗さ」は、コードを早期にリリースしたときにはつきものであり、開発途中での粗さに慣れている私たちにとってはごく当たり前のことです。ただ、この粗さを目にした多くの皆様は、さまざまな考えを持たれるようです。しかし私たちは皆、開発プロセスにおいてまだ時間があるうちは、これがフィードバックを取り入れる方法として最適だと考えています。

皆様が目にしているビルドには Windows 10 のさまざまな要素が含まれていますが、それぞれの完成度は異なります。中核を成すコードは大きな進歩を遂げています。概して信頼性が高く、バッテリ持続時間も確保されています。また、快適に通話できることにもお気付きでしょう。しかし、フライティングであるアプリの多くは依然として初期段階にあり、PC でもスマートフォンでも実行されるユニバーサルアプリとして作成されてはいるものの、スマートフォンの画面サイズや私たちが目的とするスマートフォンのインタラクションモデルに適合させるための調整は完了していません。そのため、現在皆様が目にしているのは、完成時にリリースを予定しているスマートフォン向け UI に合わせて部分的にのみ調整されたアプリです。

以下に、リリース予定の詳細をお伝えしたい領域や、フィードバックを基に調整した分野をいくつかご紹介します。

メニューアイコン (ハンバーガーアイコン)
Outlook のメールとカレンダー
Project Spartan
タスクの切り替え
People
フォト

ハンバーガーメニュー

賛否両論あるかもしれません。モバイルブラウザーを開いて Facebook や Bank of America、Huffington Post といったお気に入りの Web サイトにアクセスすると、よくメインのナビゲーションメニューとして左上か右上にハンバーガーコントロール (メニューアイコン) が表示されます。ハンバーガーがナビゲーション用 UX として採用されるようになった経緯については、こちらのブログ記事 (英語) をご覧ください。あらゆる UX の設計と同様、不適切なのはコントロール自体ではなくその実装方法です。ツールは作業に適したものを採用する必要があります。ハンバーガーは一貫性のあるナビゲーション要素としてよく使用されます。これはアプリの「ホーム」として常に表示され、行きたい場所に移動できる機能を備えています。ただし、表示される項目が明確な階層構造になっていない場合や、作業時に頻繁にアクセスしなければならない場合はあまり効率的ではありません。むしろ、アプリバー、タブ、ピボットなどを使用、または併用する方が適している場合もあります。

ユニバーサルアプリとアダプティブな UX では、開発者がアプリを 1 種類作った場合に、必要に応じてその UX を各デバイスに合わせてカスタマイズできるような設計アプローチを取っています。PC 版のアプリではピボットではなくハンバーガーアイコンを使用してキーボードやマウスでの操作性を向上させ、さらに、同じアプリをスワイプコントロールが可能なピボットを使用するようにカスタマイズして、モバイルでは片手での操作性を向上させることができます。アプリではハンバーガーとピボットコントロールの両方を使用できますが、デバイスに適したコントロールを適切なタイミングで表示することが可能です。

これは、新しいアダプティブな UX の設計による 1 つのメリットです。私たちは引き続き、Windows Insider Program に参加されている皆様から寄せられるハンバーガーコントロールに関するフィードバックに応えるべく、どのデバイスでも便利で快適に使用できるようにアプリの設計向上に努めます。

ここまで、私たちが取っているアプローチの背景をご説明しました。ここからは現在取り組んでいる内容についてお伝えしましょう。

Outlook

画面下部のコマンド

スマートフォン向け Outlook のメールとカレンダーについて寄せられた懐疑的なご意見の中で最も多かったのは、コマンドの大部分が画面下部に集まっていてアプリバーにタイトルとアイコンが表示される Windows Phone 8 の形式が変更されてしまったということでした。私たちはこの形式をやめようとしているのではありません。公開されたビルドでは Office の「コマンドバー」が実装されていたものの、その実装が不完全でした。今後数週間以内に、大部分のコマンドが見慣れた形で、しかも進化を遂げて画面下部に表示されるようになります。

メール

最新のビルドでは、「受信トレイアプリ」と呼ばれる機能の初期バージョンが実装されています。Outlook ユニバーサルアプリの UI は、長い間取り組んでいる新しいコードベースを使用しており、一部は新しく書き直されています。Outlook チームは速いペースで開発を進めており、今後数週間から数か月で急激な向上が見られるでしょう。また、受信トレイの統合や複数選択といった機能を復活してほしいというご意見も寄せられました。そこで皆様に嬉しいお知らせがあります。こういった機能は最終的なコードが完成する前に、今後リリースされる更新プログラムで他の更新や機能強化と共に提供される予定です。

では、メールのメニューアイコン (ハンバーガー) についてご説明しましょう。まず、背景について簡単にお話しします。電子メールを使用する際に重要なのは、メッセージがどのアカウントやフォルダーに含まれているかわかることです。デスクトップ向けの見慣れた Outlook アプリでは、下図に示すとおり 3 つの領域で確認できます。左側の領域には選択したフォルダーが、中央の領域にはそのフォルダーに含まれるメッセージの一覧が、右側の領域にはメッセージが表示されます。

スマートフォンの場合、一度に表示できるのは上記のうち 1 つの領域のみです。左側からポップアップするメニュー (ハンバーガーのメニューアイコンからアクセスできます) で、フォルダーとメッセージ一覧の関係を把握できます。また、これによりアプリ内のどこにいるかが簡単にわかります。親指を伸ばして操作する必要がありますが、そう頻繁に使うことはないでしょう。また、今後予定されているフライティングでは、よく使用するメールフォルダーをピン留めできるようになるため、フォルダーを「切り替える」必要性はさらに低くなります。今後もこの点を注視し、メールフォルダーのピン留めの使用頻度や、フォルダー切り替えの必要性を確認していきます。

次の図は、今後のビルドで予定されている画面です。画面下部にアイコンが表示され、ハンバーガーボタンを使用して左側のアカウントとフォルダーにアクセスできます。

カレンダー

カレンダーについては、週ビューと月ビューを復活させてほしいというご要望を多数の方から頂きました。ビルド 10051 ではミニサイズの月ビューが提供されています。月名をタップする必要があるのですが、見つけづらいかもしれません。さらに改良を続けます。

今後数週間以内に予定されている変更点は以下のとおりです。

ミニサイズの月ビューを見つけやすく改良します。
画面が比較的大きいスマートフォン用に、ミニサイズの月ビューに表示される週の数を増やします。

この設計により、月ビューの使用頻度が最も高いユーザーと、日ビューまたは予定一覧をよく見るが予定を確認するときは月ビューに簡単に切り替えたいと思うユーザーのどちらにも便利にご利用いただけるようなバランスが取れていると確信しています。

また、横向きで見られる週ビューにも取り組んでいます。ビルド 10051 のフライティングには間に合いませんでしたが、今後リリースする予定です。

現時点の画面です。

Microsoft Edge

Microsoft Edge は Windows 10 向けの新しいブラウザーで、新しい Web エンジンを搭載しユニバーサルアプリプラットフォームを基盤としています。PC からスマートフォンに至るまで、Microsoft Edge の現代的でシンプルな設計を導入することにより、Windows 10 のエクスペリエンスとのスムーズな統合を実現します。

デバイス間で一貫性があり、使い慣れているエクスペリエンスの創出にも注力しました。たとえば、Windows 10 向けデバイスファミリのアプリには共通の視覚スタイルを採用し、ブラウザーで最も目につく要素であるアドレスバーは従来どおり上に配置されています。

1 月に Microsoft Edge (コードネーム「Project Spartan」) を発表し、最初のフライティングを提供して以来、スマートフォンのアドレスバーの配置について、Windows Insider Program に参加いただいている皆様からのフィードバックに耳を傾けてきました。このブラウザーの設計はまだ掘り下げている段階で、現時点では最終的なアプローチについてまだお伝えできません。引き続き皆様のご意見をお聞かせください。私たちの取り組みについての最新情報は、随時このブログでお知らせしていきます。

丸くなった People

People のアイコンが丸くなったことについて、全体的な設計にそぐわず、これまでの取り組みにも合っていないのではないかというご意見もいただいています。

この設計に関する私たちの考え方について少し説明させてください。この件については Windows 10 の計画段階で検討を重ねました。私たちは、つながりのある人々を視覚的にできるだけ目立たせるようにしたかったのです。[スタート] のようなエクスペリエンスや、People が他のタイプのコンテンツと合わせて使用されるようなアプリを切り替えて使用する場合には特に重要です。したがって、現時点では引き続き People を丸いアイコンで表示します。スマートフォンでいろいろな操作をしているときに、友人を簡単に見つけられると感じていただければ嬉しいです。

このように表示される予定です。

フォト

フォトでは、メニューアイコン (ハンバーガー) とピボットをデバイスに合わせてカスタマイズできることがよくおわかりいただけます。

フォトアプリには、ユーザーがお気に入りの瞬間を収めた写真のコレクションを作成でき、さまざまな方法で表示できる新たな機能を盛り込みたいと考えています。もう 1 つの目標は、写真がアルバムに自動的にまとめられると共に、どのデバイスからでも簡単に写真にアクセスできるようにすることです。

各種デバイスでメニューアイコン (ハンバーガー) を使ったナビゲーションについて検討した結果、スマートフォンでは片手でピボットとスワイプを使って操作した方が、コレクションとアルバムの切り替えが簡単にできることに気付きました。フォトアプリのナビゲーションについてはまだ反復作業の段階にありますが、最終的な設計では、PC 向けアプリではメニューアイコンを、スマートフォン向けにはピボットを採用し、キーボード、マウス、タッチのいずれによる操作でも柔軟に使えるようにする予定です。

こちらが完成版のイメージです。

タスクの切り替え

多くの皆様は、スマートフォン上でのタスク切り替えが逆方向になったこと (左から右ではなく、右から左に読むような感覚でしょうか) に気付かれたでしょう。私たちは引き続きフィードバックを集めながら、PC でのタスクが左から右に展開するのに対し、スマートフォンでのタスクは従来、右から左に展開するという相違点について検討しているところです。8 インチのタブレットからスマートフォンに持ち替えたときに無意識に手を動かして操作できるように、どのデバイスでも切り替えを同じにすべきでしょうか。それとも、すべてのスマートフォンユーザーがスムーズにアップグレードできるように、従来のエクスペリエンスを維持するべきでしょうか。最終的な設計を決定する前に、操作を覚え直すことがスマートフォンユーザーにとってどの程度困難であるか、十分に理解する必要があります。

旅はまだ続く

ふう、お伝えすることがたくさんありますね。私たちはこれからも設計に関する反復作業を行い、各デバイスに対応する柔軟性へのニーズと、一貫性のある快適なエクスペリエンスの創出という目標とのバランスを見極めていきます。Windows 10 は、設計と操作の新しい手段を探る始まりにすぎません。私たちは Windows 10 を「サービスとして」考え、更新や機能強化を継続的に提供していく予定であることをどうか心に留めておいてください。特に、今回取り上げたアプリのほとんどは、Windows ストアを通じて定期的に更新される予定で、すべてのお客様に向けてリリースされた後も改善を続けていきます。

マイクロソフトの製品やサービスの設計に関して取り上げるのは今回が初めてです。さらに詳しく知りたい方は、ぜひ Build 2015 で私たちにお声掛けください。また、今後数週間にわたって、引き続き設計について取り上げる予定です。

追記: 長い記事を最後までお読みいただき、ありがとうございました。今回掲載した画像のほとんどはドラフト版の設計です。実装したり、引き続き皆様からのフィードバックを伺ったりする中でさらに調整した結果、最終的な設計が掲載した画像と「まったく同じ」にはならない可能性があることを最後に付け加えておきます。