初めまして！
ブレイブソフトでデザイン業務に携わっているsoraと申します！
最近ヒヤッとした事は、企業webページのグローバルナビに「会社が異様（会社概要）」という項目を作って提出しそうになったことです…。みなさんも気をつけましょうね。

さて、私が今回記事にするのは『エンジニアにも知ってほしいデザインの現場！パーツ素材はこうして作られる　～アプリ編～』です。
制作時に使用しているツールなどをメインに簡単にご紹介していきます！

今まで何となくデザイナーから上がってきたパーツを使って構築していたエンジニアさんは必見。今回は「あ、こんな流れで自分の手元にパーツが届いてるんだ」という流れをエンジニアの皆さんに共有し、理解してもらう事で、プロジェクト全体の動きや相互間でのコミュニケーションを円滑にする事が狙いです。
（あわよくばエンジニアの方にもデザインをできるようになってもらいたい・・！）
もちろんこれからアプリ業界でデザインしたいという方も是非参考にしてみて下さい！

では、前置きが長くなりましたがご覧ください

デザインデータを用意しよう

と、その前に。
UI設計という大事な工程がありますが、今回は説明を割愛させて頂きます。大まかな動きを追っていきましょう！（他の部員の方が記事にしてくれてたりもします！）
それでは、本題です。

一口にデザインをすると言ってもツールや手法は様々。ここでは私がアプリ業界に入ってから確立していった流れをご紹介していきます。

  1. Photoshopでデザインする

今やwebサイトを初め、デジタル媒体はIllustratorやSketchを導入する時代。しかし私はPhotoshopで制作しています。理由としては使い慣れているからというのもありますが、やっぱりスクリプトやエクステンションが充実していることが大きい！これらを活用して、どんどん制作スピードを上げていっちゃいましょう！

  1. 制作時はSkalaViewを使用する

このアプリをPCとiPhoneに入れたら準備完了。なんとPhotoshopでの変更箇所が手元の実機にリアルタイムで反映されるんです。これを知るまではいちいちpngに書き出して実機に送っていたので、これを知った時は衝撃でしたね・・もっと早く知りたかったと当時は嘆いたものです。。クライアントとの打ち合わせの際に、要望に合わせてその場で構成を変更する、なんてこともできちゃいます。Photoshopでアプリをデザインするならとにかく必須！作業が凄まじくはかどります！

A

SkalaViewはPhotoshop用なので、Illustratorで制作している方は下のLiveViewを使いましょう！

デザインができたらパーツを切り出して渡そう

パーツカットは誰が担当するのかが明確に決まっていない場合が多いですが、我が部活動ではデザイナーのお仕事になっています。ここでご紹介したいのがコチラ！Layer Craft！

簡単に言ってしまえば各端末に合わせたサイズに一発で切り出してくれるエクステンションです！Androidにも対応していますし、なによりワンクリックで簡単に書き出せてしまうのが魅力です。
https://lab.rayps.com/lc/

B

パーツを渡す時に指示書もつけよう

指示書。これを丁寧に書くか否かで仕上がりに大きく差が出ます。でも時間が掛かる！とにかくかかる！いや、でもいいもの作りたいんだよ！ああああ…
そんな時はコチラ！SPECCTR！（一部有料）

これはワンクリックでフォントやシェイプの色や大きさ、配置位置を書き出してくれる優れものです！今まで30分かかっていた作業が１分で終わります。超必見。
https://www.specctr.com/

C

と、以上の様な流れでエンジニアさんの手元にデザインパーツをお届けしています。

最後に

いかがでしたか？
この記事を見てくれたエンジニアさんの中で、「自分にもできそうだ！」と感じた方は是非PC内にご紹介したツールを入れてみてください！そしてデザインに興味を持っていただければ幸いでございます！