DIST.18 「Sketch時代のWebデザインワークフロー」 - 勉強会メモ

# イベント概要
[DIST.18 「Sketch時代のWebデザインワークフロー」 - connpass](https://dist.connpass.com/event/69807/)
2017年11月10日（金）に東中野にある東京テクニカルカレッジで開催された。

デザインツール「Sketch」をメインテーマにした３つのセッションで構成される勉強会。詳しくは[connpass上のイベントページ](https://dist.connpass.com/event/69807/)を参照してください。


# セッション１： 「2018年に向けたツールの選び方」
フリーランス [長谷川 恭久](https://twitter.com/yhassy)（HASEGAWA Yasuhisa）
※ [Automagic.fm](http://automagic.fm/)をやっている方

## デザインプロセスがぶっ壊れている
昨今様々なデザインツールが次々と登場している。
Sketch以外にもFlinto, Framer, Marvel, Principle, Adobe XD, Prottなど多数。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">デザインツール戦争 <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/ohbhpMzz58">pic.twitter.com/ohbhpMzz58</a></p>&mdash; もりかわ (@talocohc_rion) <a href="https://twitter.com/talocohc_rion/status/928928482071003136?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このようなデザインツールが多数登場しているのは、**「デザインプロセスがぶっ壊れている」**から

問題は**工程間の溝**
企画（ワイヤー作成） → デザイン（カンプ作成） → 実装（コード作成）
の各工程間で手戻りや作り直しが多数発生している。

従来のPs, Aiによるデザインカンプでは情報が足りない（例：マウスオーバーしたらどうなる？）

## 表現ではなく連携の向上のためのツールを
Ps, Aiのような「表現力」を高めるのためのツールではなく、Sketchのようなデザイナーとエンジニアの「連携力」を高めるツールが必要な現場がある。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">デザインツールには大きく２つ。<br><br>・表現力を高めるもの<br>Phoshop、Illustrator<br><br>・連携力を高めるもの<br>XDとかFigmaとかPrincipleとかSketchとかとか。デザインツールたち戦国時代。<a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a></p>&mdash; shizooo (@shizooo85) <a href="https://twitter.com/shizooo85/status/928931353860587521?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**自分の現場でどちらのツールが必要なのかを考えたツール選びが必要**

## デザイナーにもコード思考を
デザイナーとエンジニアとの連携を強化するためにも、デザイナーもコード思考を理解しておく必要がある。

### コード思考
1. もしもを考える
2. ルールを作る
3. 過程をオープンにする

#### １． もしもを考える
- 回線が遅くなったら？
- コンテンツの量が増えたら？
- 横幅が狭くなったら？ etc...

#### 2. ルールを作る
デザインの一貫性を考える。
同じ機能のボタンが全く違うデザインになっていない？

#### 3. 過程をオープンにする
完成前に途中経過が見えるようにする。
どのような方向に進んでいるか、なぜそう作っているのか、などを見せる。

## ツールや機能
- [States – Sketch App Rocks!](http://sketchapp.rocks/plugins/states/)  
状態ごとにアートボードを切替えてくれるSketch Plugin
- Sketch 48 から色の管理機能が追加  
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Sketch 48 - Find and Replace Colors <a href="https://t.co/YwwBHLKNSx">https://t.co/YwwBHLKNSx</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 江澤尚 (@glico20) <a href="https://twitter.com/glico20/status/929840625473658880?ref_src=twsrc%5Etfw">2017年11月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# セッション２：「あのコーポレートサイトができるまで」
フリーランス [こもり まさあき](https://twitter.com/cipher)（KOMORI Masaaki）
※[Webデザインの新しい教科書](https://www.amazon.co.jp/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E6%95%99%E7%A7%91%E6%9B%B8-%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E8%A6%9A%E3%81%88%E3%82%8B%E3%80%81%E6%B7%B1%E3%81%8F%E7%90%86%E8%A7%A3%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%E3%80%88HTML5%E3%80%81CSS3%E3%80%81%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%89-%E3%81%93%E3%82%82%E3%82%8A%E3%81%BE%E3%81%95%E3%81%82%E3%81%8D/dp/4844365630)の共著者

## スマホ版のデザインがない！
デザイナーから納品されたカンプにPC版のデザインしかないことも。
そうならないように作るときは、PC版とSP版の２つアートボードを並べてデザインする。

## Zeplinで先にデータを渡して後で調整
エンジニアへZeplinを使って早めにデザインを共有。
ヘッダーの高さや余白など、後からコード側で簡単に変更できるレベルの細かいところは、後から調整する。
先にデザインを共有することでエンジニアはコードを書き始めることができる。

Zeplinはスタイルガイドを生成でき、それをもとにScssなどのコードを出力できる。
コードを書く量が減って便利！

## ツールや機能
- Autolayout (Sketch plugin)  
レスポンシブなデザインをSketch上で作成できるPlugin。動いたときの変化を見せるのに使える。  
[SketchでAuto Layoutを考慮したデザインが作成できるプラグインが便利すぎる - NSBlogger](http://nsblogger.hatenablog.com/entry/2017/01/03/sketch_autolayout)
- [Sketch Notebook (Sketch plugin)](https://marcosvid.al/sketch-notebook/)  
Sketchデータに直接コメントを書き込める。デザイナーから指示やレビューに使える。
- [Sketch Emmet (Sketch plugin)](https://joelbqz.github.io/sketch-emmet/)  
SketchデータからEmmetで書かれたHTMLを出力する。  
予めSketch側でクラス名を付けておけばHTML書かなくていい！
- [Sketch Tool](https://www.sketchapp.com/tool/)  
Sketchに最初から組み込まれているコマンドラインツール。  
実装時に使いやすいようにデータを調整したりできる。
- [Kactus](https://kactus.io/)  
GitをベースにしたSketchバージョン管理ができるツール。サボテンのキャラが可愛い。  
**[Sketch 43 からSketchデータがJSONになった](https://www.webprofessional.jp/need-know-sketchs-new-file-format/)のでコード同じようなバージョン管理が容易に！**


# セション３： 「シンボルの効率的な作成・運用法とエンジニア連携についての取り組み」
[Standard Inc.](http://www.standardinc.jp/) デザイナー [吉竹 遼](https://twitter.com/ryo_pan) （YOSHITAKE Ryo）
※[UIデザイナーのための Sketch入門＆実践ガイド](https://www.amazon.co.jp/dp/B0722RWWWL/)の著者

- 階層の活用（シンボル名をスラッシュで区切る）
- マスクの活用（色とボタン形状などを分けてデザインし、後からマスクすることでバリエーションを作成）
- Sketch Librariesの活用（シンボルを他のSketchファイルからインポートできる！）  
[Sketch LibrariesとAbstractを使ったAtomic Designの実践💪](https://blog.nagisa-inc.jp/archives/1823)

# その他
- シンボルを集めたSketchファイルをエンジニアと共有。変更があったら変更日を書いて、その下の新しいシンボルを置く。
- [InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。](https://technical-creator.com/invision-design-system-manager/)
- **デザインは決裁者と一緒に作ることを目指す**


# 参考URL
- [DIST.18 「Sketch時代のWebデザインワークフロー」まとめ](https://togetter.com/li/1170261)
- [DIST youtubeチャンネル](https://www.youtube.com/channel/UCNsgmodjXtYKAi1HxLK94kQ)

## [DIST.18 「Sketch時代のWebデザインワークフロー」まとめ](https://togetter.com/li/1170261)からのピックアップ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">デザインツールを選定していくために…<br><br>✅デザインプロセスにある溝を埋めるための機能<br>✅画面・UI要素の遷移を作る<br>✅可変だけでなく、状態に応じた設計ができる<br>✅デザインアセットの管理・共有・同期が容易にできる<br>✅何かしらの形でコードに書き出すことができる<br> <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a></p>&mdash; もりかわ (@talocohc_rion) <a href="https://twitter.com/talocohc_rion/status/928935775877586945?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">さっき最後まで見せれなかったやつ。可変はもちろん Flexbox もどきみたいなこともできるよ。どこまで作りこむかは場合によるけど、ツールでこれくらい出来てた方が良い。 <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/YRAUOyVKIk">pic.twitter.com/YRAUOyVKIk</a></p>&mdash; Yasuhisa🐲 (@yhassy) <a href="https://twitter.com/yhassy/status/928938527093485568?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">登壇者には当たり前すぎてスルーなんですけど、Craft はすぐ入れるプラグインのひとつ <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/G3wIjvCfMr">https://t.co/G3wIjvCfMr</a></p>&mdash; Yasuhisa🐲 (@yhassy) <a href="https://twitter.com/yhassy/status/928945632915505152?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">一番最初に入れるプラグインはこれですね。これないと操作できん身体になってる <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/jWgVLYZto2">https://t.co/jWgVLYZto2</a></p>&mdash; Yasuhisa🐲 (@yhassy) <a href="https://twitter.com/yhassy/status/928946165248286720?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Atomic Designぽいことをするなら、の参考。　Sketch Workflow — Atomic Symbols – Design + Sketch – Medium <a href="https://t.co/k8kq7xPybt">https://t.co/k8kq7xPybt</a> <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a></p>&mdash; komori, masaaki (@cipher) <a href="https://twitter.com/cipher/status/928948690324094977?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">いろいろまとめ <a href="https://t.co/2aya1saDu4">https://t.co/2aya1saDu4</a> <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a></p>&mdash; komori, masaaki (@cipher) <a href="https://twitter.com/cipher/status/928949475657183233?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ガンガン警告出すみたいなことしてくれないですが、UI と見た目が良いという理由で色コントラストチェックは Stark にしていますね。 <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/Ys4gQkvlc0">https://t.co/Ys4gQkvlc0</a> <a href="https://t.co/tCE8XN2fHe">https://t.co/tCE8XN2fHe</a></p>&mdash; Yasuhisa🐲 (@yhassy) <a href="https://twitter.com/yhassy/status/929111396268130304?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">おい、Sketch の基本的な使い方覚えに来たのに何もないのか！という人は、こちらのまとめをご覧ください。Tips 集のようなもんです。しばらく前にまとめたやつだけど、今でも通用します。 <a href="https://twitter.com/hashtag/dist18?src=hash&amp;ref_src=twsrc%5Etfw">#dist18</a> <a href="https://t.co/w1f4RXuNIm">https://t.co/w1f4RXuNIm</a></p>&mdash; Yasuhisa🐲 (@yhassy) <a href="https://twitter.com/yhassy/status/928939685149364225?ref_src=twsrc%5Etfw">2017年11月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>