4kaku design

マーケティングを勉強しているWebデザイナーのノート

Sketch 3 Advent Calendar 2015の14日目の記事です。今回は、Sketch 3 を使ったデザインワークのための「ぬかどこ」であるテンプレートについて書きます。
お仕事でどう運用していこうかお悩みのデザイナーさんのお役に立てば幸いです。


Sketch 3 の「Template」機能とは?


まず最初に、Sketch 3 の「Template」機能について。(わかる方はさらっと読み飛ばしてください)

テンプレートとは、あるSketchファイルを繰り返し使えるひな形として保存しておく機能です。これによって、よく使うデザインパーツを毎回作らなくても済みます。


デフォルトのテンプレート一覧


Sketch(画像はVer. 3.4.4)をインストールすると、デフォルトで使えるテンプレートはこんな感じです。(いきなりAndroidが現れたのは、App Storeから脱出したからですかね…)個人的には「Material Design」にたまにお世話になっています。

テンプレートを使って新しいSketchファイルを作成するには

メニューバーの File > New from Template > (任意のテンプレート)をクリック。

Sketchファイルをテンプレートとして保存するには

テンプレートにしたいSketchファイルを作り、メニューバーの File > Save as Template... をクリック。

オレオレテンプレートを作る

あとはご自分の業務に合ったSketchファイルを作って「Save as Template」するだけ。「このパーツ前も作ったなー…」と思ったら、それはテンプレートにするべきパーツです。
以下が私がメインで使っているテンプレートです。(もちろんこれにのっとらない制作事例もあります)


いまいのオレオレテンプレート

改めて見るとなかなかてんこ盛りですね。よく使うパーツは以下の通りです。(PC版とスマートフォン版あり)

  • 新着記事リスト(画像なし)
  • 新着記事サマリー(画像あり)
  • メインカラム内の1〜3カラム画像
  • 見出し(h1〜h5 各2つずつ)
  • リスト
  • 数字つきリスト
  • テーブル
  • ページャー
  • シリアルナビ(前後の記事へのリンクボタン)
  • メールフォームのinputなど

ヘッダーやグローバルナビ、フッターは案件ごとにまったく異なるのであまり使い回せませんが、リスト(ul)や数字つきリスト(ol)はそんなに大きく変わらないことも多いので一度作っておくと重宝します。
ページャー、シリアルナビあたりもデザインによって見映えは変わりますが、スタイル(Shared Style)さえ仕込んでおけばスムーズにデザインを合わせることができます。

デザイナーによって、必要なテンプレートはきっと違う

個人的な事情を書かせていただくと、私は普段自社CMSを使った案件(最近はコーポレートサイトが多め)しかやりません。なので、普段の業務の中で必要なパーツはある程度絞れてきます。いわゆる「全部のせ」を一番初めに作る習慣を作ることで、コーディング担当との連携も取りやすくなりました。

必要なテンプレートは一人ひとり異なると思うので、他人のオレオレテンプレートに最近興味津々だったりします。

これからやってみたい Sketchファイル運用(ここからはメモです)

前述のオレオレテンプレートを使って、いつも以下のような感じでファイルを作成・管理しています。(本当はもっとずらっとファイルが並ぶんですが…)



ファイル名先頭の連番はデザインの制作順です。基本的に共通のデザインが通った時点でページ展開を始めるんですが、「このボタンの色は変えた方がいいんじゃない?」「お問い合わせへの動線、もうちょっと強化しようよ」ということで微々たる変更はしょっちゅうあります。
そういう共通パーツの変更を各デザインで作成しているとどれが最新なのかがわかりづらいので、

共通のパーツ用テンプレートを作成 → コーディング担当に渡す(コーダーさんは共通テンプレートだけ見ればOK) → デザイン展開 → 共通パーツに変更があれば、テンプレートに反映 →(以下完成まで繰り返し)

みたいな運用ができないかなーと試行錯誤しています。上手くいったらブログで共有したいです。

Sketch 3 Advent Calendar 2015 まだまだ続きます!

今年のSketch 3 Advent Calendar 2015はGithubやターミナルなど、私のようなへっぽこデザイナーは聞くだけでどきどきしてしまうようなテクニカルなワードが満載で、一読者としても更新を楽しみにしています。そして、Sketch への移行をご検討中のすべての方に@littlebustersさんの記事をお勧めしてまわりたい今日この頃です。