エンジニアに優しいSketchの作り方

Posted at 2015-12-22

最近、アプリのデザインと言えばSketchを使っている方が多いんじゃないでしょうか。便利ですよね、Sketch。

自分は普段、主にAndroidのコードを書いているのですが、Sketchを使ってデザインすることもたまにあります。そんな自分が、開発するときはこんなSketchだとやりやすいな、と思ったことをまとめてみました！

※いつもAndroidばっかり書いているので、Android基準でお送りします！iPhone版、誰か！ｗ

見えないタップ範囲も明示的に作ろう

ボタンなどタップ範囲が明確なものはいいとして、文字だけで境目が不明瞭なものは、頭では分かっていても1枚画面のカンプや指示書を作るときに見落としがちなポイント。

例えば下のようなデザインのとき、このままレイアウトを作ろうとすると、タップ範囲がどれくらいか、さらには余白はどう取るべきか、が全然分かりません。

あんまり考えずにレイアウトを作るとタップ範囲がすごく小さくなってしまったりします。
それを防ぐためには、Sketchで作る時、見えないタップ範囲を明示的に作っておきましょう。

こうすることで、指示書を作るにしても、レイアウトを実装するにしても、迷わず作業に入ることができます。

ユーザーから送信されたテキストが入るような場所の場合、その場所に入るテキストは一定の長さにはならないのは当然のこと。

でも、画面デザインをするときは仮のテキストを入れるので、デザイン的に都合の良い長さで設定してしまいがちです。そうすると、いざ実装して本物のデータが入るとひどい時にはおもいっきりデザインが崩れてしまうこともしばしば。

そうならないために、Sketchでデザインを作る時に、そのテキストは改行するのか？省略するのか？しっかり意識して作りましょう。できれば仮のテキストを短いパターンと長いパターンの両方を用意してカンプを作るのがいいですね。

デザインがこうなってれば、エンジニアもレイアウトを実装する時に、隣り合う要素の余白や省略の処理を入れ忘れることがグッと減ります。

上の2つとも似たような話ではありますが、実装されるレイアウトを意識してSketchが作ってあると、エンジニアが考えなきゃいきないことをグッと減らすことができます。

百聞は一見に如かず。まずはこれを見てください。

さてこれを見て、テキストが長くなった時、隣のボタンとの余白をどうすれば良いでしょうか。デザインルールがあって、特に指示する必要がない状態でなければ、悩みどころです。

でもデザインがこのように作ってあれば一目瞭然。
レイアウトの実装を自分でしなくとも、レイアウトの仕組みを勉強して理解してデザインに臨むことで、エンジニアとのコミュニケーションもスマートになること間違いなしです。

さて、ここまでエンジニアに優しいSketchの作り方を紹介しましたが、作ったSketchはZepplinに上げてエンジニアに共有すれば、もっと優しくなれます！

Sketchで作った全てのオブジェクト間の余白サイズや色、フォントなど実装に必要な全ての情報はZepplinが提示してくれるので、デザイナーも楽、エンジニアも楽、な超便利サービスです。

こんな感じ。素敵。

Sketchからのアップロードもプラグインで一発ですしね！まだ使ってない方は、是非使ってみることをおすすめします。1プロジェクトなら無料ですし！ステマじゃないよ！

それでは！