Build 2014 : Day 1-1 Windows Phone

ついに今年の Build が始まります。まずは初日の Keynote です。いつものごとく DJ を呼んでかなりのボリュームで音楽を流し続けており、朝から盛り上がります!(個人的にはラスベガスでの MIX を思い出します。)

TerryMyerson

Operating Systems Group の EVP である Terry Myerson が仕切り役となって始まりました。Keynote は day 1 と day 2 の2回がありますが、初日は Devices & Services / Mobile first, Cloud first といったビジョンステートメントでいうところの Devices / Mobile に特化した話となりました。私としてもクライアントサイドの話は主戦場でありますので、大変期待している内容でした。マイクロソフトの全てのプラットフォームに携わる者が目指していることは、関わっていただいている全てのパートナーや開発者をモチベートし、「your creativity come to life : 皆さんの創造性を輝かせること」である、と話していたことが冒頭では印象的でした。

JoeBelfiore

まずは Mobile first の先鋒として Windows Phone について Joe Belfiore : CVP, Operating Systems Group が詳細に伝えています。 彼は以前から Windows Phone の顔役といった感じですが、出世して担当範囲が広くなった今でもやはり彼が話さないと始まらないといった感じです。特に新興国などでのビジネス的な成功や新たなパートナーシップについて伝えたのち、メジャーアップデートになる Windows Phone 8.1 について話しています。Windows Phone について「最もパーソナライズドされたスマートフォン」と位置づけ、 More personal, tailored (もっとパーソナルに、仕立てられた) 体験を意識して開発されたとのことでした。

ActionCenter
[command center]

InteractiveLockScreen
[Interactive Lock Screen]

BackgroundTiles
[image live tiles]

これまで以上にインタラクティブなロックスクリーンテーマの導入や、タイルカスタマイズなどが発表され、その後「She comes to life」という発言が出た時に会場の多くの人たちが次に起こることに気づいてざわめいていました。噂されていた Cortana の発表です。 iOS における Siri の位置づけに当たるものと思って間違いありませんが、大きく違うのは Bing と連携することによってユーザーの指向性を把握しており、よりアクティブなパーソナルアシスタントとして振る舞う事だと話していました。(もともとは Halo というゲームに出てくる AI の名前です)開発にあたっては、実際にパーソナルアシスタントとして働いている人々にインタビューを行い、良い仕事をするために何が必要なのかをリサーチした結果を反映しているとのことでした。(その過程も気になるところです)Beta 版とのことでしたが、かなり認識率も高く(確認できたのは英語だけではありますが)きわめてスムーズな言葉で回答を返していました。Windows Phone に内蔵された通知機能と連携して、場所やスケジュール、人と関わるタイミングなどでタイムリーな通知を行うというデモが行われています。Bing と連携をし、かつパーソナルな情報を Phone で保持することによってアクティブにサポートしてくれるパーソナルアシスタントとして開発されているようでした。

Cortana
[Cortana]

notebook
[Cortana’s notebook]

interests
[interests]

QuietHours
[quiet hours]

Places
[places]

FOundFlightInEmail
[メールの中から旅程を見つけてトラックするかどうかを聞いている]

ScheduleConflict
[スケジュールコンフリクトを知らせている]

findRestraunt
[Bing の検索結果と合わせて四つ星レストランを検索]

Siri との大きな違いは、 Cortana が サードパーティアプリケーションでも利用できるという事でしょう。具体的な API がどうなっているのかなどについては Keynote では触れられていませんでしたが、 Hulu でウォッチリストに動画を追加したり、Facebook で特定の個人のタイムラインを閲覧することなどをボイスコマンドで行っていました。個人的にも音声インターフェイスによるアプリケーション操作については大変興味のあるところなので、これを開発に組み込めるとしたら大変素晴らしいことだと思います。(できれば Windows 8 でも使えるようになってほしいですね。)「競合」とは違って、ローエンド端末を含む全ての 8.1 アップデート対応端末で利用できるとのことでした。 Cortana は当初はUSからBetaが始まり、その後UK、中国と開始されていくとのことでした。(日本でどうなるかは不明です)

3rdPartyApps
[3rd party apps]

また、ビジネス利用についても力を入れていることが発表され、 Enterprise VPN への対応、 S/MIME への対応によるセキュアなメール利用、 MDM によるローカルコピーの禁止制御などがデモされていました。その他にも細かい機能への対応として、適切な Wifi を案内する Wifi sense や Word flow keyboard 、設定情報のデスクトップとの同期や IE11 などが発表されていました。実際の市場への投入は今後数か月をかけて行われるとのことです。

