はじめに
この記事は Goodpatch Design Advent Calendar 2020 の4日目の記事です。
今年もグッドパッチでは4月から6月までの3ヶ月間で新卒研修を行いました。Goodpatchでは、毎年UIデザイナー / UXデザイナー / エンジニア / 経営企画室と各部署の先輩社員が、新しく入社するメンバーのための研修設計を行っているのですが、特に今年は研修は気合が入っており先輩総出で設計を行いました。
その中でもUIデザイナー職の研修は前半の「ビジュアルデザイン研修」と後半の「ソフトウェアデザイン研修」で分かれており、それぞれの分野で強みを持つ先輩デザイナーで研修の設計をし、オンライン上で研修を行いました。研修の全体像についてはこちらの記事をご覧ください。
新卒UIデザイン研修 〜GoodpatchのUIデザイナーとして持つべき価値観編〜
今回の記事では「ソフトウェアデザイン研修」の中で実施したUIデザインワークとUIデザインドリルの2つについて紹介しようと思います。
また他UIデザイン研修の記事に関しては、内容が多いため別記事でお伝えしていきます。
UIデザインに対する誤解を解く
ソフトウェアデザイン研修のテーマのひとつは「UIデザインに対する誤解を解く」ということでした。
ソフトウェアのUIをデザインするということは、手に馴染む道具を設計することだと我々は考えています。
アプリを初めて起動したときの美しさや魅力的なアニメーションももちろんUIデザインの大切な要素ですが、そこばかりに目を向けていては良いアプリケーションをデザインすることはできません。
どのような仕組みの上でアプリケーションが動いているのか、どのような部品の組み合わせでアプリケーションが構築されているのかを知ることが大切です。
最初だからこそデザインをすることの楽しさよりも、難しさや奥深さを体験してもらうことで、UIデザインとしての考え方の軸をしっかりと持ってもらいたいとソフトウェアデザインワークの設計・実施を行いました。
UIデザインワークの内容
UIデザインワークの全体的なフローはまず、受講者全員に課題を渡し、できた人から担当レビュアーに提出します。そこでレビューを受けてパスした方から次の課題に進むという形で実施しました。ワークの全スケジュールは約1週間で行いました。
課題の内容を一部抜粋したのが以下のものです。
お題：かんたんな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のパターン調べ
・ツリー構造とセミラティス構造
受講した新卒デザイナーたちは、これらのヒントを参考にして課題に取り組みます。
上記であげた課題例をみると一見、簡単に見える方もいるかと思います。ここでは、タスクの一覧画面と作成、編集画面があれば終わりそうです。
しかし、UIデザインというものは“画面”という点で考えるのではなく、常に“状態”の繋がりをデザインする必要があります。ですから、各モード、ビューの状態まで考慮されたデザインを作るためにUIを動的に見る視点が必要です。その視点がないと一見シンプルなお題でもとても難しいものになります。ここにUIデザインの奥深さが存在しているのです。
例えば、
「このタイミングでエラーが発生したらどうなる？」
「このモードのときにここをタップしたら途中でモードから抜けちゃうよね？」
「アラートダイアログの使い方が間違ってる」
「ソフトウェアキーボードが表示されること考慮できてないんじゃない？」
など、ある１機能、１画面を切り取っても複数の状態が存在することが考えられます。
簡単そうに見えたお題ですが、受講者全員がクリアするのにかなりの時間がかかりました。
業務で使える武器を渡せた
ソフトウェアデザイン研修後、受講したデザイナーたちはクライアントワークや社内プロジェクトでモデリングからUIデザインというプロセス、UIスタックを意識したUIデザイン等、研修で学んだ内容をさっそく実務で活用してくれています。研修を通して、使用する場面が不明瞭な武器ではなく、実際の業務で使うことのできる武器を渡すことができました。
ワークでの理解をさらに深める『UIデザインドリル』
業務の中での共通言語を養う
ワークでの作業が終わりレビューを投げている間の待ち時間や、その他の隙間時間でよりUIデザインに関する理解を深めるために『UIデザインドリル』というものを用意して、時間がある受講者には任意で進めてもらうことにしました。
デザインツールを使った具体的なUIのデザインはワークで行っているので『UIデザインドリル』では、業務の中でチームメンバーが使う言葉を理解し、会話するための“共通言語”を得ることを目的に用意しました。プロダクトをクライアントも含めたチームでデザインしているGoodpatchでは、どんな職種、業務に対しても理解や関心を持ち、共通言語で会話ができることがより重要になるからです。
ソフトウェアデザインの共通言語とは？
モデルを理解する
ソフトウェアをチームでデザインする上で重要な共通言語の１つに、実装観点の理解というものが挙げられると思います。作っているプロダクトはどのようなコンテンツを扱っていて、それはどんなモデルであるかという認識やその他表層には表出してこない部分の領域に関して、共通言語を持つ必要があります。その理解を深めるためにUIデザインドリルでは、存在しているサービスの構造を明らかにする「リバースモデリング」という手法をドリルの内容として用意しました。ドリルの内容はApple純正のAppがどのようなオブジェクトで構成されていて、それぞれのオブジェクトの関係性はどのようなものになっているのかを多重度を用いたクラス図で表記していきます。クライアントワーク内でも、こうしたクラス図を元にチームで会話をする場面が多くあります。
実際に作りながら理解していくという工程で学習すると、より深く理解し、共通言語が形成することができます。
クラス図から骨格へと落とし込む
リバースモデリングを通して、クラス図の表記の仕方と読み方がわかったところで、次のドリルでは、要件からクラス図を作成→ワイヤーフレームに落とし込むという一連のフローをドリルとして出題しました。クラス図というものから、簡単なUIに落とす作業を経ることによって、扱っているモデルがどのような形で表層に表れていくかというのを学びます。
まずはやってみて、わかることが大事
チームでデザインしていくなら、「会話ができること」が最初の第一歩
ワークは実戦形式でUIデザインの誤解をときながら、その奥深さを学ぶことができる研修でした。そして、それと並行して行われていたUIデザインドリルでは、チームでデザインをする中で、共通言語を持ちデザインしていくための内容でした。
最初はわからないことも多いかもしれないですが、まずは失敗できる環境、真摯にレビューをもらえる研修という環境においてまずはやってみて、わかるという基礎の部分を培い、それを業務で応用できれば良いと考えています。
おわりに
今回の記事ではGoodpatchの新卒UIデザイン研修の一つとして行ったUIデザインワークや隙間時間に行うドリルなどを実施しました。
Goodpatchでは、未来の仲間たちを募集しています。クライアントに思想や文化を残すところまでコミットし、デザインに責任を持った仕事をしたい方。
