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
2
290
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
360
株式会社f4samurai|会社紹介資料
f4samurai
PRO
0
64k
UI研修#03 UX/UIデザイン制作フロー
f4samurai
PRO
0
580
UI研修#04 ワイヤーフレーム制作フロー
f4samurai
PRO
2
190
UI研修#05 わたしのUI思想
f4samurai
PRO
0
190
UIデザインワークショップ UIデザインの基礎と実践
f4samurai
PRO
0
660
Other Decks in Design
See All in Design
#Dubois Challenge 2025: Economics
ajstarks
1
160
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
The Spectacular Lies of Maps
axbom
PRO
1
260
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.7k
Bulletproof Design System with TypeScript
takanorip
7
4k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
290
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
440
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf 2023
tenderlove
30
1.2k
We Have a Design System, Now What?
morganepeng
53
7.8k
Faster Mobile Websites
deanohume
309
31k
The Language of Interfaces
destraynor
161
25k
The Pragmatic Product Professional
lauravandoore
36
6.8k
A better future with KSS
kneath
239
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Visualization
eitanlees
148
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる