神戸から全国対応・WEB集客サポートまねきねこ企画のブログ：Figma初心者が迷いやすいポイントと、従来ツールとの決定的な違い

PhotoshopやIllustrator、PowerPointなどの配置系ツールとの違い

PhotoshopやIllustrator、
さらにサイト制作ツールではありませんが、
デザインされた成果物の作成によく使われるPowerPointのようなプレゼンソフトも基本は同じです。

オブジェクトを好きな場所に置いて、
見た目を整えればその場で完成します。

Photoshopはレイヤーを重ねてピクセル単位で画像を作り込むツール。
Illustratorはベクター形式で自由に拡大縮小でき、紙や印刷物のレイアウトに強い。
PowerPointは図形やテキストを直感的に配置してスライドを仕上げるツール。

多くの人が使い慣れているデザインツールはいずれも
「最終アウトプットが固定される」
前提で成り立っています。

一方Figmaは、Webやアプリなど
「動的に変わる画面」
を設計することを前提にしています。

画面幅が変わったり、
テキストが増えたりしても崩れないホームページやアプリのデザインを作るためには、
要素を感覚で並べるのではなく、構造として組み立てる必要があります。
ここがこれまでのデザインツールとの決定的な違いです。

Adobe XDとの比較（余談）

実は私も一時期、Figmaに行く前にAdobe XDを使っていた時期があります。

IllustratorやPhotoshopとの連携は便利だし、
「使った方がいいのかな」と思っていました。
プロトタイプをつないでクライアントに見せるのも簡単で、その点は評価していました。
ただXDも、
機能的には配置系ツールと考えていいと思います。

DXはよさそうに見えて
実際に作業を重ねると動作が重くなりがちで、
ファイルが大きくなると処理がもっさり。
安定感にも不安があって、結局「これならイラレの方が早い」と戻ってしまいました。

その点、Figmaはブラウザでサクサク動き、
環境を選びません。
リンクを送るだけで共有でき、
同時編集やコメントもリアルタイム。
結果的に「デザインツールの標準」がFigmaに移っていったのも納得できる流れでした。
 

Figmaは「構造化」で考えるツール

PhotoshopやIllustrator、
そして一時使われたAdobe XDも、
基本はオブジェクトを感覚で並べて
『だいたいこの辺』でレイアウトできました。

見えている画面に合わせて形にしてしまえば、
それで作業は完結したんです。

けれどWebでは、
見る人の環境によって幅も高さも変わるので、それでは通用しません。

Figmaの強みは、
フレームやオートレイアウトを使って
「入れ物の中に入れ物を重ねる」ようにデザインを作れることです。

大きなフレームの中にセクションを入れ、
その中にテキストや画像を配置していく。

この入れ子構造は、
HTMLで<div>を入れ子にしてCSSで装飾するのと非常によく似ています。

つまりFigmaは、
デザインの段階から「コーディングでどう実現するか」を意識できるツールということです。

さらに、色や文字サイズをスタイルとして登録すれば、
後から全体を一括で変更できます。

ボタンやカードをコンポーネントにしておけば、
テキストを差し替えても形が崩れず、修正は一度で済みます。
これが「見た目のきれいさ」ではなく
「構造としての強さ」を生み出している部分です。

作業の順序による手戻りには要注意

私がよくやる失敗は、ページの上から順に作り込んでいってしまうということです。

イラレで作っていた時の習慣で
最初のセクションを丁寧に仕上げてから次に進むと、
後半で全体のバランスを整えるときに
「ここも直さなきゃ」
と手戻りが発生しがちです。

「せっかく作り込んだのに後から直すことになってショボン・・・」
という経験が何度もあります。

Figmaでは、
全体のフレームを先に決めて、
次にセクション、
最後に細部と進める方が効率的。

この流れを意識するだけで、手戻りが大幅に減ると思います。

効率化を支える仕組み

Figmaが便利なのは、繰り返し作業を減らす仕組みが標準で揃っていることです。

ここはPhotoshopやIllustratorにも共通する部分があり、
共通パーツのスタイル保存やショートカットでの複製や整列といった効率化は昔から存在します。

だからこそ、従来のツールに慣れたプロが
Figmaを受け入れやすかったのだと思います。

ただしFigmaでは、
その効率化が「構造」と結びついている点が大きな違いです。

単なる複製ではなく、コンポーネント化すればインスタンス全体に変更が反映される。
整列や均等配置もフレームやオートレイアウトと連動する。
つまり「効率化＝構造を整えること」として機能しています。

なぜFigmaは急速に広まったのか

Figmaが一気に普及した理由は、
単なる操作性の良さだけではなく、
ブラウザで動く軽さ、
インストール不要、
MacでもWindowsでも同じ環境で使えるクロスプラットフォーム性。

これらがまず「導入しやすい」魅力でした。

加えて、Figmaの構造化されたデザインはWeb制作のフローに直結しています。

デザイナーが作った画面がそのままHTML/CSS的な発想でコーダーに渡せる。

しかも共有やコメント機能が標準でついているため、制作のコミュニケーションコストも減らせる。

これが従来ツールにはなかった強さでしょう。

まとめ：発想を切り替えるとFigmaは味方になる

最初は「イラレっぽいのに扱いにくい」と思っていた私ですが、Figmaは本質的に違うツールでした。

見た目を作るのではなく、構造を設計する。
効率化の仕組みも、構造を強化する方向で働く。
この発想を理解した瞬間から、作業はぐっと楽になりました。

Figmaは理屈で組み立てるツール。
慣れるまで戸惑っても、一度その考え方をつかめば、とても便利なツールだと思っています。