WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： デザイン >デザイン参考

Web制作では、デザインツールが人によって分かれることってありませんか？
SNSでは「Photoshop」「XD」「Figma」この3つのツールが紹介される事が多いですよね。

私はコーダーとして、様々な形式のデザインデータを受け取りますが、ツールによって作業感や進めやすさが変わることもしばしば…。

今回はそんな3ツールを、あくまで“受け取る側視点”でサクッと比較してみました。

ツール比較表（ざっくりまとめ）

それぞれの向いているタイプ

• Photoshop：細かな表現や画像処理を重視するデザイナー向け
• XD：サクッとUI制作したい人・プロトタイプを作りたい人
• Figma：チームで共同作業する機会が多い人・更新頻度が高い案件

私目線のリアルな印象（コーダー編）

正直に言うと、ツールによってコーディングの進めやすさに違いを感じます。
特に「画像書き出し」「余白の理解しやすさ」「命名ルールの整理」などは、
データ形式よりも作り手の丁寧さに左右される部分。

どのツールであっても、データが整理されていると作業スピードが大きく変わります。

ちなみに、個人的に深呼吸しがちなポイントがあります。

• グループ化されていないデザイン
• 余白の単位がページごとに少しずつ違う
• レイヤー名が「レイヤー1・コピー・コピー2」のまま

もちろん、どんなデータが来ても対応はしますが、整っているデータを見ると、コーダーは少し幸せになります。
余白設計も命名もレイヤー整理も、「伝えよう」「引き継ごう」という気持ちの表れ。
だからこそ、ツールよりも“人”が大事なんだと思っています。

デザイナーとコーダーが気持ちよく連携できる形は理想ですよね。
今日も世界中のマークアップエンジニアが、整ったレイヤー構造を待っています！