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

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

モバイルアプリデザイン編

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

秋葉秀樹

2013.12.07HTML5 Conference 2013 in Gifu

秋葉 秀樹株式会社 ツクロア 代表取締役 / デザイナー

Visual Design、 UX/UI Design、 HTML5、Flash、CSS、JavaScript、3DCG、映像、音楽、銭湯

最近は特にAndroidやiPhoneアプリのUIデザインユーザーエクスペリエンス設計スマートフォンにプリインストールされたアプリのUIテレビや映画関連のWebやアプリプロモーション

html5j, HTML5 Experts.jp

THE NEXT GENERATION -PATLABOR- Ikesu - Touch Aquarium -

きちんとデザイン、できていますか？

「デザイン」だけだと食べていけないからコーディングもやるようになりましたCSSプリプロセッサを勉強するように言われています

最近『黒い画面』を勉強しています…

Webとかネイティブとか技術に左右されない考え方

『デザイン脳』

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

間違ったデザイン決定プロセスなくなることの無い

デザイン複数案出してよ、その中からこっちで決めるから

個性的でカッコいいの、待ってるよ

リハスタ予約アプリ リハスタ予約アプリ

予約状況 予約 予約済み メンバー連絡

予約状況 予約

予約済み メンバー連絡

リハスタ予約アプリ

今週の一押しバンド

予約する

スタジオの空きを見る

見た目で個性を出してみました…ユーザーは個性など求めてない

起動画面アピールなどいらない

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

炎のボタンはなくても困らない

毎回このアプリを使う人の立場を考えると…

誰も使ってくれなくなる

スタジオ空き状況確認

スタジオ予約

バンドメンバーに

教える

予約状況

予約

メンバー連絡

さて、予約だ～

目的を絞り込むと…

予約状況 予約 予約済み メンバー連絡

2014年 1月

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

日 月 火 水 木 金 土

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

リハスタ予約アプリ

A

B

10 12 18 24

C

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

予約状況

予約

予約済み

メンバー連絡

スタジオの空き状況を調べる空き状況を見ながらスタジオを予約

ここから日時を指定して直接スタジオを予約することもできる

ちゃんと予約できているか？確認できる

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

予約状況 予約 予約済み メンバー連絡

2014年 1月

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

日 月 火 水 木 金 土

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

リハスタ予約アプリ

A

B

10 12 18 24

C

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

予約状況 予約 予約済み メンバー連絡

2014年 1月

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

日 月 火 水 木 金 土

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

リハスタ予約アプリ

A

B

10 12 18 24

Cキャンセル 問い合わせる

予約したい日時を指定してください

Bスタジオ

時から

18時間

3

2014 1 15

エンジニア デザイナー

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

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

スタジオ空き状況確認

スタジオ予約

予約状況

予約

バンドメンバーに

教える

メンバー連絡

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

スタジオ空き状況確認

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

待ち…

ユーザー希望の日時指定

スタジオ予約完了

予約可能かサーバーに問い合わせ

別な人に希望日時を予約されていた

急にオフラインに!

予約状況

待ち…

待ち…

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

ネットワークエラーです

キャンセル 再試行

2014　1　15

キャンセル 問い合わせる

Bスタジオ

18時から　　 3時間

空きが確認できました本当に予約しますか？

キャンセル 予約確定

予約完了しました

予約を確認する

問い合わせ中

問い合わせ中

問い合わせ中

すいません！誰かが予約したようです

予約状況にもどる

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

エンジニア デザイナー

ネットワークエラーです

キャンセル 再試行

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

古い情報の可能性があります×

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

ユーザーを待たせる

ロード時間

エンジニア

デザイナー

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

のほうがいいかもしれません。

や

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

Chrome

Firefox

Activity Indicator

Progress View

INDETERMINATE

PROGRESS BAR &

SPINNER

PROGRESS BAR

Interaction Specifications〇〇スタジオ様 リハスタ予約アプリ 画面設計と動作に関する仕様書 2013.12.241.0 1CONFIDENTIAL PAGEVERtuqulore Co., Ltd.

予約状況 日時指定（モーダル式）

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

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

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

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

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

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

先月はD

isable

状態

画像は別ファイル（デザインカンプ）にて

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

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

予約状況 予約 予約済み メンバー連絡

2014年 1月

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

日 月 火 水 木 金 土

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

リハスタ予約アプリ

A

B

10 12 18 24

C

横フリックも可能とします

予約状況 予約 予約済み メンバー連絡

2014年 1月

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

日 月 火 水 木 金 土

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

リハスタ予約アプリ

A

B

10 12 18 24

Cキャンセル 問い合わせる

予約したい日時を指定してください

Bスタジオ

時から

18時間

3

2014 1 15

デザイン仕様書の例

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

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

HTMLCSSJAVASCRIPT WEB PROTOTYPE

動きは実機上で動かさないと感覚として分かりにくいため必要な箇所だけに限定したプロトタイプをつくる

◎トライアンドエラーが楽、ビルドの必要がない◎気持ちいい感覚をつかむだけでも価値があるので細部までつくり込まない◎押したのか解りにくいまま画面が進むことのマズさに気づきやすい

予約状況 予約 予約済み メンバー連絡

リハスタ予約アプリ

メンバー連絡

マイケル・マックス

ブライアン・瀬田

こうすけムスタング

ジョン丸

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

WEB PROTOTYPE

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

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

1月15日ってスタジオの空き状況を教えて！

こんなかんじです

ここね！

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

まだ？

問い合わせ中

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

Aスタ×

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

ごめんなさい…

他の部屋は？

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

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

iPhone用動画プレイヤー（アップル製）Mac OS9用DVDプレイヤー（アップル製）2013年2003年

必要な要素、不要な要素がより明確化

「主役」と「脇役」の関係を明確に！

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

文字が入るエリア

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

文字が入るエリア

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

今週のトピックス文字が入るエリア

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

今週のトピックス文字が入るエリア

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

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

枠ありデザイン 枠なしデザイン

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

枠線

情報と情報を区切りやすく、視認性がよい場合がある

枠線をつけるだけで内側余白と外側余白（CSSでいうmarginとpadding）が必要となるケースが発生しやすく、広く使えないケースがある

メリット

デメリット

外側と内側に余白

グラデーション

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

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

メリット

デメリット

お問い合わせ

お問い合わせ

影

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

余分な領域をとりやすい、これは枠線と同様の問題を持つ。

影がなければ押せるのか一目で判断つきにくいこともある

メリット

デメリット

お問い合わせ

角丸

やさしい印象を持たせやすい

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

メリット

デメリット

× ○

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

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

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

iHandy Levelコンパス (iOS7)

アプリデザインは「行動のデザイン」を優先しよう

ちょっとした機能でも大抵は複雑な導線が絡む

ユーザーの置かれた状況を細分化、整理を最初に行い次にビジュアルを付けていく手順が好ましい

THANK YOUHIDETARO7