【初心者用】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にログインするだけでOK。パソコンが軽くなります。

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

Figmaは共有機能が便利

Figmaの人気の理由の一つに、いろいろな人がデザインを共有・編集できるシステムがあります。Webコーダー、デザイナー、ディレクター、プログラマのチーム内で共有したり、クライアントと共有したりという具合に使います。

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

なのでこれから初心者が勉強してWebデザイナーになりどこかの会社に入ったとしても、その会社がFigmaを使っている可能性は非常に高いです。もしFigmaでの勉強をはじめるのに不安な人がいるとしたら、それは大丈夫です。Webデザインの中ではかなりメジャーなソフトですので。

また、今後Webデザイン業界では、Figmaのようなソフトが主流になってくると思います。万が一Figmaでなく別の似た様なソフトを使っていたとしても、だいたい機能は似ているので、Figmaで覚えた使い方は、無駄には全然なりません。

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

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

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

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

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

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

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

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

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

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

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

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

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

サイズが小さくて、そこまで細かく気を使わないバナー制作であれば、Figma単体で完成させることも可能です。

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

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

・複雑な髪の切り抜き

・背景をきれいに消す

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

このような作業はPhotoshopが必要になります。

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

また、イラストも自分で描かなくても、優秀なイラスト素材がたくさんあります。

なので、まずデザインソフトを揃えるなら、Figma＋Photoshopの合わせ技がおすすめですね。PhotoshopはAdobeフォトプランにすると、月額1,078 円で利用できます。年契約にするとさらにお得で、年額12,936円になります。

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

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

Figmaのその他のメリット

ブラウザ上で動かす

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

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

通常のデザインソフトだとインストールされた端末でしか動かせません。

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

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

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

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

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

複数人で使える

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

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

基本的にFigmaは、デザインツールだけでなく、チーム用に作られたという意識が高く、デザイナーだけでなくWebディレクターやWebコーダー、クライアント全員で共有できるという優れた特質があります。

この特質のおかげで爆発的に広まったといっても過言ではありません。

会社にいると、必ず何人かでデザインデータを共有することになります。だいたいは共有ファイルを使って同期を取るのですが、最新ファイルがよくわからなくなったり、先祖返りを起こしたりすることもあります。

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

アドビ以外の製品の紹介

基本的なWebデザインは可能ですが、やはり写真の加工は別のソフトが必要になります。

定番かつ安めのプランだと、Adobeフォトショッププラン（12,936円/年）になりますが、さらに安く購入したい場合は、以下のPhotoshopのライバルソフトと言われるデザインソフトもおすすめです。

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

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

おすすめの本や動画

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

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

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

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

AdobeのPhotoshopさえ覚えれば、デザインに必要なことは全部できる。だからPhotoshopから覚えるべきだ。

私も別の記事でそういっています…それも決して間違いではないのですが、まずはFigmaでデザインデビューをするのもアリかと思います。

Figmaでも十分きれいなデザインを作ることはできますし、何より無料でデザインの楽しさに触れることができます。

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

Adobeに買収された今、AdobeXdは衰退してFigmaが前面に出てくることは間違いありません。

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

デザイン初心者でお金がないからAdobeが買えないと嘆いている方、ぜひFigmaを使ってデザインの楽しさを実感してみてくださいね。