Switch本体がほしいです

のだ

webサイトのデザイン用ソフトといえば、現在は主に下記の４つが考えられます。

・Adobe Photoshop（Ps）
・Adobe Illustrator（Ai）
・Adobe XD（Xd）
・Sketch

今回は各ソフトの向き・不向き（メリット・デメリット）を主観とバイアス盛り盛りでご紹介しようと思います。
webデザイナー志望の方や、webページのデザインを依頼されたDTPデザイナーさんはよかったら薄目でご参照ください。
なお、作業環境はiMacです。

Adobe XD

◎オススメの使い方
ワイヤーフレーム、UI・UX設計

メリット

◯ファイルが軽い
◯Aiデータで複数色使った複雑な図形（ロゴなど）も各色を保持したままシェイプとしてそのまま持ってくることができる
◯同じレイアウトの繰り返し（リピートグリッド）が最強
◯パーツの一括置換に強い
◯プロトタイプを設定することで、実際のwebサイトに近い挙動が見せられる
◯Xdを持っていなくてもデータを見ることができる（らしい）

デメリット

△フォントがアルファベット順に表示されるため若干探しにくく、トンマナの検討段階では眉間にマリアナ海溝を築きがち
△Adobe配下によけているフォントを読み込んでくれないので、必要なフォントをFont bookに登録→不要になったら消す、というのが手間（※よけている理由：Wordのフォントリストの表示が遅い！）
△一文字単位の細かなカーニングができない＝バナー・スライドなどの一枚画像の制作には不向き
△CSSではできるのにXdでは作れないものがある（※プラグインで対応できる場合もあり）
└ 両端揃え（text-justify）
└ 縦書き（writing-mode）
└ 行間の相対値（%）指定　等
△高位バージョンのファイルは開けない（※OSによってはそもそも最新ver.をインストールできない）

評価

単純なパーツの繰り返しやトンマナの変更に強く、ページ遷移や簡単なアニメーションも設定することができるので、UI・UX設計にはとても向いているソフトです。
ただ、前述の通り「実装できるのに作れない」部分も多く、プラグインで不足している機能を補えるとはいえ、まだまだ過渡期にあるかなという印象です。

コーディングはしやすいのかしらと？思ってデザインからコーディングまで一通り行いましたが、手間ひまを考えると、正直なところ今時点ではPsから完全に乗り換えるほどのメリットは感じられませんでした。
目下、ワイヤーフレームや一覧ページのような、主にレイアウトデザインが求められる場合に使っています。

どちらかというとデザインよりもディレクション業務に近いように思うので、ディレクター志望の方は学んでいて損はないかと思います。

Sketch

◎オススメの使い方
ワイヤーフレーム、UI設計

評価

基本的なメリット・デメリットはXdと同じで、こちらもUI設計向きのソフトです。
さらにデメリットをあげるとすれば、

△Ai／Psからパーツを直接コピペできない
△現時点ではmacにしか対応していない（win用にLunacyという互換ソフトがあるそうです）
△ショートカットキーの設定が手間
△写真加工や細かなクリエイティブ制作には不向きなので、結局別のソフトが必要になる（コストがかかる）

です。
Adobeソフトに慣れていると特にショートカットまわりが使いにくいのではないかなと思います。
でも、レイヤーグループのUIはXdよりもこちらのほうが好みでした。
ダミーデータがある程度プリセットで用意されていて、かつ自分で用意したテキスト（.txt）を流し込むことができるのも便利だな〜と思っています。

Adobe Illustrator

◎オススメの使い方
ワイヤーフレーム、ロゴやアイコンなどのパーツ、スライドやバナーなどの一枚物のクリエイティブ

メリット

◯ベクターデータに強い
◯Psとの連携に強い（リンクファイル）
◯psdファイルに変換できる（パーツをすべてレイヤーに分けるなどの工夫は必要）

デメリット

△画像の書き出し（アセット書き出し）がイマイチかゆいところに手が届かない
△デザインで使っているフォントがインストールされていないと崩れるし、かといってアウトラインを取るとaltの設定が不便というジレンマ
△（一枚物のクリエイティブを作るとき）アートボードが小数点以下のサイズ／位置にあると、書き出し時に変な余白ができるので要注意

評価

一時期「Aiでwebデザインをしよう！」という風潮もありましたが、個人的には他のソフトに比べるとコーディングにかかるコストが若干高くなるので、ページデザインには不向きかなと思っています。
バナーやスライドのようなパーツを分解する必要がない一枚物の完全データを作るのには良いと思います。

Adobe Photoshop

◎オススメの使い方
ページデザイン、スライドやバナーなどのクリエイティブ

メリット

◯これ1本でレタッチからページデザインまで、すべてを網羅できる
◯画像のアセット（書き出し）が4つのソフトのなかでも群を抜いて優秀
└ レイヤー名で拡張子・画質・サイズを指定できる
└ レイヤー名の指定がきちんとできていれば、毎回書き出し時にフォーマット設定をする必要がない

デメリット

△ファイルがとにかく重い（コーダーさんが眉間にマリアナ海溝を築きがち）
△波線を作るのがへた（Aiで作って持ってくるほうが楽）
△Aiデータで複数色使った複雑な図形（ロゴなど）を各色を保持したままシェイプとして直接コピペで持ってくることができない

評価

他3つに比べるとワイヤーフレームとUIの設計をするにはちょっと劣るかなと思ったので敢えて省きましたが、もちろん設計からデザインまですべてをPsで作ることも多々あります。
デメリットは上記以外にもいくつかあるのですが、総合的に考えると今のところページデザインをするのはPsが一番シンプルで楽なので好きです。

§

ということで、今回はwebデザインで使うソフトのメリット・デメリットを個人の主観だけに基づいてご紹介しました。
お気づきのとおり私自身はPs至上主義なのですが、それでも一概に「webデザインをするのならこのソフト！」とは言えません。
どれも一長一短でなので、制作物や制作期間、チームの状況に応じて柔軟に使い分けるのが最も賢い使い方だと思います。

それではまた。

WEBサイトなどのご相談はこちらからどうぞ

お問合せはこちら