sketchが開発の現場に気づいてきてもう数年経ってきています。
特に去年あたりからsketchを扱う現場が増えています。
元々Adobeが独占していたWeb制作のワークフローをこの短期間で奪ったのはsketchにそれだけ魅力があるということです。
もちろんsketchがこれまでやってきたワークフローを全て網羅しているわけではありません。
ですが時代のニーズに合った内容があるからsketchは開発の現場に根付いてきています。
本記事ではWeb制作の現場でsketchがどういった風に使われているかを紹介します。
sketchの良いところ
まずsketchの良いところをいくつか紹介します。
動作が軽い
まずsketchの一番の魅力はその軽さです。
画面が100、200あったとしても軽快に動いてくれます。
これはPhotoshopやIllustratorではできなかった体験です。
軽いということはそれだけ素早く修正ができる、ストレスがかからないということに繋がります。
コンポーネントが管理簡単
sketchはシンボルがとても使いやすいです。
オーバーライドと言ってシンボルでも指定した一部の部分だけ変更することができたりするので使い回しのしやすいUIを作ることが可能です。
※シンボル内にあるシンボルを差し替えるとかもできます。
また最近ではsketchCloudを使って複数人での編集もしやすくなっており、リモートワークの現場でも一つのsketchが扱いやすくなっています。
学習コストが低い
sketchはUIが英語ですが元々Photoshopなどに慣れている人であれば2,3時間あればだいたいのことはわかります。
確かにsketchでできることは限られていますが、その分必要な機能だけを覚えればいいだけなので吸収率が早いです。
また書籍も2018年3月現在、ひとつしか出ていないので、どの本を買っていいのかわからないといった悩みもありません。
本で学ぶのが苦手な人はUdemy
でもスケッチの使い方を紹介しているのでそちらをご覧になってもいいかもしれません
UIのサンプルが多い
最近ではappleやFacebookでもUIの管理をsketchで行っています。
その流れからか海外で配布されているUIのファイルはどんどんsketchが増えてきています
UIの配布サイト大手のサイトだとsketch app sourcesがあります。
こちらを見ると有料で配布されているようなハイクオリティなUIやデザインテンプレートがかなりの量であります。
アプリの書き出しが得意
sketchはウェブサイトのツールというよりもどちらかと言えばアプリに強いツールです。
アプリの場合iOSとAndroidそれぞれのサイズごとに書き出す必要がありますがこの辺りの設定も簡単に行えるのも魅力です。
もちろんWebでも有用でretinaの対応で倍のサイズで書き出せます。
もっとsketchの良いところ知りたい方へ
もっと詳しく知りたいという方は過去にブログを書いているのでこちらをご覧ください。
現役WebデザイナーがデザインツールをSketch一択にした理由
今デザインの現場で求められている事
昔はデザインと言えばかっこいいものを求められることが多かったのですが最近はどちらかといえばUXを意識したり、マーケティングを意識してデザインをする現場が増えてきています。
そして様々な専門職種がひとつの案件に関わるようになりコミュニケーションのコストも増えています。
そういった背景からデザインは完成形を求めるというよりも今どうなっているか、これからどうしたいかといった部分をチーム全体に共有するという側面が求められてします。
そこがうまくいくと最終的な完成形のクオリティが上がるので、素早くデザインをして共有できるすると人が求められています。
そういった現場にsketchはすごく強いです。
どんな人が使うと良いか
sketchが万人向けかと言われるとそうではないです。
まず前提としてsketchはMac専用なのでWindowsを使っている方には使うことができません。
私はsketchをお勧めしていますが、さすがにOSを変えるほどのメリットはないと思っています。
sketchは気軽に画面を作ることができますので、提案のできるデザイナーであれば非常に使いやすいと思います。
打ち合わせの中で画面の話がでると口頭で説明しますが、中々伝わらない経験はありませんか？
その時sketchがあればその場で画面を作って見せて合意を得るなんてこともよくやります。
他にもチームの人とチャットでこんなのが欲しいといった要望があった時に、sketchで作って見てキャプチャーを送ってみると、そうそうこんな感じなんてやりとりも結構あります。
sketchはCSSの設計に準じた作り方でデザインができるのでコーディングが苦手なWebデザイナーでも抑えどころを覚えるとコーディングしやすいデザインをすることができます。
そしてスケッチは修正に強いです。
そして長く使い続けることができるデータを作成できますので、長くやる案件、担当がよく変わる案件などでも0から作り直すなんてことはありません。
ワークフローの変化
sketchで作ると案件の初めから最後までスケッチファイルを使い続けることができるので最新のデザインの確認がしやすいです。（個々の職種でデザインデータを保持するなんて事はしません）
最近の開発現場ではプロトタイプと言ってコーディングする前に画面遷移などさせて無理のない情報設計か使いやすいかというのを確認したりします。
最近sketchにもプロトタイプの機能が付きましたが、多くの現場ではinVisionやprottを使ってチームでプロトタイプを共有することが多いです。
ディレクターであればsketchでワイヤーを書き、そのままデザイナーが画面を細かく設定していく。時にはディレクターとデザイナー同時期に触るなんてこともありえます。
そしてコーディングをするタイミングになればそのままsketchファイルをコーダーに渡してコーディングしてもらいます。
もちろんこのように一つのファイルを触っているのでコーダーがスライス名を追加した時にもデザイナーがその最新のファイルを編集して作業をしていきます。
何を覚えたら良いか
sketchを使いたいと思っている人の多くはどう始めたらいいのか、何から覚えたらいいのかと不安になることが多いです。
ですが実際に作ってしまえばそんな不安はすぐに消しとびます。
過去に私が最初にスケッチを使った時はsketchでデザインデータをもらったのでこれをスライスしないといけないといった状態でスライスの仕方だけ覚えました。
実際にその時にスケッチがすごく使いやすいツールだと直感的に理解したので触りながら覚えていきました。
特に有効だったのが動画での学習です。
私はudemyの動画を見てsketchを覚えました
sketchと検索すればいろんな説明の動画が上がってきます。
書籍を買うよりも安かったりしますので悩むくらいだったら手を出してみてください。
プラグイン使い方
スケッチにはプラグインがあり公式以外でもgithubとかで結構上がったりしています。
インストールも簡単でSketchpacksというアプリを使えばすぐにインストールやアップデートができます。
プラグインを探す時は私はsketch app sourcesで検索することが多いです。
sketchも開発されてから結構時間が経っているので欲しいと思った機能はプラグインでだいたい作られてたりします。
情報共有の仕方
先ほどもちらっと書いたのですがsketchを使うならプロトタイプの作り方を覚えると良いです。
プロトタイプでデザイナーが一番のメリットとしてはフィードバックがもらいやすいというところです。
普段デザイナーだと中途半端なものを見せたくないという気持ちが多いかもしれませんが、私はsketchを使い始めて逆に中途半端な状態でこそ出さないといけないという考えに変わってきています。
デザインは一人で完成させるものではなくチームで完成させるものであると私は思っているので自分自身フィードバックをもらいやすい状態でデザインを育てるように心がけています。
最後に
sketchは使ってみると本当に使いやすいデザインツールです。
最近はレスポンシブであったりアプリであったりと開発の仕方はどんどん変わってきています。
これまでやってきたことが必ず正しいというわけではありません。
ツールも人も時代のニーズに合わせて変化する必要があると思います。もう無理はしなくて良いんです。
私はsketchを使い始めて開発がすごく楽になりましたので、もし使ってみたいなと思っている人は悩む時間がもったいないです。
是非触ってみてください(ゝω・)
私がsketchを使って幸せになっています。
どんな感じで良いのかは下記記事でまとめていますので、よかったらご覧ください。
現役WebデザイナーがデザインツールをSketch一択にした理由
わからない事があれば質問箱(peing)から質問してください。