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
230
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
170
株式会社f4samurai|会社紹介資料
f4samurai
PRO
0
46k
UI研修#03 UX/UIデザイン制作フロー
f4samurai
PRO
0
450
UI研修#04 ワイヤーフレーム制作フロー
f4samurai
PRO
1
150
UI研修#05 わたしのUI思想
f4samurai
PRO
0
130
UIデザインワークショップ UIデザインの基礎と実践
f4samurai
PRO
0
500
Other Decks in Design
See All in Design
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
aya_murakami_portfolio
ayakaimi1101
0
1.1k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
A designer walks into a library…
pauljervisheath
205
24k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Why Our Code Smells
bkeepers
PRO
335
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Pragmatic Product Professional
lauravandoore
32
6.4k
BBQ
matthewcrist
86
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
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 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる