starmix【デザイン】SketchとAndroid用素材を楽に書き出せるプラグインツイートシェアはてブLINEPocketご無沙汰しています。デザイナーのstarmix(スタミ)です。今日は、弊社でモバイルアプリのデザイン制作に使っているSketchというアプリと、合わせて使う便利なプラグインを紹介します。(今後は制作関連の記事をライトに書いていけたらと思っています。Photoshop」であれば聞いたことがあるかもしれません。Photohopは画像処理やペイントだけでなくWebサイト制作の分野で広く使われており、もちろんモバイルアプリのデザイン制作もできるのですが、広い用途に対応出来る一方で、目的がこれと決まりきっている人にとっては「この操作がもっと簡単だったら良いのに」と思う部分もあるかもしれません。「Webサイト、モバイルアプリデザインに特化したアプリ」というようなコンセプトで生まれたのが「Sketch」です。具体的にどんな風に特化しているのかというと、例えばWebサイトやアプリのデザインに欠かせないアイコンやボタンなどのパーツを共通パーツとすることで(シンボル化)、制作の時間短縮や修正に強いデータを作ることができたり、出来上がったデザインのパーツ画像書き出しが楽だったりします。他にもSketchの優れている点はたくさんあるのですが、私が書かなくとも既に先人たちが詳しい解説しているサイトがたくさんあるので、興味のある方は手始めに下記サイトを参考にしてみてください。Adobe漬けの私が、話題のSketchを使ってみた。http://atraetech.tumblr.com/post/101243241363/adobe%E6%BC%AC%E3%81%91%E3%81%AE%E7%A7%81%E3%81%8C%E8%A9%B1%E9%A1%8C%E3%81%AEsketch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F私は入社するまでモバイルアプリはおろか、ろくにWebデザインもしたことがなかったので、その分野に特化した「Sketch」のことももちろん知らなかったのですが、使い始めて半年以上経つので今ではずいぶん慣れてきました。発展途上の部分も多いのでPhotoshopの方が安定感があって良いなと思うことも多いですが、面倒な作業の手間が省けることも多いので、特性を理解してうまく活用していきたいと思います。Android用素材を楽に書き出せるプラグイン先ほど「出来上がったデザインのパーツ画像書き出しが楽だったりします。具体的には、Photoshopで3パターンのサイズバリエーションで素材を書き出す場合、3パターンのサイズのデザインデータを用意し、それぞれにスライスの作業をしてから書き出すという手順になるかと思うのですが、Sketchは1個のデータに1個のスライス設定で済むように作られているのと、書き出すためのボタンもいつも見えるところに表示されているので、作業ボリュームが多かったりすると本当に楽だなと感じます。iOSアプリを主軸に考えられているため、デフォルトで楽に書き出しを行えるのはiOSのみ。Android市場こそ、デバイスの大きさもまちまちで1つのデザインに対して用意しなければならないパーツ画像のサイズバリエーションがiOSよりも多いので楽したいところですよね。そこで便利なプラグインを1つご紹介します。“sketch-android-assets”http://dev.classmethod.jp/smartphone/android/sketch-plugin_android-assets/このプラグインがあれば、iOSと同じような手間でAndroid用のパーツ画像を書き出せるので、入れておくととても楽です。インストールの仕方に「リポジトリをクローン」などと書かれていて、デザインだけでなく開発のことも知っている前提なのが気になりました。偶然ですが、私はXcodeやSourceTreeも少しだけ知識があったのでわかりましたが、これだと単なるデザイナーだとわからない人も出てくると思うので超もったいないですよ。Sketchのユーザー層に開発とデザイナーの間くらいの人が多いということの表れなのかもしれませんが、この記事に限らず、Sketchのプラグインはこうした開発寄りで扱いが難しい提供のされ方が多いので、純粋なデザイナーからすると確実に高いハードルがあるなと。そこが低くなっていってくれると、Sketch自体の価値も上がってより良い定番のデザインツールになっていくのでしょうね。個人的には今後も、今は開発人がやるようなレイアウトの作業を任せてもらえるデザイナーを目指したいので丁度良いとっかかりとして慣れていきたいと思います。社内ミーティング&懇親会RECOMMENDこちらの記事も人気です。#UIデ...デザイン2016.11.10Mac版photoshopでもついに手ぶれ補正?ペンタブの軌跡を安定させ...デザイン2016.6.9【デザイン】@2x、@3xで作られたSketchデータでiOS用に画像を...ABOUTこの記事をかいた人starmixダジャレ大好きデザイナー。LINEスタンプ「ダジャレンジャー」シリーズの作者です。