大デザナレ展2023 Day2
m.kito大デザナレ展 2023のDay2にて、参加セッションのメモです。
m.kitoメンバーと向き合い続けたUI品質評価のプロセス
品質評価の始まり・背景
品質評価における妥当性を上げたい
属人化を防ぐ
成長を促しアウトプットの質を上げたい
⇨品評会
フェーズ１
質の定義は表現だけではない
評価範囲：表現の質、スタンス、スケジュール、インプット
評価項目：adobeの７つのデザイン原則
評価者：VDO、UIデザインMGR、リードUIデザイナー
何が評価されるのか分かりづらい
評価のネクストアクションが具体的に思い浮かばない
評価範囲：アウトプットだけに
評価項目：adobeの７つのデザイン原則
評価者：VDO、UIデザインMGR、リードUIデザイナー
メンバーの課題
自分が作るデザインの目的を理解していない状態で作ってる
受動的になっている面も
フェーズ２
質は得たい成果から始まる？
評価範囲：体験設計も含めたプロセス〜表現の質まで
評価項目：adobeの７つのデザイン原則
評価者：VDO、UIデザインMGR、リードUIデザイナー、UXデザインMGR、PMO MGR
⇨ 目的を理解した表現と言語化が上達
評価の納得感が下がった
表現よりもプロセスが重視されている
表現にかんしてあまり語れないそこを評価されてる感
品評会内でのFBと評価項目の軸がズレてる
FBが上流の部分、評価項目は表現の質
会自体の形骸化し、FBが次に生かされない
評価の点数をつける会が目的に
フェーズ３
表現の質にフォーカスしよう
品質評価の妥当性を上げたい
成長を促しアウトプットの質を上げたい
表現の質に絞り、メンバーが成長できたかを測れるように
評価範囲：表現の質（発表はプロセスから）
評価項目：成長させたい能力に絞った基本の５項目
評価者：VDO、UIデザインMGR、リードUIデザイナー、UXデザインMGR、PMO MGR
成長させたい能力から逆算して考える
設計力：
- 使いやすさ：迷わず操作できるか、操作ミスしにくいか
- みやすさ：情報の親子関係、兄弟関係がわかりやすいか、物事の優先順位がわかりやすいか
表層の質：
- 印象：狙った世界観になっているか、全体の統一感を感じるか
- こだわり：細部の細やかさがあるか、自分らしさがあるか
表現の幅：検討時に複数案作成してたか、バリエーションはあったか
評価の付け方
Good（特筆する部分あり）、Motto（基準をみたいしていない）、いうことなし（十分！）の３軸でFB
次にすぐ活かせそうなイメージが湧くFB
今後の検討のヒントに
デザイン検討のプロセスを知ることができた
評価における自分達の目的を見失わないこと
評価をやる本質に都度立ち返る、調整を加える
評価される側との都度コミュニケーション
意見交換のできる場があるからこそ、納得感が生まれやすいはず
m.kito私たちデザイナーは、どうすれば正しく評価されるのか？
セーフィーの人事制度と評価システム
上期と下期で年2回の給与改定
MBOで目標設定
⇨ 全社員が同じ仕組みで評価を受ける
どのように目標を立てているのか
SMARTで立てる
会社、本部、部、個人の目標を設定する
壁にぶつかる
全社目標に対してデザイナーの目標と行動
ドツボにハマる
組織目標を中間KPIからデザイナーの目標と行動
関連度の説明が困難
KPIなど、数値にすると、大胆なチャレンジがなくなる
デザイナーができる組織貢献 - 意識を変えよう
ビジネスパーソンとしての自覚を持つこと
商品をどう作るか
どう売上を立てるか
そして、どう利益を出すのか
HR ⇨ 情報・知的財産 ⇨ 商品・資産 ⇨ 現金
大事なこと
最終的にキャッシュを生み出すベクトルが揃っていること
職種特有の課題
クリエイティブ職の課題
デザイン業務は、企業活動の様々なフェーズで求められる
デザイナーの目標を立てやすくする組織設計のコツ
個人目標＝会社の目標にするために大事な３つのポイント
1. ジャンルをPIVOTさせる
何に対するアクションなのか
ジャンルと組織たいが違えば、時間軸とゴールが異なることを意識してデザイナ感の連携を高めて取り組む
2. 目標達成にかかる時間軸は揃える
業績貢献と言ってもデザインの時間軸を意識しないと成果を追いにくい
ECサイト等で今月・来月の成果を追うのか、2年後の売り上げのための商品を作るのか
3. 関わるPJ・組織体のミッションに伴走する
デザイナーが関わるプロジェクト・組織体のミッションに伴走する
同じ目標を追うパートナーになる
まとめ
クリエイティブ職もビジネスパーソンとしての自覚を持つ
デザイナーの目標（仕事のベクトル）も、事業会社においては、会社の通年・中期目標と方向性を合わせる前提を、あらためて意識すること
方向性（仕事のベクトル）を間違わなければ、デザイナーのどんな業務も特別扱いされず、同じ会社のたの社員同様の評価軸とアピールで評価を獲得できる
取り組むアクションのジャンルと目標の時間軸は揃えよう
活動ジャンルをPIVOTさせる（営業、プロダクト、コーポレートを織り交ぜない）
目標達成にかかる時間軸は揃える
関わるPJ・組織体のミッションに伴走する
m.kitoたのしみながら成長できる仕組みづくりを考える
心理的安全性≒楽しく優しい職場
仕事場でも同じこと言えるの？
サービスと共に成長できる環境づくり
やりたいことに仕事にする際の自分との向き合い方
- Will：振り返りでの自己評価
- Must：組織や雇用主からの期待
- Can：チームや周囲からの評価
スキル支援、評価委員会の設定
スキルマップ、KPIのフレームワーク提供
戦術的なプロトタイピングを評価する
体感的なプロトタイピングを評価する
事業を定量的な数値モデルの評価（可観測性）
予測値に対する実測値を評価する
仮説実行を早めて失敗をコントロールする
課題解決と適切な評価を
自ら考え行動する技術者を育てる
- Agility
- Attractive
- Scientific
- Motivative
既存の環境にインサイトするには？
持続成長できる組織にはこの法則が組み込まれている
- 目標が明確。何をすればいいのか予想できる
- 難易度がちょうど良い。頑張れば達成できる
- 行動に対して直ちにフィードバックが得られる
- 過程を楽しめる・体験に夢中になれる
- 行動とそれによる結果が制御ができる
- 活動自体に本質的な価値を感じる
新卒研修・中途採用でレゴでまちづくり
ゲームフロー理論
自分のスキルと難易度で楽しい！面白い！
目標が明確か
難易度がちょうど良いか
⇨ 適切な難易度を考える
ゾーンはメンバーの価値観や行動特性が異なる
自己主体感
人言は恣意的な難易度調整に気づくと不快を感じる
ワクワクする目標・評価設定を中心にメンバーと対話してみませんか？
KPIやOKRに組み込む
Will、Can、Mustが組み合わさる領域を広げる
m.kito銀行員、デザイン組織を作る
なぜメガバンクでインハウスのデザイン組織を
2016年のデジタルシフト
変わらなければならない
⇨ デジタル組織を作る
2016年〜2022年
課題
企画から入れるPJが少ない
少数精鋭で個人商店化
デザイナーのリソース不足
多様な強みを持つデザイン組織
デザインを組織の中に浸透させていく
2022年〜大きな変化
メンバーの強化
スキルセットの拡充
期待値の変化（金融プロダクトのデジタル化⇨グループ連携）
成長期
これまでとは違うチームの形にシフト
中長期計画の具象化とチームのベクトルを合わせること
ゴールへのベクトルを合わせる
事例１：中長期計画を具象化する 未来カンファレンス
きっかけは、マネジメント層からメンバーで理想像を考えてほしいとの依頼があった
チームで目指したい理想像
ワークショップ
そもそも何がしたいのか
自分ごとにするにはどうしたら良いか
若手だけで考えてみたい
せっかくなら楽しいWSにしたい
バックキャストの最考
未来カンファレンスワークショップの実施
1.内容の整理
やりたいことのグルーピング
個人・チーム単位、会社単位などでグループ化して整理
2.ロードマップ化
やりたいことをロードマップに落とし込む
3.具象化
図式、言語化し、非デザイナーへ共有
結果的にマネジメント層が考えるデザインチームの理想像と合致していた
事例２：デザインカルチャーを作る SMBC DESIGN サイト
書籍「銀行とデザイン」を発行
インハウスデザイナーが10名へ
SMBC DESIGNのことを知ってもらえることが多くなった
デザインサイトを使って何かできないか？
リニューアル目的：
知ってもらう ⇨ 理解して共感してもらう
共感してもらうために：
「らしさ」や「雰囲気」を伝えるためにデザインカルチャーを作る
1回目：
インハウスデザイナーとして大切にしているスタンスを共有して議論
2回目：
書き出したスタンスを小グループ化
共感にはスタンプのリアクション
3回目：
大グループ化
自分達のらしさを定義することで外部からより共感してもらえる組織に
チームとしての立ち返る場所ができた
発展途上のデザイン組織で「共感」を作る仕組み
メンバー全員が、能動的に楽しみながらゴールを具象化する
参考：
m.kito人様のデザインシステムを預かる
クライアントにとってどのようなデザインシステムが最良なのか誰にもわからない
ひとつのサービスをデザインするようにデザインシステムを作る
計画：
HCDの考え方を取り入れたデザインプロセスでやっていく
利用状況の理解及び明示
デザインシステムを利用するメンバーへのユーザーインタビューする
デザインデータに触れたり業務フローを観察して現状の開発環境を理解する
ユーザー要求事項の明示
ワークショップや共有会でニーズやペインの理解を深める
公開されているデザインシステムをウォークスルーして何を作るのか？どう作るのか？共通認識を構築する
m.kitoクライアントワークに刺さるデザインシステムの育て方
デザインシステムとは？
デザイナー間でも解釈が異なる
スタイルガイド、コンポーネント、デザインガイドライン、ブランドガイドライン、ライティングガイドライン、、、
プロジェクトが変わるごとに毎回0から構築するのは非効率
→ 汎用性の高いテンプレートを構築して骨格・表層デザインの初速を上げる
クライアントワークに刺さるデザインシステム
デザイントークン
Variablesを使ってデザイントークンを定義していく
- Primitive ColorとSemantic Colorから構成
- Semantic Colorは、実用性を意識
- SpacingとRediusは、柔軟に対応できるように多めに定義
- 定義しないものを明確にしておく
- Variablesで定義できないものをローカルスタイルに登録する
- Componenntsは、Atomsを中心に用意
アイコンシステム
- アイコン作成も
- Icon Guidline
デザインキット
- 付箋やメッセンジャーなど
育て方
汎用性の高いテンプレートを作って満足しない
段階的に成長させていく
段階的にアプローチ
導入期
- テンプレートファイルの作成
- 社内デザイナーに共有
成長期
- 社内デザイナーに定期的に発信
- プロジェクトで実際に利用
成熟期
- 社内デザイナーに向けて定期的に発信
- 社内エンジニア
- Storybookの作成
デザインシステムのためのチームを結成する
- 構築するまでのコストが高いステップをショートカット
- プロジェクトに合わせて事業やフェーズが違っても等しくコミュニケーションが構築できる
作る努力の２倍、枯れさせない努力を
m.kitoデザインシステムと思考の体系化
一律されたUIキット
思想から異なると、対応しきれない
似ている、しかしちょっと違う
（機能、役割、世界観）
→ Projectごとにデザインシステムを構築することにした
思考の体系化
思考とは？
構想策定 ー 要件定義 ー デザイン ー 開発 ー 運用
プロセスを体系化し、貯めておくことで、本質を捉える助けとなる
原則：ユーザーのための体験を考える
パターン：「ユーザーの欲求」「を満たす手段」「を使うときに考える事」でブレイクダウン
設計
ナレッジ化
IcT活用で空間を通して機能を持たせる
小学校：音楽室
公民館：スタジオ
つまりこういうことだよね＝ソリューション
本質は似てくる
ナレッジ化して本質を貯めておく
→ 応用するナレッジがないか？から始めることができる
体系化は、ひたすらコミュニケーション
m.kito200万ショップが利用するBASEがFigmaの最前線でサバイブするための社内ワークショップ
社内のデザインシステム Lantern
BBQ Components ー UI Kit
Figmaスキル格差
Figma基本のき
- Auto Layout
- Component
- Component Properties
＋
Baseデザイン基本のき
- ガイドライン
- 新規Componentの作成
- 管理・運用方法
Figamaを組織で活用し始めるには
Figmaの機能 ✖️ Base独自のデザインルール・プロセス
Figma活用フロー ✖️ 多様なスキルレベルのデザイナーにレクチャー + Figmaのデザインルール
Figma合宿
健康診断
- カウンセリングでレベル把握
合宿
- ワークショップでインプット
合宿後の課題
- 合宿の内容を実施してアウトプット
合宿の事前準備
習熟度の目安を作成
合宿するとできるようになること
LV1：デザイン差分や遷移先がわかりづらい
LV3：差分を高速リスト化し、Variantsで差分を作成
習熟度目安表で格差を可視化
自分が知っているから他者も知ってるはずの思い込みを捨てて情報共有
Variablesを活用したToken設計
Component Propertiesを各コンポーネントに適用