Go to Qiita Advent Calendar 2024 Top
LoginSignup
18
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ezawa800(Sho Ezawa ( glico ))in株式会社ビザスク

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

Last updated at Posted at 2017-11-12

イベント概要

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. 過程をオープンにする

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

ツールや機能

  • States – Sketch App Rocks!
    状態ごとにアートボードを切替えてくれるSketch Plugin
  • Sketch 48 から色の管理機能が追加

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

フリーランス こもり まさあき（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デザインワークフロー」まとめからのピックアップ

18
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?