//build/ 参加日記 Metro Principles = メトロの原則

本日は、これまでに紹介できていなかったものも含めて Metro Principles = メトロの原則について紹介していきます。


[ Metro stlye Design Principles = メトロスタイルデザインの原則 ]

metro style design principles

このところ文章で和訳していたものを、公開されたスライドに日本語訳を追加して画像化しました。もちろん公式の翻訳ではありませんし、ところどころ意訳です。日本語の部分は参考程度でお願いいたします。 //build/ の時点で発表されていたメトロスタイルの原則は、上記の通り5つで、「職人技に誇りを持つ」「素早く、滑らかに」「真にデジタル」「最小限の努力で最大限の効果を」「一つになって勝ち取ろう」になります。

pride in craftsmanship

まずは “Pride in craftsmanship = 職人技に誇りを持つ” です。デザインに関わる職人技についてはなかなか開発の現場では理解されないケースも多いのですが、このようなこだわりによって生まれる美しさでこそユーザーは本当に満足するのだと思います。 “Sweat the details” は、文字通り「細部に汗をかく」という感じなのですが、1ピクセルにもこだわって詳細な部分に目を向けていきましょう、という感じです。 ”Make it safe and reliable = 安全で信頼できるものを作る” は、期待通りの動きを与え、間違えてマズイことにならなような信頼性をデザインによって与える、というところでしょうか。 ”Balance, symmetry, hierarchy = バランス、シンメトリー、階層化” は、スイスデザインのように、すべての物事にバランスを取り、情報の大小に一貫したメリハリを付け、均整美を備え、広大なフラットの状態を作るのではなく適切に階層化する、というところだと読み取りました。また、セッションでは “tacticaly, we have grid” として、前回説明したグリッドによる配置システムと全体を貫くルールが、 “Pride in craftsmanship” を実現するための現実的な戦術となっているとしていました。これを組み込んだ Visual Studio のテンプレートも同様に重要ですね。

authentically digital

“Authentically digital = 真にデジタル” では、相互に接続したネットワークの中でコンピューティングすることが当たり前になっている時代に対して、過去の世界を引きずるのではなく、純粋にデジタル前提の認識であるべきだとした上で、例えば現実世界の物理的なものを投影したアイコンはデジタルとしては意味がなく、情報として認識できるレベルを残して単純化するべきであろうと語っていました。「クラウドに接続されている」はわかりやすいところですが、常にネットワークとその先にあるクラウドにつながっていることを前提としたアプリケーションの意識、常に最新の情報が動的に取り込まれている「ダイナミックで躍動感のある」アプリケーションの状態、情報を正しく美しく伝えるための「タイポグラフィーの美しい利用」、視覚的に意味情報を直接的に伝えるための「大胆で力強い色」、それらを総合に紐付けてユーザーを誘導し、意味を与える「モーション」などが説明されました。

全体として、既存の世界を意識するのではなく、新しいデジタル故に想定できる世界を考えるべきであるというメッセージでした。(最も観念的であったパートです)

do more with less

“Do more with less = 最小限の努力で最大限の効果を” これはわかりやすいですね。全体に可もなく不可もなく様々な機能を有するのではなく、なにか特化したもので ” すごいものを作る = Be great at something ” 、もちろんそれは “Focused and direct = 焦点が定まっていてダイレクト ” でなければ実現できません。もちろん、本来コンテンツを見せるための枠でしかない綺麗な UI にばかりこだわりを持つのではなく、コンテンツに集中しなければなりません。 “ Content before chome = メッキ以前にコンテンツに集中 “ です。また、ユーザーに全てをコントロールできているという “確信を与える = Inspire confidence” ことで自信を持って操作をしてもらえることになります。一貫して操作に妨げのないもの、期待通りの動作をするものに対して人はそのように感じるものです。

fast and fluid

Be fast and fluid = 素早く、滑らかに ” 、Windows Phone 7 での、いわゆる「ヌルサク」ですね。私達の生活は静止しているわけではなく常に動いている、Life is mobile であり、それが故にモーションの気持ちよさで喜んでいただくことも大事です。より直接的なインターフェイスであるタッチのためにデザインを行い、従来の作り方よりもさらに直感的なインタラクションが求められます。それ “ Be responsive = 素早くいつでも反応 ” し、 “ Immersive and compeling = 没入でき、抗えないもの” であるべきだとしています。このあたり、Touch first の metro language での実現、WinRT によるパフォーマンス確保などと話がつながっているようです。

win as one

