HTML5時代のWebデザイナーこれからの生きる道 - HTML5 Conference 2013 in Gifu

HTML5時代のWebデザイナーこれからの生きる道

デザイ
ナーがエンジニアまやる
とうく

モバイ
ルアプデザン編
リイ
秋葉秀樹

2013.12.07
HTML5 Conference 2013 in Gifu

秋葉秀樹
株式会社ツクロア代表取締役 / デザイナー
html5j, HTML5 Experts.jp

Visual Design、 UX/UI Design、 HTML5、Flash、
CSS、JavaScript、3DCG、映像、音楽、銭湯
最近は特にAndroidやiPhoneアプリのUIデザイン
ユーザーエクスペリエンス設計
スマートフォンにプリインストールされたアプリのUI
テレビや映画関連のWebやアプリプロモーション

THE NEXT GENERATION -PATLABOR-

Ikesu - Touch Aquarium -

き
ちんとデザン
イ、
できていますか
？
「デザイン」だけだと食べていけないからコーディングもやるようになりました
CSSプリプロセッサを勉強するように言われています
最近『黒い画面』を勉強しています…

『デザン脳』
イ
Webとかネイィとか
テブ
技術に左右されない考え方

これが今日私が伝えたいテーマです

ななこの無い
くると

間違ったデザン決定プロセス
イ

デザン複数案出て
イ
しよ、
その中からっで決める
こち
から
個性的でカッコいいの、待ってるよ

見た目で個性を出てした…
しみま
ユーザーは個性など求めてない
起動画面アピールなどいらない

リハスタ予約アプリ
今週の一押しバンド



余計なコンテンツはいらない

炎のボタンはなくても困らない
予約状況

予約済み

予約する

予約

メンバー連絡

スタジオの空きを見る
毎回このアプリを使う人の立場を考えると…

誰も使ってくれなくなる
予約状況

予約

予約済み

メンバー連絡

予約状況

スタジオ空き
状況確認
予約

さて、
予約だ∼

スタジオ予約
メンバー連絡

目的を絞り込むと…

バンメンバーに
ド

教え
る

スタジオ予約アプリ


予約状況

予約

予約済み

メンバー連絡

単に音楽スタジオを予約するためだけのアプリ

2014年 1月
日

月

火

水

木

金

土

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

1月15日の部屋別スタジオ予約状況
10

12

18

24

予約状況

予約

予約済み

スタジオの空き状況を調べる
空き状況を見ながらスタジオを予約
ここから日時を指定して直接スタジオを
予約することもできる
ちゃんと予約できているか？確認できる

A
B
C

バンドメンバーにダイレクトメッセージ
メンバー連絡


予約状況

予約

予約済み


メンバー連絡

予約状況

予約

2014年 1月

予約済み

メンバー連絡

2014年 1月

日

Bスタジオ

日

月

火

水

木

金

土

29

30

31

1

2

3

4

5

6

7

8

9

10

11

5

12

13

14

15

16

17

18

12

19

20

21

22

23

24

25

19

20

21

22

23

24

25

26

27

28

29

30

31

1

26

27

28

29

30

31

1

12

18

火

水

木

金

土

29 30 31
1
2
3
4
予約したい日時を指定してください

10

月

6

7

13 14
2014

18

8
15

9

10

17
116 15

3

11
18

24

10

12

18

時から

A

A

B

B キャンセル

C

時間

C

問い合わせる

この画面からどうやったらスムーズに予約させるか?

24

ユーザーさんに心地いい操作をしてもらうには
デザイナーさんも
「ユーザーの行動」
を

細分化して考えるといいですよ。

行
動
の

細
分
化
エンジニア

デザイナー

予約状況

スタジオ空き
状況確認

ここだけに絞って考えてみると…

予約

スタジオ予約
メンバー連絡

バンメンバーに
ド

教え
る

起動後
サーバーに
問い合わせ

待ち…
実はこんなにも状況が細分化される

問い合わせ中

予約状況

スタジオ空き
状況確認

問い合わせ中

すいません！
誰かが予約したようです
予約状況にもどる