nickHedderman
[Nick Hedderman]

WordFlowKeyboard
[wordflow keyboard]

この後発表されているユニバーサルアプリも考えると、Cortana など個人的にも利用したくなる機能もあり、日本での投入が期待されるところです。(続く)

Metro : Windows Phone から Metro を考えてみる(2) – Windows Phone Design Day–(5)

今回も引き続き Windows Phone Design Day のネタをお届けします。このネタで既に5回目なので、リンクをしておきますね。

Metro : Windows Phone から Metro を考えてみる(2) - Windows Phone Design Day – (1)
Metro : Windows Phone から Metro を考えてみる(2) - Windows Phone Design Day – (2)
Metro : Windows Phone から Metro を考えてみる(2) - Windows Phone Design Day – (3)
Metro : Windows Phone から Metro を考えてみる(2) - Windows Phone Design Day – (4)

今回は  “perceived performance” = 見かけのパフォーマンスに関する話題になります。多くのアプリケーション開発ではパフォーマンスを高くするにあたって色々な悩みがあると思います。レスポンスを「即時に」するという仕様は「言うは易し行うは難し」で、特にネットワークを経由したアクセスを前提にしている場合にはどうしてもユーザーを待たせることになってしまいます。その時、どううまく待ってもらえるかがとても大事になります。

perceived performance
[ Perceived Performance ]

100 ms 以下(ボタンタッチ時の挙動など)、500 ms から1秒(リストビューでスワイプした時の Pivot アニメーションなど)、2秒以下(アプリのローディングやメールが飛んでいくアニメーションなど)、2~5秒、5~10秒、10秒以上、もっと長いプロセスと分けて説明していて、2秒以下のものは基本的に Built in common controls に挙動を任せています。適切に UI がフィードバックを返していなければ、デバイスが活きているのかどうかもわからないと感じるものです。メトロの原則にもあるように、アニメーションなどをうまく利用してデバイスが活きていることを伝え、結果として見かけ上のパフォーマンスを高く感じさせます。なんの反応もなく2秒待つことは経験的にもどのユーザーも相当イラッとしますね。w

waiting type
[ Perceived Performance (Cont.) ]

もう少し問題なのは2秒以上待つようなケースです。このようなケースではローディングのためにプログレスバーを出すことになりますが、5秒までなら短時間であるとしてプログレスバーのみ、10秒までなら「%」表示、それ以上の場合は「サーバに接続しています」「データを取得しています」などのサブステップを見せるようにする、などの工夫が必要になるとしています。10秒以上のケースではユーザーはとにかく何が起きているのか不安になりますから、その時点でなにが進行しているのか知らせる必要があります。(場合によっては処理をキャンセルする可能性もあるわけで、その時何が起こるのかも一緒に設計する必要がありますね)

古くは「砂時計」が有名な待たせるモーションでしたが、最近 SAMSUNG の Windows 8 スレートを使っていて気づいたのが、HDDのアクセスランプがないために、何が起こっているのかわからないケースがありました。無意識にアクセスランプを見て、ガリガリと何かやっているな、ということで納得していたのでしょう。タッチインターフェイスになって、より一層全てをダイレクトにユーザーが感じるようになった時、アプリケーションが適切に「頑張っています」「悩んでいます」「誰かの応答を待っています」と伝えてくれなければ、固まってしまったと感じ、その体験が「パフォーマンスが悪い」というイメージの固定化を招いてしまいます。そうならないためにも、適切なモーションを利用するようにしましょう。2秒以下の状況で使うものにも、メールのアニメーションのようにそれぞれのアプリケーションでは工夫の余地が出てくると思います。

Windows Phone Design day では、この他にも様々な話題が取り上げられていました。

Designer insights into Panorama and Pivot ( Chad Roberts, Amy Alberts, 32:18)
→Pivot と Panorama に関する詳細な説明です。
Making Audio Sing on Windows Phone (Matthew Bennett, 34:26 )
→音とアプリケーションの関わりに関する説明です。
Windows Phone Voice ( Karen Kesler, 32:00 )
→セールスやマーケティング的な側面でどのようなメッセージングを行うべきかという話題について説明しています。
Designer Resources: Expression Blend Overview and Roadmap ( Celso Gomes, Peter Blois, 41:20 )
→Blend で WP7 アプリケーションを開発する流れに関する説明です。 
Designer Resources: Windows Phone Documentation ( Chris Kilbourn, 11:18 )
→用意されているガイドラインなどのドキュメントに関する説明です。
Designer Resources: Windows Phone Design Templates ( Chad Roberts, 04:01 )
→.psd で用意されているデザインテンプレートに関する説明です。

かなりたくさんの情報がありますね!Windows Phone 7 はマイクロソフトがとても力を入れているプラットフォームですから当たり前といえば当たり前ですが、これが次期 Windows となればもっと情報は充実してくるでしょう。このとき、タッチファーストであるが故に既存のアプリケーション開発での留意事項と異なることが出てきます。このようなことに対処するためにも、Windows Phone 7 を使ってウォーミングアップをしておくと、スムーズに新しい世界に入っていけるのではないかと考えております。

ここまでお読み頂きました皆様、是非弊社の NetAdvantage for Windows Phone もチェックしてみてください。現行のリリースもたくさん役に立つコントロールがありますが、近々リリースさせていただく11.2においては、Google/Facebook/Windows Liveを利用したアクセスコントロールや、Silverlight では既に提供しております、コントロール設定を維持するための Persistence Framework など、新機能がたくさん追加されます!(現時点ではあくまで予定です。近日中に詳細な情報が弊社BLOGなどで公開されます。)これらのコントロールも活用していただいて、AppHubが賑やかにしてやりましょう!

 

Metro : Windows Phone から Metro を考えてみる(2) – Windows Phone Design Day–(4)

今回も引き続き、Windows Phone Design Day を追いかけていきます。

Deconstructing a Windows Phone application, part 4: Globalization (Ayman Raslan, Franklin Yow : 37:45 )
→国際化対応とローカライズに関する説明です。今回は動画の中身は比較的軽めです。

個人的に、国際化対応は Windows Phone というプラットフォームを扱う上で極めて重要だと考えています。現時点での日本でのシェアはまだまだ少なく、少数のユーザーを相手にアプリケーションをリリースするよりも、NOKIAが大きく力を入れていたりする北米、ヨーロッパなどの市場の多数のユーザーを狙っていかなければアプリケーションを通じての売上は難しいと言えます。逆にいえば、北米、ヨーロッパを入れてもまだまだリリースされていないタイプのアプリがたくさんあることも事実で、iPhone やAndroid に比べて手付かずの領域があるうちに進出しておいたほうが良いと思います。そのためにも、多言語化対応などについては最初から検討に入れておくとよいでしょう。

動画の内容としては、可能な限りコード変更の発生を避け、ja-jp や en-us などのカルチャー単位(英語を利用していても、国によって単位フォーマットなどは異なるケースもあります)でプログラムとは別に管理したリソースを出し分けるように開発しましょう、というような一般的な話が多かったです。

Final messages (Cont.)
[ Globalization : Final messages ]

編集フィールドとコントロールが欧文以外の文字列をしっかりと扱えること(弊社の UI コントロール製品はもちろんそのようになっております!)、IMEなども含めた入力を受け付けられること、ユーザーカルチャーに依存する日付、時間、通貨、数値などを正しく表示できること、U.S. 向けのアプリをただ翻訳しただけのものにしないで、ターゲットユーザー市場に対してデザインされたものであること、などを確認しましょう。

Final messages for intenationalization
[ Globalization : Final messages ]

UTF-8のような正しいエンコードを利用していること、正しいローカライズガイドラインに従っていること(MS は MSDN などでガイドラインを公開しています。)などについても確認しましょう。URLに記載されているサイトではサンプルも含めて様々な情報が公開されていますので、一読されることをお勧めします。

また、一般的な国際化に関する話題を2008年の MIX で講演させていただいた時の動画も紹介しておきます。英語はいまいちですが、内容はそれなりに詰まっているはずです!

http://channel9.msdn.com/Events/MIX/MIX08/T15

次回は、モーションを利用してどのように見かけのパフォーマンスを高く見せるか、という話題について取り上げます。お楽しみに!

Metro : Windows Phone から Metro を考えてみる(2) – Windows Phone Design Day–(3)

取り上げた題材が大きかったためか、なかなか先に進みませんが、前回前々回に引き続き Windows Phone design Day に関する記事となります。タッチインターフェイスにおけるターゲットサイズについて取り上げます。

Deconstructing a Windows Phone application, part 3: Target Sizes ( Tirthankar Sengupta, 13:39 )
→何年もタッチでのターゲットサイズについて調査しているラボの研究者の発表です。

target size 9
[ Target Size Guidelines : 9 mm ]

数百時間に及ぶユーザーリサーチや様々な研究の結果から、タッチターゲットのサイズにおける一種のマジックナンバーとして “ 9 mm ” が導きだされたようです。

targetsizesummary
[ Target Size Guidelines : Summary ]

推奨されるタッチターゲットサイズは9 mm 以上最低でも7 mm 以上とし、その場合は15 mm 以上の幅を持たせる。(てて幅に余裕がない場合に利用する)タッチできるアイテムのビジュアルサイズは4.2 mm 以上にする。ちさなコントロール同士の配置ではうまく間を取る、コントロールをタッチしやすくするためにパディングやバッファを使う、そのターゲットで実際に何が行われるか(task context)を意識して、エラー率を評価する。サマリーで以上のようなことが示されています。後のQ&Aで出てきますが、Windows Phoneにおける 9 mm とはおよそ90ピクセルとして考えているようです。ただし、極端に大きな画面サイズや小さな画面サイズがあった場合はこの限りではないと思いますので、実測の必要はあると思いますが、基本の DPI が 262 DPI と決められているため、想定はしやすいと思います。

仮にこれらのことを今後Windows 8 のメトロに適用する場合には、様々なハードウェアが存在することが予測されるため確実に実測が必要になると思われます。また、Windows Phone のオペレーションでは主に親指が使われるケースが多いですが、それが人差し指になった時、マルチタッチになった時なども想定しておく必要があります。 Windows 8 用のガイドラインも用意されるのではないかと思いますが、今のところ転用する場合には注意するようにしましょう。

implementation size
[ Target Size Guidelines : Implementation ]

上記スライドの右下部分を見てみましょう。これはアプリケーション一覧のある画面ですが、戻るボタンのビジュアルサイズが43ピクセルであるのに対して、タッチターゲットとしてはもう少し広く97ピクセルを確保してあります。そのため9 mm ルールを超えていますね。一方、アプリケーションアイコンについては62 x 62のサイズに対して、次のアイコンまで12ピクセルしか空白がありません。デッドスペースを作らずに上下を均等にタッチターゲットに割り振ってようやく7 mm を超える程度ですが、アプリケーションの名前を示している右のエリアが十分に幅をとっているため、縦幅が小さくてもタッチしやすい構造になっています。

左上で示されているように、実際に目指できる空間と、タッチできる領域間の空間、双方を意識する必要があります。このあたりは別にアプリケーションアイコンを配置する際に開発者が意識することではありませんし、テンプレートはこのようなルールを意識して作られていますが、テンプレートを超えた実装を行う場合にはこのルールを思い出す必要が出てきますね。

research background
[ Target Size Guidelines : Research Background ]

どうやって9 mm ルールに達したかの背景もしっかり書かれています。興味のある方はご覧下さい。実際には、エラー率などはタッチの反応レベルなどのハードウェアに依存したところもあると思いますので、実機でのテスト/評価が必須になると思われます。弊社のこれからのコントロールも、ビジュアルサイズと目標サイズの違いがあることなどを意識する必要がありそうです。このようなサイズの調整についてはXAMLでのカスタマイズであれば非常に都合がよく、HTMLベースのものだとかなり頑張らないといけないと思われます。いずれにしても弊社としては、XAMLベースプラットフォームも、HTMLベースのWebスタンダードも両方サポートしていきますので、今後もこれらのガイドラインと絡めて情報を提供してまいります。

次回は、国際化について書いていきます。重そうなテーマですが、現在 Windows Phone に取り組む上でとても重要なパートになりますので私も気合を入れて書きたいと思います。お楽しみに!

Metro : Windows Phone から Metro を考えてみる(2) – Windows Phone Design Day–(2)

前回に引き続き、Windows Phone Design Day のコンテンツを見ていきます。

Deconstructing a Windows Phone application part2: Animation ( Jeff Arnold, 34:22 )
→WP7 のリードモーションデザイナー(!)がアニメーション/インタラクションの話をしています。

why use motion?
[ why use motion? ]

リッチアプリケーションを初めて作るようなケースでは、「私のアプリケーションにはアニメーションなんて必要ありません」とおっしゃる意見も多いのですが、このスライドで示されているように「ユーザーを喜ばせる」だけではなく、「ヒントで動作を促す」ことや、「見た目のパフォーマンスをだます」「ユーザーに次に何をするべきかを伝えることを助ける」ことなども可能です。最近は機能が多いにもかかわらず UI をシンプルにしなければならないため、ヒントをアニメーションで伝えることはとても大事になっています。(ビデオにもあるように、Windows Phone のスタートスクリーンでの「ちょい見せ」はとても良い例ですね)

animation definition
[ definition of Transition / Animation ]

次に、トランジションとアニメーションの定義を行なっています。(さすがリードモーションデザイナーですね!)トランジションは「UI の中で、ある状態からある状態へユーザーが移動する際に与える視覚的なフィードバック」であるとし、アニメーションは「ある状態の中での動きを伴った視覚的なフィードバックで、ユーザーのアクションとは必ずしも紐づかないもの」であるとしています。前者はスタートでタップしてアプリケーションへ遷移する際の動きに代表される状態と状態の間の動き、後者はロックスクリーンが「跳ねる」ことやプログレスバーなど、ある状態の中で起こる動きです。動きは常に目的を持っており、ユーザーにデバイスが「活きている」事を伝えたり、どのようにしてデバイスと関わるかを伝えるために使われるともしています。

紙芝居とTVアニメを想像すると分かりやすいと思います。それぞれの状態を紙芝居やアニメでのシーンであるとすれば、紙芝居ではあるシーンの中では視覚的には動きが無いので、弁士のかたがドラマチックに語ることでそれを伝えていますが、TVアニメではまさにアニメーションで動いているため、何が起こっているのかは見ればわかります。また、シーンが変わるときにも連続性があるのか完全に状況が変わるのかによって違いますが、やはり視覚効果やサウンドを使って「変化」を伝えています。(サザエさんあたりの分かりやすい番組で、意識してみてみると理解しやすくなるでしょう)

ある UI を扱うときに、仮にトレーニングがあると想像してください。トレーナーがたくさん次にやるべきことを説明する必要があるのであれば、まさに紙芝居の弁士の役割になってしまっていて、実際には利用者が UI に触れるときにはその声は聞こえて来ないという問題につながります。アニメーションを効果的に利用することによって、UI そのものに雄弁に語らせることが出来るのです。皆さんの UI が、紙芝居の紙だけをを渡されて、ストーリーを想像しなければならないようなものになっていないか想像してみてください!

2.5D is not 3D
[ 2.5D not 3D ]

全体に平面で構成されたシンプルな世界にモーションを加えることで「2.5D」の表現を目指しているとのことです。あくまでも派手すぎず、原則にあるようにコンテンツに集中することを忘れずに、動きを与えていきます。

特にWindows Phone では、デバイス側のハードウェアキーとして「バックボタン」が付いているので、ある状態に進む/バックキーで戻る、と2通りのトランジションがあり、それぞれにin / out で最大4通りのトランジションを設定可能です。もっとシンプルなものでは2通りの場合もあります。ゲームでもない限り、ヒットターゲットが動くようなものを作らないように、とも指摘していました。アニメーションに凝りだすと表現としてはあり得るのですが、操作し難く成るのは間違いありません。

Windows phone でも Windows 8 でも、ビルトインコントロールが持っているアニメーションやアニメーションライブラリ(ビヘイビア)で多くのパターンを吸収できるようになっています。また、Expressionなどで設定できるイージングなども役に立つでしょう。特にイージングでは様々なパターンがありますが、動きが作り出すイメージを事前にしっかりと確認しておくと良いと思います。開発する側としては、どのような選択肢がすぐに使えるものとして用意されており、どのシチュエーションで利用できるかをわかった上でうまく活用することが大事です。インフラジスティックスでも、Infragistics Motion Framework というものを用意しており、データを躍動的に見せる仕掛けを簡単に実現できるようになっています。ぜひ一度サンプルをご覧いただければと思います。

以上、アニメーションについて追いかけて行きました。次回ではタッチ UI におけるターゲットサイズについて取り上げていきます。お楽しみに!

Metro : Windows Phone から Metro を考えてみる(2) – Windows Phone Design Day–(1)

