お疲れ様です、TAIGAです。

この記事はKLab Creative Advent Calendar 2018 の 24日目の記事です！

アプリ等の画面をデザイン設計している方へ

毎日デザイン設計をしていて、こう思った事ありませんか？

• 画面をデザインする以外の資料作成系作業が多くてつらい
• 画像の管理作業よりデザインクオリティを上げるのにもっと時間を使いたい

今回はそんな方に、設計ツール[Sketch]の機能を通して

時間をもっと効率的かつクリエイティブに使えるようにする方法をご紹介します

Sketchとは？

オランダのBohemian BVが開発する、
アプリやWebのデザインおよびUI設計のためのソフトです

2018年12月現在、MAC OSしかサポートしていません

何が得意？

「シンボル」機能によってより自由に画面を設計しデザインできます

例えば・・・以下の様な事が得意です

• デザインパーツ素材の使い回し
• シンボル内の情報の部分的上書き
• 素材パーツの一元管理
• 画面の半自動資料化

■ デザインパーツの使い回し

「シンボル機能」が非常に強力です

画面設計で使う実デザインパーツ素材は、アトラスサイズの縮小（端末への負担を下げる目的）の為、素材の1部分を伸ばして使えるようにデザインしますよね？

Sketchなら"どこを伸ばすのか"の設定を覚えたまま素材を使い、画面を設計できます

・素材をシンボルにするとパーツの"スライス設定"を記憶でき、素材とのリンクも保てる

・シンボルを組み合わせて他のシンボルを作る事もできる

■ シンボル内の情報の部分的上書き

「オーバーライド」機能によって細かい表示差分表現なら1シンボルで表現可能です

全シンボルへのリンクを保ったままなので更新が有っても、
使用箇所へ自動的に反映できます

・シンボル内の文字ラベルは全て好きな文字に上書きできる

・シンボル内の"同じサイズ"のシンボルはいつでも他のシンボルに上書きして表示できる

例えば下記画像の様な表現が1つのシンボルの使い回しで用意にできるわけです

※このイメージでは「ボタン1個」と「ボタン2個」を同じサイズのシンボルで用意しておく事で、部分的にシンボル内シンボルを"オーバーライド(切替)"しています

■ 素材パーツの一元管理

「書き出し設定」もとても優秀！

/(スラッシュ)で区切った名前をファイルにつけると、
書き出し時になんとフォルダ分けしてくれます

以下の様なルールでライブラリ内にパーツを管理すれば、必要素材を最新状態で揃えておく事ができ、さらにいつでも画面設計時に呼び出す事ができます

・例えばエンジンがUnityなら素材シンボルをAtlas/○○/なんとか.png 等で命名する

・ライブラリ（素材全部入Sketchファイル）から一気に書き出しする

■ 画面の半自動資料化

Sketchプラグイン「SpecExport」で画面指示書Htmlを一瞬で作れます！

・テキストクリックでスペースの長さ、フォント種類、サイズ等すべて解る

・画像をクリックでその画像のサイズだけでなくシンボル素材の格納場所まで案内可能

実際使ってみたら画面設計が楽になった

資料化や素材管理など単純で時間の掛かっていた手作業が効率化され、
よりクリエイティブなデザインの仕事に時間を使えるようになりました

• リストのデザインがとても作りやすい
• あの素材どこだっけ？これバージョン古いよね？がない
• 開発に画面情報を伝える資料が一瞬で出来上がる

■ リストデザインがとても作りやすい

例えばリストを作るなら、「項目シンボル」を作って中身をオーバーライドするだけ！

■ あの素材どこだっけ？これバージョン古いよね？がない

画面を構成する素材を全て1つのライブラリ（素材を集めたSketchファイル)に集約！

「素材管理がとっても楽・・！」

 

■ 開発に画面情報を伝える資料が一瞬で出来上がる

画面を作ったらSpecExport！それだけで画面指示書の制作終了！

画面要件修正が頻繁に入る場合でも、画面をデザインし直したら資料を書き出すだけなので巻き戻りによる作業の発生コストが段違いに少なくて済みました

 

まとめ

ここまでSketchを通して時間をもっと効率的かつクリエイティブに使えるようにする方法をご紹介しましたが、使ってみたくなったでしょうか？

Sketchは2018年12月現在、Version53でダークモードが搭載され目にも優しくなったり オーバーライドにサムネも表示されるようになる等、より使いやすく進化を続けています

もし気になったら実際に使ってみて、
クリエイティブにより集中できる環境を作っていきましょう

KLab Creative Advent Calendar 2018 の 25日目は、中根良樹さんです。

よろしくお願いします。