Sketch使いのWeb制作ワークフロー

本エントリーは Sketch Advent Calendar 2016 24日目のエントリーです。今回は受託制作をメインにやっているWebデザイナーの筆者が、業務でSketchをどのように使っているかをご紹介します。

前提として、筆者のスキルなど
1. ワイヤーフレーム作成
2. デザインカンプ作成
3. コーディング依頼
Webデザイナーから見た Sketch のいいところ
- 学習コストが低い！使い方を覚えやすい！
年末年始のお休みに、Sketch無料試用版はいかがですか？

前提として、筆者のスキルなど

Sketch 歴2年とちょっと。（Sketch 3 から）
こんな動画講座を作れる程度にはオペレーションを習得しています。
HTML、CSS、飛び抜けてできるわけでもないが、きちんと動くものを作れる。（JavaScript はふわっとした知識とjQueryプラグインで乗り切っている）
CMSの導入を前提としています。（今回は a-blog cms ）

1. ワイヤーフレーム作成

チームのディレクターが作ったサイトマップをもとに、Webサイトのワイヤーフレームを作成します。（ディレクターから手書きワイヤーをもらうこともある）

ちなみに、この工程は基本的に手書きです。協業相手がいるとオンラインで共有しやすいかたちにするのがベストですが、弊社は基本的に社内ワンストップ制作体制なので手書きでディレクターと共有しています。

手書きワイヤーの一例。これは特にカオスな1枚。（普段はもっときれいです）

イメージした画面遷移がしっくりこない時は、この時点での手書きをもとにプロトタイプ作成ツールの Prott や InVision で動かしてみたりします。

2. デザインカンプ作成

ここからが Sketch の出番です。筆者の携わるプロジェクトは99%CMSの導入を前提としているので、かっちりとページを作り込むよりは後で更新された時に破綻しないことを重視しています。だいたいトップページ（お客さまに見ていただく用）と詳細ページ（後工程のコーダーさんに渡す用）から作り始めます。

デザインカンプの1例。ブログの複数画面を3枚のアートボードで作成

コーポレートサイトの制作がメインなので、パソコン閲覧時のデザインである程度承認を取れたら、スマートフォン向けデザインを始めることが多いです。とはいえモバイルファーストの時代ですから、ここは案件によってさまざま。

デザインがさくさく通った場合、Sketchファイルのアートボードはこんな感じになります。（さくさく通らない場合は各ページごとにSketchファイルが分かれていく）

PC（パソコン）トップページ
SP（スマートフォン）トップページ
PC 詳細ページ
SP 詳細ページ
PC 一覧ページ
SP 一覧ページ
PC お問い合わせフォーム
SP お問い合わせ
その他、そのサイトのキモになるデザイン（検索ページや商品一覧ページなど）

3. コーディング依頼

デザインがお客さまからOKをもらえた！そのつぎは、後工程のマークアップエンジニアへのコーディング依頼をします。（バタバタしているとそのままのデザインカンプを渡してしまうことも多々ありますが）デザイナーとしてこれくらいは最低やっておきたいな…と個人的に思っているのが以下の工程。

余白についてのメモを残す

Sketchのプラグイン「Sketch Measure」を使って、各種余白のメモを残します。とはいえ、テキストの上下は line-height の影響もあって、この通りの数値ではいかないというのが悩みどころです…。最終的にはCSSファイルを触って余白やサイズの微妙なところを調整させてもらうこともあります。