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
690
UIデザインする前に、まずはこれだけ
UIデザイン初学者向けに、
・UIデザインを考えるときのコツ
・実務事例
・おすすめ勉強方法
などご紹介しました。
tossy
June 12, 2019
Tweet
Share
More Decks by tossy
See All by tossy
SDGs、SDGsっていうけど派遣型デザイナーに何ができるの???
tosssaurus
0
440
webデザイン版 バレンタイントレンド分析 2020
tosssaurus
0
110
webデザインで青が万能な理由とデメリット
tosssaurus
0
180
ターゲットを絞りすぎない実店舗のUXD
tosssaurus
0
86
高齢者のユーザビリティテストをやってみた
tosssaurus
0
170
恐竜トレンド2019
tosssaurus
0
220
かつて新卒だった私に伝えたい10のこと
tosssaurus
0
120
平成30年度版情報通信白書まとめ
tosssaurus
0
99
高齢層にやさしいwebデザイン って、どんなもの?
tosssaurus
4
1.5k
Other Decks in Design
See All in Design
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
180
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.4k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
350
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
230
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
620
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.4k
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
170
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
150
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
840
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Navigating Team Friction
lara
189
15k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Rails Girls Zürich Keynote
gr2m
95
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