別な人に
待ち…
希望日時を
ユーザー
問い合わせ中
予約されていた
Bスタジオ希望の日時
指定
2014 1 15
待ち…
予約可能か
18 時から 3
予約完了しました
急に
サーバーに
オフランに!
イ
キャンセル
問い合わせる
問い合わせ
時間

予約を確認する
ネットワークエラーです

キャンセル

再試行

空きが確認できました
本当に予約しますか？
キャンセル

予約確定

スタジオ予約
完了

ネッ
トワークが切れた場合、
HTML5だったら
オフラインキャッシュという機能があります
・
よ。
HTMLや関連ファイルをブラウザがキャッシュ
する
のでオフラインのときでも古いけどHTMLが
表示されるんです
。

なるほど、
でも
古い情報が表示されているんです
よね？
こんなの表示した方がいいのかな？
古い情報の可能性があります

エンジニア

デザイナー

ネットワークエラーです

キャンセル

再試行

そうですね、
読み物系コンテンツだったら
それでいいけど、
今回の予約系アプリだと
オフラインキャッシュより
・
ネットワークエラーと素直に伝えた方が
ユーザーにとっても安全かもしれないですね。

ロー
ド時間には
「進捗が読めるドと
ロー」「進捗が読めないロー」り。
ドがあます
今回の予約問い合わせは
「進捗が読めないロー」
ドなので
ローデン
ィグバーじゃなて
く
や
のほうがいいかも
しれません。

Chrome

Firefox

Progress View

デザイナー
エンジニア

Activity Indicator

INDETERMINATE
PROGRESS BAR &
SPINNER

PROGRESS BAR

ユーザーを待たせる

ロー
ド時間

了解っす
！
デザインに反映します
！

Interaction Speciﬁcations
〇〇スタジオ様リハスタ予約アプリ画面設計と動作に関する仕様書

tuqulore Co., Ltd.

CONFIDENTIAL

1.0

VER

2013.12.24

PAGE

○ 予約状況画面＆日時指定
予約状況



先
月
は

Disable

画
像
は
別
フ
ァ
イ
ル
︵
デ
ザ
イ
ン
カ
ン
プ
︶
に
て

日時指定
（モーダル式）

予約状況
予約状況

予約

状
態

予約済み

月

火

水

木

金

土

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

日

1

リッ

横フ

日

タップした座標をもとに
スタジオの指定も
引き継ぎます、
ただし、ここをタップで
他のスタジオを
選び直すことが可能です

メンバー連絡

18

A
B
C
アニメーションはプロトタイプにて確認します。

Bスタジオ

月

火

水

木

金

土

29 30 31
1
2
3
4
予約したい日時を指定してください
5

6

7

13 14
2014

12

8
15

9

10

17
116 15

11
18

19

20

21

22

23

24

25

26

ます

とし

可能

クも

カ
レ
ン
ダ
ー
の
み
左
右
に
移
動

27

28

29

30

31

1

18

3


12

予約済み

2014年 1月

2014年 1月

10

予約

メンバー連絡

10

24

タップした座標をもとに近い空き時間を
日時指定画面に出してあげます

色が濃くなり、選択中を意味します

12

時から

A

B キャンセル

18

時間
問い合わせる

C
ボタンのタッチ時の背景色は
別ファイル（デザインカンプ）にて

デザイン仕様書の例

24

ウインドウの外側は
黒の透過 80% で
塗りつぶされます

1

これだけ
「細分化」て
しも見えにいのが、
く
心地いい

TRANSITION

絶妙な遷移時間をデザイ
ン

HTML
CSS
JAVASCRIPT

WEB PROTOTYPE

動きは実機上で動かさないと感覚として分かりにくいため
必要な箇所だけに限定したプロトタイプをつくる
◎トライアンドエラーが楽、ビルドの必要がない
◎気持ちいい感覚をつかむだけでも価値があるので細部までつくり込まない
◎押したのか解りにくいまま画面が進むことのマズさに気づきやすい


予約状況

予約

予約済み

メンバー連絡

メンバー連絡
予約が取れたことをメンバーに伝えましょう

マイケル・マックス
ブライアン・瀬田
こうすけムスタング
ジョン丸

WEB PROTOTYPE

Font AwesomeでWebプロトタイプを行った例

アイコンフォントだと
色やサイズをCSSで簡単に変更できる
トライアンドエラーには最適

1月15日って
スタジオの空き状況を
教えて
！
こんなかんじです

ここね！

おっと、
そう来ましたか…

問い合わせ中

まだ？

クルクル…

ローデング中、
ィ
しばしお待ちを…

Aスタ
×
Aスタジオは
すべて埋まっています

他の部屋は？

ごめんなさい…

時代的な流行りやツー
ルだけにたよずに
ら
考えよとす気持ちを持と
うる
う

流行りだしている
「シンプル＆フラット」なデザインについて

「主役」と「脇役」の関係を明確に！
必要な要素、不要な要素がより明確化

2003年

2013年

Mac OS9用DVDプレイヤー（アップル製）

iPhone用動画プレイヤー（アップル製）

この場合“動画が主役”であり
“コントローラーは脇役”である
ユーザーにとってなにが目的なのか？
この場合動画に集中させることであり、コントローラーの外観は期待されていない

レイアウト術
前述の「枠線」を取り除いてみる
枠ありデザイン

枠なしデザイン
今週のトピックス

今週のトピックス

文字が入るエリア


文字が入るエリ
アがこれだけあ
ります、枠や背
景色で区切ると
文字はそのさら
に内側に余白を

文字が入るエリ
アがこれだけあ
ります、枠や背
景色で区切ると
文字はそのさら
に内側に余白を


文字が入るエリアがこれだ
けあります、枠や背景色で
区切ると文字はそのさらに
内側に余白を必要とするの
で文字部分が圧迫されやす
い、しかし枠があれば視認
性が上がるので一概にどち
らがいいとは言えません。

倍以上のテキスト領域を確保

文字が入るエリアがこれだ
けあります、枠や背景色で
区切ると文字はそのさらに
内側に余白を必要とするの
で文字部分が圧迫されやす
い、しかし枠があれば視認
性が上がるので一概にどち
らがいいとは言えません。

枠線
メリット
情報と情報を区切りやすく、視認性がよ
い場合がある

デメリット
枠線をつけるだけで内側余白と外側余白
（CSSでいうmarginとpadding）が必
外側と内側に余白

要となるケースが発生しやすく、広く使え
ないケースがある

グラデーション
メリット

お問い合わせ

「立体的」を視覚的にアピールできるこ
とによりボタンだと認識しやすい

デメリット

お問い合わせ

背景の明度が異なるグラデーション上に重
要な文字を乗せることは時としてリスキー、
文字の視認性を損なう

影
メリット

お問い合わせ

グラデーションと同様「立体 = 押せる」
と予測されやすい

デメリット
余分な領域をとりやすい、これは枠線と
同様の問題を持つ。
影がなければ押せるのか一目で判断つきに
くいこともある

角丸
メリット
やさしい印象を持たせやすい

デメリット
角丸で囲まれたコンテンツは充分な余白
を開けないと逆にうるさく感じられやす
く、領域の狭いエリアに角丸は使いにく
いケースがある

ボタンの場合
主に以下の2つを優先して守る

•「押せるアピール」を損ねてはならない
•「文字の可読性」を損ねてはならない

×

○

フラットとは、角がシャープとか影がないことではなく
機能の純粋さを求めることを言う
Beyond Flat: Six iOS 7 Fixes Apple Needs to Make (GIZMODO)
http://gizmodo.com/beyond-ﬂat-six-ios-7-ﬁxes-apple-needs-to-make-511446667

コンパス (iOS7)

iHandy Level

アプリデザインは
「行動のデザイン」を優先しよう
ちょっとした機能でも
大抵は複雑な導線が絡む
ユーザーの置かれた状況を細分化、整理を最初に行い
次にビジュアルを付けていく手順が好ましい

HTML5時代のWebデザイナーこれからの生きる道 - HTML5 Conference 2013 in Gifu

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Plus de Hideki Akiba

Plus de Hideki Akiba (16)