約10年間、WEBデザイナーとして働くなかで、常に悩みの種だったのは「何のツールを使ってWEBデザインをするか」でした。 Photoshopをメインツールとして使っていましたが、不満に思う部分も多く、もっと使いやすいツールを探していました。
2015年ごろからSketchやXDといったデザイン特化型のツールが話題になり、それらを試した時期もありましたが、ツール移行するほどの決め手にかけ、結局はPhotoshopに戻るということを繰り返す日々。
そんな私が、1年半前にFigmaに出会い、今ではFigmaなしには業務遂行が難しいと思うほどに愛用しています。 本記事では、なぜPhotoshopからFigmaに乗り換えたのか、現場での実体験をもとに、各ツールの特徴を挙げながらその経緯を紹介します。
約10年間、Photoshopを使って不便に感じていたこと
とにかく重い
動作が全体的に重いです。 シェイプを配置して、単純なレイアウトをするにもぎこちない印象です。 動作が重いということは、デザインのブラッシュアップに割く時間がそれだけ減ってしまいます。
機能が多すぎる
本来、Photoshopは画像編集ツールであるため、レタッチやグラフィック制作に特化した機能が大量に搭載されています。 それをWEBデザインに使うとなると、必要でない機能がたくさん存在することになります。 具体的には、ほとんどの調整レイヤー、フィルター機能、3D機能、アニメーション機能などです。 豊富なレイヤーオプションも、シンプルなデザインが流行っている昨今においては過剰気味でした。 「膨大な機能の中から、何をWEBデザインに使うか」という悩みが生じ、それが学習コストの増加にもつながっていました。
フィードバックがもらいづらい
Photoshopで作ったデザインを、関係者へ確認依頼をするのが大変でした。 デザインデータを画像出力して送付するわけですが、メールやチャットへの添付、クラウドにアップしてURLの共有、また外部のデザイン指摘ツールの使用など、いずれにしても一手間かかりました。フィードバックの度に、この工程を行うのは気が滅入ります。
2022年のPhotoshopアップデートで、PSDのレビュー用共有機能が盛り込まれましたが、単発のLPならまだしも、数十ページ以上のスペシャルサイトやコーポレートサイトで使うには厳しいです。
デザインデータの管理がしづらい
Photoshopのデータは大容量化しがちで保存場所に困ります。 Adobeのコンプリートプランであれば、100GBのクラウド領域があるものの、大量のデータを格納するには物足りない印象です。 また、複数人で作業する場合、ヘッダーなどの共通パーツの管理方法にも困りました。 リンクファイルやスマートオブジェクトでは、関係者が増えるにつれて管理が煩雑となり、デザインが先祖返りすることもしばしばありました。
2022年のアップデートで共同編集機能が盛り込まれましたが、同時に編集できるのは1人のみで競合ダイアログが表示されるのもツライです。
Figmaと出会い、すばらしさを実感
Photoshopへの課題感を抱きながらもWEBデザイナーとして働いていた2021年12月、私はシナジーマーケティング株式会社に入社しました。 前任者のデザイナーがFigmaユーザーであり、過去のデザインアセットが全てFigmaだったため、自然とFigmaを使うようになりました。 なお、入社時点では、Figmaの存在自体は知っていたものの、使用したことはありませんでした。
当初は、管理画面のような整然としたデザインが得意なツールぐらいの認識しかありませんでしたが、使っていくうちに、そのすばらしさに気づきました。
そもそもFigmaとは？
Figmaとは何なのか。公式サイトでは、以下のように説明されています。
デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです。
コミュニケーションをとりながらデザインすることに重きを置いたツールで、WEBデザインだけでなくアプリデザインにも使用できます。
ブラウザで動作、とにかく軽い
Figmaはブラウザベースのデザインツールです。URLにアクセスするだけで、すぐに作業をスタートできます。 専用のアプリケーションをインストールする必要はありません。動作も非常に軽量でサクサク動きます。
オートレイアウトが便利
オートレイアウトとは、任意のオブジェクトに対して、マージンやレイアウト方向（縦・横）を設定できる機能です。 オブジェクトサイズやテキスト量が変化しても、自動で再レイアウトされます。 Photoshopでのデザインでは手動で調整する必要があったため、「セクションの追加・削除が大変」「マージンが数pxずれる」といった苦労がありました。 Figmaを使えば、そういった煩わしさから解放されます。
プロトタイプ機能で実機を見ながらデザインできる
スマホやタブレットなどの実機端末でリアルタイムにプレビューしながらデザインができます。 ページ遷移やモーダルのようなプロトタイプ設定も可能なので、実際の操作感に近い状態でデザインの検証が可能です。 もちろん、プロトタイプはユーザビリティテストにも利用できます。
なお実機プレビューはかつてPhotoshopにもありましたが、現在は提供されていません。
共通パーツをコンポーネント化できる
ヘッダーやボタンなどの任意の要素をまとめて、部品化（コンポーネント）することができます。 メインコンポーネントと複製されたコンポーネント（インスタンス）はリンクしているので、メインコンポーネントの変更がインスタンスにも自動反映されます。 またインスタンスをオーバーライドすることも可能なので、たとえば「デザインは一緒で、文言だけ違うボタン」といったパーツを作るのに向いています。 Photoshopにおけるスマートオブジェクトとリンクファイルを合わせた機能に近いです。 PhotoshopでもCCライブラリを使うことで似たことはできますが、やはりFigmaの方が使用感で優れている印象です。
アセットの流用がしやすい
アセットの流用が簡単なこともFigmaの良い点です。 過去に使ったコンポーネントの複製が簡単という話に限らず、Figmaのコミュニティ内にはたくさんの企業や有志が作ったテンプレートやUIキットが公開されており、それらを利用することで効率的にデザインができます。
コメント機能でフィードバックがもらいやすい
Figmaには標準でコメント機能が備わっています。 キャンバス内の任意の場所を指定してコメントを残すことができるため、デザインへの直接的なフィードバックが可能です。 またレビュアーが編集権限を持っている場合は、文字によるフィードバックだけではなく、ラフデザインをその場で作ることもできるため、修正内容の認識齟齬が起こりにくいです。
デザインデータの管理が楽
Figmaのデータは全てクラウド上に保存されます。 ファイルのリンク切れの心配はなく、アプリケーションのバージョン差異による互換性問題とも無縁です。容量制限もないので、ファイルは好きなだけ作れます。 Photoshopではやっかいだったデザインデータの受け渡しもURLを共有するだけというシンプルさ。 共同編集機能もあるので、同一ファイル内で複数デザイナーが協業するのも簡単です。
Photoshopは不要なのか……？
そんなことはありません。
上記の理由から、私はWEBデザインのメインツールをPhotoshopからFigmaに変更しました。 では、FigmaさえあればPhotoshopは不要なのか……？と問われれば、決してそんなことはありません。 Figmaはレイアウトやプロトタイプ機能は優れていますが、苦手なこともあります。
写真のレタッチ
Figmaに備わっている画像加工機能はおまけ程度で、簡単な露出、ハイライト、色味変更ぐらいしかできません。 レタッチした高解像度の写真を使用したい場合、PhotoshopでレタッチしたものをFigma上にインポートする必要があります。
グラフィックの作り込み
Figmaにはシェイプやパスを描画する機能はありますが、細かい作画や調整は苦手です。 作り込みにおいては、Illustratorのようなグラフィックデザインツールに軍配が上がります。 緻密なイラストやキャンペーンロゴはIllustratorで作ってFigma上にインポートする方が良いです。 ちなみにIllustrator上のパスをコピーして、Figma上にペーストするだけで、SVG形式でインポートされます。
さいごに
以上、WEBデザインにおけるPhotoshopの課題感と、それらがFigmaによってどう解消されるかを紹介しました。 各ツールの大雑把な特徴として、私自身は以下のように認識しています。
- Photoshopは、職人が黙々と絵作りするのに向いている。技術が属人化しやすい。
- Figmaは、複数人でコミュニケーションをとりながらデザインするのに向いている。技術の平準化や共有がしやすい。
どちらが優れているという話ではなく、それぞれに良し悪しがあり、必要に応じてツールを使い分けるべきだと思います。 現時点での私の考え方としては、WEBデザインのメインツールとしてはFigmaを使い、Figmaが苦手な部分はPhotoshopなどで補うのが良いと考えています。
本記事がWEBデザインのツールを検討する際の参考になれば幸いです。 ありがとうございました。
