UIデザインする前に、まずはこれだけ

UIデザイン初学者向けに、
・UIデザインを考えるときのコツ
・実務事例
・おすすめ勉強方法
などご紹介しました。

Transcript

1. UIデザインする前に、
   まずはこれだけ   2019年6⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦
2. こんにちは、和気
   です。 ワケ ・スマホアプリのUIデザイン
   .........................................
   4件
   ・ワークフローUIデザイン
   ............................................
   少々 恐⻯好きwebデザイナー
   制作会社で主に⼩規模コーポレートサイトの新規制作、
   保守業務を担当。シニア向けアクセシビリティを中⼼に勉強中。
   どちらに常駐するのか楽しみ。 UIデザインする前に、まずはこれだけ ⾃⼰紹介
3. UIデザインする前に、まずはこれだけ webデザイナーがUIデザインしたときに知った
   UIデザインのコツ
4. UIデザインする前に、まずはこれだけ こんな⽅に伝えたい
   UIデザイン！
   実務でやってみたい UIデザイン
   勉強してる UIデザイン？
   なにそれ知りたい
5. UIデザインする前に、まずはこれだけ 本⽇共有しないこと ・UIデザインの詳細 ・ゲームのUIデザイン ・⼤規模ワークフロー ・スマホ以外のUIデザイン ・ガイドラインの解説 ・デザインソフトの操作
6. UIデザインする前に、まずはこれだけ 本⽇の⽬次 実務事例 １ 2 3 UIデザインのコツ 勉強法
7. UIって
   なんですか？ 質問
8. UIデザインする前に、まずはこれだけ UIとは User
   Interface
   （ユーザー
   インターフェース）
9. UIデザインする前に、まずはこれだけ UIデザインとは サービスアプリ
   の情報設計〜ビジュアルデザイン
   特にweb業界では、
10. UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の
    担保 世界観の
    統⼀
11. UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の
    担保 → からの、 世界観の
    統⼀ ユーザーの
    満⾜度向上 UX サービスの
    ⽬的達成 企業の
    業績貢献
12. UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の
    担保 → からの、 世界観の
    統⼀ ユーザーの
    満⾜度向上 UX サービスの
    ⽬的達成 企業の
    業績貢献 UXと密接に
    関わっている
13. UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 要件定義 情報設計 ビジュアル
    デザイン 実装 検証 公開 運⽤
14. UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 実装 検証 公開 運⽤ UIデザイナー →
    →
    → →
    →
    →
    →
    →
    →
    →
    →
    → 要件定義 情報設計 ビジュアル
    デザイン
15. UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 設計 要件定義 デザイン 実装 検証 公開 運⽤ UIデザイナー →
    →
    → →
    →
    →
    →
    →
    →
    →
    →
    → UXへの影響が⼤きいので
    担当領域が広くなる
16. 実務事例 １
17. 個⼈的な⼀例です フィードバックいただけると喜びます あくまでも
18. UIデザインする前に、まずはこれだけ 某QR決済サービスの
    webアプリリニューアル ①実務事例
19. UIデザインする前に、まずはこれだけ 案件概要 ・UIデザインの洗練化がメイン ・コンテンツ、画⾯の追加あり ・デバイスは専⽤のAndroid端末のみ ①実務事例
20. UIデザインする前に、まずはこれだけ 制作したUIデザイン ①実務事例
21. UIデザインする前に、まずはこれだけ 制作したUIデザイン ①実務事例
22. UIデザインする前に、まずはこれだけ 当時の業務フロー 企画 実装 検証 公開 運⽤ UIデザイナー →
    →
    →
    
    →
    → ①実務事例 要件定義 情報設計 ビジュアル
    デザイン
23. UIデザインする前に、まずはこれだけ 当時の業務フロー ①実務事例 情報設計 ビジュアルデザイン ・既存の画⾯確認
    ・コンテンツの洗い出し
    ・必要な機能の確認 ・⽂⾔の統⼀
    ・プロトタイプで検証
    ・ブラッシュアップ ・画⾯デザイン制作（XD） ・状態変化のパターン、
     コンポーネント⼀覧作成
24. UIデザインする前に、まずはこれだけ 当時の業務フロー ①実務事例 情報設計 ビジュアルデザイン ・既存の画⾯確認
    ・コンテンツの洗い出し
    ・必要な機能の確認 ・⽂⾔の統⼀
    ・プロトタイプで検証
    ・ブラッシュアップ ・画⾯デザイン制作（XD） ・状態変化のパターン、
     コンポーネント⼀覧作成 プロトタイプで
    情報設計とビジュアルデザインを
    繰り返す
25. UIデザインのコツ 2
    
26. UIデザインする前に、まずはこれだけ UIデザインのコツ ②UIデザインのコツ コンポーネントの知識 プロトタイプの活⽤ ガイドラインの理解
27. UIデザインする前に、まずはこれだけ コンポーネント
    の知識 ②UIデザインのコツ
