![Page 1: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/1.jpg)
デザイナーがエンジニアとうまくやる
モバイルアプリデザイン編
HTML5時代のWebデザイナー これからの生きる道
秋葉秀樹
2013.12.07HTML5 Conference 2013 in Gifu
![Page 2: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/2.jpg)
秋葉 秀樹株式会社 ツクロア 代表取締役 / デザイナー
Visual Design、 UX/UI Design、 HTML5、Flash、CSS、JavaScript、3DCG、映像、音楽、銭湯
最近は特にAndroidやiPhoneアプリのUIデザインユーザーエクスペリエンス設計スマートフォンにプリインストールされたアプリのUIテレビや映画関連のWebやアプリプロモーション
html5j, HTML5 Experts.jp
![Page 3: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/3.jpg)
THE NEXT GENERATION -PATLABOR- Ikesu - Touch Aquarium -
![Page 4: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/4.jpg)
きちんとデザイン、できていますか?
「デザイン」だけだと食べていけないからコーディングもやるようになりましたCSSプリプロセッサを勉強するように言われています
最近『黒い画面』を勉強しています…
![Page 5: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/5.jpg)
Webとかネイティブとか技術に左右されない考え方
『デザイン脳』
これが今日私が伝えたいテーマです
![Page 6: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/6.jpg)
![Page 7: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/7.jpg)
間違ったデザイン決定プロセスなくなることの無い
![Page 8: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/8.jpg)
デザイン複数案出してよ、その中からこっちで決めるから
個性的でカッコいいの、待ってるよ
![Page 9: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/9.jpg)
リハスタ予約アプリ リハスタ予約アプリ
予約状況 予約 予約済み メンバー連絡
予約状況 予約
予約済み メンバー連絡
リハスタ予約アプリ
今週の一押しバンド
予約する
スタジオの空きを見る
見た目で個性を出してみました…ユーザーは個性など求めてない
起動画面アピールなどいらない
余計なコンテンツはいらない
炎のボタンはなくても困らない
毎回このアプリを使う人の立場を考えると…
誰も使ってくれなくなる
![Page 10: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/10.jpg)
スタジオ空き状況確認
スタジオ予約
バンドメンバーに
教える
予約状況
予約
メンバー連絡
さて、予約だ~
目的を絞り込むと…
![Page 11: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/11.jpg)
予約状況 予約 予約済み メンバー連絡
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
スタジオ予約アプリ単に音楽スタジオを予約するためだけのアプリ
予約状況
予約
予約済み
メンバー連絡
スタジオの空き状況を調べる空き状況を見ながらスタジオを予約
ここから日時を指定して直接スタジオを予約することもできる
ちゃんと予約できているか?確認できる
バンドメンバーにダイレクトメッセージ
![Page 12: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/12.jpg)
予約状況 予約 予約済み メンバー連絡
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
![Page 13: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/13.jpg)
エンジニア デザイナー
ユーザーさんに心地いい操作をしてもらうにはデザイナーさんも「ユーザーの行動」を
細分化して考えるといいですよ。 行動の細分化
![Page 14: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/14.jpg)
スタジオ空き状況確認
スタジオ予約
予約状況
予約
バンドメンバーに
教える
メンバー連絡
ここだけに絞って考えてみると…
![Page 15: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/15.jpg)
スタジオ空き状況確認
起動後サーバーに問い合わせ
待ち…
ユーザー希望の日時指定
スタジオ予約完了
予約可能かサーバーに問い合わせ
別な人に希望日時を予約されていた
急にオフラインに!
予約状況
待ち…
待ち…
実はこんなにも状況が細分化される
ネットワークエラーです
キャンセル 再試行
2014 1 15
キャンセル 問い合わせる
Bスタジオ
18時から 3時間
空きが確認できました本当に予約しますか?
キャンセル 予約確定
予約完了しました
予約を確認する
問い合わせ中
問い合わせ中
問い合わせ中
すいません!誰かが予約したようです
予約状況にもどる
![Page 16: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/16.jpg)
ネットワークが切れた場合、HTML5だったらオフライン・キャッシュという機能がありますよ。HTMLや関連ファイルをブラウザがキャッシュするのでオフラインのときでも古いけどHTMLが表示されるんです。
エンジニア デザイナー
ネットワークエラーです
キャンセル 再試行
なるほど、でも古い情報が表示されているんですよね?こんなの表示した方がいいのかな?
古い情報の可能性があります×
そうですね、読み物系コンテンツだったらそれでいいけど、今回の予約系アプリだとオフライン・キャッシュよりネットワークエラーと素直に伝えた方がユーザーにとっても安全かもしれないですね。
![Page 17: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/17.jpg)
ユーザーを待たせる
ロード時間
エンジニア
デザイナー
ロード時間には「進捗が読めるロード」と「進捗が読めないロード」があります。今回の予約問い合わせは「進捗が読めないロード」なのでローディングバーじゃなくて
のほうがいいかもしれません。
や
了解っす!デザインに反映します!
Chrome
Firefox
Activity Indicator
Progress View
INDETERMINATE
PROGRESS BAR &
SPINNER
PROGRESS BAR
![Page 18: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/18.jpg)
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
デザイン仕様書の例
![Page 19: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/19.jpg)
これだけ「細分化」しても見えにくいのが、心地いい
TRANSITION絶妙な遷移時間をデザイン
![Page 20: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/20.jpg)
HTMLCSSJAVASCRIPT WEB PROTOTYPE
動きは実機上で動かさないと感覚として分かりにくいため必要な箇所だけに限定したプロトタイプをつくる
◎トライアンドエラーが楽、ビルドの必要がない◎気持ちいい感覚をつかむだけでも価値があるので細部までつくり込まない◎押したのか解りにくいまま画面が進むことのマズさに気づきやすい
![Page 21: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/21.jpg)
予約状況 予約 予約済み メンバー連絡
リハスタ予約アプリ
メンバー連絡
マイケル・マックス
ブライアン・瀬田
こうすけムスタング
ジョン丸
予約が取れたことをメンバーに伝えましょう
WEB PROTOTYPE
![Page 22: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/22.jpg)
![Page 23: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/23.jpg)
Font AwesomeでWebプロトタイプを行った例
アイコンフォントだと色やサイズをCSSで簡単に変更できるトライアンドエラーには最適
![Page 24: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/24.jpg)
![Page 25: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/25.jpg)
1月15日ってスタジオの空き状況を教えて!
こんなかんじです
![Page 26: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/26.jpg)
ここね!
おっと、そう来ましたか…
![Page 27: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/27.jpg)
まだ?
問い合わせ中
クルクル…ローディング中、しばしお待ちを…
![Page 28: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/28.jpg)
Aスタ×
Aスタジオはすべて埋まっています
ごめんなさい…
他の部屋は?
![Page 29: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/29.jpg)
時代的な流行りやツールだけにたよらずに考えようとする気持ちを持とう
![Page 30: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/30.jpg)
流行りだしている「シンプル&フラット」なデザインについて
![Page 31: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/31.jpg)
iPhone用動画プレイヤー(アップル製)Mac OS9用DVDプレイヤー(アップル製)2013年2003年
必要な要素、不要な要素がより明確化
「主役」と「脇役」の関係を明確に!
この場合“動画が主役”であり“コントローラーは脇役”であるユーザーにとってなにが目的なのか?この場合動画に集中させることであり、コントローラーの外観は期待されていない
![Page 32: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/32.jpg)
文字が入るエリア
文字が入るエリアがこれだけあります、枠や背景色で区切ると文字はそのさらに内側に余白を
文字が入るエリア
文字が入るエリアがこれだけあります、枠や背景色で区切ると文字はそのさらに内側に余白を
今週のトピックス文字が入るエリア
文字が入るエリアがこれだけあります、枠や背景色で区切ると文字はそのさらに内側に余白を必要とするので文字部分が圧迫されやすい、しかし枠があれば視認性が上がるので一概にどちらがいいとは言えません。
今週のトピックス文字が入るエリア
文字が入るエリアがこれだけあります、枠や背景色で区切ると文字はそのさらに内側に余白を必要とするので文字部分が圧迫されやすい、しかし枠があれば視認性が上がるので一概にどちらがいいとは言えません。
レイアウト術前述の「枠線」を取り除いてみる
枠ありデザイン 枠なしデザイン
倍以上のテキスト領域を確保
![Page 33: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/33.jpg)
![Page 34: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/34.jpg)
枠線
情報と情報を区切りやすく、視認性がよい場合がある
枠線をつけるだけで内側余白と外側余白(CSSでいうmarginとpadding)が必要となるケースが発生しやすく、広く使えないケースがある
メリット
デメリット
外側と内側に余白
![Page 35: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/35.jpg)
グラデーション
「立体的」を視覚的にアピールできることによりボタンだと認識しやすい
背景の明度が異なるグラデーション上に重要な文字を乗せることは時としてリスキー、文字の視認性を損なう
メリット
デメリット
お問い合わせ
お問い合わせ
![Page 36: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/36.jpg)
影
グラデーションと同様「立体 = 押せる」と予測されやすい
余分な領域をとりやすい、これは枠線と同様の問題を持つ。
影がなければ押せるのか一目で判断つきにくいこともある
メリット
デメリット
お問い合わせ
![Page 37: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/37.jpg)
角丸
やさしい印象を持たせやすい
角丸で囲まれたコンテンツは充分な余白を開けないと逆にうるさく感じられやすく、領域の狭いエリアに角丸は使いにくいケースがある
メリット
デメリット
![Page 38: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/38.jpg)
× ○
•「押せるアピール」を損ねてはならない•「文字の可読性」を損ねてはならない
ボタンの場合主に以下の2つを優先して守る
![Page 39: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/39.jpg)
フラットとは、角がシャープとか影がないことではなく機能の純粋さを求めることを言う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)
![Page 40: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/40.jpg)
アプリデザインは「行動のデザイン」を優先しよう
ちょっとした機能でも大抵は複雑な導線が絡む
ユーザーの置かれた状況を細分化、整理を最初に行い次にビジュアルを付けていく手順が好ましい
![Page 41: HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu](https://reader034.vdocuments.net/reader034/viewer/2022042816/5596dac91a28abd56a8b4624/html5/thumbnails/41.jpg)
THANK YOUHIDETARO7