際際滷

際際滷Share a Scribd company logo
モバイル鬚吋稀`ビス/アプリで
   UXを互めるには

 スマ`トフォンΕ皀丱ぅEXPO
     2012/10/24
スピ`カ`B初
魃 合匯
シグマコンサルティング幄塀氏芙
旗燕函叨
Micorosoft Windows Azure MVP
Sitecore CMS MVP
クラウド旋喘容MC \嗄T

クラウド、CMSをベ`スとして、サ`ビスの_kに愱臓
クラウドでは、麿の二Iとf薦しての仟ハI_k。
CMSでは、サイトコアを試喘して寄トサ`ビスをB。
サ`ビス_kにUXのQ泣は駅並なので、
晩?僥んでいる。

http://www.sigmact.com/
噸粁やっているお碧並

クラウドを試喘した仟ハIやシステム、サ`ビスB

http://www.microsoft.com/japan/windowsazure/windowsazure/



bUフォト
http://photo.sankei.jp.msn.com/
ハイエンドCMSで砿尖する寄トサイト

サ`ビスをお人さまと20殻業\
云をきました。
http://www.amazon.co.jp/dp/4897978564/
書晩のおすすめ亟寔




39キロ貧腎からダイブ 咄堀融篤、致で弊順h
http://photo.sankei.jp.msn.com/essay/data/20
12/10/1015supersonic/

コスプレ いろいろ NYの仝Comic Con々
http://photo.sankei.jp.msn.com/kodawari/data/
2012/10/1014comic/
UXとは採ぞや




UXとは採か壅業_Jしましょう。
http://www.atmarkit.co.jp/fdotnet/chushin/uxresearch_01/uxres
earch_01_01.html
UXとは


あるu瞳┘▲廛螢羽`ションを
エンド?ユ`ザ`が聞ったHに悶Yする
仝Sしさ?伉仇よさといったプラスの湖秤々
をエンド?ユ`ザ`に戻工する、箸靴
嶷するコンセプト
UXは、
_k宀さん、
デザイナさん、
O宀さん

みんなにvSのある}です
た朕はUXの匯何にすぎない




Peter morville箆の仝Semantic Studios々のサイトにdされている
仝UXのハニカム夛々
}方の勣殆から撹される




仝The Elements of User Experience々 J. J. Garrett 2000
Windows
ユ`ザ`エクスペリエンス
ガイドライン

1.児Aとなる麼勣なシナリオ┌愁┘鵐?ユ`ザ`がプログラムを聞喘
する麼な尖喇を┯極羌弔淵轡淵螢よりも枠して耕にする
3.鵑箸覆襯罘`ザ`に仝このプログラムは$$をうまくI尖するので
喘している々といってもらえるくらい、蒙に誼吭な蛍勸を隔つ
6.嗔繁揖平の嬉ち盾けた氏のようなエクスペリエンスにする
8.採もしなくても兜豚O協でm俳に嘛するようにする
12.鬴靜圓鯱鯢呂気擦
13.朕議を惚たすことができる譴如
  恷もシンプルなデザインを朕峺す
17.プログラムを聞喘するために駅勣な坐Α岑R、房深をpらす

歌深ZOZOタウンのアプリ箭
Google
ユ`ザ`エクスペリエンス10か訳

2.ロ`ドはミリセカンドでも堀く

3.シンプルであることが恷も森議だ

4.兜伉宀にしく貧宀には帆Φ弔

5.室g醐仟にこだわる

6.弊順で宥喘するか

9.繁?の佚mを誼る
アップル
ヒュ`マンインタ`フェ`ス
ガイドライン

?あなたのアプリケ`ションのユ`ザ`颪鮹_にし、壼い粁Aでユ`ザ`の娼砲鯤椶院屎械嘛、
個措の嗤oを_Jしましょう

?ユ`ザ`が佩うであろう恬Iを苧_にし、盾裂しましょう。コンピュ`タがないh廠でのユ`ザ`の匯
Bの恬I返をそのまま庁するのではなく、コンピュ`タのみを伏かして畠恬I垢殻をいかに待
にできるかを蛍裂しましょう

?恬瞳を恬って編^しましょう。コ`ドをかずに編^することも辛嬬です

?恬瞳にするユ`ザ`の郡鬉鰉Q賀しましょう、ビデオ顔唹も措い返です。この垢殻は、房った郡
鬉誼られるまでRり卦しましょう。☆Q賀嶄に、ユ`ザ`に荷恬隈を縮えたり、初秘したりしないよう
にしましょう

?デザインのQ協rにコストをyりましょう。C嬬弖紗のたびにアプリケ`ションは詰堀晒、景寄晒、}
j晒などします

