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
70
株式会社f4samurai|会社紹介資料
f4samurai
PRO
0
36k
UI研修#03 UX/UIデザイン制作フロー
f4samurai
PRO
0
360
UI研修#04 ワイヤーフレーム制作フロー
f4samurai
PRO
1
130
UI研修#05 わたしのUI思想
f4samurai
PRO
0
110
UIデザインワークショップ UIデザインの基礎と実践
f4samurai
PRO
0
420
Other Decks in Design
See All in Design
Design System for training program
mct
0
130
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
320
ZOZO CDO Office Design
zozodevelopers
PRO
1
360
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
220
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Slip N Slime - Character Design Ideation
thebogheart
0
300
root COMPANY DECK / We are hiring!
root_recruit
1
14k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
300
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
180
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
260
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
150
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Code Reviewing Like a Champion
maltzj
519
39k
Bash Introduction
62gerente
608
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Being A Developer After 40
akosma
86
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Statistics for Hackers
jakevdp
796
220k
Teambox: Starting and Learning
jrom
132
8.7k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
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 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる