UI研修#01 デザインの基本フレーム

社内のUIデザイナー全員を対象としたUI研修の資料です。
第1回目は、「デザインに着手する前に機能の目的をしっかり把握すること」とそのフレームワークについてです。

Transcript

1. デザインを制作する前に考えること デザインの基本フレーム UIデザイン研修 #1
2. デザインの基本フレーム ‧デザインの”⽬的”を意識する習慣づけ ‧”デザイン×⾔葉”の重要性を理解する 研修の⽬的 こんな⼈の助けになるかも カリキュラム ‧デザイン案検討の意思決定が難しい、または時間がかかる  └複数案出したときに⾃分で案を絞れるようになる ‧FBを受ける際にデザイン意図の説明が難しい 課題 ‧上⻑や他職種からのフィードバックを減らしたい⼈ ‧設計通りに作ったのに「何か違う」となって作り直すことが多い⼈ ‧明確な設計や要望がない場合に「決めきれない」状態に陥りがちな⼈ １コマ⽬：【講座】デザインの基本フレーム ２コマ⽬：【プレゼン】各⾃の制作物を基本フレームに沿って紹介 UIデザイン研修 #1
3. マインドセット よいデザインとは まずは⽬的を明確にしよう フレームに沿って考えてみる フレームワーク例紹介 ⽬的を掘り下げるポイント Contents. 01 02 03 04 05 06 2
4. マインドセット UX/UIデザインは失敗する前提ではじめるもの 数多くの試⾏錯誤と失敗を経て製品が成り⽴つ 成⻑マインドvs 固定マインド 01 制作を進めながら「これで⽬的が達成できるか」を常に振り返る ラフ時点ではアイデアに執着せず柔軟に取捨選択して組み替える 3
5. 良いデザインとは 原因１：そもそも⽬的‧ゴールの認識がズレている、または曖昧 原因２：⽬的を達成できる表現ができていない 良いデザイン＝⽬的を達成できるデザイン ⽬的が達成できない原因 ＞⽬的が曖昧なままだと「なんか違うんだよね」と⾔われがち 02 4
6. 5 具象 抽象 レイアウト 構成内容 要件 ⽬的 ビジュアルデザイン …要素の形状/⾊/装飾/演出など  ユーザー感情に影響を及ぼすもの …情報設計/表⽰する要素の列挙  フローチャート …⽬的達成の為に必要な機能や  要求の洗い出し …なぜその施策が必要なのか？  達成したいゴール …情報の配置‧ワイヤーフレーム  画⾯遷移 ⼀般的な UIデザイナーの職責 良いデザインとは 02
7. まずは⽬的を明確にしよう １：⽬的‧ゴールのすり合わせ ２：⼗分な知識と引き出し -設計書に書いてあることがすべてではない -より⽬的を掘り下げて具体的にするためのヒアリング -設計の意思決定にデザインで貢献する -様々なUIやデザインに触れて咀嚼する経験 -他者とのコミュニケーション量 -各UIコンポーネントの種類や特性についての理解‧⼼理学の知識…etc. ⽬的を達成するために必要なもの 03 6
8. ⽬的 ：なんのためにやるのか Good End ：どうなれば成功か/どんなメリットがあるか？ ：さけたい未来/留意事項 既出の要望 その他 既出の要望 ユーザー体験‧感情 ユーザー体験‧感情 その他 Bad End 7 現在 過去 未来 過去事例 ：同プロジェクト内の参考情報 他社⽐較 ：似たような事例の調査 ：前後の⽂脈に⽬的の本質や⾏動のヒントが無いか？ 経緯 UX/UIの基本フレーム ver.01 デザイン案 ：どのようにアウトプットするかのアイデア/制作意図
9. 8 ※どこかにヒントが転がってる場合があるので周りの動きに常にアンテナを張るように フレームに沿って考えてみる １：他⼈と⽬的‧ゴールのすり合わせがしやすい ＜メリット＞ ２：画⾯仕様やデザイン意思決定の基準が明確になる ３：Good Endを掘り下げることで   具体的な⼿段のアイデアが出やすく、ブレづらい ⾃分の⾔葉で⾔語化してみよう 04
10. ⽬的 ：イベントロゴで何を表現するのか ラフデザイン案 9 現在 過去 未来 要望 ：他職種からの要望‧提案‧留意事項があれば 参考画像 ：似たような事例の調査 ：前後の⽂脈を理解しよう 経緯 シナリオのコンセプト ロゴデザインのコンセプト ：複数の切り⼝でラフ案を考える ユーザーに与えたい印象 A案 テーマ 使⽤カラー 使⽤モチーフ ユーザーに与えたい印象 B案 テーマ 使⽤カラー 使⽤モチーフ ユーザーに与えたい印象 C案 テーマ 使⽤カラー 使⽤モチーフ イベントロゴの基本フレーム ver.01
11. ⽬的を掘り下げるポイント 06 １：より詳細にイメージし、掘り下げて考える癖をつける -抽象度が⾼すぎると認識ブレが起きやすい ２：とにかく考えたことを書き出していくこと -書き出しながらフレームに沿って随時整理していく -⾃分なりのフレームを作ってみよう ３：設計書に記載があっても⾃分の⾔葉で書き直すこと -多⾓的な表現でより相互理解が深まる ４：本来の⽬的を常に振り返り、⽬的の本質に迫るように推敲すること -デザイン検討中に本来の⽬的とずれていないか確認 10
12. 11 フレームに沿って ⾃分デザインの⽬的を書き出してみよう ‧設計書に書かれていない⽂脈まで想像しよう ‧書き出してみた⽬的を他の⼈と共有して意⾒交換しよう 実践してみる