#devlove iaシンキングによるモバイル再設計

72
by Nomadic Lass IA ŎŽŅŽŇĦijĶűŢĽŹHt TAKASHI SAKAMOTO @bookslope 2014/03/02 mobile web site re-design with IA thinking

Upload: takashi-sakamoto

Post on 11-Aug-2014

17.038 views

Category:

Design


7 download

DESCRIPTION

2014年3月2日 (日) に開催した DevLOVE ワークショップ「IAシンキングによるモバイル再設計」で使用したスライドです。 IAシンキングによるモバイル再設計 - DevLOVE http://devlove.doorkeeper.jp/events/9020

TRANSCRIPT

Page 1: #DevLOVE IAシンキングによるモバイル再設計

by Nomadic Lass

IAŎŽŅŽŇĦijĶűŢĽŹH�t

TAKASHI SAKAMOTO @bookslope2014/03/02

mobile web site re-design with IA thinking

Page 2: #DevLOVE IAシンキングによるモバイル再設計

�­13:30

ŇŹžŧżžņ14:15

ŇŹžŧżžņ�15:30

öV・øÚ16:30

{�17:30

#1 #2

#3

Page 3: #DevLOVE IAシンキングによるモバイル再設計

;CŌĽśħ7�ĹMÍėĶ

ŵžōžC=Ĺ�tėĶ

'Ĝĥ!pČĴ�tėĶ

#1

#2

#3

Page 4: #DevLOVE IAシンキングによるモバイル再設計

�­

ŇŹžŧżžņ

ŇŹžŧżžņ�

öV・øÚ

{�

#1 #2

#3

13:30

14:15

15:30

16:30

17:30

Page 5: #DevLOVE IAシンキングによるモバイル再設計

����K?6_/�.)-'�4`9

J:GX0��/*+2D]Y`@[_3

��,2-10�(

@_9_;ģĨ

;ÀĹ�ðĕ7�Ĺ,oyĕĜĉĊĢ��ı�bĹDĴČĦĕā'Ĝĥ7�ħxÇB`ĹÐÙėĶđģĂ

IA

Page 6: #DevLOVE IAシンキングによるモバイル再設計

��

��

$�

RAY4^K?6_

NR<`@[_K?6_

6_E\:@[_K?6_

��#&

6_E`S7`BK?6_

�K?6_

=_J_I��

�4`9J:GX

Z`?`O`C�

>6L0��

"��

Page 7: #DevLOVE IAシンキングによるモバイル再設計

Ĥĺĥ7�čćĵāěķĨĥĚČæû�ġĶđģ

Page 8: #DevLOVE IAシンキングによるモバイル再設計

æûČĴ'Ĝĥ!pĹ©1ėĶđģ

Page 9: #DevLOVE IAシンキングによるモバイル再設計

űŢĽŹĦċĐĶ7�ĻžŅřņŖŲ

ŵžōžZÿħÐ�y

ŌĽśÐ�ħ�t

ŊŽřŽŘÐ�ħ�t

ŏŲžŞžŮŗŧĢħ,oy

��ţŔžŽħ�6

źĽĻľśĦċĐĶ�tBÈ

ŘžŹ・ŰœŗŜ

Page 10: #DevLOVE IAシンキングによるモバイル再設計

ŵžōžZÿħÐ�y

Őřžŏ

ŵžōž

ŊŽřņŐś

ŤŏşŐ

ĻņŎŶŽ

ŀűžŎŶŽ

ŧŻŒŐ

ŐřžņūŹŕž

¨±ıYJ

ŤŏşŐ@#

C=ŧŻŒŐ

+7・��・âÄ

ŏŲžŞžŮŗŧĢħ,oy

Page 11: #DevLOVE IAシンキングによるモバイル再設計
Page 12: #DevLOVE IAシンキングによるモバイル再設計

ßÆ

űŢĽŹĦċĐĶ7�Ð�ţŔžŽ

V�

þ¼T

ŔŦŤŴž��

šŦ�Őŭžņ��

ŮśŸŶžŎŃ��

��ţŔžŽħ�6

ťļŹŔŤŴž

åOÌ

Û¸ 

Page 13: #DevLOVE IAシンキングによるモバイル再設計

���ŔŦŤŴž ���ťļŹŔŤŴž

£�ħ7�¯ĹŔŦ�ĵÓĊĢV� G�FfĢ£ĪÓĊV�ĕĜİħ

V�

Page 14: #DevLOVE IAシンキングによるモバイル再設計

���ŔŦŤŴž ���ťļŹŔŤŴž

£�ħ7�¯ĹŔŦ�ĵÓĊĢV� G�FfĢ£ĪÓĊV�ĕĜİħ

V�

Page 15: #DevLOVE IAシンキングによるモバイル再設計

���šŦ�Őŭžņ ���åOÌ

�Ġħ�FČĴāēĭĔĭĥCĎ�ĦßÆėĶİħ

�Ġħ�FfĦāēĭĔĭĥ7�ĹV�ĕĜİħąßÆĕĥĈĆ

ßÆ

Page 16: #DevLOVE IAシンキングによるモバイル再設計

���šŦ�Őŭžņ ���åOÌ

�Ġħ�FČĴāēĭĔĭĥCĎ�ĦßÆėĶİħ

�Ġħ�FfĦāēĭĔĭĥ7�ĹV�ĕĜİħąßÆĕĥĈĆ

ßÆ

Page 17: #DevLOVE IAシンキングによるモバイル再設計

��ŮśŸŶžŎŃ ��Û¸ 

\ķ/ĦĥğĜÐ�ħİħ d/Ð�ĹİĠİħ

þ¼T

Page 18: #DevLOVE IAシンキングによるモバイル再設計

��ŮśŸŶžŎŃ ��Û¸ 

\ķ/ĦĥğĜÐ�ħİħ d/Ð�ĹİĠİħ

þ¼T

Page 19: #DevLOVE IAシンキングによるモバイル再設計

űŢĽŹĦċĐĶŊŽřŽŘÐ�ħ�t

�Ńŷů

��°c

źĽĻľśĦċĐĶ�tBÈ

Page 20: #DevLOVE IAシンキングによるモバイル再設計

ŐņŸžŽŌĽő" ŐņŸžŽŌĽő-

Page 21: #DevLOVE IAシンキングによるモバイル再設計

ŵžōžĽŽŔžťĿžŐĀĀţŔžŽ

NR<`@[_ ŰĽŽ�FıěħŰŞŴžV�ţŔžŽ

S8`W ŌĽŽĽŽı�ýāŖĿŗņĻľśĥĤħV�ţŔžŽ

J`T^・]BL VıŸŐśā�]ÁĎŸŐśħV�ţŔžŽ

%�・D`L・S5^E řŅŐśñÊģěħP»ā£ĪÓĊıñÊg_ĢħãĵüĮV�ţŔžŽ

I`^ ŘžŹŢžıĻņŎŶŽŬŔŽħV�ţŔžŽ

;\S ¡ŇŷťıçŇŷťāŚžŔĹİģĦĕĜŇŷťV�ţŔžŽ

!� űžŕŹľļŽŜľıŢŹžŽāŖŗŧŐV�ţŔžŽ

S5`MPH:・4S8`F_B źŐŭŽŐħV�Ģŀŷžıº�ħV�ţŔžŽ

V^U ńĽŜıŊžŖāŘĻžĥĤħV�ţŔžŽ

4_GQE`_ ţŔžŽĦOġĨĭĴĥĈV�ţŔžŽ

10

1

2

3

4

5

6

7

8

9

10

Page 22: #DevLOVE IAシンキングによるモバイル再設計

ŝŤʼnžŎŶŽ

Page 23: #DevLOVE IAシンキングによるモバイル再設計

ťŁžů

Page 24: #DevLOVE IAシンキングによるモバイル再設計

řžŦŹ・ŸŐś

Page 25: #DevLOVE IAシンキングによるモバイル再設計

ñÊ・œžś・ťļŹŔ

Page 26: #DevLOVE IAシンキングによるモバイル再設計

ŘžŹ

Page 27: #DevLOVE IAシンキングによるモバイル再設計

Ňŷť

Page 28: #DevLOVE IAシンキングによるモバイル再設計

Ø©

Page 29: #DevLOVE IAシンキングによるモバイル再設計

ťļžŜŢŗņ・ĻťŁžŕŽŐ

Page 30: #DevLOVE IAシンキングによるモバイル再設計

ŨŹŧ

Page 31: #DevLOVE IAシンキングによるモバイル再設計

ĻŽŖţŔžŽ

Page 32: #DevLOVE IAシンキングによるモバイル再設計
Page 33: #DevLOVE IAシンキングによるモバイル再設計

űŢĽŹĦċĐĶ7�ĻžŅřņŖŲ

ŵžōžZÿħÐ�y

ŌĽśÐ�ħ�t

ŊŽřŽŘÐ�ħ�t

ŏŲžŞžŮŗŧĢħ,oy

��ţŔžŽħ�6

źĽĻľśĦċĐĶ�tBÈ

ŘžŹ・ŰœŗŜ

Page 34: #DevLOVE IAシンキングによるモバイル再設計

ªä5 min

Page 35: #DevLOVE IAシンキングによるモバイル再設計

�­

ŇŹžŧżžņ

ŇŹžŧżžņ�

öV・øÚ

{�

#1 #2

#3

13:30

14:15

15:30

16:30

17:30

Page 36: #DevLOVE IAシンキングによるモバイル再設計

ŇŹžŧ.Đ6名1グループ = 5グループ

Page 37: #DevLOVE IAシンキングによるモバイル再設計

Â�ħŚŐņśŗŧŌĽśĹűŢĽŹêíėĬďā7�ħ�SĹCĈ��ĦÞğĜŚōĽŽĹxÃĕġďĝēĈ

řļŗŧşŐħŌĽś�ăţžœŝŹśźžŞŽŇĄŪžŏ

Page 38: #DevLOVE IAシンキングによるモバイル再設計
Page 39: #DevLOVE IAシンキングによるモバイル再設計
Page 40: #DevLOVE IAシンキングによるモバイル再設計

;CŌĽśħ7�ĹMÍėĶ

ŵžōžC=Ĺ�tėĶ

'Ĝĥ!pČĴ�tėĶ

#1

#2

#3

Page 41: #DevLOVE IAシンキングによるモバイル再設計

Â�ħŚŐņśŗŧŌĽśħï^7�ĹMÍėĶĜįā7�Ĺ.áĕġďĝēĈĂěħµĦā¤jČĴQĶħĢĨĥďā"Ďĥj.ČĴ.®ĕġĈďđģčW!ĢėĂ

1ê¥�Fħ7�Ĺ.áĕāĥĦčÅĭķġĈĶČMÍĕġďĝēĈĂĭĜāĤĉĈĉwĸķBĹ$LĕġĈĶČæûĢÐĸĥĈħĢāe\ĕġďĝēĈĂ20 min

Page 42: #DevLOVE IAシンキングによるモバイル再設計

æû� W1

Page 43: #DevLOVE IAシンキングによるモバイル再設計
Page 44: #DevLOVE IAシンキングによるモバイル再設計

1

2 3 2 3

Page 45: #DevLOVE IAシンキングによるモバイル再設計

1

2 3

ŇŻžŢŹŝŤʼnžŎŶŽ

ŻžŃŹŝŤʼnžŎŶŽ

ŊŽřŽŘ

1

2

3

Page 46: #DevLOVE IAシンキングによるモバイル再設計

ņŻůijĵİŊŽřŽŘĹ��ēęĶ

Page 47: #DevLOVE IAシンキングによるモバイル再設計

źŐŭŽŎŦľĿŦŚōĽŽţŔžŽ

Page 48: #DevLOVE IAシンキングによるモバイル再設計

ŊŽřŽŘĽŽũŽśŸ

�|żĽųžťźžů

řŅŐśqħÐ��t

ŷĽŝžŚōĽŽ

ŦźĽņŭĽŽśħ�L

ŦźĽņŭĽŽśóħŚōĽŽ

����ŚōĽŽŧŻśŔĽŧ

ŧŻśŔĽŧħŐŝŗŧŎŶŗś

0{qŧŻśŔĽŧ

R2ģńĽŜŷĽŽI3

Page 49: #DevLOVE IAシンキングによるモバイル再設計

;CŌĽśħ7�ĹMÍėĶ

ŵžōžC=Ĺ�tėĶ

'Ĝĥ!pČĴ�tėĶ

#1

#2

#3

Page 50: #DevLOVE IAシンキングによるモバイル再設計
Page 51: #DevLOVE IAシンキングによるモバイル再設計

�ýziĐ³+ziĐ

ţžœŝŹśźžŞŽŇģĨ ŻŇĽŽ

V�!´ČĴŵžōžŞžőĹDĴČĦėĶ

ŰŞŴžħĒÕË

Zÿzħv

ţžœŝŹśźžŞŽŇÒ¬

Page 52: #DevLOVE IAシンキングによるモバイル再設計

�ýzĨ#nŌĽśčćĶĜįā��ýzą'½ŵžōžĆħĮĹŔžʼnŗśĦ¾'ĕĭėĂĤĉĈğĜ7�Ĺ¹Nėķĩāijĵ��ýzĦ«}ĹuğġİĴĊĶĢĕIJĉČ�

2��ýzħ7�ČĴāŎŝŸł�ŐśžŸžĹI3ĕāěķĦ�!ĝģ�ĸķĶ7�ą!´ĆĹ¹NĕġāŏŲžŞžŮŗŧĹU3ēęġďĝēĈĂ

30 min

Page 53: #DevLOVE IAシンキングによるモバイル再設計

!p�S

Őřžŏ

C=�+7���

Şžő��b

ŔŗŖŭĽŽś

ŐśžŸž� W2

Page 54: #DevLOVE IAシンキングによるモバイル再設計

ŵžōž]

0lÜ�č�ĞġÔàİôĦĥğġĎĜĐĤā&.ĝĐĢĨ÷ČĥĈđģčĸČğġĈĶħĢāţžœŝŹśźžŞŽŇĹñ²%Ă�!

k4ĨL*ĦĨĈĠİëÖĢĎĶħĢāëĵ:ĦćĶŏůĦaċĉČģ�Ã%Ă&.Ģ¦SĹėĶBĝčāĥĦĹ�ĬĜĴõęĶČĸČĴĥĈĂĽňŰŽ Ďħ��ò��Ă

Page 55: #DevLOVE IAシンキングによるモバイル再設計

!p�S

Őřžŏ

Şžő��b

ŔŗŖŭĽŽś

ŐśžŸž� W2

C=�+7���

ÝB &Ö

ċ)ĥ7�Ĺ>ĵĜĈ ZÿÎüĮĹĕĜĈ

ŐŮū� ŐŮū

?�ČĴŰŗŒčÑĈĜ�

Page 56: #DevLOVE IAシンキングによるモバイル再設計

ªä10 min

Page 57: #DevLOVE IAシンキングによるモバイル再設計

�­

ŇŹžŧżžņ

ŇŹžŧżžņ�

öV・øÚ

{�

#1 #2

#3

13:30

14:15

15:30

16:30

17:30

Page 58: #DevLOVE IAシンキングによるモバイル再設計

;CŌĽśħ7�ĹMÍėĶ

ŵžōžC=Ĺ�tėĶ

'Ĝĥ!pČĴ�tėĶ

#1

#2

#3

Page 59: #DevLOVE IAシンキングによるモバイル再設計

I3ĕĜŏŲžŞžŮŗŧĹİģĦāěħh9ĦċĐĶűŢĽŹħ�FĹ�tĕġďĝēĈĂ

3 ĈĠ・[č・ĤħijĉĦwĉħČāĹ�Sĕġā�F�tĦ�×ĕġďĝēĈĂ

20 min

Page 60: #DevLOVE IAシンキングによるモバイル再設計

æû� W3

Page 61: #DevLOVE IAシンキングによるモバイル再設計

!p�S

Őřžŏ

Şžő��b

ŔŗŖŭĽŽś

ŐśžŸž� W2

C=�+7���

ÝB &Ö

ċ)ĥ7�Ĺ>ĵĜĈ ZÿÎüĮĹĕĜĈ

ŐŮū� Šžś��

?�ČĴŰŗŒčÑĈĜ�

Page 62: #DevLOVE IAシンキングによるモバイル再設計

æû�� W4

** *

Page 63: #DevLOVE IAシンキングによるモバイル再設計

ªä? min

Page 64: #DevLOVE IAシンキングによるモバイル再設計

�­

ŇŹžŧżžņ

ŇŹžŧżžņ�

öV・øÚ

{�

#1 #2

#3

13:30

14:15

15:30

16:30

17:30

Page 65: #DevLOVE IAシンキングによるモバイル再設計

A

F

J

F

K

L

F

D

H

G

I

J

M

N

E

B

C

æû��ŻŇĽŽč~JĦćĶĜįā#niĐĦÎĕüĮĹéıěĉģĕġĈĶ

ţžœŝŹśźžŞŽŇģĨ

ţžœŝŹśźžŞŽŇħ�Ġħrì

ţžœŝŹśźžŞŽŇħXķ

ţŽďĘ

Żŋ ŰŞŴž

ţžœŝŹśźžŞŽŇħXķ

đĺĥBĦłŐŐŰ�

ēĴĦđĺĥđģİ,(�

ŻŇĽŽ

ŻŇĽŽ

ŻŇĽŽ

ŅžŤŏŴĻŹ

8ŌžŤŐ

łŽŷĽŽţžœŝŹśźžŞŽŇ

ŔĽśŹ

ŔŦ

W1

Page 66: #DevLOVE IAシンキングによるモバイル再設計

A

E

C

B Z

ŅžŤŏŴĻŹ

��ŌĽśīŰŞŴžŻŋ

D ŔĽśŹ

F ŻŇĽŽ

G ŔŦ

H

ţžœŝŹśźžŞŽŇģĨ

I

ţžœŝŹśźžŞŽŇħ��Ġħrì

J

ţžœŝŹśźžŞŽŇ�ħXķ

F ŻŇĽŽ

K

đĺĥBĦłŐŐŰ�

L

ēĴĦđĺĥđģİ,(�

F ŻŇĽŽ

N

łŽŷĽŽţžœŝŹ�śźžŞŽŇ

M

8ŌžŤŐ

Page 67: #DevLOVE IAシンキングによるモバイル再設計

ŐśžŸž

ÝBā?�ČĴŰŗŒĢŏůħţžœŝŹśźžŝžħŅŲŽŪžŽ7�ŧĈĜÉ<Ĩā«}ĹuĞëĵħEKĢşŗśĢ�ĬġĮĶĂ�!

sČĴQķĩĈĈħČĸČĴĥČğĜčāģĵćĊĘśźžŝžħ�5ģYJĝĐŖĿŗņĕġāëğġZÿÎüĮĹĕġĮijĉģ�ĉĂ

Page 68: #DevLOVE IAシンキングによるモバイル再設計

!p�S

Őřžŏ

Şžő��b

ŔŗŖŭĽŽś

?�Ħ¢�ĕĜĈ

śźžŝžĹQĜĈ

ŏůħYJĹ>ĵĜĈèAıZÿ·Ĺ>ĵĜĈ

śźžŝž�5ħï^

ŐŮū

ŐśžŸž��śźžŝžħ�5ģYJĝĐŖĿŗņĕġāëğġZÿÎüĮĹĕġĮĶĂ W2

C=�+7���

èAıZÿ·ħï^ ���ąŎĿĻĆ@(�ùŮŗŧħï^����

ëÖ*�EKÝB &Ö

ċ)ĥ7�Ĺ>ĵĜĈ ZÿÎüĮĹĕĜĈ

ŐŮū�

ŅŲŽŪžŽ7�ħï^ ZÿÎüĮīħØ©

ŐŮū

śźžŝžčQĜĈ�?�ČĴŰŗŒčÑĈĜ�

ģĵćĊĘmįĜĈ�

Page 69: #DevLOVE IAシンキングによるモバイル再設計

æû��śźžŝž�úĹ�5ĢîĈ"Ďďï^Ă�ùŮŗŧİV�ĕĜĉĊĢāZÿÎüģ¢�Ĺ�¶ĕĜĂ W3

ĨĖįġħBiĐ�ŅŲŽŪžŽ

lďħ�ùĹÏė

���ŎĿĻ

łŽŷĽŽţžœŝŹ�śźžŞŽŇ

ţžœŝŹśźžŞŽŇ

ŧŻŇŷů�ŌžŤŐ� �ţžœŝŹśźžŞŽŇ

8ŌžŤŐ

ZÿÎüĮ

¿ĕďQĶ

èA・Zÿ·

đĺĥśźžŝžč�©

śźžŝž śźžŝž

śźžŝž śźžŝž

4

5

6

1

2

3

Page 70: #DevLOVE IAシンキングによるモバイル再設計

ĨĖįġħBiĐ�ŅŲŽŪžŽ

ţžœŝŹśźžŞŽŇ

ŧŻŇŷů�ŌžŤŐ� �ţžœŝŹśźžŞŽŇ

¿ĕďQĶ

èA・Zÿ·

đĺĥśźžŝžč�©lďħ�ùĹÏė

śźžŝž śźžŝž

śźžŝž śźžŝž

lďħ�ùĹÏė

���ŎĿĻ

ZÿÎüĮ

łŽŷĽŽţžœŝŹ�śźžŞŽŇ

æû��śźžŝž�úĹ�5ĢîĈ"Ďďï^Ă�ùŮŗŧİV�ĕĜĉĊĢāZÿÎüģ¢�Ĺ�¶ĕĜĂ W4

ëÖ*�EK*ÝB* &Ö*

Page 71: #DevLOVE IAシンキングによるモバイル再設計

�­

ŇŹžŧżžņ

ŇŹžŧżžņ�

öV・øÚ

{�

#1 #2

#3

13:30

14:15

15:30

16:30

17:30

Page 72: #DevLOVE IAシンキングによるモバイル再設計

by Nomadic Lass

THANK YOU!

TAKASHI SAKAMOTO @bookslope2014/03/02