「Sketch」スマホのUIをデザインするならこのアプリが便利！

多くのWebデザイナーは、デザインにPhotoshopを利用していることでしょう。
しかし、ことスマートフォンアプリやサイトをデザインするにおいては、「Sketch」に今、優位性があるかもしれません。
2015年あたりから利用者が増えはじめ、2017年ではすでにメインのツールとして認知を得始めています。
「スマホアプリやサイトのデザイン専用」とも言うべきSketchは、最近スマホのデザインしかやってないぞって方にはピッタリ。
今からでも使っておきたいアプリなのです。

Sketchとは、Mac専用のデザインアプリケーションであり、特にUIデザインに特化した機能性が人気となっています。
有料で、価格は99ドル。トライアル版もありますのでまずはそれで試してみましょう。

ダウンロード＆インストールし起動すると、まず豊富なテンプレートが用意されていることに驚くでしょう。
イラストレーターが苦手な私にとってはiOSやAndroidのアイコン用テンプレがあるのは嬉しいところ。
Sketchで作成されるデータはすべてベクターなので、解像度を気にする必要がありません。

まずは、新規でArtbordを作成します。
画面右側にどんなデバイスに向けたArtbordかを選択することで、適切なサイズのものが自動で生成されるのです。
iPhone7を選択すると、あとは用意されたパーツを当てはめていくだけです。

iOSのアプリで使われるパーツが一通り用意されており、それを先程のArtbordにコピペしていきます。
私達はUIの構成を考えるだけ、一旦ここではディテールのことを忘れてその作業に集中することができるのです。

ナビゲーションバーや検索窓、リストのセル、ボタンなどを自由に配置していくことで、素早くシンプルなデザインを作成することができます。
とにかく簡単な作業なので、一度覚えてしまえば、デザインのみならず企画職によるプロトタイプ作成にだって使えるのではないでしょうか

作成したデザインはCSSによって書き出すことが可能です。
スマホサイトの作成であれば、Sketchは大きな効果を発揮してくれることでしょう。

iPhoneにしろAndroidにしろ、スマホアプリの作成において面倒なのが画像パーツの書き出しでしょう。
@2xとか@3x といったサイズもSketchなら一気に書き出しが可能です。
Photoshopの面倒なスライス機能に慣れていた私には、革命的とも言える簡便性でした。
該当レイヤーで「S」を押せば、スライスモードに。書き出すサイズは画面右下で設定可能です。

ハッキリ言って、スマホアプリやサイトをデザインするにおいて、Sketchの利便性はPhotoshopを凌駕しているといっても過言ではないでしょう。
画像編集や複雑なレイヤー処理はできませんが、逆に言えばそれだけPhotoshopに任せておけばいいんじゃないかという気分にさえなります。
Sketch、まずはダウンロードしてみてください。