8」が発売されました。8は、タッチに最適化された新しいユーザーインターフェース(UI)が話題を呼んでいます。はてなはWindowsストアアプリ「はてなブックマーク」を同日にリリース。UXエバンジェリストの春日井良隆さんが対談しました。ja-JP――本日は、はてなエンジニアのid:nobuokaさん、はてなデザイナーのid:akawakamiさん、そして日本マイクロソフトの春日井良隆さんにお集まりいただきました。「Evangelist」という英単語は、一般的には「伝道師」と訳されます。そこから転じて、IT業界において、自社の技術やサービスを市場に伝える人々がエバンジェリストと呼ばれるようになりました。マーケティングの一種ですね。私の場合はアプリやサービスの作り手に対して、マイクロソフトの技術や製品を訴求することがミッションです。8の担当ということですね。8では、これまでのWindowsの技術に加え、Webの技術であるHTML5とJavaScriptでもアプリを開発できることが特長の1つです。私は特にWebの分野にフォーカスしています。Explorer(IE)やHTML5も担当しています。デバイスがユーザーにもたらす体験や経験のことを指します。8ではタッチという、これまでの「キーボードとマウス」とは異なる操作体系を提案していますので、どのような点に注意してUIを設計すればいいのか、どのようなUXを届ければいいのかといったことをお伝えしています。8のスタート画面タイル状のUIや横スクロールなど、これまでのWindowsからガラリと変わっている――続いてnobuokaさんとakawakamiさんも自己紹介をお願いします。はてなアプリケーションエンジニアのid:nobuokaこと信岡です。大学院をこの春に卒業して、はてなに入りました。院では物理の研究をしていたのですが、プログラムに興味があって、特にユーザーさんに直接使ってもらえるWebのものを作りたいと思って入社しました。はてなブックマークチームで開発を担当しています。はてなデザイナーのid:akawakamiこと川上です。はてなブックマークチームでデザインを担当しています。今回、この2人でWindowsストアアプリ「はてなブックマーク」を開発したんですけど、実は僕、これまでクライアントアプリケーションを作る機会はなくて......。はい、Webアプリケーションはありますけど、Windowsはもちろん、iPhoneやAndroidのアプリも作ったことなくて、クライアントアプリは今回が初めてなんです。Windowsストアアプリ「はてなブックマーク」のトップ画面。はてなでは基本的に京都が開発拠点ですけど、私は東京オフィスで働いているので、遠隔でコミュニケーションをとりながらの開発でした。ディレクターも交えて、定期的にテレビ電話で進ちょくを報告したり情報共有したり、ですね。技術的な試行錯誤や議論、問題点などの共有には、社内グループウェア(はてなグループ)を利用しました。基本的なやりとりは文字ベースが多かったです。基本的にはうまくいったんですけど、1つだけ反省点が。今回の作り方は、最初にid:akawakamiにデザイン案を考えてもらって、それを受け取って僕がアプリとして実装したんです。実際に開発し始めると、やっぱりここのデザインはこうした方がいいんじゃないかというのが出てきて......。ある程度、動くようになってから、またid:akawakamiに戻してデザインを修正してもらう、みたいな感じになりました。意識した点は「縦ではなく横」であることでした。一般的にWebサイトは、横書きの文章が縦に流れていく、という前提で情報設計のノウハウが蓄積されています。情報の流れとともに、ユーザーさんの視点も上から下へ流れるわけです。8の新しいユーザーインターフェースにどう落とし込むか考えました。8のアプリを参考にしながら、Webサイトの項目をアプリとしてどのように再構築するか考えました。あとは、マイクロソフトさんが事例付きで紹介されている以下のページを参考にしました。8の新しいユーザーインターフェースのコンセプト、考え方を理解する助けになりましたね。Docs――横スクロールはやっぱり特徴的というか、独特ですよねえ。実のところ、私にとっては横スクロールするのがもう当たり前という感覚だったのですが、言われてみればWebサイトは確かに上から下へ動くことが多いですね。8の新しいユーザーインターフェースは、もともと「Metro」と呼ばれていたんですが、その名のとおりメトロ(地下鉄)から来ているんです。Metroという呼び方は、1つは、地下鉄に代表される交通機関のサイン・システムに由来しています。あの窓をスクリーンに見立てているんです。タッチという、人とデバイスがより近付いた関係性を考えると、現実世界に近い、横に情報が流れることが自然なのではないかと考えました。今のデバイスの主流である横長のディスプレイにもマッチしていますし。デザイナーid:akawakami――なるほど。縦軸から横軸に変わったことで、スクロールの意味そのものを考えないといけないと感じました。一般的にWebサイトは、縦方向に要素が増えていきますよね。8は横スクロールだから、これまでのものを単に横方向に置き換えてやればいいかと言うと、そうではない。縦から横への変化は、情報が流れる方向が変わるというだけではなくて、スクロールの意味が変わっちゃうんです。――単に縦と横が入れ替わったわけではないんですね。方向によってスクロールの意味が変わるということを意識しておかないと破綻してしまうんです。縦と横が混在することで、UIが難解になってしまえば元も子もない。見せ方をどうするか、方向性を自分なりに定義してユーザーさんにどう提供するかが課題で、かなり苦心しました。――実際に出来上がったはてなブックマークアプリを見てみましょう。メニュー画面は横スクロールで、パネルが並んでいる形。記事をクリックすると、左にブックマークコメント、右に実際の記事ページが、縦スクロールで並んでいます。最初の案はこれとは違って、まずブックマーク数やコメントなど、いろいろな情報が盛り込まれたページへ遷移するように考えていました。――Web版でいうエントリーページのような画面ですね。この情報量を横スクロール向けに再構築するデザイン案を考えていたんです。今回は最終的に、とにかくシンプルに、記事ページをフレーム的に読み込んで、という体裁になりました。アプリで記事を開いたところ。リストを新しいユーザーインターフェースに合わせるのは簡単で、タイルを並べる形にすればいいんです。問題はリストではない情報をどう落とし込んでいくかで、ここはすごく悩みました。8の新しいユーザーインターフェースの基本的な作法をベースにしたスタイルへと着地しました。8では、レイアウトの基本としてグリッドシステムを推奨しています。グリッドという考え方は自体は好きなんです。情報が整理されるので。情報量が多いアプリやWebには必須だと思います。8の新しいユーザーインターフェースはグリッドシステムをベースにしながら、パネルを使った情報の見せ方など、OSとして独自の方向性を提案しているのが面白いですね。開発段階では、まだリリースされていないOSでありUIだったので、どこまで独自性を盛り込んだらユーザーさんにとって使用感が良くなるか、判断しづらかったんです。自分たちの価値観として提案はできるけど......。――まだ新しいユーザーインターフェース自体、ユーザーさんの反応が分からない段階でしたからね。できるかぎり今のWeb版を新しいユーザーインターフェースに最適化しつつ、ミニマムでシンプルなものを提示することを最優先としました。逆に、独自の見せ方は極力抑えています。ユーザーさんは、ページ自体と、ブックマークコメントが見たいんじゃないかと。その2つを押さえようと考えました。あとから削るのは難しいので、最低限、必要なものを、と心掛けました。Studioに触れる――エンジニアリングのお話も聞きたいと思います。8、結構面白そうだなと思って、以前から個人的に調べていたんです。はてなでやろうと決まったときも、そんなに戸惑うことはなかったです。8の新機能「コントラクト」にも対応。8の全体的な思想ですね。僕は前から、ノートPCで画面にタッチできればいいなと思っていたんです。デスクトップPCならマウスとキーボードで不便はないけど、ノートPCならちょっと「OK」って言いたいときにタッチしたい。キーボードも使いたい。キーボードとマウスとタッチを統合しようという思想は面白いなと思いました。――実際に開発していく上では、いかがでしたか。JavaScriptで作れるので、技術的な障壁は低かったです。違いがあるとすれば、Web上だとページ遷移があって、ページ遷移のたびにサーバとデータをやり取りする。クライアントアプリだと、アプリ自体はそこにあって、ページ遷移するときも実際は1つのHTMLファイルに別の要素を入れていく仕組み。Ajaxを使っている人だと慣れていると思いますが、僕はあんまり慣れていなかったので苦労しました。モックレベルのデザインを作ったのはだいぶ前ですね。プロジェクトのフェーズによってデザインは二転三転しているので......。現在のデザインに落ち着いたのは開発が始まってからです。Studioも使えました。Studioの機能をあまり使いこなせていないということは、使いながら感じていました。8アプリを作るときに便利な機能をまとめたヘルプなどがあるとうれしいです。Studioは初めてという方が多いと思いますので、そこは何かしらサポートする機能があるといいですね。ページコントロールについてなんですが、別のページを読み込むときに、iframeの中にページを読み込むような感覚で使えることは使えますよね。実際は読み込む先のCSSやScriptタグが現在のページに埋め込まれるので、iframeの中に読み込む感覚で使ってしまうと、意図せず読み込む先のCSSやScriptが適用されて、意図しない動きをしてしまう。いう、ドキュメントには書いていないけど、実際に動かしてみると思ったのと違う動作をしてしまう、というのが結構ありました。JavaScriptのソースコードを読んで、ああ実際はこういう挙動をしているんだ、と確認しながら開発していました。Studioに付属しているBlendというツールはJavaScriptを動かしながら、動きをチェックできますよね。あれは良いと思いました。僕は大抵、MSDNを見ているので、そこにまとまっているとうれしいですね。8の新しいユーザーインターフェースは「コンピュータデバイスはすべてタッチになる」という考えから――先ほどもデザインのガイドラインの話が出ましたが、今回マイクロソフトさんはかなりしっかりとガイドラインを打ち出していますよね。ガイドラインという言葉は、日本語で指針や指標という意味です。ガイドラインに100%沿っていなければ審査に通らない、ということはありません。ガイドラインを下地にして、独自のデザインや表現をどう出していただくかがポイントです。――春日井さんがUIやUXで「これは」と思ったアプリがあれば、教えてください。Flow」というカクテルのレシピアプリが参考になると思います。8のグリッドに従ってレイアウトすると四角い箱がただ並べられることが多いんですが、このアプリはグリッドシステムをベースに一貫性のある美しい動きを演出しています。カクテルって、そもそも見ていて楽しい飲み物なので、レシピだって美しくないと、ユーザーは「カクテルを楽しむ」という体験をしようと思わないですよね。UXを届けるというのは、そういうことだと思います。グリッドを使っているんですが、それっぽくない。見る人が見て初めて、グリッドが引かれていると分かる。ユーザーにとってはグリッドなんて関係ないですから。8は完全にタッチコントロール前提で作られているように思います。8はタブレットのようなデバイスに最適化したOSだ」ということなのか、それとも「ノートPCもタッチが当たり前になるから、そのためのOSだ」ということなのでしょうか。これからのあらゆるコンピュータデバイスは、すべてがタッチに対応したディスプレイを持つことになると考えています。スマートフォンやタブレットはタッチによる操作が前提ですよね。物理的なボタンを押していた切符の券売機も自販機もタッチ化が進んでいますし、飲食店のメニューもタッチ化し始めています。――券売機や飲食店で見かけることは増えましたね。デジタルサイネージも、いまは情報を受け取るだけのディスプレイですが、タッチで能動的に情報を引き出すことができるようになるでしょう。いま「パソコン」と呼ばれているデバイスがタッチに対応することは、必然的ともいえます。8のスタート地点です。8には、おなじみのデスクトップもちゃんとある――なるほど。いえ、キーボードとマウスが向いている業務もあります。プログラミングしたり、PhotoshopやIllustratorを使ったり、Wordで文章を書いたり。いま世の中にあるパソコンはキーボードとマウスを前提としたデバイスですから、これがいきなり全部タッチだけの操作になったら大混乱ですよね。その意味では今は過渡期といえます。8にはデスクトップと呼ぶこれまでのWindowsとの互換性を保つUIもあって、これからの操作体系であるタッチUIと共存させているのです。――nobuokaさんは先ほど「ノートPCもタッチしたい派」だと話していましたが、akawakamiさんはいかがですか。私も、あらゆるデバイスはタッチになっていくと思っています。情報端末に限らず、プロダクトのコントローラーや入力装置なども含めて、そういった方向もあり得るかなと。機能ごとにハードウェアのインターフェースを作るより、汎用的なタッチパネル上に仮想インターフェースを構築するほうが合理的ですよね。ソフトウェアの書き換えだけで違うものを作り出せるし、変更やアップデートも柔軟にできるわけですから。8と絡めつつ、ご意見をお聞かせいただければ。実際にアプリを開発していて、1つ気になったことがあります。8の新しいユーザーインターフェースは、左から右へ、というスタイルで、これはやっぱり英語圏の発想だなと。――横書きの発想だと。アプリやWebでさまざまな表現が可能になってくると、情報の見せ方も多様になってくると思うんです。その中には当然、国や文化独自のフォーマットもあり得るわけで。「日本語は縦書きで読みたい」というようなニーズですね。――縦書きほしいですよね。日本語の縦書きは、情報が右から左へ流れていきます。これを左から右へスクロールするUIでどう表現するのか。縦スクロールの場合は、上から下へという流れである程度固定されているので、さまざまな文化的作法を汎用的に吸収してきたけど、スクロールの方向を横向きにしたことによって、この辺の問題が一筋縄ではいかなくなってくる気がしますね。8の新しいインターフェースでは、これまで以上に、国や文化固有のノウハウが重要になってくるのかもしれません。グローバルで考えると、どうしても英語圏が多いので、ある意味では仕方ない部分ですね。EPUBでも縦書きの話はホットです。私自身、小説をよく読むんですが、横書きで小説を読む気にはなれないですし。――市場規模を考えると理解はできますが......。独自の文化性は大切にしなければなりません。グローバリゼーションの名の下にすべてが均一化されるのは正しくない方向だと感じています。右から左へ、巻物のように文字を読ませるUIがあっていいのではないか。Windowsストアの審査でNGだって言われたら、断固として本社と戦います。開発する上で、デザイナーほど大きく何かが変わるわけではないとは思うのですが。確かにタッチはインターフェースの話なので、エンジニアが触るアプリケーションの奥の方は変わらないですね。いえ、ユーザーに見せる部分、ユーザーとのインタラクションもエンジニアリングにおいて重要なのは事実です。――エンジニアリングとデザインの領域はどんどん重なっていってますね。ユーザーがオブジェクトを触って何かを動かしたとき、ちゃんと追従するか、ユーザー体験として直感的かというのは、エンジニアがしっかり考えないといけないことだと思います。実はタッチインターフェースも終着地点ではないと思っています。これから、さらに進んだ形、デバイスを介さずに直接操作するナチュラル・ユーザーインターフェース(NUI)が利用される場面が増えてくるでしょう。PCのデバイスとしても利用できます。国内の病院でもすでに導入されていますが、スペインの病院にはKinectを使った手術の事例があるんですよ。お医者さんは手術室で、レントゲンの写真をチェックしながら手術を進めます。自分でコントロールするわけにはいかないので、これまでは助手の方などに口頭で指示してコントロールしていました。これを、Kinectのモーションセンサーで動かす、という事例です。――ああ、手でジェスチャーするだけで。手をかざせば次の写真が見られる。別のジェスチャーで戻すこともできる。この他、Kinectでロボットを動かす実験なども始まっています。NUIの次に来るのは、ブレイン・マシン・インターフェース(BMI)。これが最終地点だと思うんですが、要するに人が「念じて動かす」というインターフェースですね。SFっぽい!――念じて動かせる時代、早く来てほしいですね......。本日はありがとうございました。8アプリの作り方も公開しましたので、あわせてご覧ください。8の新しいUI/UXを体験し、アプリを開発してみてください。搭載VAIOをプレゼント!※キャンペーンは終了しました。たくさんのご応募、ありがとうございました。Proを3名様にプレゼントします。応募方法は、この記事をはてなブックマークに追加するだけ。「J-MOTTO」を使いこなして組織力を高める秘訣を円相フードサービス・武藤社長に聞いてみた円滑な組織運営に役立つグループウェア。スケジュール管理やタスクの共有、ワークフローの仕組化など、その用途は幅広い。人生で一番高い買い物となることが多い「マンション購入」。安いの?」と判断に悩んだことがあるのではないでしょうか。Stickなど、商品は数十万種類以上Amazon.co.jpは7月10日(月)午後6時から7月11日(火)午後11時59分まで、Amazonプライム会員向けのセール「プライムデー」を開催します。期間中は数十万種類以上の商品が特別価格に。どれだけ役立つのかカメラマニアが試してみましたフリーライターの山田井ユウキです。僕はカメラ好きでして、機材をそこそこたくさん持っています。エンジニアの働き方を追求する及川卓也さん×ランサーズ、怒濤の「2万字」座談会プロフィールはてなニュースです。Web・ITに関する話題を分かりやすく紹介します。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。