Sketchの歴史3年半分を振り返り、デザインワークを見直す！

約1週間前、Sketch Version 62がリリースされました。

気がつけばこの3年半でSketchはVersion39から62に進化し、noteにSketchのことを書いてもFigmaの記事がリコメンドされる日々。（娘も3歳半になりました）

日々、デザイン業務以外にも、UXディレクションやエンジニアリング、プレゼン修行、データ分析など様々なことをしているうちに、大きなトレンドの変化が起きていたのでは？と思い、過去のSketchのメジャーアップデートを追って、押さえるべきポイントをまとめることにしました。(すでに予告されている未来についてはまだ手が回っていないので次回にでも)

これから本格的に業務でSketchを覚える学生さん、Sketchの進化が早すぎてなかなか追いつけていないデザイナーさんにも、Sketchの今どきの使いこなし方や思想を知るヒントになればと思います！

まずは大きな流れからご紹介したいと思います。

デザインツールとしての地固め (〜 ver.46 / 2017.7)

まずは画面デザインを当たり前に行うための編集機能や文字周りの安定、ベクターの扱いの改善が行われていた時期です。

クラウド化 (ver.46 / 2017.7 〜)

ver.39 (2016/7) で公開されたSketch Cloudに、ver.41 (2016/11) にパスワード機能が追加、ver.46 (2017/7) で他ユーザーの招待機能が追加されました。ver.48ではファイルのダウンロードが可能になり、ver.49では後述する「ライブラリ」の共有機能が実装されます。

当初はデザインの簡易プレビューのためだったSketch Cloudが、共同作業のための仕組みに変わってきたことがわかります。

ライブラリ機能 (ver.47 / 2017.10 〜)

シンボルを外部ファイルとして管理するライブラリ機能が実装され、チームでデザインを進めたり、大規模なプロジェクトにおけるデザインの管理フローが大幅に改善されました。

ver.49 (2018/2) では、Sketch Cloudを使ってのライブラリファイルの共有が可能になりました。

ver.51 (2018/7) に、テキストスタイルやレイヤースタイルもライブラリで定義できるようになり、ver.60 (2019/11) でもクラウドライブラリの機能追加やコンポーネントパネルのアップデートがあり、まだまだ進化が続いているようです。

プロトタイプ機能 (ver.49 / 2018.2 〜)

Sketch単体でのプロトタイピング (画面と画面の遷移をつないでのデモ) が可能になりました。 ver.51 (2018/7) にはヘッダー・フッターの固定が実現されて以降は、大幅な機能追加は行われていません。

個人的には配置したシンボル内の要素にも、個別のアクションを設定できるようになって欲しいです。

シンボルのオーバーライド機能の強化 (ver.52 / 2018.10 〜)

同じ思想の下で作られたデザインは、共通のシンボルからオーバーライドで表現できるようになり、デザインをパーツごとに細かく分割してシンボル化・構造化するという流れが加速して行きました。

スマートディストリビュート (ver.55 / 2019.5 〜)

複数選択されている要素の間隔を、マウス操作やインスペクタからの入力で変更できるようになりました。またグリッドに簡単に揃えたり、要素の並び順をマウス操作で入れ替えたりできるようになりました (ver.57)。

この頃から、それまで2ヶ月〜2ヶ月半サイクルだったメジャーアップデートが、1ヶ月〜2ヶ月サイクルに短縮されます！

スマートレイアウト (ver.58 / 2019.9 〜)

シンボル内の要素のオーバーライド時に、シンボルに定義したデザインルールに応じて、親要素の幅や高さが自動的に変わるようになりました。

ボタンのラベルの文字数や、コンテンツエリアの文章の行数が変化した時に、隣接する要素との上下・左右のマージンが崩れることなく、親要素のサイズを縮めたり、押し広げたりします。

またそれらの構造をネストすることで画面全体が自動的に調整されるようになり、作成したデザインの柔軟性・耐久性がぐっと上がりました。

ver.62 (2020/1) に要素の最小サイズの定義が追加されたり、今、一番進化を続けている機能です。

大きな流れのまとめ

デザインの成果物として、外観だけでなく、構造や関係性の定義をしっかり行うことが求められるようになり、プログラマーの思想を理解したデザイナーがより重要になってきている気がします。

一方で、デザインデータの作り込みはあくまで手段であって、デザインを固める前により高速に試行錯誤をする、という部分は忘れずにいたいと思いました。高速に思考錯誤した結果、完璧なデータも勝手に出来上がっている、というのが理想ですね。

間違いなどあればTwitterやコメントで指摘して頂けると嬉しいです！

個人的には、ver.58以降の大きなトレンドである「スマートレイアウト」と、クラウドやライブラリを使った共同作業のためのノウハウを、きちんと身につけておきたいと思いました！

各バージョンのサマリー

ここから先は各バージョンのサマリー (バグフィックスとパフォーマンス改善以外) と、公式アナウンスへのリンクを掲載しておきます。
※ 読み返して雑なところや漏れは少しずつ書き改めます。

Version 62

リリース: 2020/1/21
前回からの経過日数: 1ヶ月半

・ファイルの保存方法を改善
・スマートレイアウト機能に最小幅の定義を追加

A new Smart Layout control, a better way to save and more — what’s new in Sketch?

Version 61

リリース: 2019/12/3
前回からの経過日数: 1ヶ月未満

・コンポーネントパネル内のテキストスタイルの改善

What’s next for Sketch in 2020?

Version 60

リリース: 2019/11/12
前回からの経過日数: 1ヶ月

・Cloud Library機能の改善
・新しいコンポーネントパネル

