イベント概要
DIST.18 「Sketch時代のWebデザインワークフロー」 - connpass
2017年11月10日（金）に東中野にある東京テクニカルカレッジで開催された。
デザインツール「Sketch」をメインテーマにした３つのセッションで構成される勉強会。詳しくはconnpass上のイベントページを参照してください。
セッション１： 「2018年に向けたツールの選び方」
フリーランス 長谷川 恭久（HASEGAWA Yasuhisa）
※ Automagic.fmをやっている方
デザインプロセスがぶっ壊れている
昨今様々なデザインツールが次々と登場している。
Sketch以外にもFlinto, Framer, Marvel, Principle, Adobe XD, Prottなど多数。
デザインツール戦争 #dist18 pic.twitter.com/ohbhpMzz58
— もりかわ (@talocohc_rion) 2017年11月10日
このようなデザインツールが多数登場しているのは、「デザインプロセスがぶっ壊れている」から
問題は工程間の溝
企画（ワイヤー作成） → デザイン（カンプ作成） → 実装（コード作成）
の各工程間で手戻りや作り直しが多数発生している。
従来のPs, Aiによるデザインカンプでは情報が足りない（例：マウスオーバーしたらどうなる？）
表現ではなく連携の向上のためのツールを
Ps, Aiのような「表現力」を高めるのためのツールではなく、Sketchのようなデザイナーとエンジニアの「連携力」を高めるツールが必要な現場がある。
デザインツールには大きく２つ。
— shizooo (@shizooo85) 2017年11月10日
・表現力を高めるもの
Phoshop、Illustrator
・連携力を高めるもの
XDとかFigmaとかPrincipleとかSketchとかとか。デザインツールたち戦国時代。#dist18
自分の現場でどちらのツールが必要なのかを考えたツール選びが必要
デザイナーにもコード思考を
デザイナーとエンジニアとの連携を強化するためにも、デザイナーもコード思考を理解しておく必要がある。
コード思考
- もしもを考える
- ルールを作る
- 過程をオープンにする
１． もしもを考える
- 回線が遅くなったら？
- コンテンツの量が増えたら？
- 横幅が狭くなったら？ etc...
2. ルールを作る
デザインの一貫性を考える。
同じ機能のボタンが全く違うデザインになっていない？
3. 過程をオープンにする
完成前に途中経過が見えるようにする。
どのような方向に進んでいるか、なぜそう作っているのか、などを見せる。
ツールや機能
-
States – Sketch App Rocks!
状態ごとにアートボードを切替えてくれるSketch Plugin - Sketch 48 から色の管理機能が追加
Sketch 48 - Find and Replace Colors https://t.co/YwwBHLKNSx @YouTubeさんから
— 江澤尚 (@glico20) 2017年11月12日
セッション２：「あのコーポレートサイトができるまで」
フリーランス こもり まさあき（KOMORI Masaaki）
※Webデザインの新しい教科書の共著者
スマホ版のデザインがない！
デザイナーから納品されたカンプにPC版のデザインしかないことも。
そうならないように作るときは、PC版とSP版の２つアートボードを並べてデザインする。
Zeplinで先にデータを渡して後で調整
エンジニアへZeplinを使って早めにデザインを共有。
ヘッダーの高さや余白など、後からコード側で簡単に変更できるレベルの細かいところは、後から調整する。
先にデザインを共有することでエンジニアはコードを書き始めることができる。
Zeplinはスタイルガイドを生成でき、それをもとにScssなどのコードを出力できる。
コードを書く量が減って便利！
ツールや機能
- Autolayout (Sketch plugin)
レスポンシブなデザインをSketch上で作成できるPlugin。動いたときの変化を見せるのに使える。
SketchでAuto Layoutを考慮したデザインが作成できるプラグインが便利すぎる - NSBlogger -
Sketch Notebook (Sketch plugin)
Sketchデータに直接コメントを書き込める。デザイナーから指示やレビューに使える。 -
Sketch Emmet (Sketch plugin)
SketchデータからEmmetで書かれたHTMLを出力する。
予めSketch側でクラス名を付けておけばHTML書かなくていい！ -
Sketch Tool
Sketchに最初から組み込まれているコマンドラインツール。
実装時に使いやすいようにデータを調整したりできる。 -
Kactus
GitをベースにしたSketchバージョン管理ができるツール。サボテンのキャラが可愛い。
Sketch 43 からSketchデータがJSONになったのでコード同じようなバージョン管理が容易に！
セション３： 「シンボルの効率的な作成・運用法とエンジニア連携についての取り組み」
Standard Inc. デザイナー 吉竹 遼 （YOSHITAKE Ryo）
※UIデザイナーのための Sketch入門＆実践ガイドの著者
- 階層の活用（シンボル名をスラッシュで区切る）
- マスクの活用（色とボタン形状などを分けてデザインし、後からマスクすることでバリエーションを作成）
- Sketch Librariesの活用（シンボルを他のSketchファイルからインポートできる！）
Sketch LibrariesとAbstractを使ったAtomic Designの実践💪
その他
- シンボルを集めたSketchファイルをエンジニアと共有。変更があったら変更日を書いて、その下の新しいシンボルを置く。
- InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。
- デザインは決裁者と一緒に作ることを目指す
参考URL
DIST.18 「Sketch時代のWebデザインワークフロー」まとめからのピックアップ
デザインツールを選定していくために…
— もりかわ (@talocohc_rion) 2017年11月10日
✅デザインプロセスにある溝を埋めるための機能
✅画面・UI要素の遷移を作る
✅可変だけでなく、状態に応じた設計ができる
✅デザインアセットの管理・共有・同期が容易にできる
✅何かしらの形でコードに書き出すことができる
#dist18
さっき最後まで見せれなかったやつ。可変はもちろん Flexbox もどきみたいなこともできるよ。どこまで作りこむかは場合によるけど、ツールでこれくらい出来てた方が良い。 #dist18 pic.twitter.com/YRAUOyVKIk
— Yasuhisa🐲 (@yhassy) 2017年11月10日
登壇者には当たり前すぎてスルーなんですけど、Craft はすぐ入れるプラグインのひとつ #dist18 https://t.co/G3wIjvCfMr
— Yasuhisa🐲 (@yhassy) 2017年11月10日
一番最初に入れるプラグインはこれですね。これないと操作できん身体になってる #dist18 https://t.co/jWgVLYZto2
— Yasuhisa🐲 (@yhassy) 2017年11月10日
Atomic Designぽいことをするなら、の参考。 Sketch Workflow — Atomic Symbols – Design + Sketch – Medium https://t.co/k8kq7xPybt #dist18
— komori, masaaki (@cipher) 2017年11月10日
いろいろまとめ https://t.co/2aya1saDu4 #dist18
— komori, masaaki (@cipher) 2017年11月10日
ガンガン警告出すみたいなことしてくれないですが、UI と見た目が良いという理由で色コントラストチェックは Stark にしていますね。 #dist18 https://t.co/Ys4gQkvlc0 https://t.co/tCE8XN2fHe
— Yasuhisa🐲 (@yhassy) 2017年11月10日
おい、Sketch の基本的な使い方覚えに来たのに何もないのか！という人は、こちらのまとめをご覧ください。Tips 集のようなもんです。しばらく前にまとめたやつだけど、今でも通用します。 #dist18 https://t.co/w1f4RXuNIm
— Yasuhisa🐲 (@yhassy) 2017年11月10日