?80イ離罘`ザ`に鬉┐襯妊競ぅ鵑鬚靴泙靴腓Α20イ良麓ユ`ザ`に鬉┐茲Δ箸垢襪80イ糧砲
勣李に鬉┐蕕譴覆なります
POST PC

??なデジタル極挑
?ユ`ザ`にとってのPC、スマホ、それぞれをeで深えるのか
?スマホ仝參念は???々がない弊順、覆禄颪泙気睦っている

?紗をY原けるR宜議な方
☆爾咾 Post-PC シフトを、21旦のチャ`トで_J
http://agilecatcloud.com/2012/10/08/%E6%BF%80%E5%8B%9
5%E3%81%AE-post-pc-
%E3%82%B7%E3%83%95%E3%83%88%E3%82%92%E3%80%
8121%E6%9E%9A%E3%81%AE%E3%83%81%E3%83%A3%E3%
83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D/
デ`タで深えるPOST PC Agile_Catさんブログよりd
                   App Store を争{する、Touch Screen Web
                   サイトの撹L
                   By Kevin C. Tofel May. 12, 2010,
                   11:15am PDT
                   http://wp.me/pwo1E-1f9
                   ☆タッチスクリ`ン?モバイルにフォ`カスする、Taptu
                   というリサ`チ氏芙の恷仟デ`タによる




                         iPad を PC の匯何として麻する
                         Intomobile - October 20, 2010
                         http://wp.me/pwo1E-1Vd
                         Tablet デバイスを PC の 1つとして蛍
                         すると、2010定 及3膨磯豚の@議な
                         阜びにより、
                         Apple は Dell や HP を弖いiき、トッ
                         プ?ポジションにSり竃たことになる。
デ`タで深えるPOST PC Agile_Catさんのブログより

                   恷も識爾に撹Lしているモバイル?アプリケ`
                   ション?ストアとして、
                   Google Android Market と Microsoft
                   Windows Phone 7 Marketplace をJR。
                   Android Market が 2011定 1埖に 18
                   の撹L楕を幣したのにして、
                   WP7 Marketplace は 30 の阜び。




                    スマ`トフォン?プラットフォ`ムにvしては、
                    Google Android が 34.7% の
                    偏媼嗤楕でトップ
デ`タで深えるPOST PC Agile_Catさんのブログより




アジアは畠Webトラフィックのうちs18%がモバイルトラフィック
2了はs15%のアフリカ
天致では、モバイルトラフィックの護栽が詰い。
PCとスマ`トデバイスの`いを
個めて深えると
*鮫中I囃が倭い
?催晒
?ジェスチャ
?秤黌Oの`い

*崙s
?プラットフォ`ム崙s
?光Nセンサ`瞬愾Γ熟鬚が笋錣
モバイル鬚吋稀`ビス/アプリで
UXを互めるには


戰イドラインを岑る
撻侫讒`ムワ`クで深える
枅黌Oの`い
∠はずしてみる
戰イドラインを岑る
?iOS
?Android
?Windows8
iOS
ヒュ`マンインタ`フェイス
ガイドライン

%朕肝
?プラットフォ`ムの蒙
?ヒュ`マンインタ`フェイスの圻t
?アプリケ`ションO藺
?ユ`ザ悶Yガイドライン
?iOS UI勣殆の聞喘圭隈のガイドライン

https://developer.apple.com/jp/devcenter/ios/library/docu
mentation/MobileHIG.pdf
薦を秘れているポイント
?畠違(これがそのままUXの縮可としても聞える)
?アプリケ`ションO藺
アプリケ`ション協xステ`トメントの恬撹(i)

1. ユ`ザに挫まれる辛嬬來のあるすべてのC嬬の牢い竃し
2. 鵐罘`ザのQ協
3. 鵐罘`ザの協xによるC嬬のgりzみ
4. そこで羨ち峭まらない
☆_k垢殻畠悶を宥じてアプリケ`ション協xステ`トメント
を聞喘し、C嬬、コントロ`ル、喘Zのm栽來を_Jします。た
とえば肝のように傚冱します。
☆仟C嬬を弖紗すべきかを篇するときは、アプリケ`ションの
麼朕議と鵐罘`ザにとって音辛之か
を徭します。音辛之でなければ茅翌します
恷除の夘
?C嬬を弖紗するHに80イ離罘`ザ`を深える
?この80イ離罘`ザ`の|は(匯協楚參貧のC嬬を廾笋靴覆ぁ△任ない)
Android Design
デザインガイドライン

%朕肝
?クリエイティブビジョン
?デザイン圻t
?UI古勣
?スタイル
?パタ`ン
?UI喘の何瞳
http://developer.android.com/design/index.html
http://firespeed.org/diary.php?diary=kenz-1462   晩云U

ポイント
?ナビゲ`ションvS(これはプラットフォ`ムとしてブレがある何蛍だからか)
?和何でタブバ`を聞わないでください。
Windows8
デザインガイドライン

%朕肝
?アプリの UX のO
?鮫
?Oのガイダンス
?カテゴリ ガイド
?ケ`ス スタディ
?OのYb
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh779072.aspx

ポイント
?б罎林鮫 http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465433
☆ドキュメント畠違議に割g
いよいよ26晩に独った
Windows8
啝のB初




http://www.youtube.com/watch?v=gnCeeTHNnQ4
http://www.youtube.com/watch?v=i1GNDs7DCTw
http://www.youtube.com/watch?v=TIgbr5OVduw
撻好洫`トフォンのUXで深]
するUIフレ`ムワ`クとは
A 塘崔
B 催晒
C ジェスチャ`
D コントロ`ルとフォント
A 塘崔
プラットフォ`ムで
慌宥の何蛍、
なる何蛍を尖盾する
塘崔について(iOS)
ナビゲ`ションバ`
ツ`ルバ`、タブバ`
ツ`ルバ`について
鮫中和何に輝鮫中で荷恬辛嬬なアクションを戻幣
☆iPadの栽、鮫中貧何に崔くことが容Xされている




タブバ`について
\の嘘尚。なるサブタスクg、ビュ`g、またはノ`ド
gを俳り紋えるC嬬をユ`ザに戻工します。

?屎アプリだと仝爺檗垢箭翌殞
塘崔について(Android)
アクションバ`(メイン、トップ、ボトム)
アクションバ`について
1 アイコン 2 コントロ`ルビュ`
3 アクションボタン 4アクションオ`バ`フロ`

                        1 メインアクションバ` F壓の了崔
                        2 トップバ` タブかスピナ`
                        3 ボトムバ` アクションアクション`バ`フロ`




                                         タブ
                                         スピナ`
                                         アクションボタン


http://webnoborder.jp/iphoneandroidui/
塘崔について(Windows8)
和粁アプリバ`         嘔肇船礬`ム




アプリバ`とチャ`ムの`い
FITスキ`マに輝したらバ`に燕幣
F D Frequent(l訓)
?繁?はこの鮫中を10指_くうち7指は聞いますか
?匯違議に採業かBAして聞いますか
?飴慯犒屬淵好謄奪廚鯡い爐里牢笋任垢

I D Important(嶷勣)
?それはことさらク`ルか、セ`ルスポイントなので駅ずつけてほしい麗
ですか
?それが駅勣なのはまれなケ`スでSにする駅勣がありますか

T D Typical(灸侏)
?それは貌のアプリで匯違議に寄俳なアクションとされていますか
?繁?はアクションオ`バ`フロ`へLれると@きますか
FITに輝しないものがバ`にあっても
わかりにくい荷恬、ojな鮫中I囃の媼嗤となりがち
B 催晒
催晒による
慌宥議な尖盾
催晒について
 w卞 、冥す、 蒙羿弔淵▲ぅ灰鵝圧aの弼
慌宥かつ弊順議に噸演議なル`ル
C ジェスチャ`
タッチを嶄伉とした
ジェスチャ`
*ジェスチャ
タップ    コントロ`ルまたは朕を兀す、またはxkする┘泪Ε垢離轡鵐哀襯リックに犁隠。

ドラッグ スクロ`ルまたはパンする
頭圭の極からもう頭圭の極への卞咤。勣殆をドラッグする。

フリック┐呂犬
すばやくスクロ`ルまたはパンする。

スワイプ  1云の峺で、テ`ブルビュ`の佩に仝Delete々ボタンを燕幣し、
あるいは宥岑センタ`を┿中の貧極から燕幣する。

ダブルタップ  コンテンツブロックまたは鮫颪寄してセンタリング。
s弌する┐垢任寄されている栽。

ピンチ    ピンチオ`プンして寄する。ピンチクロ`ズしてs弌する。

タッチアンドホ`ルド   シまたはxk辛嬬なテキストで、
カ`ソル了崔で寄されたビュ`を燕幣する。

シェイク     アクションを函りす、またはやり岷す。

http://firespeed.org/diary.php?diary=kenz-1477 Android
*ジェスチャ
http://www.mobiletuxedo.com/touch-gesture-icons/




タッチ、ピンチ參翌について
タッチ荷恬のO Windows 8




?峺の湊さ
?タッチのN
?ユ`ザ`の徊(媒てるときとか)
シナリオが措く深]されている

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465415.aspx
D コントロ`ルとフォント

コントロ`ル
フォント

iPhoneのUXガイド
?コントロ`ル
?苧圧の聞い圭、湊忖
フォントAndroidには湊忖ない
枅黌Oについて

?サ`ビスの撹を苧_にする
?秤鵑侶幗を佩う
?コンテンツを夛晒する
?vB來のある秤鵑魃蹶Fする
サ`ビスの撹を苧_にする
貧了咾離汽ぅ肇泪奪廚苧_になっているか。
☆iPhoneアプリの栽は邦峠議な撹(w卞)になる。
 碧
儁のワ`ド

  碧
           匯E      レシピ
 テキスト

 カテゴリ

 }の
 レシピ

 堕s
                          CookPadの箭
          撹が苧_だとユ`ザ`
タブバ`      は痴わない
コンテンツを蛍する
LATCH - 5つの秤鵑燐尖棟
1.   Location 了崔脅祇軒he
2.   Alphabet ┘▲襯侫.戰奪硲 かな
3.   Time rg 埖e、恷仟
4.   Category ┠嶢娃
5.   Hierarchy A咤


タクソノミ、フォ`クソノミ
蛍するのはサ`ビス硲織罘`ザ`硲


MECE
もれなく、ダブりなく
コンテンツが夛晒されている並
CMS吉を聞い、コンテンツを夛晒する並によって
さまざまなデバイスでもコンテンツを燕幣でき、謹冱Zにも鬉任る。

             タイトル


     並      云猟      鮫


             晩r     耶原Y創


             鵡P宀


             カテゴリ     タグ


                    ソ`シャル
             RSS
                     ボタン
vB來のある秤鵑魃蹶Fする
スマホの栽、vB來を燕幣するのがyしい。
☆圷?、vB來はメインの秤鵑離マケ議なものとして噫易に燕幣。
☆燕FしようとするとTL議な燕幣(猟挑に原ける)になりがち。
児云となるチェックシ`トの喘吭
秤黌Oにvして、チェックシ`トをOける並によって、
ありがちな払,鮗斜gで契ぐことができる。
☆縮圄並I鬚韻離灰鵐謄鵐弔鰈撹していたHのチェックシ`トを歌深に。
∠覆鰕Г鵑罵發
?ガイドライン
?塘崔
?催
?ジェスチャ
?秤黌O
これらを委燐したうえで
覆ら翌す返隈
Clear
n}砿尖TODOアプリ
?弼を圧a尖盾議に旋喘
?ジェスチャのみで砿尖
?咄に蒙

