HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 22,835 views

HTML5 Conference 2013 in Gifuのデザイントラックで行なわれたセッションスライド。

HTML5 Conference 2013 in Gifuのデザイントラックで行なわれたセッションスライド。
アプリデザインについての講演。

Statistics

Views

Total Views
22,835
Views on SlideShare
22,590
Embed Views
245

Actions

Likes
86
Downloads
81
Comments
1

10 Embeds 245

https://twitter.com 191
http://sleepingrabbit.mods.jp 18
http://s.deeeki.com 12
http://tweetedtimes.com 11
http://emono.edoblog.net 6
https://www.chatwork.com 3
https://cybozulive.com 1
http://safe.txmblr.com 1
http://b.hatena.ne.jp 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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