Sketch 60 — your design system starts here

Version 59

リリース: 2019/10/15
前回からの経過日数: 1ヶ月

・OpenTypeフォントのサポート改善
・バリアブルフォント対応

Variable Fonts, improved OpenType support, and a new Data plugin — What’s new in Sketch?

Version 58

リリース: 2019/9/17
前回からの経過日数: 1ヶ月

・スマートレイアウト機能追加

Smart Layout, a new Welcome Window and Projects on the Mac and Cloud— What’s new in Sketch?

Version 57

リリース: 2019/8/14
前回からの経過日数: 1ヶ月未満

・スマートディストリビュート機能に、オブジェクトの並び順をドラッグで入れ替える機能追加
・パスファインダー機能の改善

Mentions, Projects and Smart Distribute swapping sneak previews — What’s new in Sketch?

Version 56

リリース: 2019/7/23
前回からの経過日数: 2ヶ月

・ダブルクリックでシンボル内のテキストをオーバーライド可能に
・スマートディストリビュート機能のアップデート
・デフォルトでSketch Cloudに保存するオプション追加

Smart Distribute, Cloud documents and Sketch for Teams — What’s New in Sketch?

Version 55

リリース: 2019/5/21
前回からの経過日数: 1ヶ月半

・スマートディストリビュート機能追加
・SVGコードのペースト時にSVGレイヤーを作成する機能

Sketch for Teams, Smart Layout and more announcements from Layers

Version 54

リリース: 2019/4/9
前回からの経過日数: 2ヶ月

・OSの設定と切り離されたダークモード設定
・スナップ機能の改善

Improved snapping and a Dark Mode toggle in Sketch 54

Version 53

リリース: 2019/2/5
前回からの経過日数: 3ヶ月

・塗り選択機能を刷新
・シンボル内のオーバーライド対象の管理
・レイヤーリスト内でシンボル内のオーバーライド可能なレイヤーを表示
・スナップ機能の改善

Better overrides, a brand new Fill Popover and faster prototyping in Sketch 53

Version 52

リリース: 2018/10/2
前回からの経過日数: 2ヶ月半

・UIのリデザイン
・ダークモード対応
・ネスト可能なパスファインダー
・データソース機能
・シンボル内のテキスト、レイヤースタイルのオーバーライド機能

Dark Mode, Data, a brand new look and more in Sketch 52.

Version 51

リリース: 2018/7/10
前回からの経過日数: 2ヶ月

・テキストとレイヤーのスタイルのライブラリ化
・プロトタイプ機能にヘッダー・フッター機能追加
・線オブジェクトの矢印改善

Styles in Libraries and fixed elements in Prototyping in Sketch 51.

Version 50

リリース: 2018/5/9
前回からの経過日数: 2ヶ月半

・ベクターの読み込み、書き出し機能を改善

Making Sketch better in version 50

Version 49

リリース: 2018/2/28
前回からの経過日数: 2ヶ月半

・プロトタイプ機能
・Sketch Cloudでライブラリファイルを共有可能に
・Apple UI Design Resources

Prototyping, Libraries on Sketch Cloud and an official iOS UI kit in Sketch 49

Version 48

リリース: 2017/12/6
前回からの経過日数: 2ヶ月

・カラーマネージメント
・色の検索・置換機能
・Sketch Cloudからファイルをダウンロードする機能
・シンボルの拡大機能

Color Management, Sketch Cloud updates and Symbol Scaling in Sketch 48

Version 47

リリース: 2017/10/10
前回からの経過日数: 2ヶ月半

・ライブラリ機能
・角丸関連

Introducing Libraries and Smooth Corners in Sketch 47

Version 46

リリース: 2017/7/31
前回からの経過日数: 1ヶ月

・Sketch Cloudにプライベート共有機能追加
・テキストレイヤーのバウンディングボックス内での上下の揃え機能
・ヘルプ機能強化

Private Sharing in Sketch Cloud, Sync Shared Styles shortcuts and more in Sketch 46

Version 45

リリース: 2017/6/28
前回からの経過日数: 1ヶ月半

・プレゼンモード改善
・プラグインの自動更新機能
・ベクター編集機能強化
・UI改善

A redesigned color popover, better plugin management and more in Sketch 45

Version 44

リリース: 2017/5/12
前回からの経過日数: 1ヶ月

・アートボード機能強化
・ベクター編集機能強化
・フォントが手元にない場合の置換機能
・オブジェクトのリサイズ機能強化

A new Artboard picker, better vectors and more in Sketch 44

Version 43

リリース: 2017/4/6
前回からの経過日数: 2ヶ月半

・ベクター編集機能強化

Improved Shape Editing and More in Sketch 43

Version 42

リリース: 2017/1/24
前回からの経過日数: 2ヶ月半

・書き出し機能のプリセット強化
・TouchBar対応

Export Presets, Touch Bar, and More in Sketch 42

Version 41

リリース: 2016/11/8
前回からの経過日数: 2ヶ月半

・外観のアップデート
・ネストされたシンボルのオーバーライド機能
・Sketch Cloudにパスワード機能追加
・WebP形式のサポート
・プレゼンテーションモード

An Iconic New Look and More

Version 40

リリース: 2016/9/20
前回からの経過日数: 2ヶ月

・ベクターの編集機能強化
・テキストの変形機能強化

Improved Vector Editing and More

Version 39

リリース:  2016/7/20

・シンボルのリサイズ
・Sketch Cloud
・塗りに画像を指定する

Sketch 39 Brings Symbol Resizing and Cloud Beta

最後まで読んでいただきありがとうございました。