28. UIデザインする前に、まずはこれだけ コンポーネントとは 部品、パーツ ボタン タブ タブ タイトル 本⽂テキスト本⽂テキスト
    本⽂テキスト本⽂テキスト
    本⽂テキスト本⽂テキスト ②UIデザインのコツ
29. UIデザインする前に、まずはこれだけ コンポーネントとは Bootstrap コンポーネントをもとにつくられた、 フロントエンド向けのWebフレームワーク。 パーツ・コンポーネント単位で定義して いく、UI デザインの⼿法。 Atomic
    Design ②UIデザインのコツ
30. UIデザインする前に、まずはこれだけ コンポーネントの知識があると ・⼀貫性を保ちやすい ・共有しやすい ・状態変化を考慮しやすい ②UIデザインのコツ
31. UIデザインする前に、まずはこれだけ ②UIデザインのコツ プロトタイプ
    の活⽤
32. UIデザインする前に、まずはこれだけ プロトタイプとは 試作品、模型 ②UIデザインのコツ
33. プロトタイプ型 ウォーターフォール型 UIデザインする前に、まずはこれだけ プロトタイプ型
    ⇔
    ウォーターフォール型 ②UIデザインのコツ 要件定義 要件定義 デザイン デザイン プロトタイプ
    作成 プロトタイプ
    修正 開発 開発 プロトタイプ
    評価
34. プロトタイプ型 ウォーターフォール型 UIデザインする前に、まずはこれだけ プロトタイプ型
    ⇔
    ウォーターフォール型 ②UIデザインのコツ 要件定義 要件定義 デザイン デザイン プロトタイプ
    作成 プロトタイプ
    修正 開発 開発 プロトタイプ
    評価 実装⼯程終盤での
    後戻りリスクが少ない
35. UIデザインする前に、まずはこれだけ ②UIデザインのコツ ガイドライン
    の理解
36. UIデザインする前に、まずはこれだけ ガイドラインとは 指針、指標、原則 ②UIデザインのコツ
37. UIデザインする前に、まずはこれだけ ガイドラインとは iOS
    Human
    Interface
    Guidelines iOS（Apple）のUI設計の指針を まとめたドキュメント。 Android（Google）のUIの品質基準と テスト⽅法をまとめたドキュメント。 Android
    Design ②UIデザインのコツ https://developer.apple.com/design/human-interface-guidelines/ ios/overview/themes/ https://developer.android.com/design
38. UIデザインする前に、まずはこれだけ ガイドラインとは iOS
    Human
    Interface
    Guidelines iOS（Apple）のUI設計の指針を まとめたドキュメント。 Android（Google）のUIの品質基準と テスト⽅法をまとめたドキュメント。 Android
    Design ②UIデザインのコツ UIデザインする前に
    ⼀読したい
39. UIデザインする前に、まずはこれだけ ガイドラインとは iOS
    Human
    Interface
    Guidelines iOS（Apple）のUI設計の指針を まとめたドキュメント。 Android（Google）のUIの品質基準と テスト⽅法をまとめたドキュメント。 Android
    Design ②UIデザインのコツ UIデザインする前に
    ⼀読したい
40. UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ！ 5 5 5 最低限知っておきたい ガイドライン 選
41. 1 1 1 iOSとAndroidの 違いを知る UIデザインする前に、まずはこれだけ ②UIデザインのコツ
42. UIデザインする前に、まずはこれだけ iOS（iPhone） Android ②UIデザインのコツ iOSとAndroidの違い ナビゲーションバーが ない ナビゲーションバーが ある タブバーが 下にある タブバーが 上にある http://uiohmy.com/
43. 2 2 2 UIデザインする前に、まずはこれだけ ②UIデザインのコツ 本⽂フォントの基準サイズは 16px
44. UIデザインする前に、まずはこれだけ ②UIデザインのコツ iOS
    Human
    Interface
    Guidelines Android
    Design 本⽂フォントの基準サイズは16 https://material.io/design/typography/#type-scale https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