最後に、 “ Win as one = 一つになって勝ち取ろう ” で締めですが、Windows 8 とともに提供される UI モデルにアプリケーションをフィットさせることで、 UX に一貫性をもたせ、コントラクトなどの仕組みを使うことで冗長性を排除した上でユニークな機能に特化した作りこみを行い、様々な状況に対してマイクロソフや他のアプリケーション連携したあなたのアプリケーションを通じてシナリオを完成させましょう、ツールとテンプレートはスケール出来るようにデザインされており、ここを出発点としてより良いものに仕上げて行って欲しい、というメッセージでした。 OS が様々な機構やデザインルールを提供することで、それぞれのアプリケーションが個々に作りこむのではなく、メトロという流れに乗ることで最大限のメリットを享受して欲しい、ということになるのでしょう。


何度か申し上げているとおり、これらの原則は絶対のものではありませんし、頭にとめておく程度で良いものです。しかし、これらのデザイン原則が実はメトロスタイルアプリのコントラクトやチャームなどの機構も念頭に入れているものであり、システムアーキテクチャと絡んだものであることがお分かりいただけたのではないでしょうか。マイクロソフトが Windows 8 を通じて提示したこれらの提案にのるかそるか、それはみなさんの選択次第です。ただし、この流れが Windows のメジャーバージョンアップの先にあるものであることは動かない事実です。避けるのではなく、うまく取り込んで行きませんか?

ここまででメトロの原則の話は終わりです。お疲れ様でした!もし、皆様がすぐにメトロに取り組むことを検討されていて、セッションにもあるようなツールやテンプレートが現時点で提供していることを超えた場所を目指しているのであれば、是非弊社の UX トレーニングをご検討ください。みなさんの取り組みのきっかけとなり、日常的な開発プロセスへの取り込みのお手伝いができるように、現在全力で準備中です。是非ご意見などお聞かせください。よろしくお願いいたします!

#追伸:和訳版のPPTXが欲しい方がいらっしゃいましたら、kazuma at infragistics.com までご連絡ください。(公式の和訳ではありませんし、原則の部分だけですが、それでもよろしければ!)

//build/ 参加日記 メトロスタイルデザイン

今回は、Windows 8 で新しく追加されたメトロスタイルアプリケーションに関連して、全体の UX のベースともなっているメトロスタイルデザインについて見ていきたいと思います。 Director UX Design and Research, Windows and Windows Live の Samuel Moreau のセッション、”Designing Metro style: principles and personality” で詳しく解説されていますので追いかけてみましょう。


[ メトロスタイルデザインに影響を与えたもの ]

メトロスタイルデザインでは、大きく3つのものに影響を受けているとのことです。

3KeyInfluences
[ Three Key influences ]

前にも書きましたがデザイン哲学的なところはそれほど詳細に掘り下げておく必要はないと思います。背景にどのような考え方があるのか、サラっと流しておくぐらいの感覚で見て行きましょう。 3 つの影響ですが、まずは Bauhaus に代表されるモダンデザインで、特に本質を突き詰め、可能な限り不要な要素を減らしてシンプルにしていくことが重要であるとしています。次に、スイスデザインと呼ばれる国際タイポグラフィー様式から影響を受け、完結かつ素直で、美しいデザインを目指しているとのことです。これは、空港や地下鉄で見られるような ”way finding system” と呼ばれる、目的地に確実にたどり着くためのデザインセットに多く見られ、ソフトウェアにおいても情報に素早くたどり着くために同様に必要であるということのようです。

SwissDesign
[ 東京メトロのサイン。色とアルファベット、数値で駅の情報を表しています。 ]

最後に、モーションデザインです。ここは説明が大変難しいところなのですが、静止画/映像にかかわらず動き(や動きを感じるデザイン)によって見る人の感情に訴えていくという考え方です。講演中にもありましたが、映像を見ていただくと理解がしやすいと思います。(様々なタイポグラフィーが躍動感を持って表現されているたくさんの映像がYoutubeにアップされています。)このような動きの表現を持って、アプリケーションに ” bring it to life = 命を吹き込む ” ことを目指しています。

このような考え方が、前回まで紹介していた “Fast and Fluid” や “Feel Connected and Alive” などの特性にもつながっていきます。


[ メトロスタイルデザインの基本的な構造 ]

Samuel は中盤でメトロの原則に触れていき、 “ pride in craftsmanship = 職人技に誇りを持つ ” を説明する中で、「細部にこだわる」「安全で信頼できるものを作る」「バランス、シンメトリー、階層化」などに加え、「グリッドに整列させる」を説明しています。Visual Studio で利用できるテンプレートが用意されていることについてはすでに書かせていただきましたが、テンプレートは細かいことを知らなくてもデザインチームが想定した優れた UX を誰でも表現しやすくなっています。逆に言えばテンプレートから外れたことをする場合に、デザイン上の原則を知らなければ簡単に破綻してしまうことにもなるのです。グリッドは UI デザインの現場でも日常的に使われる概念で、規則正しい配置を行うためには知っておいたほうが良い考え方になります。それでは、メトロスタイルデザインのグリッドについて見て行きましょう。

スライド26
[Metro Grid System]

