最近アシスタントにいろいろとお手伝いをしてもらっているんですが、はじめてSketchを触るということだったので、Sketchが何のためのツールであるかをきちんと説明しようと思い、まずはWebデザインに使われるツールの歴史を教えることにしました。

Webデザインは振り返ると20年以上の歴史があり、デバイスやトレンドの変化にあわせて制作フローも変わってきました。制作フローが変わるということは、ツールも変わらざるを得ません。Photoshop以外のツールでデザインをするのが未だに馴染めない・現場に落とし込めないという方も未だに多くいらっしゃると思いますので、この記事をきっかけに制作フローおよびツールについて見直していただけると幸いです。

MacromediaとFireworks

かつてFlashやDreamweaver、FireworksというWebプラットフォーム上で提供できるデザイン・プログラミングを開発するためのツールを提供していた「Macromedia（マクロメディア）」という会社がありました。中でもFireworksは、Webページのレイアウトやボタン・バナーなどのパーツを作成するための機能が整った非常に優れたソフトウェアで、当時は画期的だった「スライス」機能や画像圧縮の細かい設定ができるという、まさにWebデザインに特化したデザインツールでした。

Fireworksがリリースされたのは98年。その後、ライバルで訴訟合戦を行っていたAdobeが2005年にMacromediaを買収。Flash・Dreamweaver・Fireworksなどの製品群はAdobe Creative Suite（以下、Adobe CS）に統合されていきました。その後の最新バージョンはAdobe CS3〜CS6に搭載され、2013年にAdobeがCreative Cloudというサブスクリプションモデルのサービス提供を開始したタイミングで、Fireworksの開発は終了。現在も提供はされていますが、新機能開発は行われていません。

当時、AdobeにはPhotoshop・Illustratorという2大グラフィックツールがある上、iPhone登場移行のスマホの爆発的普及によるデザイントレンドの変化などにあわせた制作フローに、Fireworksは徐々に耐えられなくなってきていました。Adobeはその後、MuseというWebデザインツールを発表（2018年にこちらも開発終了…）、そして現在はAdobe XDに注力をしており、Fireworksの魂は名前を変えながら引き継がれていると言えます。

UI/UXデザインとSketchの登場

スマートフォンの登場以降、「UI/UXデザイン」という言葉が徐々に広がり始めました。これまで紙をどうやって画面に落とし込むかという考え方だったデザインが、デジタルデバイス上での操作性・体験のデザインへと変化していった象徴的なキーワードです。そんな中、Fireworksが開発を終了してしまい、多くのWebデザイナーや、スマホのUIデザインを行っていたデザイナーたちが、理想のワークフローを実現するためのツールを模索していました。

そんなとき注目されたのが、オランダのBohemian Codingが提供していた「Sketch」でした。Sketchがリリースされたのは2010年、当時は「ベクタードローイングツール」としてリリースされていました。2012年にはメジャーアップデートとしてWebデザイン・スマホデザインに特化した機能がリリースされ、Fireworksの開発終了の告知をきっかけに次々とSketchへと乗り換える人が出てきました。

英語版のみの提供のため、日本で本格的に使う人が増えてきたのはメジャーアップデート3以降かと思われます。Sketch3についてブログなどでハウツーを広める内容が増え始め、一部のデザイナーに限らず、大企業のデザイン制作現場でも使われるようになっていきました。

ここ数年で、Sketchは大幅な料金改定（初期購入費と毎年の更新料）を経て、ライブラリ（ファイル間でのシンボルの共有）やプロトタイプ（画面遷移とトランジション）などを実装し、高機能なUI/UXデザインツールへと進化を遂げました。最近ではサードパーティ製のコードが出力されるようなプラグインの開発が活発に行われており、徐々にSketchはデザインを作るだけでなくプログラマーへのスムーズな受け渡しができる環境を実現しつつあります。

ペーパープロトタイプとPOP

昔からソフトウェアのデザインを作る工程で「ペーパープロトタイプ」という手法がありました。これは紙にペンでラフにレイアウトやコンポーネントを描き、デザインツールで制作に入る前につくる下絵のようなものです。Webやアプリのデザインにもこのやり方は用いられるようになっていきましたが、どこのボタンを押すとページが切り替わるのか紙だけではわからないという問題がありました。

そこで2012年に登場したのが「POP」でした。POPは紙に描いたプロトタイプの絵を、スマホのアプリで写真に撮り、アプリ上でボタンの領域・画面遷移先を指定して、動くペーパープロトタイプを作れるというものでした。

