iOS開発でデザイナー/エンジニアのデザイン情報のやりとりにSketchを使ってみた

特にナウい方法ではないんだろうけど、現在携わっているiOSの開発では、デザイナー/エンジニア間でのデザイン情報(UIパーツをどう置くかみたいな)のやりとりは”Sketch”を用いることにした。

Bohemian Coding - Sketch 3

一連の流れ

  1. デザイナーがSketchでデザインする
  2. Sketchのデザインファイルを随時(Dropboxの共有フォルダとかに)アップする
  3. エンジニアがそのファイルをSketch上で開いてそれを参考に、IB上で作業したりプログラミングしていく


「Sketch上で開いてそれを参考に」というのは、例えばUIパーツを選択するとそのx座標、y座標、width、heightが表示されるのでそれをみたり(下画像の枠部分)、あとマージンに関しては、今時のデザインツールだと当たり前ぽいけれど、Sketchの場合だとあるパーツを選択した状態でAltキーを押すと以下の画像のようにマージンを表示してくれる(下画像の矢印部分)。

f:id:ushisantoasobu:20150119002244p:plain


デザイナーの負担を減らす目的がメイン

よくデザイン情報のやりとりといったら以下のような画像でやりとりすることもあったと思う。

f:id:ushisantoasobu:20150119002620p:plain

要は、デザイナーがデザインしたあとに、追加でそのデザイン情報のドキュメントをエンジニアのためにつくるというもの。
このある種追加的な作業(もちろんデザイナーがつくる)の負担を減らすという目的も、今回のSketch使ってみようという流れに至った経緯の1つだ(よって提案したのはデザイナーの偉い人)

課題

  • Sketchは現在ほぼ1万円もするので会社から稟議通るか?
  • Sketchとかを入れることに抵抗があるエンジニアもいる??自分は元々Flashとかをやっていたこともあって全く抵抗はないけど、嫌がるエンジニアもいるかも
  • 少し動作が重い。現在のプロジェクトでは、アプリの画面全部(比較的画面数は少ない)を1つのファイルにまとめているんだけど(アプリ全体を俯瞰できる)、レンダリングが重いときがあって少しストレスがある


あと余談だけど、改めてデザイナー/エンジニア間でのデザイン情報のやりとりで難しいなと思ったのも忘れないよう2つ書いておく

ラベルまわり

UILabelって標準だと縦方向の上寄せってないので、普通にやったらUILabelのframeの上と文字自体の上の線って合わないと思う(自分が知らないだけかも)。でもSketchでデザイナーからもらうデータだとそこがピッタし合ったものがきて困るということがある(下画像)。で、ここに関しては今回は時間なく目で調整でやってしまっている。

f:id:ushisantoasobu:20150119005202p:plain

AutoLayout

AutoLayoutにおけるデザイン情報の使え方でいまでも疑問なのが、たとえばあるアイコンがあったとき、それはどの解像度でみたときでもwidth/heightは固定なのか、それとも縦横比を保ったまま解像度によって拡大/縮小するのか、の区別の伝え方だ。
自分はすぐ側にデザイナーがいるので口頭でサクッと聞けるような環境だからいいのだけど、リモートだったり外注するときなんかはどうやって伝えるのかなーというのが今も疑問。まあ「何となくわかるでしょ」みたいなものなんだけど、それを全ての人に適用していいかは微妙


トータル何かアドバイスいただけることあればいただけたら幸いです。