Sketchの練習始めました。

こんにちは、田畑(@nerd0geek1)です。

最近、個人アプリを書き直したり、Oculus Goアプリ作りたくなってUnityの勉強始めたりしてますが、それに加えて更にSketchの練習も始めました。

なぜ始めたか？

2年半ほど前からquick-zip plusというiOSアプリを個人で開発・運用しており、今までは時間の取れるタイミングで細々とやってきたのですが、ある程度時間が取れるようになったので本腰入れて改善していこうかと思い、始めました。

「quick-zip plus」をApp Storeで

このアプリ、リリースのタイミングでのデザインは元同僚のデザイナーさんが5万円でまるっとやってくださったのですが、一般的にエンジニア・デザイナーの1日あたりの単価が4-6万円であり、今のアプリの売上(月4-6万円)から考えると、頻繁にお願いできる額ではないため、ある程度の売上が立つまでは自分でやってしまおうと思い、始めました。

目標と計画

最終的には1からアプリの画面デザインをできるようになろうと考えていますが、ある程度ツールに習熟し、高速にサイクル回せるようになってからUIトレースなどをやったほうが学習効率高そうだなーと思ったので、

1. アイコントレースを始めて、Sketchの使い方に習熟する
2. ある程度のスピードでSketchが使えるようになったら
　 配色、フォントについて調べる
3. UIトレースで他のアプリから学びを得る
4. 新規のデザインに挑戦してみる

みたいな順序でやっていこうかと思ってます。

今やってること

というわけで、Sketch上で既存アイコンのトレースを始めました。
ルールとしては、

1. 1つのアイコンのトレースは30分以内
2. まず何も調べずに作る(これがあれば楽そう、とかはメモしておく)
3. 作ったアイコンと元のアイコンを比べる。
4. 3.で気になった点を調べる。
5. 調べたことを元に再度アイコンを作る。

という感じです。

今回のお題

今回は、Skypeのアイコンをトレースしてみました。

まず10分ほどでトレースしたアイコンがこちら(左がオリジナル)。

オリジナルと重ねて比較したものがこちら。

気になった点が3つ。

1. Digital Color Meterで色を抜いてるはずだけど、微妙に色が違う。
2. 左上と右下の円を点対称にコピーする方法はないのか？
    今はそれぞれ別個にドラッグアンドドロップしているのでズレる。
3. 中央の"S"の文字のフォントは？→今度調べる

1つめについては、単純にDigital Color Meterの設定ミスでした。
sRGBで表示 → ネイティブの値を表示 としたところ、色が一致しました。

2つめについては、 Layer > Path > Rotate Copiesでできるようです。

ただ回転軸となる点の座標を数値で指定することはできないみたいなので、目印となる点を一時的に配置し、

コピーする個数を指定、

回転軸を先程の点に合わせる方法で対応しました。

２回目に作ったものは、先程のものと比べて色も一致し、

左上・右下のズレも小さく同じ程度になりました。

次回は、WhatsApp MessengerかFacebookのmessengerアプリのアイコンをトレースしようと思います。