Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIデザインする前に、まずはこれだけ
Search
tossy
June 12, 2019
Design
6
560
UIデザインする前に、まずはこれだけ
UIデザイン初学者向けに、
・UIデザインを考えるときのコツ
・実務事例
・おすすめ勉強方法
などご紹介しました。
tossy
June 12, 2019
Tweet
Share
More Decks by tossy
See All by tossy
SDGs、SDGsっていうけど派遣型デザイナーに何ができるの???
tosssaurus
0
360
webデザイン版 バレンタイントレンド分析 2020
tosssaurus
0
70
webデザインで青が万能な理由とデメリット
tosssaurus
0
160
ターゲットを絞りすぎない実店舗のUXD
tosssaurus
0
52
高齢者のユーザビリティテストをやってみた
tosssaurus
0
120
恐竜トレンド2019
tosssaurus
0
170
かつて新卒だった私に伝えたい10のこと
tosssaurus
0
89
平成30年度版情報通信白書まとめ
tosssaurus
0
72
高齢層にやさしいwebデザイン って、どんなもの?
tosssaurus
4
1.4k
Other Decks in Design
See All in Design
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
620
portfolio
amitnk
1
120
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
260
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
110
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
390
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
9
7.8k
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
870
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.8k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.1k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
Practical Orchestrator
shlominoach
186
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Designing Experiences People Love
moore
138
23k
Music & Morning Musume
bryan
46
6.1k
Facilitating Awesome Meetings
lara
49
6k
Typedesign – Prime Four
hannesfritz
39
2.4k
Optimizing for Happiness
mojombo
376
69k
Done Done
chrislema
181
16k
Building Adaptive Systems
keathley
38
2.2k
Transcript
UIデザインする前に、 まずはこれだけ 2019年6⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦
こんにちは、和気です。 ワケ ・スマホアプリのUIデザイン.........................................4件 ・ワークフローUIデザイン............................................少々 恐⻯好きwebデザイナー 制作会社で主に⼩規模コーポレートサイトの新規制作、 保守業務を担当。シニア向けアクセシビリティを中⼼に勉強中。 どちらに常駐するのか楽しみ。 UIデザインする前に、まずはこれだけ ⾃⼰紹介
UIデザインする前に、まずはこれだけ webデザイナーがUIデザインしたときに知った UIデザインのコツ
UIデザインする前に、まずはこれだけ こんな⽅に伝えたい UIデザイン! 実務でやってみたい UIデザイン 勉強してる UIデザイン? なにそれ知りたい
UIデザインする前に、まずはこれだけ 本⽇共有しないこと ・UIデザインの詳細 ・ゲームのUIデザイン ・⼤規模ワークフロー ・スマホ以外のUIデザイン ・ガイドラインの解説 ・デザインソフトの操作
UIデザインする前に、まずはこれだけ 本⽇の⽬次 実務事例 1 2 3 UIデザインのコツ 勉強法
UIって なんですか? 質問
UIデザインする前に、まずはこれだけ UIとは UserInterface (ユーザーインターフェース)
UIデザインする前に、まずはこれだけ UIデザインとは サービスアプリ の情報設計〜ビジュアルデザイン 特にweb業界では、
UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の 担保 世界観の 統⼀
UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の 担保 → からの、 世界観の 統⼀ ユーザーの 満⾜度向上
UX サービスの ⽬的達成 企業の 業績貢献
UIデザインする前に、まずはこれだけ UIデザインが求められること 操作性の 担保 → からの、 世界観の 統⼀ ユーザーの 満⾜度向上
UX サービスの ⽬的達成 企業の 業績貢献 UXと密接に 関わっている
UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 要件定義 情報設計 ビジュアル デザイン 実装 検証 公開
運⽤
UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 実装 検証 公開 運⽤ UIデザイナー →→→ →→→→→→→→→
要件定義 情報設計 ビジュアル デザイン
UIデザインする前に、まずはこれだけ 代表的な業務フロー 企画 設計 要件定義 デザイン 実装 検証 公開 運⽤
UIデザイナー →→→ →→→→→→→→→ UXへの影響が⼤きいので 担当領域が広くなる
実務事例 1
個⼈的な⼀例です フィードバックいただけると喜びます あくまでも
UIデザインする前に、まずはこれだけ 某QR決済サービスの webアプリリニューアル ①実務事例
UIデザインする前に、まずはこれだけ 案件概要 ・UIデザインの洗練化がメイン ・コンテンツ、画⾯の追加あり ・デバイスは専⽤のAndroid端末のみ ①実務事例
UIデザインする前に、まずはこれだけ 制作したUIデザイン ①実務事例
UIデザインする前に、まずはこれだけ 制作したUIデザイン ①実務事例
UIデザインする前に、まずはこれだけ 当時の業務フロー 企画 実装 検証 公開 運⽤ UIデザイナー →→→ →→
①実務事例 要件定義 情報設計 ビジュアル デザイン
UIデザインする前に、まずはこれだけ 当時の業務フロー ①実務事例 情報設計 ビジュアルデザイン ・既存の画⾯確認 ・コンテンツの洗い出し ・必要な機能の確認 ・⽂⾔の統⼀ ・プロトタイプで検証
・ブラッシュアップ ・画⾯デザイン制作(XD) ・状態変化のパターン、 コンポーネント⼀覧作成
UIデザインする前に、まずはこれだけ 当時の業務フロー ①実務事例 情報設計 ビジュアルデザイン ・既存の画⾯確認 ・コンテンツの洗い出し ・必要な機能の確認 ・⽂⾔の統⼀ ・プロトタイプで検証
・ブラッシュアップ ・画⾯デザイン制作(XD) ・状態変化のパターン、 コンポーネント⼀覧作成 プロトタイプで 情報設計とビジュアルデザインを 繰り返す
UIデザインのコツ 2
UIデザインする前に、まずはこれだけ UIデザインのコツ ②UIデザインのコツ コンポーネントの知識 プロトタイプの活⽤ ガイドラインの理解
UIデザインする前に、まずはこれだけ コンポーネント の知識 ②UIデザインのコツ
UIデザインする前に、まずはこれだけ コンポーネントとは 部品、パーツ ボタン タブ タブ タイトル 本⽂テキスト本⽂テキスト 本⽂テキスト本⽂テキスト 本⽂テキスト本⽂テキスト
②UIデザインのコツ
UIデザインする前に、まずはこれだけ コンポーネントとは Bootstrap コンポーネントをもとにつくられた、 フロントエンド向けのWebフレームワーク。 パーツ・コンポーネント単位で定義して いく、UI デザインの⼿法。 AtomicDesign ②UIデザインのコツ
UIデザインする前に、まずはこれだけ コンポーネントの知識があると ・⼀貫性を保ちやすい ・共有しやすい ・状態変化を考慮しやすい ②UIデザインのコツ
UIデザインする前に、まずはこれだけ ②UIデザインのコツ プロトタイプ の活⽤
UIデザインする前に、まずはこれだけ プロトタイプとは 試作品、模型 ②UIデザインのコツ
プロトタイプ型 ウォーターフォール型 UIデザインする前に、まずはこれだけ プロトタイプ型⇔ウォーターフォール型 ②UIデザインのコツ 要件定義 要件定義 デザイン デザイン プロトタイプ
作成 プロトタイプ 修正 開発 開発 プロトタイプ 評価
プロトタイプ型 ウォーターフォール型 UIデザインする前に、まずはこれだけ プロトタイプ型⇔ウォーターフォール型 ②UIデザインのコツ 要件定義 要件定義 デザイン デザイン プロトタイプ
作成 プロトタイプ 修正 開発 開発 プロトタイプ 評価 実装⼯程終盤での 後戻りリスクが少ない
UIデザインする前に、まずはこれだけ ②UIデザインのコツ ガイドライン の理解
UIデザインする前に、まずはこれだけ ガイドラインとは 指針、指標、原則 ②UIデザインのコツ
UIデザインする前に、まずはこれだけ ガイドラインとは iOSHumanInterfaceGuidelines iOS(Apple)のUI設計の指針を まとめたドキュメント。 Android(Google)のUIの品質基準と テスト⽅法をまとめたドキュメント。 AndroidDesign ②UIデザインのコツ https://developer.apple.com/design/human-interface-guidelines/
ios/overview/themes/ https://developer.android.com/design
UIデザインする前に、まずはこれだけ ガイドラインとは iOSHumanInterfaceGuidelines iOS(Apple)のUI設計の指針を まとめたドキュメント。 Android(Google)のUIの品質基準と テスト⽅法をまとめたドキュメント。 AndroidDesign ②UIデザインのコツ UIデザインする前に
⼀読したい
UIデザインする前に、まずはこれだけ ガイドラインとは iOSHumanInterfaceGuidelines iOS(Apple)のUI設計の指針を まとめたドキュメント。 Android(Google)のUIの品質基準と テスト⽅法をまとめたドキュメント。 AndroidDesign ②UIデザインのコツ UIデザインする前に
⼀読したい
UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ! 5 5 5 最低限知っておきたい ガイドライン 選
1 1 1 iOSとAndroidの 違いを知る UIデザインする前に、まずはこれだけ ②UIデザインのコツ
UIデザインする前に、まずはこれだけ iOS(iPhone) Android ②UIデザインのコツ iOSとAndroidの違い ナビゲーションバーが ない ナビゲーションバーが ある タブバーが
下にある タブバーが 上にある http://uiohmy.com/
2 2 2 UIデザインする前に、まずはこれだけ ②UIデザインのコツ 本⽂フォントの基準サイズは 16px
UIデザインする前に、まずはこれだけ ②UIデザインのコツ iOSHumanInterfaceGuidelines AndroidDesign 本⽂フォントの基準サイズは16 https://material.io/design/typography/#type-scale https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
UIデザインする前に、まずはこれだけ ②UIデザインのコツ 3 3 3 を考慮 状態変化
UIデザインする前に、まずはこれだけ ②UIデザインのコツ コンポーネントにはいろんな状態がある 選択できる 選択できない 0個 選択した 修正済み 変更できない 3個
100個
UIデザインする前に、まずはこれだけ ②UIデザインのコツ コンポーネントにはいろんな状態がある
UIデザインする前に、まずはこれだけ ②UIデザインのコツ 4 4 4 タップエリアは 44px以上
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/
UIデザインする前に、まずはこれだけ ②UIデザインのコツ タップエリアは44px以上
UIデザインする前に、まずはこれだけ ②UIデザインのコツ 5 5 5 ポジティブ要素とネガティブ要素の 区別を明確に
UIデザインする前に、まずはこれだけ ②UIデザインのコツ ポジティブ要素とネガティブ要素の区別を明確に ポジティブ要素は右側 ネガティブ要素は左側 破壊的な操作を予測しやすく https://material.io/design/components/dialogs.html https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/ 削除する 閉じる
UIデザインする前に、まずはこれだけ ②UIデザインのコツ 特にネガティブ要素を明確に
UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ!ガイドライン ポジティブ要素とネガティブ要素の区別を明確に タップエリアは44px以上 状態変化を考慮 本⽂フォントの基準サイズは16px iOSとAndroidの違いを知る 1 2
3 4 5
UIデザインする前に、まずはこれだけ ②UIデザインのコツ まずはこれだけ!ガイドライン ボタンはボタンらしく ポジティブ要素とネガティブ要素の区別を明確に タップエリアは44px以上 状態変化を考慮 本⽂フォントサイズの基準は16px 1 2
3 4 5 状態に適応した、 ユーザーにやさしい設計
UIデザインする前に、まずはこれだけ UIデザインのコツ ②UIデザインのコツ コンポーネントの知識 プロトタイプの活⽤ ガイドラインの理解
勉強⽅法 3
UIデザインする前に、まずはこれだけ ③勉強⽅法 知識 技術 制作者はバランスが⼤事
UIデザインする前に、まずはこれだけ ③勉強⽅法 ガイドラインを 確認してみる
UIデザインする前に、まずはこれだけ ③勉強⽅法 ガイドラインといえば iOSHumanInterfaceGuidelines iOS(Apple)のUI設計の指針を まとめたドキュメント。 Android(Google)のUIの品質基準と テスト⽅法をまとめたドキュメント。 AndroidDesign https://developer.apple.com/design/human-interface-guidelines/
ios/overview/themes/ https://developer.android.com/design
UIデザインする前に、まずはこれだけ 翻訳アイコンをクリック 右クリック ③勉強⽅法 Google翻訳でがんばる
UIデザインする前に、まずはこれだけ ③勉強⽅法 UI系デザインソフトを 使ってみる
UIデザインする前に、まずはこれだけ XD Adobeのソフトで、Win10〜、Mac可。 無料版はCCユーザー以外でも利⽤可。 コンポーネント管理のできるソフトの代表。 Mac可。Win不可。プラグインが豊富。 Sketch ③勉強⽅法 UIデザイン系 2強
UIデザインする前に、まずはこれだけ Cocoda! お題をもとにUIデザインを制作しながら 学習していくwebサービス。 無料の会員登録で利⽤可。 「はじめてのUI」コンテンツは、 よりやさしいお題をすすめながら ソフト操作やUIデザインのTipsを学べる。 ③勉強⽅法 おすすめのサービス
UIデザインする前に、まずはこれだけ ③勉強⽅法 わたしも使ってます tosssaurusで アカウント あります
UIデザインする前に、まずはこれだけ ③勉強⽅法 本を 読んでみる
UIデザインする前に、まずはこれだけ はじめてのUIデザイン UIデザインの教科書をテーマに制作された本。 実作業に必要な⼒を⾝につけることを⽬的に、 概念の解説からUIを体系⽴てて学べる。 デザイナー ディレクター ③勉強⽅法 おすすめの本
UIデザインする前に、まずはこれだけ DesignSystems ―デジタルプロダクトのためのデザインシステム実践ガイド AirbnbやTEDなど、海外の企業で導⼊されている デザインシステムの実践⼿法の紹介。 デザイナー ③勉強⽅法 おすすめの本
UIデザインする前に、まずはこれだけ AtomicDesign 〜堅牢で使いやすいUIを効率良く設計する フロントエンド ③勉強⽅法 おすすめの本 「AbemaTV」UI設計の著者がAtomic Designの 実践⽅法を解説した本。 設計の考え⽅から、具体的な⼿順、UIテスト、現
場でひっかかりやすいポイントまで学べる。
UIデザインする前に、まずはこれだけ UIデザイン みんなで考え、カイゼンする フロントエンド ③勉強⽅法 おすすめの本 チームで協業して作り上げ、改善していくための 仕組みや⼿法を解説した本。 ディレクター、マネージャーなど組織でのものづ くりに携わる⽅にもおすすめ。
デザイナー ディレクター
ユーザーにやさしく、 チームにやさしく。
ユーザーにやさしく、 チームにやさしく。 ありがとうございました!
UIデザインする前に、 まずはこれだけ 2019年6⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