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
570
UIデザインする前に、まずはこれだけ
UIデザイン初学者向けに、
・UIデザインを考えるときのコツ
・実務事例
・おすすめ勉強方法
などご紹介しました。
tossy
June 12, 2019
Tweet
Share
More Decks by tossy
See All by tossy
SDGs、SDGsっていうけど派遣型デザイナーに何ができるの???
tosssaurus
0
370
webデザイン版 バレンタイントレンド分析 2020
tosssaurus
0
70
webデザインで青が万能な理由とデメリット
tosssaurus
0
170
ターゲットを絞りすぎない実店舗のUXD
tosssaurus
0
52
高齢者のユーザビリティテストをやってみた
tosssaurus
0
130
恐竜トレンド2019
tosssaurus
0
180
かつて新卒だった私に伝えたい10のこと
tosssaurus
0
90
平成30年度版情報通信白書まとめ
tosssaurus
0
74
高齢層にやさしいwebデザイン って、どんなもの?
tosssaurus
4
1.4k
Other Decks in Design
See All in Design
アフォーダンスとシグニファイア
ryokanakai
1
320
Arborea Art Book
thebogheart
1
290
Первая беседа о Карте реализации историй
ashapiro
0
290
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
280
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
820
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
640
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
470
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
Featured
See All Featured
RailsConf 2023
tenderlove
29
900
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Faster Mobile Websites
deanohume
305
30k
A better future with KSS
kneath
238
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Being A Developer After 40
akosma
86
590k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
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⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