転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。
ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。
以前使っていたデザインツール
もともとはFireworksをメインに使っていました。
ただ開発が終了してしまったのもあって別のツールに乗り換えないといけないなーと思ってPhotoshopを次の制作ツールに決めていました。
Photoshopもアートボードの採用やアセット機能の追加などかなりWebデザインでも使える感じになっていたので、Sketchを触る前ではPhotoshopを使うと決めていてデザインツールの選択に迷いはありませんでした。
Adobe Photoshop CCについて
CC以降アートボードの搭載やスライスのしやすさなど、もともとは写真加工のソフトでありながらWebデザインも出来るようになっています。
Sketchと比較したときの特徴
価格はサブスクリプションタイプ単体で月額980円。今のSketchと同じくらいですね。
業界No1の画像編集機能が魅力です。Sketchにも画像編集機能はありますが、簡易なものしかできませんので…。
使ってるデザイナーも多いのでチュートリアルや参考書が豊富にあり困ったときの情報を探すのに不便しません。
また使ってる人が多いのでコーダーや他のデザイナーなどにファイルの共有が簡単です。
ただSketchに比べてものすごく重いので私は使うのをやめました。
SVG扱うのも苦手なので、書き出しに強いとは思えませんでした。
アプリのデザインをしないデザイナーを目指す人や写真を扱うことが多い人はPhotoshopを使うと幸せになれるかもしれません。
あとWindowsユーザーもですね。（SketchはWindows非対応なので）
Adobe Illustrator CCについて
Illustratorはもともとは印刷用のグラフィックのソフトでした。
Photoshop同様時代にあわせてWebデザインもできるようになってきています。
ベクターデータが得意なので画面サイズを固定しない柔軟なWebデザインが得意です。
フラットデザインとの相性もよく今後のWebデザインツールの主力として見られていました…Sketchがでるまでは。
Sketchと比較したときの特徴
価格はサブスクリプションタイプ単体で月額2,180円。今のSketchと倍くらいですね。
こちらもAdobe社のツールなので利用者は多いです。
特に印刷上がりのデザイナーさんがよく使われています。
SketchはCMYKがないので印刷が不向きですのでその点はIllustratorに軍配が上がります。
Sketch同様、ベクターデータを扱うので大きな差は無いのですが、Sketchに比べると動作が重いですね。
Prottやinvisionのように他サービスの連携ができないので、プロトタイプや画像の共有はSketchに比べると苦手です。
ただベクターの小数点の桁数がこちらの方が多いので、細かいベクターデザインはIllustratorのほうが得意だったりします。
使う前と使った後のSketchの印象の違い
正直Sketch触る前は全然期待していませんでした。
でも実際に触って見るとそのイメージは一変しました。
触る前
デザインツールなんて出来る事はどれも似たようなものだし、少し得意・不得意があるだけ。
「Sketchはプロトタイプとかが得意でワイヤーフレーム作ったりするのが得意なんでしょ」くらいしか思ってませんでした。
またSketchはWindows版がないので、他のパートナーさんとのデータの共有が大変そう…。あと英語で日本語じゃないんでしょ‥とかどちらかといえば不信感を持っているくらいでした。
触った後
触って一番最初に感動を受けたことは軽い！圧倒的に軽い！やばい！！
懸念していた英語もまったく苦になりませんでした。
私は動画を見て勉強したのですが、覚えた後はショートカットキーばかり使うのでまったっく気になりません。
冷静に考えれば単語が英語なだけなので、中学生でもわかるレベルです。
いい大人が英語だからという理由でツールの選択を外すなんて恥ずかしいですね。
Sketchの強み
デザインツールはやろうと思えば大体どのツールでもできる事が多いです。
でもSketchだからそれがやりやすいというものがたくさんあり私はそこに惚れ込みました。
デザイン編
Sketchを使っていて、良いなと思うところは軽さです。
他のデザインツールだと画面を作っていくうちに、重くなっていってしまい開発後半ではフットワークが重くなる事が多いのですがSketchは違います。
圧倒的軽さゆえにそのサービス・Webサイトの全画面を一つのファイルの中で完結させれます。
一つのファイルでサービスの全体感が見えるようになるとデザインの統一感が自然とでます。
あそこの画面はどうなっていたっけ？みたいな事があっても別のファイルを開く必要はありません。
画面をスクロールさせるだけ確認もできます。
一つの画面の中にあるファイルなのでコピーも簡単です。
また一つのファイルで完結させれると、データの管理が楽になります。
炎上しやすい制作会社さんは多いと思うのですが、リリース後どの画面が最新で、不要なデザインデータがどれかわからず整理されないままプロジェクトが落ち着き、リニューアルしようかになると「あれ？どれが最新版？？TOPのデザイン今と違うぞ…」みたいな事になってませんか？
Sketchを使えばもうそんな汚いデータ管理とはおさらばです。
Sketchはアートボードの他にもページといった機能も用意されていてファイル内でデータが整理させやすくなってます。
私はバックアップのデザインを別ベージに念のため程度に残しておいて開発を進めてます。
デザインデータが軽いのもあって、gitでバージョン管理してるのである程度落ち着いたらバックアップ用に切り離していたものは削除してます。
コーディング編
SketchはCSS周りの書き出し・管理もスムーズでファイル内でどの色が使われているか、フォントはどれがどのくらいあるかも確認できます。
これによってスタイルガイドやデザインのガイドラインが容易に作ることが可能になります。
最近はCSS周りの設計が複雑になり、こういったガイドラインになるようなものがないと全体感をつかむことが難しく、開発した人が抜けてしまうとブラックボックス化しやすいのですがSketchを使うことでそういったリスクを避ける事ができます。
Sketchは書き出し周りも非常に柔軟に対応できています。
特にAndroid・iOSといったアプリでも複数ある書き出し設定を容易に行なえます。
他にも外部のWebサービスと連携することで、コーダー・プログラマがSketchを持っていなくても、余白の数値や色・フォントサイズなどをブラウザ上で確認できますので、連携がとてもスムーズなります。
書き出しもブラウザから行えますので、コーディング途中に起こる、「コーダーがデザインデータ整理したけど、あとからデザイナが整理前のPSDで再度修正して送ってくるツラミ問題」も解消できます。
プロトタイプ編
SketchはAdobeのプロトタイプツール AdobeXDと比較される事が多いのですが、実はSketch単体ではプロトタイプの機能はありません。
プラグインを通して別のWEBサービスと連携させる事でプロトタイプとして成立します。
プラグインを通すときくと面倒に聞こえれるかもしれませんが、ショートカットボタンひとつ押すだけで画面を最新版にアップデート出来るので、全然苦になりません。
むしろ一つの統一されたサービスのようにスムーズに連携できます。
私がよく使うプロトタイプツールはprottとInVisionです。
個人的にはprottはワイヤー時の確認に便利でデザインの確認だとInvitionが便利という印象をもっています。
プロジェクトの癖によってこういったWebサービスを柔軟に選択できるのもSketchの強みかなと思います。
Sketchを使いだしてからの変化
Sketchを使いだしてから、別に彼女ができたり、急に痩せてモテモテになったり、宝くじが当たって一攫千金とかの変化はないのですが、開発の中で感じた変化はありました。
- 修正の品質向上
-
Sketchは軽いのでサクサク修正ができます。
それこそ、打ち合わせの最中にでた話もすぐに修正して「こんな感じですか？」みたいにイメージを共有できてやり取りがスムーズになりました。
あまりに早くなりすぎて、修正が簡単に思われてるのかディレクタさんがぽいぽい修正を言ってくるのはちょっとつらいです…ファイル一つで開発しているサービスの全画面をまとめていますので、一回の変更がどこに影響するのかもすぐに判断できますし、修正もすぐ出来るので修正の漏れが減ります。
後でやると思ってたらコーディングのときに忘れてたなんて事はSketchを使えばもうありません。
- コーディングスピードの向上
- 私はsympliというサービスを使っているのですが、これを使うと余白やフォントサイズなどの数字が取得しやすくコーディングのスピードがぐっと上がりました。
- 流用出来るパーツ設計
-
Sketchにはシンボルの機能が備わってます。
これはどのデザインツールよりも高機能です。Sketchを使いながらデザインをするとどことどこを同じパーツとして作るかといった選定がスムーズに行えます。
こういった設計を行えるとコーディングもスムーズになりますので良いです。他にもカラーパレットやスタイルも管理しやすいので、自然とコーディングに適したデザインに仕上がっていきます。
こういった設計は運用を考える上では重要なことですね。
- プロトタイプの導入
-
これまで私はプロトタイプというものは全然使ってませんでした。理由は面倒だったからです。ごめんなさい。
でもSketchを使いだした事でプロトタイプを面倒とは思わなくなりました。むしろ必須です。
プロトタイプを行うと画面設計がきちんとされ矛盾がなくなります。
開発途中で気がつく、「あ、これ抜けてる」がなくなります。
これによってスケジュールの遅延の可能性が減り、炎上するリスクを減らせれます。
抜けを早めに気がつけると準備の時間が持てるので、非常に良いです。またクライアントもプロトタイプがあると完成形のイメージをしやすいので意見をもらいやすく、後半でのどんでん返しのリスクを減らせれます。
メインツールに選んだ理由
ツールは使うもので柔軟に選ぶというスタンスですがデザインツールに関してだけはSketch一択です。
これ以外でWebデザインはできません。そのくらい依存しています。
なぜここまで推しているのかというと、最初（ワイヤーフレーム）から最後（コーディング）までSketch一つで完結させれるからです。
他のデザインツールでも出来るじゃんと思う方は大勢いらっしゃると思うのですが、違うんです。Sketchには無理がない。自然にそういった事が可能なのです。
私は引き継ぎができない案件は嫌いです。
引き継ぎというのは未来の自分も含みます。
二週間も触らなければ、デザインの事忘れちゃいますから、全体感やこれまでやってきた事が何か瞬時に見える化できるSketchの魅力は重要です。
Sketchを使えば引き継ぎができる。
この一点においてSketchは他デザインツールに追従を許さない完成度を誇っています。
案件は公開したら終わりじゃないです。
公開してからも続けるとき、しんどくないですか？
外部のパートナーとやり取りしていて最新版のデザインデータがないとか、TOPページのPSDが複数あってどれをペースに更新していっていいか見てわからないとかありませんか。
Sketchを使って私はそんな悩みを解消しました。
私のSketchは強いぞ！
最後に
Windowsで使えないとか関係ないです。Mac買おう。
Mac使ってるならSketchを使おう。
もうSketchがないとマジ無理（私は）。
よく、「うちの会社じゃSketchの導入は無理」と言った声を聞くのですがSketchはいいぞ。まずは試そう。
学習コストも低いですぞ。
一度身近なSketchユーザーのデザインファイルを見たり、フローを聞いたりすると良いと思います。
まじでやばい。
sketchは体験版は期間は限定されますが、Macユーザーは無料で使えますので一度触ってみては如何でしょう。
触ってみてより深く使ってみたいと思ったら、sketchの書籍を買って使い方を覚えると良いと思います。
sketchはこれまでワークフローが変わり、不便だったところが薄れていくので、最初は本やネットで慣れた人のやり方を真似るのをオススメします。
私はinvitionというプロトタイプツールを使うワークフローに切り替わりました。
別でinvisyonの記事を書いたので興味あればこちらもご覧ください。