thinking backwards: モバイルデザインと情報アーキテクチャの課題

58
ōľěŕķĪěřĆQęŚģĶĤijŎĊ¦w Thinking Backwards #ugf0308 by matley0 TAKASHI SAKAMOTO 2014/03/08

Upload: takashi-sakamoto

Post on 27-Jan-2015

107 views

Category:

Design


0 download

DESCRIPTION

2014年3月8日 (土) に開催したセミナーイベント「アップグレードふくい+ for the WEB」で講演したセッション「モバイルデザインと情報アーキテクチャの課題」で使用したスライドです。 アップグレードふくい+ for the WEB http://ugfplus.fisc.jp/

TRANSCRIPT

Page 1: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ōľěŕķĪěřĆQ�ęŚģĶĤijŎĊ¦w

Thinking Backwards

#ugf0308

by matley0

TAKASHI SAKAMOTO

2014/03/08

Page 2: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

Ö]¹»

@bookslope

ĥœŁĚĴĤķĪěĺŚKc�

��O�ļĴĸěŏŚĥŕŚŃ�d�

ķĬıŕʼnŚĦĶĚřĥĞŚĬĝřīŚ�

Q�ęŚģĶĤĸ��"ķĪěĺŚ�

�����(3�¥·Ä���

����.23+343(���5�����"���=��

�0(.��ŃŗĬĝĤĸ�

ÌÓ・�§�

F�éōľěŕ��īřģřĥêĎó

Page 3: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

9\?AķĪěřĉ±ăïÿæQ�ęŚģĶĤijŎĊGÃĉò÷ĖİŔŐŚīŒřĘ�ÅýĖÿđĊTvç

Hi@iB

U¾Ę�ÜüQ�ĘB��üÿðñą�7ē¦wĘZĔóĉüæ@ÿĈQ�Ċ�ÅXvĘÊÍýĖùĆç

IA

Page 4: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 5: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 6: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ĺŀħŚīŒř

ĺŀħŚīŒř

Page 7: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

Navigation SecondĺŀħŚīŒřįġřĹ

Page 8: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 9: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 10: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

5

3

2

4

6

1

Page 11: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

1

4

6

Page 12: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

6

4

1

Page 13: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 14: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

Responsive Web DesignʼnŕijķľěĭĊŖěęĜĸĿıŚř

Page 15: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 16: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

@jZIb:g

`Wbj

DiRiQ

`Wbj

fiA

`Wbj

hE

Page 17: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 18: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ĨřĶřĵěřńřĸŔ

¤�ŘěŏŚŁŖŚŋ

Ķģĭĸ�ĊÊ¢��

e<VjSG<i

łŖěĤňěřĸĊ�b

łŖěĤňěřĸÞĊķĪěř

����ķĪěřŃŗĸıěŃ

ŃŗĸıěŃĊĭĺĴŃīŒĴĸ

I��ŃŗĸıěŃ

hLĆĢěĹœěř`M

Page 19: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

by Kuteken

Page 20: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 21: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

8

3

2

4

9

1

5

6

7

Page 22: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

� ������������3$'$��+,$14�#/4�4%(��))+&+$-��*$..(-ĉĄŃŖŊęĨřĶřĵôßèęĴŃë

Whats New

New Release

Universal Music japan

Movie

宇多田ヒカル 3

21

6

5

7

4

Links

Page 23: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

>DHJR_-

]hNAT-

Page 24: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ĞĨīĭĶŋĆċæúďûďĈĒĊćðüĊj½°«ēÉ�ãºĊùĆąýçùĊo}æRĩŚŀĭĆĊj½ãºĘgÿo}Ę�üďýç

>DHJR_-Ćċ

Page 25: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ŃŗIJĤĸĆċùĊo}!(%ŅŚĬĘ�üďýçüÿôāĄùĊo}æþĊ!(%ŅŚĬÙpĀ÷Ęnĕ;øĄgÿo}Ę�üďýç

]hNAT-Ćċ

Page 26: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

FjZJSG<i]hNATSG<i

・ĭĶŚĤņŕIJŚʼnĴŃ�・ĬŎŚĻŚʼnĴŃ

・ĩěĸēęŃŔ�・Ú�

Page 27: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

FjZJSG<i�

]hNATSG<i�

Page 28: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

1547����

Page 29: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ōľěŕĉò÷ĖQ�ęŚģĶĤijŎ

cjGj�.6$��

F<T$�6��

DiRiQ$�6��

ĬŎŚĻŚʼnĴŃąĊB��

��ĿıŚřĊ¡P

ŖěęĜĸĉò÷Ė��XÆ

ĵŚŕ・ŌİĴĹ

Page 30: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

őŚĪŚpäĊÊ¢�

ĭĶŚĬ

őŚĪŚ

ĨřĶĤĭĸ

ŀĬļĭ

ęĤīŒř

ĞōŚīŒř

Ńŗįĭ

ĭĶŚĤņŕIJŚ

¯³ēoa

ŀĬļĭW=

YVŃŗįĭ

AQ・�£・ÒÀ

ĬŎŚĻŚʼnĴŃąĊB��

Page 31: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 32: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 33: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 34: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ÑÂ

ōľěŕĉò÷ĖQ�Ê¢ĿıŚř

l�

ãºk

ıłŀŐŚ��

Ľł�ĭňŚĤ��

ʼnĸŔŒŚīġ��

��ĿıŚřĊ¡P

ŁĚŕıŀŐŚ

×eÈ

ϵ¬

Page 35: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ıłŀŐŚ®©ĊQ�Ę�ĕËñĄl�ýĖĒĊ

ŁĚŕıŀŐŚ_ª^{ą®ČËñl�ĘüÿĒĊ

l�

Page 36: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ÑÂ

Ľł�ĭňŚĤ?ÎĊª^óĔæYõ:ôîĖĒĊ

×eÈŌěřª^ĉæýčĄĊQ�Ęl�üÿĒĊ

Page 37: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ãºk

ʼnĸŔŒŚīġqėHĉĈāÿÊ¢ĊĒĊ

ϵ¬Ù´ĈyHÊ¢ĘĒĂĒĊ

Page 38: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ōľěŕĉò÷ĖĨřĶřĵÊ¢Ċ��

ġœŋ

��²x

ŖěęĜĸĉò÷Ė��XÆ

Page 39: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ĭĤŔŚřĩěĮ< ĭĤŔŚřĩěĮE

Page 40: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 41: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 42: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

őŚĪŚěřıŚŁĝŚĭååĿıŚř

VZCjHdi Ōěřª^ēþĊŌĻŐŚl�ĿıŚř

[?j_ ĩěřěřē¨âæijĝĴĤęĜĸĈćĊl�ĿıŚř

Rj\g・fJT lēŔĭĸæªr¿õŔĭĸĊl�ĿıŚř

+#・LjT・[;gM ĶģĭĸÝÇĆþĊf¸æ®ČËñēÝÇ|tąĊÕĕáĐl�ĿıŚř

Qjg ĵŚŕľŚēęĤīŒřŇıřĊl�ĿıŚř

Be[ ­ĥœŁēØĥœŁæķŚıĘĒĆĉüÿĥœŁl�ĿıŚř

%� ōŚIJŕĜĚřĹĜēľŕŚřæijĴŃĭl�ĿıŚř

[;jUXPA・:[?jNiJ ŖĭňřĭĊl�ąĞœŚē¶�Ċl�ĿıŚř

^g] ĢěĹēĨŚijæĵęŚĈćĊl�ĿıŚř

:iOYMji ĿıŚřĉeĄċďĔĈïl�ĿıŚř

10

1

2

3

4

5

6

7

8

9

10

Page 43: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

SG<iYMji

:iOYMji

Page 44: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

9\?AķĪěřĉ±ăïÿæQ�ęŚģĶĤijŎĊGÃĉò÷ĖİŔŐŚīŒřĘ�ÅýĖÿđĊTvç

Hi@iBĆċIA

U¾Ę�ÜüQ�ĘB��üÿðñą�7ē¦wĘZĔóĉüæ@ÿĈQ�Ċ�ÅXvĘÊÍýĖùĆç

Page 45: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

!�

$�

��

*

ZIb:gSG<i

VZCjHdiSG<i

<iMeAHdiSG<i

��),

<iMj[=jJSG<i

�SG<i

DiRiQ��

�:j@RAOa

cjGjWjK�

F<T6��

&��

Page 46: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 47: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

�*/3/

�*/3/ zS�1($3�'($2

�/23��($'

�*/3/ zS�*/3/�*/3/ zS

+'(/

zSzS�$3(23�

ìzSí

�*/3/

���/0��3/16

��

Page 48: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

1

4

Page 49: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Page 50: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

1

2

3

54

Page 51: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

2

4

���

3

5

�JmH

zS8à

��� �� ~T VªŁğĸ

1

Page 52: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

N¿~Û]NĊÁÔ CDĊÁÔ CDĊÐÔ

ÁÔĉïĖĆõĉæCDĊÐÔċIJěŖĤĸĉgėĈï

Page 53: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

N¿~Û]NĊÁÔ CDĊÁÔ

īĺŔĠĆª^Ċãºk

CDĊÐÔ

��/"(0

��/'(0

��/"(0

ÐÔ・ÁÔĊ~ÛĆN¿Ċ~Ûô�¼ĆĈĖ

��

��/'(0

Page 54: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

3��������ÁÔ

]NĊÁÔ

1

����� ��ÐÔ

����� ��ÁÔ

�����[��ÐÔ

�����[���u

�����[��ÁÔ

2

5

4

�� �����ÐÔ

Page 55: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ª^ŖěęĜĸĆ��²x

ϵĺŀħŚīŒřĊÂY

īĺŔĠĊI¡�

��Ċ�>

Page 56: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

ŀĬļĭĉò÷Ėsw��T�çswþĊĒĊąċĈöæi>ē�7Ę£ñĖùĆóĔ�đĖsw��vĘ�ýç

&38�29

Page 57: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題

by matley0

#ugf0308

TAKASHI SAKAMOTO

2014/03/08

Page 58: Thinking Backwards: モバイルデザインと情報アーキテクチャの課題