blog,potato4d,me

エンジニアからみたSketch

Sketch

はじめに

このエントリはSketchアドベントカレンダー16日目の記事です。

登場して以降中々アツく、サブスクリプション制になるというアナウンスがあってもなお愛してやまないユーザーがいる、Macでの環境としてはAdobeツールとタメを張れるといえる程には人気となったSketchですが、ツール柄、デザイナー視点での記事が大半かと思います。

このエントリでは、少し視点を変えて、エンジニアサイドからみたSketchのポイントについて述べていきたいと思います。

なお、私自身でデザインをすることもたびたびあり、しかしながらJavaScriptエンジニアとしての仕事が主な人としての視点となります。また、基本的にビジュアルデザインというよりは、インターフェース周りのデザインが主であるので、リッチなデザインや複雑な画像加工は行いません。

Sketchの良いところ

まずはSketchの良いところから幾つか挙げていきたいと思います。

軽さ

まず一つ目ですが、軽さです。私がSketchを利用する動機の中でも中々の割合を占めているポイントです。。今でこそAdobe Xdなどのツールもあり、軽量デザイン/プロトタイピングツールとしては戦えるものも出てきていますが、Sketchほどしっかりインターフェースを作り込めた上で軽いツールというものは現状他にありません。

コーディング時の重さ

エンジニアがデザイナーさんと作業する際、psdやaiファイル及びツールの重さは大きなストレスとなっています。
例えばコーディングの際、各要素のサイズを確認したり、マージンを確認したりというポイントで、デザイン上の要素を選択する機会は無数に存在します、Photoshopなどの場合、(あまり構造が綺麗でなく、重くなっているデザインデータの場合)要素を選択するだけで1秒ほどの待ちが生じてから選択されるということは頻繁にあります。

その上、反応が遅いため、ドラッグされている扱いになって、移動してしまってCmd+Zで戻してもう一度座標を確認して……といった作業も幾度となく起こり、効率の低下、ストレスの基となっています。

特に、作業する上では便利ではあるのですが、最近のPhotoshopのアートボードなんかを使ったファイルですとお手上げです。細かいパターンまで全部書きだした上でpngファイルを大量に開けてプレビュー.appで測るほうが楽なくらいです。

ですが、Sketchの場合は、大量のアートボードを利用した場合でも、殆ど重くならず、軽快に動作し、ストレスなくコーディング作業が可能となります。

デザイナーさんは全く悪くないのですが、私個人としては、この重さの違いから、.xdか.sketchではないデザインデータを触ることに最近はうんざりしています。

幸い、ここのところはどちらかで仕事ができることが多いため、非常に助かっています。

デザイン時の重さ

また、デザイン時でも、エンジニア特有の重さに対する重いみたいなものはあります。

デザイナーさんでもできる方もいますが、Webエンジニアは基本的にCSSを書くことに慣れているので、エンジニアメインの人間がデザイン周りの作業を行う場合は、正直インブラウザでサクッとやってしまうほうが圧倒的に早かったりします。

しかしながら、それでは細かいところが詰められないため、大雑把なイメージのみをCSSでプロトタイピングを行い、デザインツールで仕上げることもありますが、この場合でも同様のストレスが生じます。

Photoshopなどを利用していると、前述の通り動作が重いため、PhotoshopのUIが更新されるより、同じ内容に相当するCSSを記述してブラウザで逐一見たほうが楽だったりします。

CSS自体はテキストデータであるため、デザインツールより圧倒的にはやく、この辺りが余計デザインツールへのヘイトを貯めているのですが、Sketchの場合は、瞬時に更新ができますので、これでは「CSSの方が速い」とはいえなくなっています。

操作のわかりやすさ

次に、操作の簡潔さが挙げられます。

Sketchは、操作が簡潔なので、Photoshopを利用しているときなどに感じる「あんまり使わない機能が多くてごちゃごちゃしてる」感じがありません。Excelを触った後に、Googleのスプレッドシートを触った時の気軽さに似ている気がします。

利用にあたって十分な機能を有していて、かつ特に「整列」や「マスク処理」周りの簡潔さが気に入っています。雑にRectangleを作って選択してすぐマスク!というくらい手軽に操作ができるので、非常に触っていて気持ちがいいです。

また、要素に付加できるプロパティも、全体的にFills, Borders, Shadows, Inner Shadowsと、CSSを意識した作りになっているため、脳内でCSSのコードとブラウザでのレンダリング結果を考えがながらデザインできるのも良いポイントです。

エンジニアがデザインを作ると、どうしても拡張性や汎用性、CSSやJavaScriptのフレームワーク上でのコンポーネントの再利用性を意識しながら作るため、この辺りがはっきりしているのは高評価です。

Xdとの比較について

他にも、レスポンシブ対応している点や、デザインにmixinのようなものを作れる点など、魅力的なポイントはたくさんありますが、特に私がSketchを利用する動機となっているポイントを今回はご紹介しました。

最後に、Adobe Xdとの比較についても少し述べたいと思います。

個人的には、デザインの際はAdobe Xdを利用することも多いのですが、JSエンジニア的に言うと「XdはRiot.jsでSketchはVue.js」だと思っています。Xdの方が軽く、しかしながら小規模向けで、Sketchは、Xdほど気軽ではないけれど、小〜中規模を幅広くカバーするイメージです。

Xdの方が簡潔なので、惹かれることも多いですが、Sketchには、Xdにはない「簡単なものからある程度凝ったものまで、全てある程度の簡単さのもと作ることができる」という利点があると思います。

Xdにはどうしてもまだまだ機能面で利用に耐えうる上限というものがありますが、Sketchはそのあたりもあまり意識せず利用できる気がします。

個人的には、Repeatのしやすさと軽さ、あとプレビューモードの手軽さを捨てきれてないため、Sketchで要素要素を作って、それをXdで結合するというシチュエーションも多々あり、実はこれが正解ではないかなとも思っています。

最後に

エンジニア目線で少しSketchについて語りましたが、実際Webデザイナーさんは重さやわかりやすさという視点をどう考えているのか気になったりします。

「沢山アートボードを作っても軽い」という点は意外とデザイナーさんが言っているところも耳にしますが、正直「一枚のページでもpsd十分重くないですか?」と疑問であったりします。ちなみに、私は重いと思っています。

また、詳しく書くと開発の内容になってしまうので今回は述べませんでしたが、Sketchの機能自体が、今のJavaScriptフレームワークの「コンポーネント志向」という考え方と物凄くマッチしていると思っていて、今後よりスケーラブルな製品を生み出すという点で、エンジニアとデザイナーがもっと仲良くなれるためのツールではないかと期待している点もあります。

何にせよ、SketchはMac限定というOSの壁などもありながらも、まだまだ未来があり、Sketchか進化した先のXdどちらかが、既存のデザイン環境をひっくり返してくれることを期待しています。

このエントリーをはてなブックマークに追加