完璧なUIデザインソフトに求める13のポイント

Source


偉大なるUIデザイントリオ、Adobe Photoshop、Affinity Designer、Sketch 3

今やPhotoshopは時代遅れになってしまった。近年、勢いを増している競合ソフト、Sketch 3とAffinity Designerを試してそれを実感した。UIデザインにAdobe以外のソフトをほとんど初めて使ってみたのだが、それは非常に面白い体験だったのだ。

自分のプロセスに対する見方を変えたのはSketchだ。なぜならSketchはインターフェースデザインツールとして設計されたものであり、そのベースとなる考え方はPhotoshopとは全く異なっているからだ。

それはプロダクトとしてのデザインに焦点を合わせているように感じられる。私にとって、そのワークフローはソフトウェアやwebサイトを構築する方法にずっと近いのだ。SketchやAffinity designerは、カンバスに絵を描くようにデザインをしない。

ツールは制作プロセスに影響する

この経験から、使用するソフトウェアがいかにワークフローの考え方に影響を与えるかということに気づいた。今、私たちは非常にエキサイティングな転換点にいると言っていいだろう。Photoshopはそもそも画像編集ソフトとして作られたものであり、動作は重く、コアとなるコードはもはや時代遅れだ。過去の勝者は怠惰に陥り、すっかり肥満してしまった。そこへ反逆者が現れたのだ。しかし、まだどれも完璧ではない。

私たちはまさに、UIデザインツール市場におけるFireworks以来最大の変化を目前にしている。それがどのような道を開くかは分からない。Adobeが新たに書き起こしたキラーデザインソフトをリリースするかもしれないし、競合たちが市場を占拠するかもしれない。

完璧なUIデザインソフトに求める13のポイント

ここで少し考えてみよう。「完璧なUIデザインソフト」とは一体どのようなものだろうか。デザイナーの要求に完全に応え、ワークフローを最も効率的にするツールセットはどんな形態なのだろう。インターフェースデザインの方法に大変革さえ起こすものだろうか。私が考える必須項目は13個ある。

1. パフォーマンス

Photoshopの大問題のひとつは、その強欲さだ。PSはモンスターのようにメモリを貪り食い、動作はのろまだ。最近、あるwebサイトのデザインをしていて、MacBook Pro 2014、retinaディスプレイ、8GBでの作業は厳しいと思った。
Adobe PhotoshopはAffinity Designerの約2倍のメモリを消費してしまう。

速くて軽いソフトウェアを作るのは可能なのだ。Affinity DesignerとSketchはAdobeの天下をひっくり返してしまったのだから。

2. 安定性

ソフトウェアのクラッシュで数時間の大事な仕事を無駄にするのは誰にとっても避けたいことだ。今日のデザインソフトにおける切実な課題だ。この点に関しては、どのソフトにおいても満足いく解決策はない。

Affinityはまさにその初歩的な問題を抱えており、とりわけ透過ツールを使うときなど、頻繁にクラッシュする。Photoshopはロープのつり橋程度には安定している。しばらくSketchは使っていないので今はどうか分からないが、何度か苛立たしいクラッシュに遭遇したのを覚えている。

3. UIにフォーカスしたインターフェース

この点においては、Sketchが勝者だ。PhotoshopはそもそもUIデザインツールではない。あれこれ機能が追加されているとはいえ、結局は画像編集ソフトなのだ。AdobeはUIデザインワークスペースのベータ版をPS下に導入したが、推して知るべしだ。第一にあまりに多くの機能面が省かれている。第二に、これではまるでWinampのスキンだ。私たちが求めているのは全てがUIデザインに捧げられたソフトウェアなのだ。

一方、Affinityのワークスペースの見た目はPhotoshopのそれよりもいくらかマシだが、計測ツールが足らない。オブジェクト間の距離が分からないし、目的のパーセント値でオブジェクトを拡大縮小することもできないのだ。

Sketchはほぼ完璧だ。必要と思われる特徴はだいたい備えられている。しかし、それでもさらに使いやすいインターフェースが望まれる。

4. ベクターベースのワークフロー

今、私にとってこれは絶対条件だ。私たちは多数のデバイス、多種の解像度で使われるものをデザインしているのだ。簡単に制作物のサイズ変更ができることは必須だ。幸い、ソフトウェア開発者たちも同じ考えのようだ。

私が比較に上げている全てのアプリケーションにおいては、ベクターベースのデザインが可能だ。この点で私が気に入っているのは、オブジェクトを保持したままブール演算できるAffinityだ。逆に最も使い勝手が良くないのはSketchだ。機能が限られている。

5. ラスタレイヤー作業のためのツールセット

ときどき使いたいツールだ。写真の色を調整したり、別のアプリケーションに移動せずに、ラスタグラフィックスに変更を加えたいときなどに使う。
この領域におけるPhotoshopの性能は無限と言ってもいいだろう。

Affinityはほとんどのタスクに足りる効率的なツール群を持っている。このほか、Serifから出ている姉妹アプリケーションAffinity PhotoをAffinity Designerと合わせて使うと最高だ。

