― Illustrator・Photoshop・Figmaの関係 ―
WEB制作で、様々なデザインツールを触っていると、
「ペンツールって、どのソフトもだいたい同じじゃない？」と感じる方は多いと思います。
実際、Illustrator・Photoshop・Figmaのペンツールは、
クリックしてアンカーを打ち、ハンドルで曲線を調整する、という基本操作は共通しています。
では、これらは同じ思想で作られているのでしょうか？？
答えは 「似ているが、同じではない」 です。
まどろっこしいなぁ…、早く結論を言って！という声が聞こえてきそうなので、成果物について解説しますね。
Illustratorのペンツール：完成品を作るための道具
Illustratorにおいて、パスはそのまま成果物です。
描いた線や形は、拡大しても劣化しないベクターデータとして完結します。
ロゴ、図形、アイコン、UIパーツなど、「形そのものを作る」作業に向いている理由はここにあります。
「ペンツールで描く＝仕上げる」という関係性です。
Photoshopのペンツール：加工のための下準備
一方、Photoshopではペンツールの役割が異なります。
パスは補助データであり、主役ではありません。
・選択範囲を正確に作る
・マスクをきれいに切る
・合成やレタッチの境界を整える
これらの作業がPhotoshopの特異な項目であり、
ペンツールは、「次の作業を楽にするための道具」として使われます。
そのため、ペンツールで描いても最終的なレイヤーは基本的にピクセル（画像）として扱われます。
Figmaのペンツール：UI設計のための共通言語
実際にFigmaを使い始めて半年が経過しますが、このペンツールは、
見た目も操作感もAdobe製品に非常によく似ています。
そのため調べてみたら、Adobeと共同開発されたわけではありませんでした。
Figmaは、「すでにIllustratorやPhotoshopを使っている人が、迷わず使えること」
を強く意識して設計されているとのことでした。
UIデザインやプロダクト設計の現場で、ツールの学習に時間を取られないように
業界標準となった操作体系をあえて踏襲しているのだとか。
これは互換性ではなく、最適化と言えます。
その理由は実際にFigmaを使って実感してみるのが一番です。
Figmaのコンポーネントライブラリ
FigmaはPhotoshopやIllustratorとは会社も違い、無料で始められて、とても便利です。以前もこちらでご紹介しましたが、Kindle電子書籍のFliptoon制作にも向いています。
似ている理由は「思想」ではなく「役割」
3つのペンツールは、同じ形をしていますが、目的は異なります。
- Illustrator：形を完成させる
- Photoshop：加工の精度を上げる
- Figma：設計を共有・伝達する
「同じように使おう」とすると違和感が生まれ、
「役割が違う」と理解すると、一気に使いやすくなります。
覚え方の一言まとめ
- Illustrator：描いたら完成
- Photoshop：描いたら加工
- Figma：描いたら共有
この違いを意識するだけで、
ペンツールは「難しい道具」から「考えを形にする道具」に変わります。
ここまでお読みいただきありがとうございました。
次回の記事で書き出し方法についても詳しく解説します
コメント