link facebook2 twitter youtube

【軽い・簡単・安い】フロントエンドデベロッパーからみたSketchのメリット

Sketchは、Bogemian Coding社によって開発されたMac用のグラフィックデザインアプリケーションです。
モックの作成から、プロトタイプ作成、最終的なアウトプットまでこのアプリケーションひとつで完結できます。
最近では、Photoshopの代替アプリケーションとして採用する企業も増えてきています。
この記事では、Sketchの特長とメリットを簡単にご紹介します。

Sketch

軽い

最大の特長は、快適に操作できることでしょう!
長年、Photoshopで制作をしてきた身としてこのサクサク感は衝撃でした。
実際ファイルサイズも小さく、体感ではPhotoshopなら500MBはありそうなデータもSketchでは10MB以下で管理できます。
そのヒミツはSketchはベクターデータです。データをビットマップ画像として有するPhotoshopと違いデータサイズの削減が実現できるのです。

またSketchの特長として、Photoshopのように豊富な機能を有さず最低限に機能を限定することで動作が軽く、ストレス無く扱えることも挙げられるでしょう。
また、ベクターデータによる制作は様々な解像度のデバイスに対応しないといけない現代のニーズにも柔軟に対応してくれます。
もちろん画像の書き出しはPhotoshopでいうところのアセット抽出ライクに、簡単に書き出すことができます。

簡単

豊富なUIキット

Sketchは豊富なUIキットが内蔵されており、マルチデバイスデザインにおいて力を発揮します。
PCからスマホまでのレスポンシブサイトのデザイン行うと仮定しましょう。
iPhone実機のヘッダーなどUIを用意する必要はありません。Sketchにすべて用意されているからです。
僕たちはただただ適当なUIを選択するだけ。デザイン開始です!
マルチデバイスでのデザイン・実装を前提としたUI設計がなされているSketchでは、必要なものが準備されています。
UX設計が素晴らしいですね!今日は定時に上がりましょう!

UIが直感的でわかりやすい

Adobe Fireworksはとても評価の高いアプリケーションでした。
レイヤーの選択からスライスまで、直感的に操作できることが特長で多くのクリエイターに愛されました。
CS6を最後に開発が終了すると発表されたときには、世界中のクリエイターが涙を流し喪に服しました。

Fireworksロスを経て今、Fireworksに替わる素晴らしいアプリケーションがあります。
Sketchは、そんなFireworksライクな直感的なUIを持っており簡単に操作できます。
僕達が初学者だったとき、とても優しく協業してくれたFireworks。
彼のようにSketchは、いつでも僕らとともにいてくれます。

豊富なプラグイン

快適な作業を助けてくれるプラグインも豊富です。
Sketchのプラグインで特長的なのは、デザインのみならずデベロッパーとの協業をサポートしてくれる
プラグインが充実していることでしょう。
他のアプリケーションに比べてもSketch関連のプラグイン開発は活発です!

数あるプラグインの中からZeplinを紹介します。

Zeplin

実際の制作現場において、デザイナーとデベロッパーのコミュニケーションコストは膨大になりがちです。

デザイナー「ここはゆるいグラデーションをななめにかけてください。」
デベロッパー「それだと、このレイヤー分けてほしいです。」
デザイナー「自分でできないの?」
デベロッパー「・・・」

フォントサイズから、余白のルール、カラーの選定、アニメーションのイメージの共有など、デザイナーのイメージを実装するだけでも考慮しないといけないことが膨大にあります。

デザインガイドラインの作成は、そのコミュニケーションコストを削減する目的があり、デザイナー・デベロッパー間で共有することで、イメージの齟齬を解消してくれる有効な手段です。
しかし、ガイドラインの作成と運用にコストがかかります。ガイドラインの充実のためにコストをかけるのは本末転倒でしょう。
Zeplinは簡単にガイドラインを作成することができ、デザイナー・デベロッパーのコラボレートを助けてくれます。

『背景色を5秒かけてこの色に変える』

などの細かいアニメーションの指示をSketch上でやりとりできたり、
Sketchのサイドバーにデザインガイドラインを表示することができ、いちいちガイドラインを参照しに目線を動かす必要もありません。
Zeplinを使用することで、平和的に質の高いアウトプットを実現できるでしょう。

Zeplin

便利

デザインを実機で確認できる Sketch Mirror

Sketch Mirrorは、作成したデザインをPCからではなく、スマホ上で確認できる機能です。

『実機で確認して気づいたけど、このUI使いにくい。』

などの手間を未然に防ぐことができます。
従来のAdobe製品にはない機能です。
今後のデザインアプリケーションのデファクトスタンダードになりうる機能です。

アートボード機能

Sketchではアートボードを追加して、デザインできます。
画面遷移が一望でき、サイト構造の理解がとても容易になります。
このあたりはAdobe Illustratorと似ていますね。
生産性向上にもこのアートボード機能は貢献します。
『aboutページの冒頭箇所、どうなってたっけ?』と思ったときにわざわざそのファイルを開く必要はありません。
同じファイルに別のアートボードとして存在しているからです。

大規模サイト構築では、デザインファイルの管理コストが大変です。
『最新のデータはこれで合っているのか』
『昨日届いた、先方CBの反映はすべてのファイルに適用済みか』
『最新データ、もれなく共有に上げたか』

などなど。。。
さらに、都度都度新たなファイルを開くことでアプリケーションのタブはカオス状態になりがちです。
Sketchを利用することでそのストレスは無縁になります。
今日は定時に上がりましょう!

安い

払いきり

Adobe CCからサブスクリプションでの支払いになりました。月々の支払いは馬鹿になりません。
Photoshop CC、Illustrator CC、Adobe XD CCなど、20を超えるアプリケーションが使えるコンプリートプランは月4,980円かかります。
年間6万円弱の支払いです。
PhotoshopとIllustratorの2つのアプリケーションの利用に限定しても、月に3,000円を超えます。
対して、Sketchはサブスクリプションではなく払いきり、しかも99ドルという低価格です。さらにフリートライアルもあります。
フリートライアルで利用してみて、その便利さに感謝の念が生まれれば99ドル支払ってあげましょう!
それだけの価値はあります!

まとめ

Sketchをフロントエンドデベロッパー視点から紹介しました。
Sketchは『機能』、『価格』、『使いやすさ』どれをとっても利用に値する素晴らしいアプリケーションです。
ぜひ利用を検討してみてください。

Sketch

© eggplant