ご無沙汰しています。
デザイナーのstarmix(スタミ)です。
いきなりですが今日は、弊社でモバイルアプリのデザイン制作に使っているSketchというアプリと、合わせて使う便利なプラグインを紹介します。
(今後は制作関連の記事をライトに書いていけたらと思っています。)
Sketchとは

「Sketch」を聞いたことがない方も、「Adobe Photoshop」であれば聞いたことがあるかもしれません。
Photohopは画像処理やペイントだけでなくWebサイト制作の分野で広く使われており、もちろんモバイルアプリのデザイン制作もできるのですが、広い用途に対応出来る一方で、目的がこれと決まりきっている人にとっては「この操作がもっと簡単だったら良いのに」と思う部分もあるかもしれません。
そして「Webサイト、モバイルアプリデザインに特化したアプリ」というようなコンセプトで生まれたのが「Sketch」です。
具体的にどんな風に特化しているのかというと、例えばWebサイトやアプリのデザインに欠かせないアイコンやボタンなどのパーツを共通パーツとすることで(シンボル化)、制作の時間短縮や修正に強いデータを作ることができたり、出来上がったデザインのパーツ画像書き出しが楽だったりします。
他にもSketchの優れている点はたくさんあるのですが、私が書かなくとも既に先人たちが詳しい解説しているサイトがたくさんあるので、興味のある方は手始めに下記サイトを参考にしてみてください。
Adobe漬けの私が、話題のSketchを使ってみた。
私は入社するまでモバイルアプリはおろか、ろくにWebデザインもしたことがなかったので、その分野に特化した「Sketch」のことももちろん知らなかったのですが、使い始めて半年以上経つので今ではずいぶん慣れてきました。
まだまだ発展途上の部分も多いのでPhotoshopの方が安定感があって良いなと思うことも多いですが、面倒な作業の手間が省けることも多いので、特性を理解してうまく活用していきたいと思います。
Android用素材を楽に書き出せるプラグイン
先ほど「出来上がったデザインのパーツ画像書き出しが楽だったりします。」と書きました。
具体的には、Photoshopで3パターンのサイズバリエーションで素材を書き出す場合、3パターンのサイズのデザインデータを用意し、それぞれにスライスの作業をしてから書き出すという手順になるかと思うのですが、Sketchは1個のデータに1個のスライス設定で済むように作られているのと、書き出すためのボタンもいつも見えるところに表示されているので、作業ボリュームが多かったりすると本当に楽だなと感じます。
しかし、iOSアプリを主軸に考えられているため、デフォルトで楽に書き出しを行えるのはiOSのみ。
Android市場こそ、デバイスの大きさもまちまちで1つのデザインに対して用意しなければならないパーツ画像のサイズバリエーションがiOSよりも多いので楽したいところですよね。
そこで便利なプラグインを1つご紹介します。
[Android] めんどくさい!複数解像度に対応した素材の書き出しがラクになる SketchPlugin “sketch-android-assets”
http://dev.classmethod.jp/smartphone/android/sketch-plugin_android-assets/
このプラグインがあれば、iOSと同じような手間でAndroid用のパーツ画像を書き出せるので、入れておくととても楽です。
ただ、インストールの仕方に「リポジトリをクローン」などと書かれていて、デザインだけでなく開発のことも知っている前提なのが気になりました。
偶然ですが、私はXcodeやSourceTreeも少しだけ知識があったのでわかりましたが、これだと単なるデザイナーだとわからない人も出てくると思うので超もったいないですよ。。
Sketchのユーザー層に開発とデザイナーの間くらいの人が多いということの表れなのかもしれませんが、この記事に限らず、Sketchのプラグインはこうした開発寄りで扱いが難しい提供のされ方が多いので、純粋なデザイナーからすると確実に高いハードルがあるなと。そこが低くなっていってくれると、Sketch自体の価値も上がってより良い定番のデザインツールになっていくのでしょうね。
個人的には今後も、今は開発人がやるようなレイアウトの作業を任せてもらえるデザイナーを目指したいので丁度良いとっかかりとして慣れていきたいと思います。
iOSアプリ開発 AutoLayout徹底攻略 (Mynavi Advanced Library)
売り上げランキング: 27,196