見出し画像

WEBデザイナーは、XDとFigmaどっちを勉強する?勉強方法は?

昔、WEBデザイナーをしていた、なみたと申します。
約5年ぶりにWEB業界に戻ろうと思い、勉強する日々ですが、今月は、UI/UXデザインツールである「Adobe XD」「Figma」の基礎勉強をしてきました。

「WEBデザインしてたのにソフト触れないの!?」と言われそうですが、私が現役の頃は、デザイン系ソフトは、PhotoshopとIllustratorさえあればOKでした。(田舎だったこともあり……)
しかし、転職活動を通し、「Adobe XD」や「Figma」の勉強は必須だと悟りました。

XD/Figmaの勉強の必要性を感じたきっかけ

  • 転職活動にあたり、求人検索で、XDまたはFigmaが応募必須スキルとなっている企業さんがほとんどだった。(もしくは両方)

  • 今通っている職業訓練で、WEBエンジニア現役の先生から「今は、デザインデータとして、XDデータやFigmaのデータを渡される」と聞いたから。

  • 有名コーディング練習サイトでも、デザインデータがpsdデータでなく、xdデータで配布されていたから。

XDとFigma、結局どっち?

答えになっていないのですが、私は、どちらも一緒に勉強しておくべきだと感じました。(※転職目線で見ると)

まず、繰り返しになりますが、WEBデザイン求人では、ほとんどの会社が「Adobe XD」または「Figma」を必須資格と書かれているからです。
どちらも必要と言われている会社もあるので、それならどっちもできた方が絶対アピールになって、いいですよね。
稀に、昔と同じく、「Photoshop」と「Illustrator」のみの求人も見かけますが割合が非常に少なく感じます……。

また、XDとFigmaは同じUI/UXデザインツールなので、共通する機能がとても多いです。
そのため、同時に勉強しても、混乱せず、むしろ「あの機能と一緒だ」と理解しやすいと思ったので、せっかくなら同時進行がプラスになると感じました。

ただ時間がない方は「どちらかしか無理!」というパターンもあると思います。
その場合、photoshopなどAdobeソフトを既に触っている人は、そのまま同じAdobeソフトであるXDを勉強していくのがやりやすいと思います。

またどこでもパソコンで勉強できる方は、Figmaだとブラウザで起動できますので、隙間時間を活用してFigmaをやってみるというのも有りですね。

私のFigma勉強法

Figmaは無料でソフトのインストールもできますし、先ほども記載した通り、ブラウザでも手軽に触れる・PCさえあればどこでも触れるので、始めやすかったです。
Figmaの勉強法は、私は書籍にて行いました。

こちらの書籍は実際「WEBページ(ポートフォリオサイト1ページ)」のデザインを書籍に沿って作れるので、FigmaでのWEBデザインの作り方を学びたい私にはぴったりでした。
書籍を通して、一通りのツールやボタンの位置・操作などは身に付けられたと思います。
こちらの書籍は読みやすく、デザインも良くて、楽しくてどんどん進められました。(かなりゆっくりやっていたけど、2週間くらい以内で終わりました)

ただ、書籍通りにWEBページを実際作ったは良いものの、UI/UXデザインソフト特有のテクニック(コンポーネントやインスタンスなどの専門的な部分)の操作がまだ慣れないので、書籍で気になった部分をもう1周やってみたいと思います。

私のXD勉強法

XDは基本有料になりますが、無料体験が7日あります。その他、後ほど記載しますが無料プランも存在しています。

XDは良くバージョンアップをしているようです。そのため、本だと古いバージョンの説明になっていたりするものもあるようで、ネットで勉強することに。
私は下記サイトで毎日勉強しました。

chot.designさんはデザイン系などいろんなことを勉強できるサイトで、本来は月額サービスだったのですが、最近、無料化をして頂いたようです。
無料なのに、XDの基礎を一通り勉強できたと思います!
ツールの理解や操作・機能などもしっかり学べるサイトになっていて、ありがたかった……。
毎日、どこまでやったかチェックしながら進めていけるので、続けやすかったです。
ただ、実際にWEBサイトを作る等はないので、こちらで基礎を身に付けて、プラスの勉強をしていきたいですね。

XD・スタータープラン(無料)について

XDは体験期間中に解約すると、無料プランに切り替わります。
共有機能などに制限はありますが、スタータープランでも勉強程度には支障がないと思います。

XDとFigmaを触ってみて・次のステップ

Photoshopでデザイン作成時代に、どこか感じていたストレスがこれらのソフトでは解消された印象でした。
ものすごくWEBサイトをデザインしやすくなっています。
昔、もう少し頑張ってれば、もっと効率的で便利な時代になってたのかなあなんて感じつつ🥲

12月で、XDとFigmaの基礎までは勉強ができて良かったです。
どちらのソフトも、わかりやすいシンプルな構造になっていて、デザインソフトに慣れている方だったら、どちらも取っ付きやすいのではないでしょうか。

次のステップでは、実務を想定して、「実際のWEBサイトデザインを作成」「プロのデザインデータはどうなっているのか」「コーディングがしやすいデータの作り方」等、プラスで勉強していくつもりです。

先日、ポートフォリオサイトを作ったのですが、いまいち納得がいかず、現在作り直しをしております。
なので、ポートフォリオに載せる作品デザインは、せっかくなので、全てXDかFigmaを使いながらやっていく予定です!

この記事が気に入ったらサポートをしてみませんか?