kigoulab 図形を数式で保存し、拡大縮小しても絵が荒れないベクター、画像をピクセル（画素）で保存し、複雑な質感も表現できるビットマップ、それぞれ長所、短所がありますが、MacのRetinaをはじめ、Windowsでも高精細液晶が一般的になった今日、UIデザインはどちらでデザインするとよいのでしょう。
ベクターの利点と短所
ベクターの利点といえば、デザインを拡大縮小しても画像が荒れないことです。その利点を生かして、１つのデザインから、高精細液晶用の各拡大率向け画像を作り出すことができます。これをビットマップで作業していたら、サイズ毎にデザインを作らないといけないので大変です。
一方ベクターの欠点は、UIやウェブサイト向けの画像はまだビットマップが一般的ですから、最終的にビットマップにしなければならないわけですが、出力時にエッジがぼけて出力される場合があります。特に罫線はベクターからビットマップにするときにぼけるケースが多くみられます。線の設定で、「内側に設定する」、「ピクセルにスナップ」の設定をするなどによって回避することもできますが、完璧ではない感じです。そもそもIllustratorはスライスが使いづらいです。（最新版はアセット書き出しなど、便利な書きだし機能が追加されました）
また、ロゴやグラフィックのような平板なデザインには向いていますが、砂地やムラのある質感といった写実的なデザインには向いていません。そもそもベクターソフト自体が写真の加工機能がありませんので、そこはビットマップソフトの出番です。
ベクターをそのまま使う時代がきた
しかし、ビットマップに書き出して使っていたベクターのデザインを、そのまま使う時代がやってきました。SVGといわれるフォーマットをつかって、そのままアプリやウェブのデザインに使うわけです。ロゴや、アイコンなど繰り返し使われる個所に使うと、容量も軽く、またサイズも自由に変更できるので便利です。
ベクターシフトがおこっている
iOSのアイコンだけでも、同じデザインのサイズ違いを10個以上（13個？）作らないといけないわけで、ビットマップでデザインするのは考えられません。ビジュアル的にもフラットデザインやマテリアルデザインとベクターは相性がよく、無理に質感などを付けない分、ビットマップでデザインする必要はなくなってきました。
ソフトも、代表的なIllustratorから、UIデザイナー間で話題のSketchまで、色々とでそろってきています。これからはベクターでデザインする時代になるのかもしれません。
ビットマップの利点と欠点
ビットマップの利点といえば、ピクセルパーフェクトな画像が作れるということです。サイズは固定になってしまいますが、ボタンの立体感も、ウインドウの1pxの区切り線も、その通りにデザインすることが出来ます。さらに質感をいかした背景や、写真の加工も自由自在です。まだまだアプリやウェブで使われる画像はビットマップですから、それを完全な形で制作できるのは、大きな強みです。
一方ビットマップの欠点は、何度も触れたように、拡大縮小に弱いという点です。写真のような画像であれば、多少の拡大縮小は可能ですが、ピクセルパーフェークトで制作しているUIパーツを拡大すると、すぐエッジがぼけてしまいます。
画像の切り出しには、 先んじて優れている
ビットマップソフトの代表格といえば、Photoshopですが、CCになってから、画像の切り出しがとても使いやすくなりました。レイヤーにファイル名をつけて、「生成」をえらべば、そのファイル名で出力されるようになりました。もうあの面倒なスライス作業は不要になったのです。大きさ指定もできるので、２倍程度の画像であれば、高精細向けの画像も同時に作成できそうです。そのほか「PNGとしてクイック書き出し」などさまざまな書き出し方法が選べるようになりました。
しかし同様な機能は、Sketchにもあります。これからの競争が期待できるでしょう。
簡単に、ベクターとビットマップの特徴を復習しながら、それぞれでデザインする利点、欠点をまとめてみました。私個人としては、パーツ単位でベクターシフトの準備をしつつ、大枠のデザインはビットマップで行うという感じですかね。ウェブではSVGの導入を、UIデザインではSketchでのデザインを試してみたいですね。
(担当：小山智久)
アイキャッチ画像：Freepikによるデザイン