http://www.youtube.com/watch?v=HpUOgyjG-kM




チュ`トリアルについて
SketchBookX
?岷湖議なメニュ`
?タッチ狼のお}かきアプリなので岷湖議でOK
\僅してみよう




?ガイドラインを僥ぶ(アプリケ`ション藺墺O)
?塘崔?催晒?ジェスチャ
?秤黌O(夛パタ`ン、秤鵑侶幗、コンテンツの夛晒、秤鵑礼vB來)
?翌す
\僅してみよう2




?ガイドラインを僥ぶ(アプリケ`ション藺墺O)
?塘崔?催晒?ジェスチャ
?秤黌O(夛パタ`ン、秤鵑侶幗、コンテンツの夛晒、秤鵑礼vB來)
?翌す
恷瘁に

?クラウドやCMSの寓{
クラウド愁蟋`ンスタ`トアップ、ピボット
CMS叔鵑夛晒、巷_の儻堀晒
hと編^のRり卦し


UXもビジネスモデルも、
兜指では輝たらない。
かいh編^と
栽によってPivot(圭鰛Q)が嶷勣。
クラウドやCMSはこの、hと編^のRり卦しを
指しやすいので、およびPivotが掲械に佩いやすい。
(おススメ)L紅寒孝消さん
http://www.yasuhisa.com/could/
http://www.slideshare.net/yhassy/


秤黌O、UX、ソ`シャル、およびデザイン
返隈(ペ`パプロトタイピングなど)返隈や
ヒントとなる秤鵑掲械に謹い。

☆パブ`、Kobo,Kindleで澓辛嬬。
クラウドやCMSはこの、hと編^のRり卦しを
指しやすいので、およびPivotが掲械に佩いやすい。
ありがとうございました
云セッションの音苧泣、
CMS(サイトコア)
クラウド(WindowsAzure)を試喘したサ`ビス_k
のご獗があれば、ぜひお毫Xに。

シグマコンサルティング幄塀氏芙
魃捷舍
K1.hashimoto@sigmact.com
http://www.sigmact.com

More Related Content

K1hash20121024