Adobe は必要なし？Figmaで始めるWebデザイン

高額なAdobeは本当に必要？

この記事は、Webデザインをはじめたくても、お金が足りなくて学びができないWebデザイン初心者に向けて書いた記事です。

Webデザインを始めようとすると、まず必ず最初に揃えるものにデザインソフトがあります。

実に99％の現役プロデザイナーがAdobe製品のAdobeCCというプランを契約しています。AdobeCCには、PhotoshopやIllustratorといったプロのデザイン制作には欠かせないデザインソフトがコンプリートされています。

しかし、AdobeCCは年間4万円〜7万円の料金が毎年かかります。高い…

Webデザイン初心者にとってこの金額は非常に高額で、気軽に始められるものではありません。これにスクール代や独学の勉強代、パソコン代だってかかります。

Adobeは本当に必要なのでしょうか？

実は今現在Webデザイナーには、Adobeより人気のシェアを誇るソフトがあります。

Figmaというデザインツールです。Figmaはなんと無料で使える高度なデザインソフトです（2024年現在）

この記事では、Figmaというデザインソフトの特徴やメリットを中心に、Adobeが必要になるケースやAdobe以外のデザインソフトの紹介もしていきたいと思います。

Figmaは無料で使えるWebデザインツール

公式サイト：https://www.figma.com/ja/

Figmaは基本的に無料で使うことができます。しかもブラウザ上で動かすデザインソフトなので、いつでもどこでも使えるし、WindowsやMacといったOSの影響も受けません。

データもクラウド上で保存できるので、Figmaにログインするだけでいつでもどこでも、どのパソコンからでも作業が続けれます。

Figmaが人気があるのは無料だからというだけではありません。Figmaを愛用しているプロの多くはAdobeCCを契約していて、その中にはFigmaとほぼ同じ機能を持つデザインツールAdobe Xdというソフトがあります。

しかしその有料ソフトがあるのにもかかわらずFigmaを使う人がいるほど、Figmaは無料とは思えない優れたデザインソフトなのです。

Figmaは共有機能が便利

Figmaの人気の理由の一つに、いろいろな人がデザインを共有・編集できるシステムがあります。

Webコーダー、デザイナー、ディレクター、プログラマのチーム内で共有したり、取引相手と共有したりという具合に使います。

共有する場合は有料プランになってしまうのですが、大体の制作会社が契約しています。

そのため、これからWebデザイナーへの就職を目指す人は、就職先の会社がFigmaを使っている可能性は高いので、Figmaでデザインできるとすごく強みになります。

Figmaでできるデザイン・できないデザイン

FigmaはWebデザインを作るために生まれたソフトです。

Webデザインには向いていますが、それ以外の作業には厳しいものがあります。

そのため、Figma単体で使うというよりは、別のデザインソフトと合わせ技で使う人が多いです。

Figmaでできるデザインは具体的に以下になります。

ものすごく雑な言い方をすると、超高性能なパワーポイントのようなものと思ってください。

テキストや画像を一瞬で整列させたりきれいにレイアウトするのに長けているのがFigmaです。

また、Figma上でサイトの動きを再現できる仕組みがあり、これをプロトタイプ機能といいます。

例えば、配置したボタンを押した時に次のページへリンクするといった、実際のWebページのような流れをFigma上でプロトタイプとして作成することができます。これでクライアントにもよりわかりやすくイメージを伝えることができます。

逆にFigmaができないデザインはこちら。

上記のうち一番困るのは写真の加工でしょうか。

Webデザインではどうしても写真の加工は必要になるケースが多いです。

例えば、背景の簡単な切り抜きや、色のトーンの明るさを調節したり、軽くグラデーションをかけたり、彩度や明度の調節。これらの簡単なレタッチはFigmaでも行うことができます。

また、サイズが小さいバナー制作であれば、Figma単体でデザインするのもそんなに違和感は出ません。

ただし、Webサイトのメインビジュアル等、画質が重要で複雑な処理になればなるほどFigmaだけだとパワー不足になります。

・肌をきれいに修正する、ソフトでメイクする

・複雑な髪の切り抜き

・背景をきれいに消す

・色のトーンの微調節や、カラーの混色・配色

このような作業の場合、多くのプロデザイナーはPhotoshopというソフトを使っています。

また、ロゴやイラストの作成もFigmaでは厳しいです。ロゴやイラストの作成はIllustratorというソフトを使って作るのが一般的です。

なので、まずwebデザインを始めたくてデザインソフトを揃えるなら、Figma＋Photoshopの合わせ技がおすすめですね。

Photoshopは、月額2,380円から利用できます。年契約にするとさらにお得で、年額28,480円になります。

年間の費用:　Figma(無料) ＋ Adobeフォトプラン（28,480円/年）※2024年価格

でも、すでに加工済みの写真素材やイラストがあれば、そのままFigma上でレイアウトするだけなので、十分Webデザインを楽しむことができます。それなら、デザインソフトにかかる初期費用は0円です。

Photoshopでどんな画像が作れるかはこちらの記事を参考にしてください。

Figmaのその他のメリット

ブラウザ上で動かす

Figmaはソフトをインストールするのではなく、ブラウザ上で動かして使うことができます。

ブラウザで使えるということは、どの端末でも使えるということです。家や会社、外で別々のパソコンを使っていても、FigmaのURLにアクセスすれば瞬時に前回のデザイン作業の続きに入ることができます。

自動保存でバックアップいらず

Figmaは基本的にネットワーク上でデータを保存できます。しかも自動保存。

つまり、自分のパソコンにデータを保存しておく必要がなく、パソコンが壊れてデータが飛んだ！というトラブル知らず。また予備として何個もバックアップを取っておく必要もありません。

デザイナーであれば、作成したデータが飛ぶショックの大きさはわかるはず。

さらに自動保存してくれるので、データバックアップに対するストレスはゼロです。

複数人で使える

Figmaの大きな特徴のひとつとして、複数の人で共有することができるという点があります。

ひとつのデザインファイルをみんなで編集することができるのです。

基本的にFigmaは、チーム用に作られたという意識が高いソフトです。この特質のおかげで業界に爆発的に広まったといっても過言ではありません。

Figmaだと、全員が編集できて、すぐに最新データに反映できるのがメリット。デザインデータの管理はクラウド以外で行われることがないので、シンプルな管理になります。

アドビ以外の製品の紹介

Figmaとセットで購入するのにおすすめのソフトで、フォトショップ以外の写真加工ソフトも紹介します。

Photoshopと同様の高レベルなレタッチ機能を持っていて、PSDファイル（フォトショップファイル）での出力も可能。

AFFINITY Photoは以下の記事にさらに詳しい解説があります。

Figmaの学習におすすめの本や動画

Figmaを独学で勉強するにあたっておすすめの本はこちら。

どちらも初心者向けで、Figmaでデザインを行う流れを丁寧に解説してくれます。

また、学習動画サイトのUdemyでは、Figmaを使ったデザイン動画を購入することができます。今風のデザインの作り方を教えてくれるのでおすすめの教材動画です。

今風のイケてるWEBデザインを作る手順 Figma × Photoshop

Adobeより先に覚えるべき？Figmaの重要性

Figmaの1番のメリットは、無料でデザインの楽しさに触れることができることです。

Adobeが高くて二の足を踏んでいる初心者の人にこそ、Figmaに触れてほしいです。

FigmaはこれからのWebデザイン界でさらに存在感をましてくることが予見されます。

今のうちにFigmaのスキルレベルを挙げておくに越したことはありませんし、少なくとも2024年現在のWeb業界で、「Figma勉強して無駄だったわ」ということには絶対になりません。