デザインチームで受付アプリを作るぞ #3
こんにちは。レタスです。
今日の記事は...先日#2まで出したきり、続編を書いていなかった弊社の受付アプリ制作についてです。他のことをちょこちょこ書いていたらすごいタイムラグが...。前の記事見てみたら4月の投稿でした、ごめんなさい。
どうして受付アプリ制作の企画が持ち上がったか？の背景は過去の記事からご覧ください。
来社されるお客様の受付体験の改善と、デザインチームでのナレッジ共有を兼ねたこの企画。
前回までにご紹介したのは仕様書からラフで画面遷移図を起こしたとこまででした。総画面数は11。
今日書くのはワイヤーとSketchでの技術共有についてです。それではいってみましょう〜
初心者と経験者の技術共有
弊社デザインチームには中途入社で在籍3年目のデザイナーから、新卒入社3年目、今年の1月に既卒でジョインしたメンバー、さらに4月から新卒・中途入社したメンバー含めて計7人で構成されています。
ここ1,2年でメンバーの入れ替えや増員があり、社内でも比較的変化の大きいこのチーム。まだまだ不完全な中、チームビルディングする上の課題の一つは経験者のナレッジを初心者にいかに共有するかということです。
現状、弊社では業務で1プロジェクトに対しデザイナー1名が担当する体制をとっているため、複数人のデザイナーが1つのものを制作する機会がありません。そのためナレッジもスキルもシェアされにくく、各々が独学体制というのが悩み...。属人的になりがちです。
せっかく「チーム」が存在するのに、その状態はもったいない。こういった点をどうにかカバーできないかという思いから、毎週金曜日に「デザトレ！」（デザイン&トレーニングの略笑）と称してスキルやナレッジシェアの時間を設けることにしました。
ワイヤーを作る
さて、受付アプリに戻って作業を進めて行きましょう。
ここからはワイヤー制作。グラフィックの制作でIllustratorを使ったことはあるけど、Sketchを使うのは初めて...。というメンバーもちらほら。その点の導入も含めてワイヤーをおこしていきます。
ここで進行を主導してもらうのは1番UIの制作経験があるぼーだーさん。
こういう感じで進めていくよ、を実際に作っていきながら解説してもらいます。
画面遷移図をおさらい。
まずは一番最初の「Welcome」画面を作るところから。
アートボードにはこういう種類があるよ、とか
普段はデスクトップで使用する業務システムを作っているので、Maxの画面幅は1200にカスタム設定して16:9の比率で画面を考えているよ、など基本的なとこから。
でも今回はiPadの想定なのでテンプレ通りの768*1024でいきます。
次は「来訪目的を選ぶ」画面です。
弊社でお客様の来訪される頻度が高いのはHR事業部とグローバルHR事業部。そして、今回のアプリ制作の目的は就職相談に来た外国人求職者が受付で迷わないようにすることでした。#1の記事でもご紹介しましたが、ソムチャイさん(24才男性 タイ人)も困りはてていましたね。
選択画面に必要な部品としてボタンが出てきました。
ここでSketchを使う上で超重要なシンボルの概念をメンバーにシェアします。
Sketchを使うとシンボルを作ることができ、統一のコンポーネントを使ってテキストやアイコンなどの上書き（オーバーライド）ができます。また、そのコンポーネントの形や色などを一部変えたいときにはシンボルに登録しているオブジェクトを編集すれば、全てに適応されるのが便利です。
実際に簡易なボタンを作ってみます。コンポーネント内でのパディング（余白）の設定や、テキスト（文字）の幅も調整可能。
プラグインで作業効率UP
来訪目的を選んだら、次は担当者を選ぶ画面です。
繰り返し使いそうなコンポーネントは最初からシンボルとして作成し、登録しちゃいましょう。ボタンの次は担当者の顔写真と名前が書かれたパーツを作ってみます。
ここでぼーだーさんがSketchのプラグインを紹介してくれました。プラグインは、ダウンロードするとSketchのデフォルト状態に+αの機能をつけられるツールと考えてもらえば良いと思います。
例えば「Unsplash It Sketch」というこちらのプラグイン。画像をはめたいオブジェクト名を指定してテーマを選択すると、取得された画像がランダムにババババッと入ります。これは便利...！デザインの段階が進んでいくと、画面の雰囲気を伝えるため、ダミー画像を配置することがあります。そういう時に一気にできるようになるのですね。（個人的には画像が大量に必要な画面を作ったことないので未知ですが…）
作業をしていくうちに「こういうのができたら楽なのになあ〜」と思ったら探してみると良いかもしれません。
個人的な失敗談ですけど、「自動でテキストが入るこのプラグイン知ってたらあの仕事の時間、半分になったのに...」ということがありました。情報に疎いとこんな時間ロスが出て来ますので要注意。
うちのデザインチームでSketchしかり、UI制作しかり、そのあたりの知識が一番なのはやはりぼーだーさんだと思います。経験値は戦士を強くします。
最近彼女のnoteでSketchの機能に関してちょっとテンションが上がった事もレポされていたので、ぜひご覧ください。
自身も興味ないわけじゃないんですけど、興奮ポイントがやっぱり人によって違うなあ〜と思いました。
用途別にいろんなプラグインが開発され、オンラインで公開されています。
こちらのページ参考にしました。たくさん情報がまとめられています。
ライブラリの概念
2,3画面ぼーだーさんのSketch基礎講座を受けたところで、残りの画面はチームで作業を進めることにチャレンジします。
今回のアプリ制作は普段できない、「複数人での共同作業」も大事な目的のうちでした。エンジニアでいうところのチーム開発、Githubを使ってさあ、リモートレポジトリからローカルに$git cloneだ！みたいなステップでしょうか。
ここでまたSketchの新しい概念が登場します。それは「ライブラリ」。
ライブラリとはざっくり申しますと、上記で作ったシンボルを、ワイヤーやデザインなどでいじるファイルとは別に整理して格納しておく場所です。
共有ライブラリファイルがあれば、他の人がジョインする時も、作業するファイルとライブラリファイルを繋げて同じシンボルを引っ張ってくることができるます。画面ごとに担当者が違ってバラバラのデザイン…となると収拾がつかないので、デザインの統一に役立つというわけです。
弊社のプロダクトはまだ規模が小さいので作業するデザイナーが1人でも事足りますが、利用者が多いサービスや成長・開発スピードが必要であれば複数人で分担する必要がでてきます。そういう場面を想定するとなんとなく利用イメージが湧いてきます。順番に触れてみました。
デザトレ！の時間は限られているので、ペタペタペタ...と簡単に配置するところまで。
次回へつづく。
デザトレ！の取り組みでちょっとはチーム感も出てきたかな？チーム感なんて測れないので実際向上したかどうかなんてわかりませんが、私が入社した2年前よりは確実に会話や情報交換の頻度が上がっている気がします。
（そもそもメンバーも変わったのでいろんな要因がありますけど）
受付アプリ制作＆ナレッジシェア、レタスからの報告は以上となります。
iOSの基本的な諸々も調べてみましたがちゃんと触ったことないのでもうちょっと知りたいですね。
ここからはぼーだーさんにバトンタッチです。
6月からの実際の制作進捗はぼーだーさんにnote投稿をお願いしたいと思います。では！