45. UIデザインする前に、まずはこれだけ ②UIデザインのコツ 3 3 3 を考慮 状態変化
46. UIデザインする前に、まずはこれだけ ②UIデザインのコツ コンポーネントにはいろんな状態がある 選択できる 選択できない 0個 選択した 修正済み 変更できない 3個 100個
47. UIデザインする前に、まずはこれだけ ②UIデザインのコツ コンポーネントにはいろんな状態がある
48. UIデザインする前に、まずはこれだけ ②UIデザインのコツ 4 4 4 タップエリアは 44px以上
49. UIデザインする前に、まずはこれだけ ②UIデザインのコツ タップエリアは44px以上 ⼈差し指で押せる⼤きさ https://material.io/design/usability/accessibility.html#layout-typography https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
50. UIデザインする前に、まずはこれだけ ②UIデザインのコツ タップエリアは44px以上
51. UIデザインする前に、まずはこれだけ ②UIデザインのコツ 5 5 5 ポジティブ要素とネガティブ要素の 区別を明確に
52. UIデザインする前に、まずはこれだけ ②UIデザインのコツ ポジティブ要素とネガティブ要素の区別を明確に ポジティブ要素は右側 ネガティブ要素は左側 破壊的な操作を予測しやすく https://material.io/design/components/dialogs.html https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/ 削除する 閉じる
53. UIデザインする前に、まずはこれだけ ②UIデザインのコツ 特にネガティブ要素を明確に
54. UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ！ガイドライン ポジティブ要素とネガティブ要素の区別を明確に タップエリアは44px以上 状態変化を考慮 本⽂フォントの基準サイズは16px iOSとAndroidの違いを知る 1 2 3 4 5
55. UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ！ガイドライン ボタンはボタンらしく ポジティブ要素とネガティブ要素の区別を明確に タップエリアは44px以上 状態変化を考慮 本⽂フォントサイズの基準は16px 1 2 3 4 5 状態に適応した、
    ユーザーにやさしい設計
56. UIデザインする前に、まずはこれだけ UIデザインのコツ ②UIデザインのコツ コンポーネントの知識 プロトタイプの活⽤ ガイドラインの理解
57. 勉強⽅法 3
58. UIデザインする前に、まずはこれだけ ③勉強⽅法 知識 技術 制作者はバランスが⼤事
59. UIデザインする前に、まずはこれだけ ③勉強⽅法 ガイドラインを
    確認してみる
60. UIデザインする前に、まずはこれだけ ③勉強⽅法 ガイドラインといえば iOS
    Human
    Interface
    Guidelines iOS（Apple）のUI設計の指針を まとめたドキュメント。 Android（Google）のUIの品質基準と テスト⽅法をまとめたドキュメント。 Android
    Design https://developer.apple.com/design/human-interface-guidelines/ ios/overview/themes/ https://developer.android.com/design
61. UIデザインする前に、まずはこれだけ 翻訳アイコンをクリック 右クリック ③勉強⽅法 Google翻訳でがんばる
62. UIデザインする前に、まずはこれだけ ③勉強⽅法 UI系デザインソフトを
    使ってみる
63. UIデザインする前に、まずはこれだけ XD Adobeのソフトで、Win10〜、Mac可。 無料版はCCユーザー以外でも利⽤可。 コンポーネント管理のできるソフトの代表。 Mac可。Win不可。プラグインが豊富。 Sketch ③勉強⽅法 UIデザイン系 2強
64. UIデザインする前に、まずはこれだけ Cocoda! お題をもとにUIデザインを制作しながら 学習していくwebサービス。 無料の会員登録で利⽤可。 「はじめてのUI」コンテンツは、 よりやさしいお題をすすめながら ソフト操作やUIデザインのTipsを学べる。 ③勉強⽅法 おすすめのサービス
65. UIデザインする前に、まずはこれだけ ③勉強⽅法 わたしも使ってます tosssaurus
    で
    アカウント
    あります
66. UIデザインする前に、まずはこれだけ ③勉強⽅法 本を
    読んでみる
67. UIデザインする前に、まずはこれだけ はじめてのUIデザイン UIデザインの教科書をテーマに制作された本。 実作業に必要な⼒を⾝につけることを⽬的に、 概念の解説からUIを体系⽴てて学べる。 デザイナー ディレクター ③勉強⽅法 おすすめの本
68. UIデザインする前に、まずはこれだけ Design
    Systems ―デジタルプロダクトのためのデザインシステム実践ガイド AirbnbやTEDなど、海外の企業で導⼊されている デザインシステムの実践⼿法の紹介。 デザイナー ③勉強⽅法 おすすめの本
69. UIデザインする前に、まずはこれだけ Atomic
    Design 〜堅牢で使いやすいUIを効率良く設計する フロントエンド ③勉強⽅法 おすすめの本 「AbemaTV」UI設計の著者がAtomic Designの 実践⽅法を解説した本。 設計の考え⽅から、具体的な⼿順、UIテスト、現 場でひっかかりやすいポイントまで学べる。
70. UIデザインする前に、まずはこれだけ UIデザイン みんなで考え、カイゼンする フロントエンド ③勉強⽅法 おすすめの本 チームで協業して作り上げ、改善していくための 仕組みや⼿法を解説した本。 ディレクター、マネージャーなど組織でのものづ くりに携わる⽅にもおすすめ。 デザイナー ディレクター
71. ユーザーにやさしく、
    チームにやさしく。
72. ユーザーにやさしく、
    チームにやさしく。 ありがとうございました！
73. UIデザインする前に、
    まずはこれだけ   2019年6⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