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
670
UIデザインする前に、まずはこれだけ
UIデザイン初学者向けに、
・UIデザインを考えるときのコツ
・実務事例
・おすすめ勉強方法
などご紹介しました。
tossy
June 12, 2019
Tweet
Share
More Decks by tossy
See All by tossy
SDGs、SDGsっていうけど派遣型デザイナーに何ができるの???
tosssaurus
0
430
webデザイン版 バレンタイントレンド分析 2020
tosssaurus
0
100
webデザインで青が万能な理由とデメリット
tosssaurus
0
180
ターゲットを絞りすぎない実店舗のUXD
tosssaurus
0
80
高齢者のユーザビリティテストをやってみた
tosssaurus
0
160
恐竜トレンド2019
tosssaurus
0
210
かつて新卒だった私に伝えたい10のこと
tosssaurus
0
120
平成30年度版情報通信白書まとめ
tosssaurus
0
91
高齢層にやさしいwebデザイン って、どんなもの?
tosssaurus
4
1.5k
Other Decks in Design
See All in Design
Storyboard Honey
rocioparronrubio
0
290
AIで加速するアクセシビリティのこれから
magi1125
3
590
mento Design Team Portfolio
mento0fficial
0
360
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
360
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Yumika Yamada Portfolio
yumii
0
1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
190
AI動画生成ガチャ紹介
piyo7
1
150
Memory Man v3 (WIP)
storybychad
PRO
0
2.2k
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
210
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Building Adaptive Systems
keathley
43
2.7k
Embracing the Ebb and Flow
colly
86
4.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Site-Speed That Sticks
csswizardry
10
720
The Invisible Side of Design
smashingmag
301
51k
Gamification - CAS2011
davidbonilla
81
5.4k
Side Projects
sachag
455
43k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Speed Design
sergeychernyshev
32
1k
Automating Front-end Workflow
addyosmani
1370
200k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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⽉ 株式会社メンバーズキャリア 福岡 デザイナー 和気 登志⼦