こんにちは。
最近、webの勉強で色々とブログの更新頻度も落ち気味ではありますが、
ようやく基本的な勉強が終わり、これから自社ポートフォリオサイトやこのブログなどもデザインしていこう、と考えているこの頃です。
webデザインをするにあたって、今はほぼFigmaでのデザインが主流のようで(XDは古いらしい、、、)、
Figmaを触ったことがない、という方への簡単な紹介となります。
Figmaとは?
私は今年に入るまで知らなかったのですが、今ではほぼwebデザインをするならFigmaというほどの、
webデザイナー必須のソフトになります。
わかりやすくいうと、Adobe XDのようなソフトです。
基本的には無料で使用できますが、
1projectあたり3fileまで、
1fileあたり3pageまで、
という制限がつきます。
illustratorに置き換えてわかりやすく噛み砕くと、
3つのファイルを作成でき、
それぞれのファイル内にアートボードを3つづつ作成できます。(このアートボードはかなりでかいです)
Figmaには共有したり、一緒に作業することができる機能があったり、
projectに参加してもらったりといろいろな機能があるので、
ざっくりというと、無料でwebサイトのデザインは可能です。
(依頼の来るたびにどれかのファイルを削除するかエクスポートして、やりくりする必要はあります)
一応、凝ったアニメーションを作成する場合は無料プランだとまだサポートされていないものもありますが、
そこまで大きな制限ではありません。

↑これはデイトラの課題で作成したコーポレートサイトのファイルです。
これで1fileに収まっています。
Figmaのシェア
ちなみに、どのくらいのシェアなのかというと、
このぐらいFigmaの圧勝です。

2022年時点で9割超え、、、私のまわりのベテランデザイナーはほぼAdobe XDなので、完全にジェネレーションギャップですね。
webデザインをしたければFigmaを学ぶというのが今のデフォルト、と考えて間違いなさそうです。
Figmaでできること
Figmaはwebデザインのみ、と思われたかもしれませんが、
実はそれ以外にも使い方があるようです。
私はwebデザイン以外で使っていないのであまり実感はありませんが、
Figmaではチャートを作ったり、AIに頼んで組織図を作ったり、、、
といった色々ビジネスで便利そうな機能があります。
(ま、あんまり使う気にはなりませんが)

話を戻してFigma独自の機能で(おそらくですが)、オートレイアウト、という機能があります。
この機能を複数のオブジェクトを選択した状態でオンにすると、
勝手に整列してくれる、という機能です。
例えば、こんな感じで適当に作ったオブジェクトを選択して、、、

オートレイアウトをON!

こんな感じで等間隔で並べられます。今は縦ですが、横のボタンを押すと

横になり、折り返しのボタンを押すと、

折り返します!
この機能、illustratorにも欲しい!
他にもこういうテキストボックスで、

上がオートレイアウト前、真ん中がオン、下はオートレイアウト時に可能な、マージンを設定した状態。
何が言いたいかというと、
この機能になれてしまうとillustratorやindesignでこの機能が欲しくなってしまうのです、、、
Figmaでできないこと
いろいろあるとは思いますが、adobeのデザインソフトに比べて致命的にできないことは、
塗り足し部分が作成できない
ということです。
トンボを作る機能がないのと、
塗り足し、という概念がありません。
無理やりガイドを追加して作成することもできなくもないのですが、、、
そもそもエクスポートの形式がjpg、png、svg、pdfしかなく、
RGBでの出力しかできないので、単体での印刷物デザインはやめた方がいいでしょう。
(そのうち印刷物にも対応できるようなりそうな気もします)
今の所の感想
まとめになりますが、
正直webデザインを作成するならとても便利なソフトだと思います!
なによりノーコードweb実装のソフトとの互換性もしっかりある、というメリットも大きいですね。
ただし、ちゃんとしたグラフィックを作ったり、印刷物のデザインをするなら100%adobeのソフトの方が有用かと思います。
しかしまぁ、アップデートでillustratorやindesignを凌げるくらいのレベルになったら、
adobeを解約する日もいつかはくるかも、、、しれません。
それではありがとうございました!