2019年新卒デザイナー研修でUI・プロトタイプ研修を実施しました

こんにちは。みんなのウェディングUXデザイン部、入社4年目の齊藤です。

先日、みんなのウェディング(以下、MWED)では、2019年新卒デザイナーに向けて「UI・プロトタイプ研修」を実施し、私は担当講師として研修を行いました。

そこで今回は研修について、「どのような目的で行われたか」「実際何をやったか」「やってみてどうだったか」の順番でご紹介したいと思います。

UI・プロトタイプ研修は5月15日(水)〜21日(火)の5日間にわたり行われ、私(齊藤)と今年入社2年目の18卒デザイナー2名(高橋、大原)、そしてIA担当講師の渡部の計4名で実施しました。

研修の目的は、新卒デザイナーをMWEDのデザイナーとしてMWEDのUIを作れるようにすること。

MWEDのデザイナーとしてというのは、MWED独自のルールを守り、形式や手順に沿ってデザインするということです。

そのため研修の始めに、2人に研修のゴールを伝えました。

研修が終わった時になっていてほしい状態は、「MWEDのUIを知った状態」そして「MWEDのUIを作れる状態」です。

このゴールを目指すために、一般的なUIとプロトタイプの知識に加え、MWEDのデザイナーが普段デザインする際に行なっている手順や方法、MWED独自のデザインルールをメインとして学べる研修のプログラムにしました。

そして研修の流れは「UIを知る→UIを作る技術・知識を身につける→MWEDのUIを作る考え方を身につける」といった、徐々にスキルを伸ばすような構成にしました。

UIを知る

まずはじめに、UIの根本的な知識をつけるために、講師の高橋がUIについての説明を座学形式で行いました。

UIの説明

UIとはなにか、UXとの違いはなにか、どのようにUIは作られるのかなど詳しく話してもらい、新卒デザイナーにUIの基礎知識を身につけてもらいました。

途中、講師交代で、渡部がIA(情報アーキテクチャ)の説明を行いました。

IA(情報アーキテクチャ)とはユーザーにとって必要な情報をわかりやすく、見つけやすくするために情報を整理する技術のことです。

UI・プロトタイプ研修にIAの話も交えることで、新卒デザイナーが情報とUIの関係性を意識して学べるようにしています。

UIを作る技術・知識を身につける

次にUIを作る技術や知識を身につけるために、下記の内容を実施しました。

  • デザインツール(Sketch)の説明
  • MWEDのデザインシステム(Oshidori)の説明
  • 他社サイトのトレースする

デザインツール(Sketch)の説明

MWEDではUIを作る際、Sketchを使うデザイナーが多いので、UI・プロトタイプ研修でもSketchを使ってUIの作り方を説明しました。

今年の新卒デザイナーは学生時代にSketchを使った経験があり、ある程度の知識はあったため、基本的な操作や説明は省き、少し応用的な機能やより効率よくデザインを作る方法などを中心に教えました。

Sketch経験が元々あるので、腕試しとして「自分専用の動画コンテンツを作る」というお題を出し、既にこちらで用意したデザインを、Sketchを使ってそっくりそのまま作ってもらいました。

やはり経験者ということもあり、2人とも作業スピードが早かったです。

本人たちも操作の振り返りができたとのことでした。

実際に作ってもらったデザインがこちらです。

一部、パスを使って猫を作るところがあり、そこだけそれぞれの個性が出て面白かったです。

MWEDのデザインシステム(Oshidori)の説明

次に、MWEDのデザインシステムの説明です。

MWEDには色、コンポーネント、サイズなど、デザイン上の共通項目がまとめられたデザインシステム、通称Oshidoriというものがあります。

これは、デザインを統一しブランドイメージを保持するためや、UIの品質を担保し、ユーザービリティを向上させるために作られました。

新卒デザイナーにOshidoriを詳しく説明する、デザインシステム研修というものが別途用意されていたので、今回の研修では大事なポイントを抑えたざっくりとした説明にしました。

他社サイトのトレースする

UIを作る知識を身につけてもらうために、UIトレースを実施しました。

UIトレースとは、デザインの引き出しを増やしたり、デザインの観察力を上げることを目的として行われるデザインスキルアップの手法の一つです。

既存の良いと思ったUIを全く同じように写すのが主な方法ですが、ただ写すだけでは意味がありません。そのUIの構成要素を掴みながら写すことが大切です。

「なぜ、ここだけ太文字なのか」「なぜ、余白幅が異なる部分があるのか」そういったことを考えながらトレースすることで、”なぜ良いUIなのか”が見えてきます。

研修では、UX/UIデザイナー界隈で有名な某民泊サービスサイトと、みんなのウェディングサイトと方向性が近い某口コミサイトのそれぞれ一部をお題として出し、トレースしてもらいました。

トレースは、UIの観察力がつくだけでなく、Sketchのスキルアップにも繋がるので、一石二鳥です。

トレースしたものをチェックした後に「UIに対して気づきはあった?」という質問を投げかけましたが、トレースにかけられる時間が予想外に短かったため「早くトレースしなきゃ」という気持ちが強くなってしまい、UIの観察までは意識して取り組むことができなかったみたいです。

これは完全に、研修を設計した私のミスです・・・。

ですが、本格的にトレースするのは今回が初めてだったらしく、やり方や気をつけなければいけないポイントは学べたようです。

MWEDのUIを作る考え方を身につける

これまでの研修で、Sketchの使い方やMWEDのデザインシステムについて、そしてUIの観察方法を学ぶことで、UIを作る技術・知識を身につけることができました。

次は、今までの学びを生かして「MWEDのUIを作る考え方を身につける」を目指す、下記の研修を実施しました。

  • トレースしたものをOshidoriに沿ってリデザインする
  • ワイヤーフレーム(以下、 WF)を元にランディングページ(以下、LP)を作る

トレースしたものをOshidoriに沿ってリデザインする

前回のトレース課題の第二課題として、某サイト2社をトレースしたものを、MWEDのデザインシステム(Oshidori)に沿ってリデザインしてもらいました。

これまでは、見本ありきの課題でしたが、ここからは自分で考えてデザインする課題になります。

2社のトレースで得たUIの構成要素と、Oshidoriのルールを照らし合わせてMWEDのデザインを作らせるというのが目的です。

これにより、本研修のゴールである「MWEDのUIが作れる状態」に一歩近づくことができます。

ただ現状、Oshidoriはまだ完成していないデザインシステムで、しっかりルール化されているコンポーネントもあれば、ルールが曖昧もしくは何も決まっていないコンポーネントもあります。むしろしっかりルール化されていないコンポーネントの方が多い状態です。

そんな中でリデザインをさせるのはとても難しかったですが、ルール化されていないコンポーネントについては、実際の業務でも行われている「みんなのウェディングサイトにある既存のUIを参考にする」という方法を取り入れることで、現在のMWEDのUIの作り方をリアルに体験してもらうことができました。

リデザインする土台があやふやな中、2人とも短い時間の中でしっかりOshidoriを理解しながらデザインしていました。

実際に、他社のデザインをMWEDのデザインシステムでリデザインしてみたら、思ったより雰囲気がMWEDっぽくなったのが面白かったみたいです。

また、「MWEDだったらこの情報をどう見せるか?といった視点も重要になる」という学びもあったようです。

WFを元にLPを作る

こちらが最終課題です。

事前にこちらで用意した仮想案件の要件を汲み取り、Oshidoriのルールに沿ったデザインで1枚のLPを作るといった課題です。

LPとは、ランディングページの略で、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。(出典:おりこうブログDSより

案件内容は、「式場探し中のユーザーが各会場タイプ(ホテル、レストラン、専門式場など)の特徴を理解し、自分の条件や好みにあった会場タイプを見つけ、理想な式場探しの後押しをする」ことを目的とした、結婚式場会場タイプ別紹介ページの作成です。

ページの構成やページ内で使用する写真素材やリード文は事前に用意し、それを元にSketchでのWF作成からデザイン作成、プロトタイピングまでを行なってもらいました。

WFとは、ワイヤーフレームの略で、webページのレイアウトを定める設計図のことです。

この課題では、ページ内にある多くの情報を構成してデザインし、それをただ並べるだけはでなく、「情報をどう見せるか」「ユーザーの目的を踏まえて考えられているか」「動的な部分では、想定できるあらゆる状態を加味してデザインできているか」なども求められてきます。

実際デザインしていく中で、Oshidoriにないコンポーネントを考える際に、既存の似たようなUIが複数あった場合どっちに寄せるか迷ったようです。

しかし、その都度講師に質問してきたり、他社サイトの事例を見たり、一度ユーザーの気持ちや目的に立ち返ってみるなど、個人個人あらゆる方法で行き詰まりを回避していました。

また、それぞれ全く違ったアプローチやアイデアを盛り込んでいて、課題に対してとても前のめりだったのがとてもよかったです。

Sketchでデザインを作っている途中段階で、一度プロトタイプを作ってもらいました。

講師の大原からプロトタイプについての説明をしてもらった後、プロトタイピングツールの「Prott」で作成したデザインを見てもらい、実機で見ることで作成中には気づかなかった違和感や見にくさなどに気づくきっかけを与えました。

「Sketchでデザイン作成⇄Prottで確認」を繰り返し、デザインのブラッシュアップを行いました。

こちらが実際2人に提示したページの構成です。

デザインレビューで得られる新たな気づき

今回の研修ではできるだけ実際の業務に近い流れを体験してほしかったので、デザインレビューも本格的に行いました。

MWEDのデザインレビューは、主にgithubのissueを使って行われます。

レビュイーが、施策の目的や要件、作ったデザインやデザインの意図、レビューしてほしいポイントなどをissueにまとめて、それを他のデザイナー(レビュアー)が見てレビューをします。

新卒デザイナーは講師大原のサポートの元、issueにレビュー内容をまとめ上げ、初のデザインレビューを出しました。

レビューに出すと、既存のUIと整合性が取れているかの視点や、俯瞰しないと気づけない視認性や文言の表現など、先輩デザイナーから多くのフィードバックをもらっていました。

また、issueの書き方についても学びを得ているように感じました。

修正前と修正後のデザインを、Markdownのテーブルを活用して見やすくしたり、レビューしてほしいポイントや懸念点、迷っていることなどをセクションに分けてわかりやすく説明していたりなど、過去のissueを参考にしてレビュアーがレビューしやすいissueの書き方を実践していたのも、2人の成長を感じられたポイントでした。

2人にとって、今回の研修全体の中でデザインレビューが一番学びがあったようです。

自分のデザインを言語化することで、意味のあるデザインと特に必要のないデザインが分かるので、作ったデザインを見直すきっかけになり、言語化の重要さを改めて感じたみたいです。

実際作ったデザインがこちらです。(一部です)

研修を終えて新卒の成長具合

デザインレビューでレビュアーから「LGTM」をもらえたタイミングで研修を終了としており、あらゆる修正や検討を重ねた2人の努力の結果LGTMをもらうことができました。

研修は5日間の実施でしたが、2人とも研修を通していろんな学びがあったのではないかと思います。

未完成なOshidoriを把握するのはとても難しかったと思いますが、その分Oshidoriへの質問や「もっとこうした方がいいのではないか」といった改善案も、沢山出てきました。

初日と比べて、最終日に出来上がったLPを見て「ここまでMWEDのUIを作れるようになったか」と正直私も驚きました。

今回の研修で、「SketchでUIを作れるようになる→UIの本質を捉えてOshidori化する→あらゆるコンポーネントを構成してユーザー行動に沿ったページを作る→デザインレビューでブラッシュアップする」までの工程をただ踏むだけでは成長しません。しっかり一つ一つ真剣に向き合って取り組んだことで、研修のゴールとしていた「MWEDのUIを知った状態」そして「MWEDのUIが作れる状態」になれたのではないかと思います。

研修の振り返り

研修後、講師4名でYWT(やったこと・わかったこと・つぎやること)形式で研修の振り返りを行いました。

今回研修が順調に進んだことはとても良いことでしたが、逆に新卒デザイナーにとって少し簡単だったか?といった懸念が出ました。

元々UI/UX系の大学を出ていたりSketchの経験があるメンバーだったので、研修内容を考える前に2人の現状スキルを聞き出すべきだったかなと思いました。

また、今回の研修で改めて思ったことはMWEDらしいUIとは?ということです。

Oshidoriがまだ未完成なのでデザインの判断が難しいというのはありますが、そもそもなぜそのデザインがMWEDらしいのかを言語化しづらい現状だなと感じました。

Oshidoriで決められているからではなく、こういう理由でこのデザインにしていますと、MWEDのデザイナー全員が根拠を持って言えるようにしていかなければならないと思いました。

MWEDのUIに対して考えなきゃいけないこと、決めなきゃいけないことはまだまだ沢山ありますが、ユーザーにより良い価値を届けるためにデザイナー全員で力を合わせて頑張っていきたいと思います。