Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？

Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。

それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。

この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。

なお、この記事の内容は世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。

Photoshop向きのデザイン・作業

なぜPhotoshopがWebデザインで使用されていたのか

数年前までは「Webデザインカンプ制作といえばPhotoshopかFireworks」という時代がありました。
その理由は、多くのWebサイトはスキューモーフィズム（skeuomorphism）という考え方に基づいてデザインされていたことがあげられます。

スキューモーフィズムとは、実際に存在する同じ機能を備えた物のデザイン（かたち・質感・陰影など）を模倣することです。
この考え方では、立体的なボタンなどのUIパーツが多かったのです。それにはPhotoshopの豊富なグラフィック機能が必要でした。

しかし、最近ではスキューモーフィズムから脱却した表現が主流になり、平面的なフラットデザインやGoogleの提唱するマテリアルデザインという考え方でWebページが作られることが多くなりました。

また、AppleのRetinaディスプレイを始めとして高密度ディスプレイの端末が増えました。
すると、画像もPNG形式やJPEG形式よりSVG形式のようなベクトルグラフィックのほうが扱いやすくなり、SketchやAdobe XDのようなベクトルグラフィックツールを使用する機会が増えてきています。
そのためPhotoshopだけでWebデザインが完結することは減ってきています。

写真表現やスキューモーフィズムが必要な場面に

ではPhotoshopの出番がなくなったかというと、決してそうではありません。
モダンなWebサイトの多くはトップページなどで大きく写真を取り扱う場合が多くあります。その写真をどうやって補正するかといえば、当然Photoshopを使用することになります。

ゲームや飲食業、旅館などのWebサイトはいまでも立体感のあるUIや、背景にテクスチャを敷いたデザインが多く使用されています。
そういった用途ではこれからもPhotoshopが使われていくでしょう。
そして、広告バナーやキャンペーンページのヘッダー画像のような派手な画像は、今後もPhotoshopで制作することが多いでしょう。

Illustrator向きのデザイン・作業

アイコンやロゴの制作とSVG書き出し

Web制作でIllustratorを利用する場面といえば、ロゴやアイコンの制作です。
現在はRetinaディスプレイなどへの対応を考えて、制作したアイコンやロゴはPNGではなくSVGで書き出すことが一般的です。
その際はIllustratorで制作し、SVG形式で書き出すことが多いでしょう。

Webデザインカンプの制作

「IllustratorでWebデザインカンプの制作」というと違和感がある方もいるかも知れませんが、現在のIllustratorはピクセルにスナップする機能も大きく進化しており、Webデザインカンプ制作にも問題なく使用できます。

今後、Webデザインカンプ制作はXDやSketchを使用することが多いかもしれませんが、それらのアプリケーションでは細かい部分のデザイン作業ができない場合があります。
そんなとき同じベクトルグラフィックツールで、細かいデザイン作業までこなせるIllustratorが役に立つ場面はあるでしょう。

Adobe XD向きのデザイン・作業

プロトタイピングに

「プロトタイピング」とは実際に動く見本をつくることです。
従来のデザインカンプはただの画像であり、たとえば「スマートフォンでリンクをタップしてページを移動する」という動きを見ることができません。

XDにはプロトタイピング機能がついているため、たとえば「ボタンをクリックしてページを遷移」という動きを確認できることはもちろん、プロトタイプをスマートフォンの画面上に表示してタップやスワイプして動作を確認できます。そのため、たとえば「重要なボタンがスマートフォンの画面上で押しづらい位置にないか？」など、ユーザーの使い勝手を考えたUIデザインの確認がしやすいといえます。

関係者とのデザインの共有が簡単

たとえば、制作中に「ディレクターとの間でプロトタイプを共有して制作の方向性がずれていないか確認したい」とか、「クライアントにプロトタイプを見せて確認したい」ということもあるでしょう。
そういったとき、相手のPCにXDがインストールされていなくても、Webブラウザを使用してプロトタイプを見せることができます。

コーダーにデザインデータを渡すときも、コーダーのPCにXDがインストールされている必要はありません。
「デザインスペック」という機能を使用すれば、Webブラウザを介してオブジェクトのサイズやオブジェクト同士の間隔、カラー、フォントサイズなどさまざまな情報を共有できます。

Sketch向きのデザイン・作業

シンボルのオーバーライドができる

Sketchの強みは「シンボルのオーバーライド」にあると筆者は考えています。
シンボル機能自体はIllustratorなどにもありますが、たとえばトップページと下層ページでナビゲーションバーの内容が異なるといった場合、シンボルのオーバーライド機能が使用できると便利です。

たとえば、スマートフォンアプリのApp Bar内のテキストを［Home］から［Timeline］に書き換えてみました。
この程度であればXDのシンボル機能でもできますが、Sketchであれば「右端のアイコンを別のものに差し替える」といったオーバーライドも可能です。

Atomic Designに最適

Atomic Designとは、従来のデザインのようにページ全体のイメージから徐々に細部をつくっていくのではなく、Atomsと呼ばれるそれ以上分割できないほど細かい要素をまとめてMoleculesと呼ばれる最小限の機能を有するグループをつくり、それらをまとめてOrganismsと呼ばれる要素のまとまりをつくり、それらをまとめて1つのページをつくり上げるデザイン手法のことです。

Atomic Designを採用する場合、Sketchを使用してデザインするのが自然です。