Sketchが解決しようとしているデザインの課題

2017年4月22日、東京で「UIデザインのための「Sketch」1dayブートキャンプ」が開催されました。セミナーとハンズオンがある全編 Sketch を扱ったイベント。ポッドキャストにも出演してくださったことがある UI デザイナーの山本麻美さん（@linen_beau）と、多数の執筆や登壇をしているデザイナー こもりまさあきさん（@cipher）とご一緒させていただきました。当日の様子は Togetter のほうでまとまっているので、興味がある方はぜひご覧ください。

私は「なぜSketchがUIデザインで力を発揮できるのか」と題して、Sketch のようなツールが出てきている背景と、今後のデザインツールとの付き合い方について話しました。 Sketch に限った話ではありませんが、新しいから使う、流行っているから使うでは、ツールが提供したい価値を十分に引き出せなくなります。Figma や Affinity Designer にも言えますが、ここ 4, 5 年で出てきた新しいツールは、今までなかったデザインの課題を解決しようとしています。

ツールが思考を制限している

数年前から Web やアプリは固定枠がないことを前提にしてデザインする必要があると言われています。スクリーンサイズが無数にあることは頭で分かっていても実践するのは簡単ではありません。特に Photoshop や Illustrator のような従来のツールでは、固定のキャンバス上でデザインする以外方法がありません。「可変を考慮して作らないと！」と思っていても、使っているツールが固定しか許してくれないわけですから、作りようがないわけです。

そこでパソコン用、スマホ用という複数の固定キャンバスを作る場合がありますが、作られた固定キャンバス以外の大きさはたくさんあります。すべて作ることは無理なので、作り手と見る側の想像に任せるということになりますが、そこでコミュケーションロスが発生します。空気を読んでマークアップするエンジニアはいますが、それでは個々のスキルに偏ってしまい、最低限の品質を保つのが難しくなります。

どうしても固定サイズで考えてしまう。可変のことを考えようと思っても難しい。それはデザイナーのスキルがないのではなく、ツールがデザイナーの想像力を制限しているところがあると思います。可変の問題だけでなく、従来のデザインツールには様々な課題が残されてます。

• デザインからコードへの受け渡しが難しい
• 一定のルールの中でデザインするのが難しい
• 修正コストが高く、模索して見せるといった行為が難しい

ツールのほうで柔軟性のあるデザインが考えられるような機能があれば、
デザイナーの考え方も次第に変わります。

Sketch をはじめ新しいデザインツールに注目する理由は、Web やアプリのデザインにある特有の課題を解決しようとしているからです。Sketchを使う、使わない関係なく上記の課題を解決できないツールは Web やアプリのデザインには向いていないと思います。

Sketchが受け入れられている唯一の理由

Sketch は良くも悪くもエンジニアに寄り添ったデザインツールです。Xcode や Android Studio と UI の構成が似ているのはもちろん、Sketch 自体が非常にハックしやすい仕組みになっています。機能が足りないと感じればプラグインを作れば良いですし、Web サービスと連携して機能を補うこともできます。

Sketch プラグイン一覧を見ると分かりますが、ほとんどが GitHub 上で公開されています。これもデザイナーだけでなく、エンジニアからの支持されていると言える傾向です。ビジュアルデザインツールとして多少物足りないところがあっても、エンジニアとの連携のしやすさ、ワークフローに合わせて徹底的にカスタマイズできる点で Sketch が選ばれることがあります。

ただ、エンジニアへ寄り添ったツールだけあってトレードオフもあります。従来のデザインツール（特に Adobe 製品）と使い勝手の違いが多々ありますし、すべてを視覚化して表現してくれる Adobe　製品のような『やさしさ』が Sketch にはありません。

例えば、外部ファイルから本物に近いコンテンツを読み込んでデザインする機能があるとします。Sketch だと読み込むためのプラグインが幾つかあるので、自分に合うものを選びます（私の場合は Craft）。プラグインを使って任意の JSON ファイルを読み込ませるわけですが、Adobe XD ではあればファイルをドラッグ&ドロップで放り込むだけです。

XD の読み込みはテキストファイル（.txt）ですから、複雑なデータ連携はできません。ただ、テキストファイルという馴染みのある形式と、ドラッグ&ドロップという直感性、プラグインがなくても使えるのは、デザイナーにとって嬉しい配慮だと思います。

デザイナーへの配慮という点で、さすが Adobe 製品と言える一方、Adobe エコシステムの外だと使い勝手が悪くなるという課題もあります。エンジニアとの連携を重んじるか、デザイナーの作業効率を上げるか、表現力を高めるかでツールの選びどころは変わります。現場によって最適解は変わりますが、どのツールを使うかを考える前に、今のデザインワークフローで抱えている課題は何かを先に考えると、ツールが選びやすくなるはずです。

イベント前に開催していた Facebook Live を利用した Q&A セッション

まとめ

Web サイトやアプリのようなデジタルプロダクトは、成長したり突然変異が起こります。利用者が使うデバイスや環境によって柔軟に変化しますし、リリース後もコンテンツや機能が追加されます。静的な状態が存在しないわけですから、まるで生き物ようです。

こうしたデジタルプロダクトの特性を、Photoshop をはじめとした従来のデザインツールと突き合わせてみるとミスマッチがあります。従来のツールではスクリーンサイズやコンテンツの変化など様々な状態を考慮するのは難しいだけでなく、デザインとコードの連携と模索がうまくいかない場合があります。今必要とされているのは、デジタルプロダクトのデザインに特化したツールですし、その中のひとつに Sketch があると思います。