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

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

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

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

photoshop-illustrator-xd-sketch icon

なお、この記事の内容は 世界一わかりやすい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デザインの確認がしやすいといえます。

XDのプロトタイプ

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

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

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

Sketch向きのデザイン・作業

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

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

Sketch オーバーライド機能

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

Atomic Designに最適

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

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

リサイジング機能でレスポンシブなデザインカンプが制作できる

一般的なグラフィックソフトでiPhone 8用の画面サイズのものをiPhone 8 Plusのサイズに引き伸ばした場合、単純に画像が引き伸ばされてしまいます。

しかし、Sketchのリサイジング機能を使用するとアイコンが横に引き伸ばされたりフォントサイズが変わってしまうことなく、適切に画面全体を拡大できます。

Sketchのリサイジング機能による拡大

リサイジングを適切に設定していれば、アートボードを大きくしてもナビゲーションバーのサイズが適切にリサイズされます(右)。

※XDにも、2018年9月のアップデートで「レスポンシブサイズ変更」というリサイジング機能に相当するものが搭載されました。

「スマートフォン時代のWebデザインスクール」ではどうしているの?

私は「スマートフォン時代のWebデザインスクール」というWebデザインスクールの講師をしていますが、このスクールでは Photoshop、Illustrator、XD の3つを教えています。

Webデザインカンプ+それぞれの特長を活かした使い方、たとえばPhotoshopであれば写真補正、Illustratorであればアイコン作成+SVG書き出し、XDはプロトタイピング制作について実習しています。

1つだけに縛らないのは、Web制作会社などで働く際、どのアプリで仕事することになっても困らないように、という考えからです。

「スマートフォン時代のWebデザインスクール」については以下のページをご覧ください。

「スマートフォン時代のWebデザインスクール」を開催します。

If you like this article click the Facebook “Like” button to share it with your friends!