はじめに
この記事は Goodpatch Design Advent Calendar 2020 の4日目の記事です。
今年もグッドパッチでは4月から6月までの3ヶ月間で新卒研修を行いました。Goodpatchでは、毎年UIデザイナー / UXデザイナー / エンジニア / 経営企画室と各部署の先輩社員が、新しく入社するメンバーのための研修設計を行っているのですが、特に今年は研修は気合が入っており先輩総出で設計を行いました。
その中でもUIデザイナー職の研修は前半の「ビジュアルデザイン研修」と後半の「ソフトウェアデザイン研修」で分かれており、それぞれの分野で強みを持つ先輩デザイナーで研修の設計をし、オンライン上で研修を行いました。研修の全体像についてはこちらの記事をご覧ください。
新卒UIデザイン研修 〜GoodpatchのUIデザイナーとして持つべき価値観編〜
今回の記事では「ソフトウェアデザイン研修」の中で実施したUIデザインワークとUIデザインドリルの2つについて紹介しようと思います。
また他UIデザイン研修の記事に関しては、内容が多いため別記事でお伝えしていきます。
【関連記事】デザイン思考の研修おすすめ10選! 期待できる効果や選ぶポイントは?
UIデザインに対する誤解を解く
UIデザインワークの内容
お題:かんたんなToDoアプリをデザインしましょう
デザインの対象はiOS、Androidどちらでも構いません。ただし、それぞれのガイドラインを厳守するようにしてください。これを実装可能な状態(UI上発生するすべての状態を考慮したもの)までデザインしてください。
【要件】タスク
・新規タスクを追加できる
・登録済みタスクの一覧を閲覧できる
・登録済みのタスク内容を変更できる
・完了したタスクの一覧も閲覧できる
・完了したタスクを未完状態に戻すことができる【要件】制約
iOS
・NavigationBarを使用してください
・TabBarは使用しないでください
・FloatingActionButtonはiOSには用意されていないコンポーネントです。自作しないでくださいAndroid
・FloatingActionButtonを使用してください
・AppBarを使用してください
・BottomNavigationは使用しないでください
上記の課題で示されている要件を満たしたデザインを行い、レビューを通過すると次の課題に進むことができます。しかし、これだけではUIデザインを行う入り口としては少々難しいので、社内に存在する多くのナレッジの中から、課題の参考になるナレッジをいくつかピックアップし、ヒントとして提供しました。
社員が実際に業務の中で得た、経験をナレッジ化していることが多いので、実務で役に立つ目線からUIデザインに関する知見を得ることができます。
(以下、ヒントとして使用した社内ナレッジのタイトルです)
・UIスタックモデル
・UIのラベル・文言設計の観点
・多重度とZero One Infinityルール
・キャンセルのキャンセル問題から考えるダイアログデザイン
・ローディング(プログレス)インジケーターの表現方法
・データ更新を伴うモーダルUI
・UIレビュー観点
・モバイルアプリのGUIを構成する要素と画面設計
・色のセマンティックな分類方法
・コレクション系UIで考慮しとくと良い機能パターン
・検索するUIのパターン調べ
・ツリー構造とセミラティス構造
例えば、
「このタイミングでエラーが発生したらどうなる?」
「このモードのときにここをタップしたら途中でモードから抜けちゃうよね?」
「アラートダイアログの使い方が間違ってる」
「ソフトウェアキーボードが表示されること考慮できてないんじゃない?」
など、ある1機能、1画面を切り取っても複数の状態が存在することが考えられます。
簡単そうに見えたお題ですが、受講者全員がクリアするのにかなりの時間がかかりました。
業務で使える武器を渡せた
ワークでの理解をさらに深める『UIデザインドリル』



まずはやってみて、わかることが大事
おわりに
何よりUIを愛している方からのご連絡をお待ちしています!