こちらがメトロのグリッドの基本です。(サムネイルだと小さいので、クリックして大きな画像もご確認ください。)単位として20ピクセル四方を「1ユニット」として、その中に5ピクセル四方の「サブユニット」を含めています。(4x4の16のサブユニットが1ユニットの中に含まれることになります)メトロデザインに関しては、目の細かい方眼紙があると検討しやすそうですね。(これはメトロに限ったことではありません。 UI のスケッチの際には、方眼紙をお勧めします。)

スライド28
[ Page header = 5 units = 100 pixels ]

スライド30
[ Left margin = 6 units = 120 pixels ]

この基本グリッドに対して、ヘッダー部分に 5 ユニット = 100 ピクセル、左のマージンで 120 ピクセルを取ります。これは、Windows 8 の基本的な操作を考慮したもので、例えば左のエッジはタスク切り替えのきっかけとして使われていますが、そのためにサムネイルを出したりするためのサイズがこのマージンの中で考慮されています。
スライド31
[ Content region = 7th unit from the top = 上端から 140 ピクセルで開始 ]

実際のコンテンツは、7 ユニット目、140 ピクセルまでをあけて始めます。Windows 8 での最小画面サイズは XGA = 1024 x 768 ピクセルとなっており、コンテンツ部分で最低サイズで見えるのは31ユニット+α ということになります。画像の例ではそれぞれのコンテンツは8.5 ユニットの高さを持っていて、0.5 ユニット分のマージンを持っています。そうなると 4 段目を作ると縦スクロールが発生する高さになるため、3 段目のところでXAML であれば StackPanel や WrapPanel で折り返し処理をする想定であると考えられます。

スライド33
[ Dense lists ]

スライド34
[ Mid dense lists ]
スライド35
[ Loose lists ]

次に、リストでの配置になります。リストにおいては最も詰めたリストの場合で 1 ユニット、通常のレベルで 1.5 ユニット、最大で 2 ユニットのマージンを空けています。Visual Studio のテンプレートでも同様のマージンが取られていますね。間隔を狭くしたり広げたりする場合には注意するようにしましょう。

スライド37
[ 4 type sizes ]

日本語になる場合に最も問題になりそうなのがフォントです。まずは文字サイズですが、9, 11, 20, 42 の 4 種類を利用すると決まっているようです。最大の 42 ポイントで 2 ユニット分、それ以下のサイズでは 1 ユニット分の中にフォントを収めるようになっています。
スライド38
[ Type ramp ]

何が問題かというと、日本語フォントで何を使うのかがまだわからないからです。英語版では Segoe UI Light, Segoe UI Semibold, segoe UI Regular, Segoe UI Semilight の 4 種類が使い分けられています。日本語でこのフォントに相当するのはMeiryo UI だと思われますが、字体がそんなに用意されていません!文字サイズや色のルールはそのまま使えるとして、このあたりはしっかりとマイクロソフトから日本語での利用に関するガイドラインを出して欲しいですね。(今のところはボールドなどを利用してそれらしく配置するしかないかなと思っています。)

Metro の原則についてこのあとも詳しく解説していますが、少し長くなってきたので次回にさせてください。今回紹介させていただいた基本的なグリッド構造は、今後も応用しやすいものであると考えていますので、是非参考にしてみてください。


ここでニュースなのですが、本社のウェブサイトが更新されまして、インフラジスティックスとしての Windows 8 に対する公式見解が発表されました!現在和訳版を準備中です。これまでの新しいプラットフォームへの対応と同様に、メトロスタイルコントロールについても対応していく旨発表しております。是非ご期待くださいませ!

新しいメトロスタイルアプリケーションもそうですが、これまでのデスクトップアプリケーションでの開発も重要であり続けます。Windows Form も含めて、今後も新しい機能を追加/更新してまいります。この 2 つの世界をいかに同居させるのかが大きな課題になるのは明らかで、コントロールの利用方法はもちろん、 UX の観点での取り組み方に関しても現在計画中のトレーニングで皆様のお役に立てればと考えております。

次回は残りのメトロの原則の詳細をお伝えしたいと思います。お楽しみに!

 

//build/ 参加日記 Japan Session と法人向け Windows 8 利用の検討

既に「参加日記」というよりも振り返りという感じになってしまいましたが、もう少し続けて //build/ での話題を Windows 8 を中心にお届けしていきます。

実は //build/ 最終日のジャパンセッションにて、急遽日本からの参加者の皆様向けにセッションで話すことになり、 BLOG で書きためていたことを中心に Metro についてお話ししました。

build-wrapup
[ Japan Session のスライドです。 ]

BLOG でもご紹介していた Jensen Harris のキーノートでの内容を中心に、少し私の考えや思いなども加えて Metro 全般についてお話ししました。時間が少なかったこともあってそれほど内容を整理できていなかったことが悔やまれますが、後で皆さんから「役に立ちましたよ」と言っていただけたので救われました。この記事の最後でこのファイルへのリンクも掲載しています。(あくまで「現状渡し」という感じになりますのでご容赦ください。ご質問などございましたら、 @kenazuma か、kazuma at infragistics.com までご連絡ください。 )

Windows 8 がパーソナルな PC 利用にフォーカスしているのは明らかなのですが、企業の PC 環境における Windows 8 の活用はどのようになっていくのか、少し気になるところです。そこで、Windows 8 の法人での利用の検討について、簡単な資料を作ってみました。

スライド3
[Windows 8 のアーキテクチャ]

スライド6
[windows 8 の法人利用]

6ページの簡単な資料なのですが、簡単な発表の内容、Windows 8 のアーキテクチャ、アプリケーションについて、利用シーン、法人利用、簡単な法人利用シナリオなどについて触れております。特に参加者の皆様は、帰国後のレポートの一部として使っていただければ嬉しいです。マイクロソフト自身もこれからパートナーと共に利用シナリオを検討していくという段階のようですので、ここから議論が広がると嬉しいですね。

ジャパンセッションの資料と上記資料の両方、あと作成時に撮ったキャプチャ画像も含めてこちらに置いてありますので、ご覧下さい。( Thanks SkyDrive! )

セッションではお話していたのですが、私としてはやはり表裏一体の「デスクトップアプリケーション環境」をいかに利用していくかについて非常に気になっております。 Windows 8 発売以後も多くの既存 OS 環境は残りますし、その時にどのようにして継ぎ目の目立たない(本当なら継ぎ目のないと言いたいところですが)体験をユーザーに届けることが出来るかが勝負になってくると思います。

これまでの開発手法を大きく変えずに、アプリケーションのスタイリングやレイアウトを変更することによって、ある程度 Metro 環境にフィットしたアプリケーションにすることができると考えております。弊社の NetAdvantage では、WPF や Silverlight はもちろん、Windows Form でもアプリケーションスタイルの変更について様々なサポート機構がありますので、是非ダウンロードしてチェックしてみてください。まだすぐに Metro Style Design が適用できるわけではありませんが、今後の発表にご期待いただければと思います。

次回も //build/ の振り返りを中心に書いていきたいと思いますので、お楽しみに!

//build/ 参加日記 day 1-3 「Metro, Metro, Metro! : 8つの特性後編」

さぁ、ここで勢いを失ってしまうと飛行機に乗れなくなってしまうので、頑張って「8つの特性」の残り5つについて書いて行きます!


[ 適切なコントラクトを使う ]

私の中でメトロスタイルアプリの中でも特に重要な機構だと思っているのがコントラクトという仕組みです。すごく簡単に言うと、 OS や他のメトロアプリと連携するための仕組みになります。

contract0
[Introducing Contracts]

上記スライドにもあるように、コントラクトはメトロスタイルアプリやシステム UI をお互いに連携させるための「接着剤」のような仕組みで、この仕組に従って実装されたアプリ同士で連携してユーザーシナリオを完結させることができます。コントラクトには沢山の種類があるようですが、 ”share = 共有” 、 “Search = 検索” 、 “Picker = 選択” の3つのコントラクトが最も基礎的なものになります。

contract1
[ Share contract ]

”share = 共有” コントラクトでは、情報を出す側の “source = ソース” と、情報の受け側である “target = ターゲット” の二種類の実装があります。この実装を行っておくことで、データの交換を行うことができるのです。

contract2

例えば、ソースを実装しているアプリが文字列を選択し、その情報をターゲットを実装している Twitter クライアントが受け取って tweet する、といった使い方が考えられます。上記スライドにもあるように、ターゲットとしてはメール、 IM 、ソーシャルネットワーク、メモ帳的なアプリ、「後で読む」タイプのサービス、ブックマーク、クラウドサービス、イメージエディタ、などなど様々なパターンが考えられます。逆に、どのアプリでもなんらかのデータを取り扱うわけですから、ほとんどのアプリがソースになり得ると思われます。一旦この実装がされれば、右側のエッジを使ったチャームの中にある “share” というボタンを使って、ターゲットになるアプリを選択し、アクションにつなげることができます。○○連携機能、というような機能実装がよくありますが、 OS その者が仲介することによって、よりダイレクトな形で実現しようとしているのです。

contract3
[ Search contract ]

次は “Search = 検索” コントラクトです。これもやはりチャームから “Search” ボタンで呼び出します。検索の対象になっているようなデータを保有しているアプリケーションであれば、このコントラクトを実装することによって OS の検索から自分のアプリに誘導できる可能性が高まります。動的なコンテンツを生成するアプリ、カタログやリファレンスアプリなどはこれに向いているでしょう。上のスライドでは、サーチを開いて単語を入れた後に、 “Search = 検索” コントラクトを実装しているアプリの一覧が出ていることがわかります。

contract4
[ Should you implement the Search contract? 1 ]

contract5
[ Should you implement the Search contract? 2 ]

シンプルに考えるのであれば、アプリに検索機能があるようであれば、検索コントラクトを実装することによって UI を外に出すことができ、発見可能性も高まる、といえるでしょう。

contract6
[ Should you implement the picker contract? ]

最後に  “picker = 選択” コントラクトです。キーノートのデモでは、画像の選択の時に facebook 上の画面も同じ画面から選択させる、というシナリオを見せてくれました。(前の記事でも少しこれについて書いていました。)クラウド上にデータを置いているようなケースで、そのデータが他のアプリでも利用されることに意味がある場合にこのコントラクトが活きてきます。

4summery

サマリーです。「コントラクトはアプリを Windows 8 全体の体験につなげ、強める」「適切なコントラクトを実装する。適切でないものは実装しないこと!(実装チェックリストじゃないよ!)」「コントラクトが提供している UI をアプリの中で独自に実装しないこと」という感じです。

コントラクトを実装するアプリが増えてくることで相互の連携が深まり、コアの機能に集中でき利用になればより一層品質の高いソフトウェアが生まれてくるのではないでしょうか。


[ 良いタイルに力を注ぐ ]

ようやく5つ目、「良いタイルに力を注ぐ」です。このあたりについては Windows Phone 7 でも同様の考え方があり、同様に適用できるプラクティスも多いかと思いますので、是非Windows Phone 7 系の情報も参考にしてみてください。

メトロにおけるタイルは、ただのアイコン=プログラムを起動するもの、ではありません。従来通りそのようなタイルを作ることも可能ですが、タイルにはもっとアクティブに「意味、情報」を持たせることができます。初期のメトロについて解説されたドキュメントには “icon graphics” から “info graphics” への転換を図る、というような事が書いてありました。画面を占有するものにはすべからく意味を与え、情報を表現していくデザイン、というような意図なのだと思います。

tile0

ただのアイコンではなく、アプリケーションの拡張ととらえて使うのが良さそうです。タイルの中に複数のパーソナルな情報(例えば友だちの顔など)を表示する、リマインダーを表示する、時間軸に沿った情報を表示する、押してみたいと思わせるようなアニメーション表現をするなど、様々な活用方法が考えられます。

tile2

しかも、一つのアプリに一つのタイルと制限されているわけでもありません。アプリから「ピン止め」されることによって、アプリ内のデータをスタートスクリーン側に持っていくことができるのです。これによってアプリの中の深いところにある情報に一気にたどり着かせるようなリンクポイントを作ることができます。是非いい場所を確保したいですよね。

5summery

サマリーです。「タイルはただのアイコンではなく、アプリケーションの拡張と捉える」「内容をタイルから垣間見せることによって、コンテキストへの興味を喚起する」「ユーザーに二つ目以後のタイルにアプリからピン止めすることを許し、重要な情報、カテゴリー、場所を表出させよう」という感じです。

次のカテゴリーもタイル絡みが続きます。


[ 躍動感とつながりを感じる ]

私はこのタイトルを見てハッとしました。これはかつてアドビシステムズがリッチインターネットアプリケーションに必要な要素の一部としてあげていたものと全く同じだったからです。キーノートのデモにおいても「現在のウェブがそうであるように」という表現をしていました。ウェブのように常に最新の情報が更新され続けていることは、既に PC の環境でも同様に重要なことになっている、ということでしょうか。

livetile0
[Live Tiles]

そのような躍動感やつながりを得る方法の一つとして、タイルの拡張である “Live Tiles = ライブタイル” が紹介されています。動的な情報をタイルに表示することによってユーザーをアプリに引き付け、つながりを持たせる。そんな仕組みです。

livetile1
[ using Live tiles ]

ライブタイルは大諸サイズを選べるようです。くれぐれも広告を出したりすることのないように!と注意がありました。自分の個人的な PC 環境がウェブポータルの用に広告でいっぱいになっては困りますからね。あくまでもユーザーの利益になるような情報に集中したいところです。(それでも、無料アプリはタイルで広告が出て、とかなりそうな気もしますが。。。)

notification1
[ Notifications ]

次に “Notifications = ノティフィケーション” です。どうもライブタイルと同じインフラの上に成り立っているようなのですが、いわゆるアラート的な存在となります。チャームの中の “settings” で無効にすることもでき、あまりにたくさん出すことは避けたほうが良いと思います。 こちらのためにもいくつかテンプレートが用意されているようです。

notification2
[Notification templates]

さすがにアラームを設定して表示されないのは困りますが、そうでもなければ明示的にアラートをどんどん出されるのも困ります。(実際スマートフォンのアラートで困ったりしていませんか?私は結構そうなっていて、個別に消したりしています。)強力なだけに注意が必要な機能といえるでしょう。

notification5

タイルやノティフィケーションを更新するには3つのやり方があります。実行されているローカルのアプリが直接更新する方法、タイマーをセットしてある時間になったら更新する方法、Windows Push Notification Service (WNS) を使ったプッシュ更新の3です。この分類はほぼWindows Phone 7 と同じですので、既に確立されたパターンなどが参考にあると思います。(おそらく別のセッションで WNS については詳しく解説されていることでしょう)

6summery

サマリーです・「WNS を利用して、常に最新かつ関連性のある情報を表示するライブタイルを作る」「割り込みの必要が本当に認められるときだけノティフィケーションを利用する(あるいはユーザーにやっていいかどうか尋ねる)」「重要な通りすぎてしまったノティフィケーションの情報でタイルを更新する」という感じです。


[ クラウドへのローミング ]

Windows 8 におけるメトロスタイルアプリでも、スクリーン上でアクティブに起動すているときにしか動いていないのは当然です。しかし、Jensen は UX としては常に活動しているように見えるべきであるとしています。

cloud1

「アプリケーション体験がプロセスを超越する」なんてすごいことが書いてありますが、いかなる時に利用し始めても前回の続きを始められるような、継続的な体験を提供するべきだ、という話のようです。そのためにクラウドを利用するというわけですね。

cloud2

Windows 8 では、ログインに Windows Live ID を使っています。この Live ID の機能拡張として、設定情報など少量のデータをユーザー紐付きで格納できる機構を持つようです。また、複雑なステータスの保持などについては Windows Azure を利用することで実現できるともありました。

cloud3

iPhone を始めとするスマートフォンでは意識されていることも多いのですが、良いメトロスタイルアプリでは明示的な「保存」をさせるのではなく、常にステートを保持しているような作りであるべきだとしています。ログインしたら、自分が利用していた設定がどこでも呼び出すことができ、常に作業を途切れることなく継続できるとしたらとても良いですね。早晩、 Office 365 などとの連携も発表されるのではないかと感じています。

7summery

サマリーです。「ユーザーに常にアプリが活動し、プロセスが継続しているように感じさせるべきだ」「適切な設定と状態をくらうどにローミングしよう」「ユーザーに明示的に保存させることをやめよう」という感じになります。


[ メトロの原則の受け入れ ]

ついに、ついに最後の8つ目となりました。 “Metro principle = メトロの原則” についての部分です。

8summery

メトロの原則は、少しづつ細かい所が変化しているようです。ここに挙げられている “Pride in craftsmanship = 職人技に誇りを持つ” “Be fast and fuild = 素早く滑らかであれ” “Authentically digital = 真にデジタル” “Do more with less = 最小限の努力で最大限の効果を” “Win as one = 一つになって勝ち取ろう” 以外にも、”Clean, Light, Open, Fast” や、 “Celebrate Typography” などが加えられていたタイミングもあります。いずれにしてもメトロスタイルデザインの考え方にも繋がる部分です。別のセッションでも時間をかけて語られているトピックですが、別の機会に取り上げさせてください。(デザインの哲学的なところは開発に直結するというわけではありませんが、設計者の意図を知るという意味では重要だと考えています。)


長い道のりでした。読んでいただいた皆様、お疲れ様でした!良いメトロスタイルアプリの8つの特性、それぞれにどう感じられましたか?まずはマイクロソフトからの大きな提案であるこのメトロという流れに乗ってみるのも面白そうだな、と少しでも感じていただければ嬉しいです。私達インフラジスティックスも製品やトレーニングで皆様をご支援していきたいと考えております。

さて、そろそろもう一度デスクトップアプリケーションの話をしたいと思います。これだけ集中してメトロスタイルアプリやスタートスクリーンを見ていると、デスクトプ環境にあるアプリケーションにものすごく違和感を感じてしまいます。デザインクオリティが全く違うということもありますが、急にルールの違う世界に投げ出されたような気がしてしまうんですね。(このBLOGを書くために何度となく Jensen のビデオを見ていたのでなおさらです)でも、そんな中で全く違和感を感じないアプリがありました!Windows Phone 7 連携には欠かせない、Zune software です。

zune

Metro Design にしっかり準拠しているアプリケーションであれば、デスクトップアプリケーションであっても違和感を感じない一つの例だと思います。大多数の環境では、いきなり Windows 8 一色にすることも難しいと思いますし、既存のデスクトップアプリケーションに対してメトロ UI を適用したプロトタイプなどを用意してみることで、ゆるやかな以降に備えるというのもひとつの手ではないでしょうか。少し社内でも確認して、Silverlight や WPF における Metro Design 適用についても調べていき、こちらで発表させていただきたいと思います。こんなところこそ、一から皆さんに開発していただくのではなく、私達のような UI コントロールを提供する会社が簡単にそれを実現するお手伝いをさせていただくべきところだと思いました。このようなアクションもまた、Windows 8 世代に備えた準備になるのではないでしょうか。