残念ながらSketchはこの点、非常に弱い。ラスタベースのタスクはほぼ実行不可能だ。長所を見つけるとすれば、このソフトを使えばデザインの中に何かを置くとき、熟考せざるを得ないことだろうか。しかし、時には変更を進めるべきときがある。Sketchは明らかに機能不足だ。


Affinity Designerにはいくつかの作業モード(persona)がある。デザイン、ラスタツール、スライス(エクスポート)だ。

6. 劣化しないピクセルレイヤーの拡大縮小

Photoshopにおける一番の問題だろう。ピクセルレイヤーを縮小すると、圧縮されて劣化してしまう。縮小したければまずスマートオブジェクト化しなければならない。しかしスマートオブジェクトは重く、作業が遅くなるので、私は拡大縮小したいときには使わない。

たとえばボタンをデザインするときには、スマートオブジェクトは最適だ。ボタンデザインのオブジェクトを1つ作れば、インスタンスが欲しいときにどこにでもコピーできる。ボタンの色を変えると、全てのインスタンスの色が変わる。素晴らしい!しかし、拡大縮小の際に、画像の劣化を避けるためだけにスマートを追加することは考えにくい。

ここではAffinityが優れている。画像を10倍に拡大しても最初の画質が保たれる。素晴らしい。この特性を発見したときは感動した。

7. リアルタイムピクセルプレビュー


Affinity Designerのプレビューモデルの面々、実に素晴らしい!
(ベクタープレビュー / retina / デフォルトスクリーン)

Affinityの素晴らしいところは、デザインをベクター化してくれるところだ(シェイプ、タイプフェイス)。
また、そのデザインをリアルタイムでピクセルプレビューしてくれる。何よりretinaピクセルモードがある。なんと素晴らしいことだ。他のソフトは足下にも及ばない。

8. グリッドツール

場合によるかもしれないが、私は全てのデザインはグリッドデザインであるべきと考えている。
グリッドはレイアウト設計に不可欠な要素だ。全デザインエレメント間のバランスを見つけやすくなる。
加えてグリッドは、ユーザが予測しやすいパターンを作り出し、UXに力を与える。そう、グリッドは極めて重要なのだ。

グリッドを生成するシンプルなツールが欲しい。私のインプットを元に計算し、配置をしてくれるツール。現状どこもサポートしていないが、グリッドの区切り点の補助も切に求める。

9. 手軽な計測ツール

Sketchの計測の様子を見てほしい。これをどこでも使いたいのだ。

10. 充実したタイポグラフィ機能

最近、初心者向けにタイポグラフィのルールについて記事を書いた。あくまで基礎のアウトラインだが、最新のUIデザインツールはそのために必要な機能を全くサポートしていないのだ。カスタムワードスペーシング、ぶら下げ組みといったオプションが備えられていない。
現在、それらの基本的なタイポグラフィコンセプトをサポートするUI専用デザインソフトはない。CSSでそれらを表現できるなら、デザインアプリにもできてしかるべきだ。

11. アートボード


Bohemian Coding Sketch 3のアートボード

カンバス内に固定フレームを作るにはアートボードが必要だ。レスポンシブwebデザインや様々なデバイスに対応するモバイルアプリを作るなら、アートボードで各スクリーンサイズを表示させたいだろう。素晴らしい機能だ。またアートボード上では、デザイン全体でスマートオブジェクトかシンボルを使うことができる。全てのスクリーンが1つのファイルに収まる。とても便利だ。今日、それに対応していないのはAffinity Designだけだ。近いうちに改善されるとよいのだが。

12. 様々なエクスポートオプション


Affinity Designerの様々なエクスポートオプション(なんとPSDファイル含む)

数々の新しいアプリケーションの市場への登場が意味するのは、さらなる細分化だ。全員が同じ製品を使うわけではないし、チームの数だけワークフローがある。あるチームのデザイナーは開発者にPSDファイルを送り、他では開発者のためにファイル一式を梱包する。つまり、偉大なソフトウェアは、デザイナーの作品を様々なフォーマットに書き出せなくてはいけないのだ。

私はAffinityのエクスポート機能が好きだ。PSDファイルのインポートが可能で(非常に良い)、Affinityで作ったファイルをPSDにエクスポートすることもできるのだ。最高だ。結局のところ、PSDフォーマットが標準なのであり、それはこれからも当分変わらないだろう。

13. CSSの値のエクスポート

最後はとてもシンプルなことだ。PhotoshopとSketchではオブジェクトの上で右クリックするだけで、そのCSSプロパティをコピーすることができる。とても簡単だ。Affinity Designerにはこの機能がない。すぐに実装されるべきだ。

あなたの理想のソフトウェアは?

今、デザイナーにとって完璧な解決策は存在しない。ここまで、私の理想を書いてきた。私自身がスムーズかつ効率的に作業するために重要と思うポイントだ。皆さんが「完璧なUIデザインソフト」に何を望んでいるのか、とても興味がある。どんな機能があれば、あなたはより良いデザイナーになれるだろうか?