Webサイトやスマートフォンアプリのデザイン・カンプ（以下Webデザイン）を制作するときにあなたはどのようなアプリを使っているだろうか？またどのようなアプリを使うのが最適なのだろうか？
正解はFigma一択である。それはデザインするときの使いやすさ、クライアントにプレゼンする時の手軽さ、デザインの後工程を担当するコーダーやプログラマーに対する扱いやすさ（優しさ）がある。
多様なWebデザイン制作ツール
先日SNSで“WEBデザインカンプ制作はFigmaで”と投稿したら以下のような反応があった（↓Threadsは未だOGPに対応していないようなのでプレビュー画面が表示されないのが残念！）。
何を使えばよいのか分からず調べてもわからない人が多いようだ。この分野はまだ発展途上であり迷うのも無理はない。デザイン自体はどのアプリでもできる。しかしWebデザインやアプリデザインにはその後工程として、コーダーやプログラマーにデザインデータを渡す必要がある。そこで受け取ったコーダーやプログラマーが扱いやすいアプリというものがあり、それを使うことで適切なデザインの意図や仕様を引き継ぐことができる。以下に私がWebデザイン制作をする際に辿ってきたアプリの紹介とその結果Figmaに行き着いた道程を説明する。
WebデザインにIllustratorを使った場合
IllustratorとPhotoshopはデザイナーにとって必須アプリであり私も長い間使ってきたのでデザインイメージを具現化しやすいアプリであった。とくにベクター画像のアプリであるIlustratorでWebデザイン制作をしようと考えるのはデザイナーであれば当然の流れである。
あるキャンペーンWebサイトのデザイン＆コーディングを依頼された時にIllustratorでデザイン制作を行った。まず単位をピクセルに設定して、グリッドやスナップの設定もピクセル単位にする。その上でデザインを行ったのだが、それでもスライスするとうまく整数値のピクセルにならない。その他の部分でもどうしてもピクセルにズレが生じ苦労した。この場合は私がコーディングも行ったので問題は起こらなかったのだが「もうWebデザインにIllustratorは使うまい！」と心に決めたのだった。
WebデザインにPhotoshopを使った場合
次はWebアプリデザインの時だった。アプリ開発会社の指定でPhotoshopを使い画像アセット機能で画像の切り出しを行った。これは拡張子を加えるだけでその形式で書き出しをしてくれる便利な機能。ピクセルのズレもなく特に問題も起こらない。ただレイヤーの数が多くなると動作が重くなる。これがWebデザインにPhotoshopを使う上で問題であった。そしてオブジェクトの座標指定がIllustratorほど簡単ではないこと。これも不便だった。プロジェクト自体は問題なく完了したがデザイナーとしては使いにくいと感じた。
現実的にはFigmaまたはXDとなるのだが……
そして使ったのがいわゆるプロトタイプツールである。当初はSketchが最も使われているプロトタイプツールアプリであった。プロトタイプツールと言えばSketchである。しかし当時はMac版専用でWindows版はなし。無料のトライアル版もなく私の制作環境はWindowsがメインなので利用できなかった（現在はWindows版も無料トライ版もある）。未だに使ったことがない。そこで登場したのがAdobe XDとFigmaであった。
プロトタイプツールとIllustratorやPhotoshopの違いはその名前の通りプロトタイプ制作ができること。そして共同作業またはプロトタイプの共有ができることである。同じようなオブジェクトを大量に制作することができるコンポーネント機能は制作時間の短縮になる。コーダーやプログラマーがアプリをインストールしていなくてもブラウザ上でレビューやオブジェクトのプロパティを確認できるのもいい。コーダーはまだしもプログラマーでIllustratorやPhotoshopをインストールしている人は多くはないからだ。PDFやJPEGなどでデータを渡すのは過去の話である。現在Webデザインを行っている人の中には、アプリ制作しないからプロトタイプは必要ないという人もいるかもしれない。しかし画面遷移、ボタンの挙動、アニメーションやハンバーガーメニューの展開などクライアントにプレゼンする時に視覚的に伝えられるので使ったほうが印象は良い。
最終的にFigma一択となる
以上のことを考慮するとAdobe XDかFigmaが適当なアプリとなる。私は両方のアプリを発注者の希望に応じて利用していた。はじめの頃はAdobe XDの方がプロトタイプ機能の点で一歩抜き出ていたのだが、現在ではどちらも機能的に差異はない。しかし現在Adobe XDは開発中止となってしまった。そうなると必然的にFigma一択となる。またFigmaはアプリをインストールしなくてもブラウザで操作することができるのも大きな魅力である。
Adobe XDを現在利用している人であればFigmaの学習は短時間で済むだろう。ほぼ同じ機能だからだ。Illustratorを使っている人ならペンツールを使ったベクター画像の扱いはほとんど同じだし、Photoshopのラスター画像の扱いも同じだ。これらのツールの要であるコンポーネント機能は使わなくてもWebデザインは可能だ。しかし文字や色を替えた同じ形状のパーツを多量に作る場合、コンポーネント機能を習得しておくと作業時間が大幅に短縮されるので覚えていたほうが有利だ。
これからのWebデザインはFigmaで行う
今ではノーコードWebサイト作成ツールであるStudioやAndroidアプリの統合開発環境であるAndroid StudioにFigmaをインポートできるので、WebデザインやアプリUIデザイン制作には必須のツールとなるだろう。現在IllustratorやPhotoshopでWebデザイン制作をしている人はすぐにFigmaに変更したほうが良いかもしれない。
