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研修#01 デザインの基本フレーム
Search
f4samurai
PRO
August 21, 2023
Design
1
210
UI研修#01 デザインの基本フレーム
社内のUIデザイナー全員を対象としたUI研修の資料です。
第1回目は、「デザインに着手する前に機能の目的をしっかり把握すること」とそのフレームワークについてです。
f4samurai
PRO
August 21, 2023
Tweet
Share
More Decks by f4samurai
See All by f4samurai
CEDEC2023|『コードギアス 反逆のルルーシュ ロストストーリーズ』 IPタイトルの世界観を崩さない為の UI/UXデザインの進め方
f4samurai
PRO
0
86
株式会社f4samurai|会社紹介資料
f4samurai
PRO
0
38k
UI研修#03 UX/UIデザイン制作フロー
f4samurai
PRO
0
370
UI研修#04 ワイヤーフレーム制作フロー
f4samurai
PRO
1
130
UI研修#05 わたしのUI思想
f4samurai
PRO
0
110
UIデザインワークショップ UIデザインの基礎と実践
f4samurai
PRO
0
440
Other Decks in Design
See All in Design
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
320
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
ito aya|Portfolio2409
itoaya116
0
260
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
Night Shift (beginning sequence)
cpineda57
0
910
Карта реализации историй — убийца USM
ashapiro
0
210
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
Night Shift concept 9/15/2024
cpineda57
0
740
Featured
See All Featured
Done Done
chrislema
181
16k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Embracing the Ebb and Flow
colly
84
4.5k
Why Our Code Smells
bkeepers
PRO
334
57k
Producing Creativity
orderedlist
PRO
341
39k
Teambox: Starting and Learning
jrom
133
8.8k
How to Ace a Technical Interview
jacobian
276
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
デザインを制作する前に考えること デザインの基本フレーム UIデザイン研修 #1
デザインの基本フレーム ‧デザインの”⽬的”を意識する習慣づけ ‧”デザイン×⾔葉”の重要性を理解する 研修の⽬的 こんな⼈の助けになるかも カリキュラム ‧デザイン案検討の意思決定が難しい、または時間がかかる └複数案出したときに⾃分で案を絞れるようになる ‧FBを受ける際にデザイン意図の説明が難しい 課題
‧上⻑や他職種からのフィードバックを減らしたい⼈ ‧設計通りに作ったのに「何か違う」となって作り直すことが多い⼈ ‧明確な設計や要望がない場合に「決めきれない」状態に陥りがちな⼈ 1コマ⽬:【講座】デザインの基本フレーム 2コマ⽬:【プレゼン】各⾃の制作物を基本フレームに沿って紹介 UIデザイン研修 #1
マインドセット よいデザインとは まずは⽬的を明確にしよう フレームに沿って考えてみる フレームワーク例紹介 ⽬的を掘り下げるポイント Contents. 01 02 03
04 05 06 2
マインドセット UX/UIデザインは失敗する前提ではじめるもの 数多くの試⾏錯誤と失敗を経て製品が成り⽴つ 成⻑マインドvs 固定マインド 01 制作を進めながら「これで⽬的が達成できるか」を常に振り返る ラフ時点ではアイデアに執着せず柔軟に取捨選択して組み替える 3
良いデザインとは 原因1:そもそも⽬的‧ゴールの認識がズレている、または曖昧 原因2:⽬的を達成できる表現ができていない 良いデザイン=⽬的を達成できるデザイン ⽬的が達成できない原因 >⽬的が曖昧なままだと「なんか違うんだよね」と⾔われがち 02 4
5 具象 抽象 レイアウト 構成内容 要件 ⽬的 ビジュアルデザイン …要素の形状/⾊/装飾/演出など ユーザー感情に影響を及ぼすもの
…情報設計/表⽰する要素の列挙 フローチャート …⽬的達成の為に必要な機能や 要求の洗い出し …なぜその施策が必要なのか? 達成したいゴール …情報の配置‧ワイヤーフレーム 画⾯遷移 ⼀般的な UIデザイナーの職責 良いデザインとは 02
まずは⽬的を明確にしよう 1:⽬的‧ゴールのすり合わせ 2:⼗分な知識と引き出し -設計書に書いてあることがすべてではない -より⽬的を掘り下げて具体的にするためのヒアリング -設計の意思決定にデザインで貢献する -様々なUIやデザインに触れて咀嚼する経験 -他者とのコミュニケーション量 -各UIコンポーネントの種類や特性についての理解‧⼼理学の知識…etc. ⽬的を達成するために必要なもの
03 6
⽬的 :なんのためにやるのか Good End :どうなれば成功か/どんなメリットがあるか? :さけたい未来/留意事項 既出の要望 その他 既出の要望 ユーザー体験‧感情
ユーザー体験‧感情 その他 Bad End 7 現在 過去 未来 過去事例 :同プロジェクト内の参考情報 他社⽐較 :似たような事例の調査 :前後の⽂脈に⽬的の本質や⾏動のヒントが無いか? 経緯 UX/UIの基本フレーム ver.01 デザイン案 :どのようにアウトプットするかのアイデア/制作意図
8 ※どこかにヒントが転がってる場合があるので周りの動きに常にアンテナを張るように フレームに沿って考えてみる 1:他⼈と⽬的‧ゴールのすり合わせがしやすい <メリット> 2:画⾯仕様やデザイン意思決定の基準が明確になる 3:Good Endを掘り下げることで 具体的な⼿段のアイデアが出やすく、ブレづらい ⾃分の⾔葉で⾔語化してみよう
04
⽬的 :イベントロゴで何を表現するのか ラフデザイン案 9 現在 過去 未来 要望 :他職種からの要望‧提案‧留意事項があれば 参考画像
:似たような事例の調査 :前後の⽂脈を理解しよう 経緯 シナリオのコンセプト ロゴデザインのコンセプト :複数の切り⼝でラフ案を考える ユーザーに与えたい印象 A案 テーマ 使⽤カラー 使⽤モチーフ ユーザーに与えたい印象 B案 テーマ 使⽤カラー 使⽤モチーフ ユーザーに与えたい印象 C案 テーマ 使⽤カラー 使⽤モチーフ イベントロゴの基本フレーム ver.01
⽬的を掘り下げるポイント 06 1:より詳細にイメージし、掘り下げて考える癖をつける -抽象度が⾼すぎると認識ブレが起きやすい 2:とにかく考えたことを書き出していくこと -書き出しながらフレームに沿って随時整理していく -⾃分なりのフレームを作ってみよう 3:設計書に記載があっても⾃分の⾔葉で書き直すこと -多⾓的な表現でより相互理解が深まる 4:本来の⽬的を常に振り返り、⽬的の本質に迫るように推敲すること
-デザイン検討中に本来の⽬的とずれていないか確認 10
11 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる