こんにちは！フェンリルのデザイン部でマネージャーをしている松浦です。

第2弾に引き続き、2019年の新卒研修の第3弾をレポートします！

【第1弾、第2弾の記事はこちら！】

今週はユーザーインターフェースの理解だ！

今回の研修は「ユーザーインターフェースの理解」です。

既存のアプリを調査し、そのアプリのユーザーインターフェース（以下 UI）の仕様を理解、説明出来るようになり、また、設計書を書く際に必要な知識を身につけることが今回の研修の目的となります。

今週からかなり実践的な内容になっていきますので、新卒の皆さん頑張っていきましょう！

UIとは何でしょうか？

ではそもそもUIとは何でしょうか？

UIとは「ユーザー」と「システムやサービス」の接点のことで、マウス、キーボード、タッチパネル、リモコンなど利用者が直接手で触る部分がインターフェイスであり、画面に出てくるリンク・ボタンも間接的に操作するインターフェイスです。

では、UI設計とは、「システムやサービスに付随するインターフェイスをより使いやすく設計する」ということです。そして、UIを扱う場面で目的が達成できるようUI設計することはとても大事です。

課題のテーマはおさかな王国！？

今回調査する課題は、架空の魚専門通販サイト「おさかな王国」の公式無料アプリです。

日用にぼし、ベビー向け小魚から、お祝いの日の鯛まで、ねこちゃんが喜ぶ1000種類以上のお魚をいつでも購入できる、飼い主ではなくねこちゃん用のアプリとなります。（ねこを擬人化した架空の設定です）

まずは、UI設計する前に必要となる、サービス全体の把握を行いましょう。

1.ターゲットユーザーを知る

2.ターゲットユーザーのサービスに対する価値観を知る

3.ターゲットユーザーのサービスに対する行動を定義する

4.ターゲットユーザーのサービスに対する操作を定義する

このような4つの前提について先輩から説明を受けます。（詳細は割愛させていただきますが。）

ターゲットユーザーは、もちろんねこちゃんですよね（笑）

また、UI設計からデザインを作るまでの一連のフローについても教わります。

1.ワイヤーフレームを作る

2.プロトタイプを作る

3.ビジュアルを作る

画面遷移図とUI設計書を作ろう！

ではここからは用意された「おさかな王国」アプリのデザインカンプを見て、画面遷移図とUI設計書を各々作っていくという作業が始まります。

画面遷移図とは、アプリの全体像を把握しやすくするために機能を整理したものです。

いわゆるサイトマップですね。

また、UI設計書とは、画面の構成・動作、パターンなど見ただけでは分からない仕様を記載した書類の事です。こちらはフェンリル独自で作成している設計書です。

皆さんには、実践しながらこちらの資料を作成していただきました。個別で情報共有を行ったりと積極的に取り組んでいますね。

実際の仕事になったらUI設計書の更新作業など発生しますので、まずはこの書類を理解することはとても大切なのです。

そして各々UI設計書が完成したら振り返りの場で発表しました。

今回は新卒エンジニアも参加したぞ！

画面遷移図やUI設計書は、クライアントに確認する書類としての役割もありますが、実は社内エンジニアに向けての情報共有の書類という一面もあります。

エンジニアの目で、伝わる書類になっているかどうか、客観的な目線も入れてもらいました。

「なぜこちらには説明が入っているのに、同じ仕様のこちらには説明が入っていないのか？」など、エンジニアさんだからこそ分かる鋭い指摘が入ります。

実際に仕事が始まると、こういったコミュニケーションもとても大事になるので、皆さん良い経験になりましたね！

無事発表が終了し、全体で気づいた事を振り返ってもらいました。

・画面遷移図やUI設計書の記載ルールを無視して作成してしまったが、実際に作ってみるとなぜそのルールが存在したのかが理解できた。

・ところどころ用意されたデザインカンプに抜け漏れがあり、それに気づく事が出来た。

などの気づきを得ること出来たようです。

普段使っている、単純そうに見えるアプリやWebサイトでもこんなにも色々な仕様があり、それを細く決めていく事で、ようやく世の中に出ている事が皆さん理解できたかと思います。

今回の研修でより詳しくUIの仕様を調べた事で、理解がもっと深まったのではないでしょうか？

ここで学んだ事を実際の仕事にも活かしてくださいね。

第3弾のレポートは以上になります。また第4弾のレポートもお楽しみに！

【新卒募集要項】