現在はまだ始まっていませんが、キーノートのデモにもあったように Windows Store が始まることによって、マイクロソフトの言う所の「歴史上始まって以来の大きなビジネス機会」がやってくるでしょう。一つのアプリが億を超える PC を対象にしてビジネスが可能となり、相互に連携し、ユーザーにとっても開発者にとっても利益をもたらすことができるのです。非常にエキサイティングな瞬間に立ちあうことができて本当にラッキーだと思っています。遅かれ早かれ、スタートスクリーンを中心とした「UI 上の陣地争い」が始まるに違いありません。すべてが始まるのはまだ先のことですが、その他多くの技術動向と同様に、目を離さずウオッチし続けて機会を失わないようにしたいです。是非これから皆さんともこの新しい流れについてディスカッションをさせていただければと思います。

話は変わりますが、会場に来ている皆さんと、「メトロ」という言葉はどこから来ているのだろうか、という話をしていました。もちろん、地下鉄のあのメトロから取られているという話は有名ですが、もしかするとメトロポリス=活気のある中心地、大都市、というような意味も含まれているんじゃないかというお話を聞いてなるほどな、と思いました。シノフスキー氏はキーノートで「Windows centered」と宣言しておられましたが、コンピューティングの中心に Windows 8 を据えて、全ての活動に対してのスタートスクリーンになっていく、というような意味が込められているのかもしれません。ちなみに、辞書を引いてみると医学的には女性の子宮、母細胞というような意味もあるようで、Metro を通じた Windows 8 からどんどん私達にとって良いビジネスが生み出されていくと良いですね!

通して考えると非常に長い文章になってしまいました。ここまでお付き合いいただいた皆様、本当に有難うございます。今後も継続して //build/ で発表された情報についてはお届けして参りますので、今後ともよろしくお願いいたします!

アズマ

雨が続きますね。。。悶々とする夏の終わりの巻

ずいぶん久しぶりにBLOGを更新します。何やってたのかというと、手首を治療して転職していました。それはさておき、雨が続いて鬱陶しいですね。。。バイクにも乗れないし。このところはたまの定期点検に出す以外は乗ることも出来ず、悶々としております。

少し前に関東平日会の皆さんとツーリングに行ってきました。といっても、一ヶ月も前のことです。

IMG_1721

私もリハビリモードで、ツーリング初めての人もいましたので、まったりと小鹿野へ向かいました。掲示板でお世話になっているKatanaさんとも初めてお会い出来ました。いつもの通りカシノキ校長のリードで出発です。

IMG_1724

途中何度か休憩をはさみつつもわらじトンカツの聖地に到着し、しっかりといただきました。ここのやつはそんなに平べったくもされておらず、かなり美味しかったです。鹿の子、っていったかな?

IMG_1728

このツーリングでは、なにしろ「ツーリングぐらいならバイクに乗っても大丈夫」という実感を得たことが良かったです。

IMG_1726

偶然撮影したノベ吉号CBR600RRの青がとても綺麗で掲載。

どうも、私のiPhoneはカメラが調子悪くて、起動しなかったり、妙な線が出てしまったりで困っています。次のが出たら思い切って買い換えるか、迷うところです。どうしても、コンパクトカメラよりはiPhoneを使ってしまうんですよね。

その後、何度かいつもの道志みちには朝練で行ってます。月末にはBuell仲間の佐々木さんにもお会いすることができました。怪我したときにとってもお世話になったので、嬉しかったな。

Doushimichi

佐々木号(XB12SS)です。Buellといえば、いつも最後と言いながら続いているBuelldokが10月2日にあります。皆で参加する予定です。

点検の時にそろそろタイア交換ですね、と言われているので、ついにAngelSTにしようと思っています。次のBLOGエントリーは交換顛末記かな!


UX Training by Infragistics Japan

インフラジスティックス・ジャパンで、UXトレーニングを担当する予定です。今はいろいろ調査をしながらプランを練っている段階になります。

UX training by Infragistics Japan : initial planning mind map

実際に始めさせていただくのはまだ少し先になりますが、現実の開発現場に即した実りあるものにするべく、思いを巡らせております。

特に、開発の現場がこれまで以上にスピードを求められている中で、どれだけクイックに結果を出せるかについてフォーカスしようと考えております。もちろん、前職で在籍していたセカンドファクトリーが展開しているようなプロの領域が存在していますが、気づきによって踏み出せる領域があるはずです。例えば、中華料理で考えてみると、鍋の振り方と醤の使い方に気づけば、結構手軽においしい中華が作れますよね?それは簡単な気づきで到達できるレベルです。本格的な中華料理屋で食べるそれとは違いますが、それでも十分な領域が存在しています。特にエンタープライズシステムの領域では、この「気づき」で改善できることがまだまだたくさんあるように思います。このトレーニングを通じて、そのような気づきを得るためのお手伝いをしたいと考えております。