U.S.ではWindows Phone のリリースが先行していたこともあって、多くのイベントが既に開催されています。” Windows Phone Design Day ” もそのひとつで、2日間の Deep Dive セミナーです。Store の展開も先駆してたくさんのアプリがアップロードされましたが、今後はクオリティを高めるフェイズに入っているようで、今後これに近いセミナーが世界各国で行われるようです。日本でも実施されると良いですね!

ありがたい事に当日の模様は全てビデオで見ることができます。英語になりますが、内容的にはとても参考になりますので是非流して見られることをお勧めします。全体の流れとしては:

Ana and Miles, the Windows Phone personas ( Tracey Lovejoy, 3:33 )
→リサーチチームのメンバーから Windows Phone 自体のターゲット、ペルソナについて語られています。(猛烈に早口な人なので、とりあえずスライドを見ながら適宜ポーズしつつご覧下さいw

The Metro Design Language, the inspiration ( Jeff Fong, 29:48)
→Metro のデザインチームが Metro について解説しています。ここまでの私のBLOGをお読みの方には既にご存知の内容がほとんどですが、Windows Phone に特化したアートワークが見れるのでそこだけ眺めておきましょう。

この後の続く6本が “Deconstructing a Windows Phone application” というシリーズになっていて、アプリケーションをある視点で分解して解説しています。

  1. UI コントロール
  2. アニメーション
  3. ターゲットサイズ
  4. グローバライゼイション(国際化)
  5. 見た目のパフォーマンス

の5つです。(どうもPart5のレコードがなさそうですので、どんな内容だったのか調べてみたいと思います。)私もいつもセミナーなどでお話ししているのですが、対象を大きな一つの要素として捉えるのではなく、幾つかの課題要素に分割することでアプローチがしやすくなります。

ViewArchitecture
[ view Architecture ]

Windows Phone ということで要素が限られるためにレイアウトそのものについてはあまり語られていませんが、その代わりに詳細なデザインテンプレートが用意されています。28種類のレイヤー構造を持ったフォトショップのファイル(.psd)で、SegoeWPというフォントも入っています。(これの日本語版も是非欲しいですね!)フォトショップのファイル(.psd)というとかなり身構えてしまう人も多いと思いますが、なんのことはないグラフィックファイルですから、重なったセル画を眺めるぐらいの感覚で見てみると良いと思います。Expression Design を MSDN などでお持ちならばそちらでも見れますし、フリーソフトなどでも閲覧可能なものがあります。本家のトライアル版をダウンロードしても良いですね!特に重要なのは編集することではなく「デザイナーに発注するとしたらどういう構造で発注したらいいのか」を確認できることです。印刷して簡単に注釈をつけて、このファイルと一緒に渡すのも良いと思います。

このような分解する視点と、デザイナーとデベロッパーとの協業を考えておくことは、 Windows 8 のメトロスタイルアプリになっても同じように必要になりますので、ある程度限定な環境である Windows Phone などを題材にして慣れておくと良いと思います。

Deconstructing a Windows Phone application part 1: Controls ( Rhon Manlapaz, Ryan Bickel, 17:40)
→まずはコントロールの視点で掘り下げています。

スタート時点の Tile からローディングスクリーン、ランディング(初期)スクリーンと流れ、Pivot や List ビューに関する説明、リストの先にある詳細ビューの見せ方、クイックジャンプリスト、コンテキストメニュー、確認画面などなど、コントロールそのものというよりもそれが使われる状況について説明されています。アプリケーションには「流れ」がありますから、その中でどのようにコントロールを配置するのかはとても大事な視点ですね。それぞれの UI コントロールのデザインガイドラインについては、MSDN に詳細な記述がありますのでそちらが参考になると思います。

UI コントロールの一覧を見た上で「足りない要素がある」と感じた場合には是非弊社の NetAdvantage for Windows Phone もチェックしてみてください。チャートバーコードなどのはっきりと分かりやすいものもありますが、インフォボックスやメッセージボックスのような渋めの(?)コントロールもあります。いつも感じるのは、UI コントロールはパレットの上の絵の具のようなもので、無ければ原色から混ぜて作れますが、あれば表現は簡単になりますし、逆にパレットにそれがあることで新たにアイデアを得たりできます。是非皆さんのパレットにも弊社のコントロールを加えてみてください!

いきなり Part1 で長くなりましたが、次回以後ペースを上げていきたいと思います!

 

Silverlightを囲む会in東京#4で講演せさせて頂きました

前回お伝えしていたとおり、三連休の一日目、2011/10/08に、Silverlightを囲む会in東京#4で講演をさせて頂きました。「Windows 8 におけるUXとメトロスタイルアプリケーション」というタイトルで、Windows 8 とメトロを中心にお話致しました。

さすがに連休でもコミュニティの勉強会に参加されようという皆様でしたので、既にほとんどの方が Windows 8 を既にインストールして試されているようでした。皆さんにご協力頂きまして「インフラジスティックス」という名前も一緒に声に出して覚えて頂きました。ありがとうございます!

IGJP|
[ インフラジスティックス、もう覚えたかな?w ]

当日の内容は、これまでのBLOGの内容をまとめる形でお届けし、ほとんどのスライドは /build// のセッションから借りたものになります。メトロにおいてはテンプレートが多くをガイドしてくれますが、そうであるからこそメトロの構造にしっかりと目を向けて取り組みましょうということでお話をしました。

ViewArchitecture
[ view Architecture ]

上記分析の視点は前職の頃からよくお話していたアプローチですが、メトロのようなルールが明確になっているものだとそれぞれを分解することでそれぞれの関係がよりはっきりとし、テンプレートを超えた実装を行う際にそれぞれの視点を持っていることが重要になってくると考えております。

IGloves8
[ ig loves Windows 8! ]

インフラジスティックスとしては、今後Windows 8 におけるメトロスタイルアプリケーション環境も、デスクトップアプリケーション環境も、全力でサポートをしてまいります。現時点でのWindows 8 への取り組みに関する弊社のまとめはここで確認することができます。ぜひお時間のあるときにでもご覧ください。

UXworkshop
[ UX ワークショップのご案内 ]

当日もご紹介しておりましたが、今後特にデスクトップアプリケーション環境において、既存環境との互換性を持ちながらメトロスタイルアプリケーション環境との体験ギャップをいかに小さくするか、ということが大きな課題となると思われます。弊社の UX ワークショップにおいてもメトロの適用/適合については大きなトピックとして取り上げていきたいと思いますので、皆様のプロセスにメトロを組み入れるためのきっかけとして、是非ご活用ください!ご検討お願いします!

Is Silverlight OK?
[ Is silverlight OK for us? ]

こちらも当日のスライドからの抜粋ですが、Silverlightに取り組まれている皆さんは、まずは安心して大丈夫であると考えています。XAML のスキルセットはこれからも活用可能ですし、デスクトップアプリケーション環境と既存環境ではこれからもSilverlight の活躍の場があると考えています。Silverlight 5 でサポートされる機能を考えるとなおさらですね。とはいえ、これから5年/10年問題がないと言い切れるテクノロジーはほぼ存在しないと考えています。今持っているスキルセットを最大限に利用することを考えていくと良いのではないかと思います。(HTML5とのパフォーマンス比較も参考にしてみてください!)


[ 当日のスライド ]

当日のスライドについては上記の通り SkyDrive 経由で閲覧/ダウンロード可能です。また、当日の模様は会場をご提供いただいた IIJ 様のご厚意により、暫くの間こちらで閲覧可能となっております!(私の講演は2:20ごろからになります)他の皆様のセッションも大変素晴らしい内容でしたので、是非御覧ください!

コミュニティでお話させていただくと、いつも逆にパワーをいただきます!是非今後とも宜しくお願いいたします!

Metro : Windows Phone から Metro を考えてみる(1)

本日はチャンネル9の良い投稿を紹介しながら、Windows Phone を通じて Metro を考えていきたいと思います。まずは、こちらの投稿を見ていきましょう。

http://channel9.msdn.com/Shows/Inside+Windows+Phone/Inside-Windows-Phone-24-User-Experience-for-Windows-Phone-Apps

かつて私が初めてWPFとXAMLに触れるきっかけとなり、現在はWindows Phone UX チームの一員として活躍 Arturo Toledo が Windows Phone の UX について語っています。すでにアメリカ市場ではMango以前の Windows Phone が販売されて久しく、すでに多くのアプリがAppHubへ送られています。しかし、提供されているテンプレートを超えるものが少なく、使い分け方も理解されていないことが多いということで、現在Windows Phone UX チームとしては様々な品質向上施策を行なっているらしいです。このビデオもその一つとなります。

スライド5

上記 UI はWindows Mobile 7 へ続くはずだったデザインです。Metro が採用される前の icon graphics でデザインされていますが、最終的には全体が Metro で統一されることになりました。こうやって見るとずいぶん違いがあることがわかります。可能な限り虚飾を廃して Metro デザインが成り立っていることがよくわかる例です。

スライド6

「単に機能的なアプリケーションよりも、優れた UX を備えたアプリケーションがストアにおいて高いレートを付けられる傾向にある」と話していて、Pivot や Panorama テンプレートを包含したより大きな存在である Metro をしっかり理解することはその助けになると説明しています。虚飾を排するのはアイコンや UI のフレームだけではなく、フォントで構成するタイポグラフィもそうで、飾りである「セリフ」のないフォントを選んで使っています。

スライド7

この他にも、スライダーやメールアイコンを例にとって、Metro におけるミニマムな(かつパフォーマンスに寄与する)表現を例にあげていました。その後このところよく見かける空港や地下鉄の写真を使った解説で、Metro のスイスデザインについて説明しています。(このあたりは以前のBLOGでお伝えしたところですね)

続いて、開発者はいきなりツールを使ってコーディングを始める傾向が強いが、UX 観点から言えばぜひ先に「計画」から始めて欲しい、としています。

スライド15 - コピー

あなたのアプリケーションは何をするものなのか?誰のためのものなのか?どのように状況に「ハマル」ものなのか?いつどこで使うものなのか?どのようなコンテンツを表示するものなのか?どのようにハードウェアを活用するものなのか?タッチをどのように使うのか?このような基本的な問題に対して、これから情熱を注ぐアプリケーションが創りだそうとするストーリーの「語り部」になったつもりで、まずは落ち着いて整理してみましょう。

そして、その後紡ぎ出したストーリーをプロトタイプに落とし込みます。ここでは自分にとって最も使いやすいツールを使って構いません。(個人的には正確性をあえて求めないように紙とペンを使うことをお勧めしたいです。)それぞれの画面を簡単に描き、画面同士がどのような関係にあるかをつないで示していきます。

スライド17

このようなスケッチをする際にも、Metro の場合には画面上での配置や構成要素にルールがありますから、あくまでもなにをどのように見せたいかに終始して、後でルールを適用してきれいにするつもりでやると良い思います。

ビデオではこの後 Pivot と Panorama の使い分けや、画面構成上のタイトルの付け方などの Tips が続いて行きます。Windows Phone の開発そのものにご興味のある方は是非続けてみてください。Arturo の英語はとてもわかり易いですし、スライドもダウンロード可能なので非常に理解しやすいと思います。

これらの考えは Windows Phone で先行している故に Store での高いレート獲得のためにも、というような文脈で語られるわけですが、もちろんWindows 8 における Metro でも同じことが言えます。本当は Metro であろうとなかろうと適用できる考えもあるわけですが、Metro のミニマムデザインがある故に適用しやすくなることも多いはずです。

この際、使えるレイアウトはどのようなものであるか?配置できる UI コントロールはどのようなものか?Metro で標準的に使われているインタラクションにはどのようなものがあり、想定しているアプリケーション自体のインタラクションと相反しないか?UI の構成要素ごとに検討しておくべきポイントがありそうです。テクノロジーによる制約/利点を正しく捉えた上で、描いたストーリーをどんな舞台で動かすか想像することも、「計画」のうちであると考えています。今後 Visual Studio のテンプレートがメトロスタイルアプリ用に数種類用意されれば、WP7同様にどのようなケースで使い分けるのか、テンプレート活用の方向性についても疑問が起こるでしょう。その時にもメトロデザインの原則に戻って考えてみると、自ずとやるべきことが見えてくるのではないかと思います。


いかがでしたか?この他にもチャンネル9には様々な良質のコンテンツがありますので、是非参考にしてみてください。私も良い例を見つけたらご紹介できるようにしたいと思います。

以前から何度かお伝えしているインフラジスティックスが始める UX ワークショップ では、お客様からも Metro について掘り下げることについて多くのご要望を頂いております。プライベート/パブリックの種別にかかわらず、可能な限り Metro の適用に関してもカバーしていきたいと考えております。(逆に最初から現状を Metro 化することを前提に、という話でも構いません!)是非ご要望や悩みを聞かせて下さい。まだ始める所でもありますので、フィードバックを受け付けやすいタイミングです!どうぞご検討のほどよろしくお願い致します!

今回から数回、Windows Phone を題材にとって Metro について考えていきたいと思います。次回もお楽しみに!