その手軽さなどから、当時はプロトタイピングといえばPOPと言えるほど人気のツールアプリでしたが、その後は他のプロトタイピングツールに押されて徐々に下火に。2016年には競合だったMarvelによって買収されました。

TECHNICAL CREATOR

Marvel、元祖プロトタイピングツール「POP」を買収。

https://technical-creator.com/pop-has-joined-marvel

アプリのプロトタイピングツールとして2012年にリリースされた「POP」。このところあまりニュースを聞かなくなっていた同ツールですが、同じくプロトタイピングツールの「Marvel」によって買収されたようです。買収額は非公開。サイト上にはPOP has joined Marvel!の文言が。POP Joins Marvel!POPのユーザーは50万を超えており、今後Marvelのサービスに徐々に移行させていくのでしょう。InVisionの大型調達＆サービス拡大、Adobe XDの登場などで競争が激化するデザイン・プロトタイピングツール戦争。この先、どうなっていくのでしょう...

次々に登場するプロトタイピングツール

現在はプロトタイプ機能が実装されているSketchですが、去年まではこの機能がなく、画面遷移を再現するには他ツールとの連携が必要でした。PhotoshopでWeb・アプリのデザインをするユーザーも多く、そういった人たちにとってもプロトタイピングツールは必要とされる存在でした。

プロトタイピングツールについては、Sketchのような鉄板のツールが出てこなかったため、次々に乱立するような状況になっていきました。

思い浮かぶだけで以下のようなツールがあります
・InVision
・Prott
・Origami
・ProtoPie
・Marvel
・Canvas Flip
・Flinto
・Framer

次々に新しいプロトタイピングツールが出てくる中、ツール戦争は次のフェーズへと移り変わります。

統合型デザインツールへ

近年はレイアウトおよびコンポーネントのデザイン、プロトタイプ制作、デザインの共有とフィードバック…これらの工程がWeb・アプリの制作フローで当たり前のように行われるようになり、それぞれに特化したツールの連携では、シームレスな制作体制が構築できなくなってきました。

そして2016年、ついにAdobeがSketchや数あるプロトタイピングツールに対抗すべく「Adobe XD」を発表しました。他ツールに比べると機能に乏しい状況でしたが、デザインの制作から共有までを１つのツールで行える手軽さ、なによりAdobe CCに内包されるという料金体系のため、一気に注目を集めました。

さらに2017年にはInVisionがInVision Studioと大型の資金調達を発表。こちらもAdobe XDと同じように、すべてのワークフローをInVision上で行える統合型のツールであり、加えてテンプレートやプラグインの販売ができるストアを展開していくことが発表されています。

Sketchのプロトタイプ機能の追加、Adobe XDの正式リリース、InVision Studioの発表などの裏では、Figmaというツールも流行りだしました。Figmaはコラボレーションに重きをおいたデザインツールで、デザイナーや開発者たちが共同でデザインを編集できるのが特徴です。

また先日、コードベースでデザインを作るFramerが、新しくFramer Xを発表。これまでスクリプトを書いてプロトタイプを作るツールだったところから脱却、GUIで作れるツールへと進化しているようです。

Web・アプリのデザインにおいて必要なワークフローにおけるそれぞれの作業工程はすでに洗練されてきており、デザインツールは各工程を統合して、いかにシームレスにアウトプットできるか、そしてアウトプットされるものは徐々にグラフィックやモックアップではなくコードが出力されるという方向に向かいつつあります。

まとめと、さらに未来の話

デザインツールはこの20年で大きく変化しています。特に2016年のAdobe XD登場以降、統合型デザインツールのポジションにおいて誰が覇権を握るのか、Adobe以上のデザインツール会社が産まれるかもしれないということで、人や資金がダイナミックに動いています。

もう少し先を見据えると、AIによるデザインからも目が離せません。すでにAdobeはSenseiというAIを発表しており、写真の切り抜きの自動化など、AIが作業を簡単にしてくれるということを実現しています。また、Airbnbが落書きのようなラフデザインから本番のデザインを生成する技術を発表したり、電通もバナーの自動生成ツールを発表しています。

これからさらにVR/AR・IoTなどが普及して、デザインの在り方もますます変わっていく可能性があります。デザイナーには、決まったワークフローやツールに縛られず、一歩先を見据えた制作体制の提案・構築が求められていくでしょう。

書き手：小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter： @yoshikikoji