もちろん、UIコンポーネントのNetAdvantageを作っているインフラジスティックスのトレーニングですから、手法の説明だけではなく実際の技術適用時にどのようなことに気をつけたらいいのか、などについてもお話できるようにしたいと考えております。

これから皆さんにご挨拶に伺わせていただきながら、様々なご意見・ご要望をお聞かせいただき、実際のトレーニングを形作っていきたいと考えております。ぜひ沢山のご意見・ご要望をお聞かせください!よろしくお願いいたします!

I resigned as director of 2ndfactory, but am joining to Infragistics, and still experience architect. :)

At end of this August, I resigned as director of 2ndfactory, and am joining to Infragistics from this September. 

I’m pretty excited about this new challenge. Actually I had several chance to work with Infragistics people, including my speaking at their DevDays. These activities inspire me to rediscover what I want to do, what I want to be. This is not direct reason to change, but I’m sure much inspired from them.

In Infragistics, I am going to pursue the “Tao of Experience Architect” at a high, global level. First of all, now I’m planning new UX training in Japan as part of this exploration.

Please keep in touch with 2ndfactory people, they are one of the most capable agency (they call themselves “hybrid integrator” ) in Japan. We already have good relationship between 2ndfactory and Infragistics, but I’m trying to deepen this.

Anyway, new day is coming, my new challenge is started. See you again soon, friends!

P.S. I am going to attend MS BUILD windows conference at Anaheim, this september. If you were there, please say hi to me and go out for drink together !

セカンドファクトリーの取締役を退任し、新たなチャレンジを始めます

本日はご報告をさせていただきたく久しぶりにBLOGを更新しています。この度、2004年の6月に入社し、7年間お世話になったセカンドファクトリーの取締役を退任し、新たなチャレンジを始めることになりました。 入社して以後、会社は急成長を続け、オフィスも二度引越し、非常にスピード感のある7年を過ごしてきました。その間、去って行った人たちもいましたが、そのような人たちも含め、多くの素晴らしい仲間や上司に恵まれて働けた事は、本当に素晴らしい経験で、本当に私の人生の一部となりました。

2005年のある日、今後エクスペリエンスデザインを主軸に会社のサービスを整えていこうとする中で、「アズマさんは、エクスペリエンスアーキテクトな。」と社長に任命されました。当時この役職名で働いている人は海外にもほぼおらず(この辺りにも大関社長の動物的勘の様なものを感じましたねw)、最初はアーキテクトと付く名前に多少ビビりながらも、エクスペリエンスデザイナーと双璧をなす存在として自分自身も確立するべく、日夜頑張ってきました。 セカンドファクトリーのチームモデルの中で、エクスペリエンスデザイナーのOutside-Inアプローチに対して、Inside-Outにアプローチする独特のポジションに関して、ある程度あるべき姿を確立する事ができましたが、一方で自分に足りない事が多い事も強く認識する事になりました。特に海外において同様にエクスペリエンスアーキテクトと名乗る人々との交流の中で、その思いは強くなっていったのです。 自分にとって、様々な意味での修行が必要であると考えるようになってから、ベンチャー企業において現在の仕事/役割とスピード感を持って向き合って行く事と、身につけるべき多くの事柄の間でバランスの難しさを感じるようになりました。また、海外との仕事の広がりについても、自らを鍛えるうえでも必要であろうと強く感じていました。大変悩みましたが、最終的には決断し、会社ともしっかり相談をした結果セカンドファクトリーを去ることになりました。

新たな道として、9月からご縁をいただきインフラジスティックス・ジャパン株式会社でお世話になることになります。UIコンポーネントというツールを利用し、より多くの開発チームの皆様に優れたUXを届けられるユーザーインターフェイスを作っていただくため、これまでの経験を総動員してお手伝いをさせていただこうと考えております。セカンドファクトリーとインフラジスティックスの今後の展開にもご期待ください。

この新たな取り組みの中で、自らに足りないものを身につけるべく修行も行い、エクスペリエンスアーキテクトという特殊なポジションの確立にも努めていきたいと考えています。

セカンドファクトリー在籍中には、本当に皆様にお世話になりました。心からお礼申し上げます。皆様から頂けた機会、過ごした時間のすべてが私にとって最高の宝物です。今後私も微力ながら業界の発展により貢献できるような状態をめざし、頑張っていこうと考えております。

これまで本当にありがとうございました!今後ともよろしくお願いいたします!

今後ともご指導ご鞭撻のほど、何卒よろしくお願いいたします。

2011.09.01 東 賢