LOCARIのデザイン環境について

こんにちは、業務委託でお世話になっておりますデザイナーのこけしです。（本名は長谷部えりです） この記事は Wondershake Advent Calendar 2016 の16日目の記事です。

様々な記事が書かれていて賑やかでうれしいですね(^o^)！
前回の板部くんの記事はコチラです。とっても素晴らしい記事でした！！ engineering.wondershake.com

話すこと

• デザイン作業フロー
• フロー詳細と利用ツール

今回はLOCARIのデザイン環境についてです。

というのも以前よりデザイナーさんも増え、現在属人的な管理にならないよう、デザイン環境整備を意識して行っています。 そこでどのようにWondershakeデザイナーは働いて、その中でどのようなツールを利用して管理を行っているかおおまかにデザイン環境についてお話しようと思います。

デザイン作業フロー

ざっくりと書くとデザイン作業のフローは以下の通りです。
1. ディスカッション
2. 要件定義
3. アサイン
4. デザイン制作
5. クリエイティブチェック
6. エンジニアの共有

前提として、Wondershakeデザイナーの役割としては、デザイナーは要件定義された案件をもくもくとこなすというより開発メンバーと共にディスカッションをして組織として持っている課題をデザインで解決する役割も担当させていただいており、 UIUXデザイン〜広告グラフィックなど、広い領域で上流からデザイン制作を行うことができます。

フロー詳細と利用ツール

ディスカッション〜アサイン

週に１度、エンジニア・デザイナーの開発メンバーでディスカッションを行います。 こちらでデータから見えた課題や様々な窓口から受け取った課題を整理し、 優先度の高いものから各案件ごとに要件定義を行い、タスク化してアサインをしています。 タスクやアサインの管理はFlowを利用しています。

タスク管理ツール
Flow - Project and Task Management Software for Teams 案件ごとに決定したもの、議論したいことも書き込み、ログを追えるようにしています。
タスクとなりきれなかったアイデアなどもストックしておくことで、課題解決のヒントになることも！

デザイン制作〜クリエイティブチェック

デザイン制作では主にUI制作はSketch、グラフィック制作は（言うまでもないですが）Photoshopの２つを使用しています。
UI制作ツール
Sketch - Professional Digital Design for Mac

グラフィック制作
Adobe Photoshop CC
Adobe XDも話題となっていますが、以前からデザインチームではSketchを導入していたところもあり もう少し様子を見て、導入コストをかけてでも変更すべきと感じたら検討しようとしています。

デザイン完成後はデザイナー上長確認、エンジニア＋プロジェクトマネージャー確認を行い実装へ移していきます。

エンジニアへの共有

完成したデザインを共有するツールとしてはZeplinを利用しています。
デザイン指示書ツール
Zeplin

デザインの最新バージョン管理、デザイン指示書、素材書き出しなどをこちらで行います。

今まで作業したデザイナーのみが最新版を確認できる状態で、 デザインチーム内でも「どれが最新？」と混乱が起きがちでしたがこちらで一括管理することで認識違いが起きることが少なくなりました。

さいごに

大まかにLOCARIのデザイン開発フロー・ツール紹介をさせていただきました。
日々すごいスピードで新しいものが増えていっているので、ぜひオススメのフロー・ツール等々情報共有いただけるとうれしいです！ いろんなプロダクトのデザイン環境気になります。

お次はDIYレシピアプリのCreon Andoroidについて、たくみゅうみゅうことshirokuraさんが書いてくれます！楽しみです！
余談ですがshirokuraさんとわたしはWondershakeクラフトビール部に所属しています。
好きな方、ぜひ飲みに行きましょう〜！では〜！