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

12991 ワード
勉強会メモ sketch Webデザイン dist 勉強会メモ テキストリンク

イベント概要

DIST.18 「Sketch時代のWebデザインワークフロー」 - connpass
2017年11月10日（金）に東中野にある東京テクニカルカレッジで開催された。

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

セッション１： 「2018年に向けたツールの選び方」

フリーランス 長谷川 恭久（HASEGAWA Yasuhisa）
※ Automagic.fmをやっている方

デザインプロセスがぶっ壊れている

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

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

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

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

表現ではなく連携の向上のためのツールを

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

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

デザイナーにもコード思考を

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

コード思考

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

１． もしもを考える

  • 回線が遅くなったら？
  • コンテンツの量が増えたら？
  • 横幅が狭くなったら？ etc...

2. ルールを作る

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

3. 過程をオープンにする

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

ツールや機能

セッション２：「あのコーポレートサイトができるまで」

フリーランス こもり まさあき（KOMORI Masaaki）
※Webデザインの新しい教科書の共著者

スマホ版のデザインがない！

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

Zeplinで先にデータを渡して後で調整

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

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

ツールや機能

セション３： 「シンボルの効率的な作成・運用法とエンジニア連携についての取り組み」

Standard Inc. デザイナー 吉竹 遼 （YOSHITAKE Ryo）
※UIデザイナーのための Sketch入門＆実践ガイドの著者

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

その他

参考URL

DIST.18 「Sketch時代のWebデザインワークフロー」まとめからのピックアップ