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
280
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
310
株式会社f4samurai|会社紹介資料
f4samurai
PRO
0
58k
UI研修#03 UX/UIデザイン制作フロー
f4samurai
PRO
0
550
UI研修#04 ワイヤーフレーム制作フロー
f4samurai
PRO
2
180
UI研修#05 わたしのUI思想
f4samurai
PRO
0
170
UIデザインワークショップ UIデザインの基礎と実践
f4samurai
PRO
0
610
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
160
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
1
340
今日から意識できるアクセシビリティ
fumiko
0
240
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
#Dubois Challenge 2025: Economics
ajstarks
0
110
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
450
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
株式会社バクタム 会社説明資料
bactum
0
240
NAHO SHIMONO_Portfolio2025
nahohphp
0
830
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Become a Pro
speakerdeck
PRO
28
5.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
46
6.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
61k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる