WEBデザイン｜PhotoshopかIllustratorか…

WEBデザインをするならPSかAIか、という問題（その後・・・）

画像処理とレイアウト

Photoshop、Illustratorに限らず、この機能がこのアプリケーションについていれば最強だと思うことは多々あります。そうした中でこの2トップは、それぞれが補完し合うことで育ってきたアプリケーションだと思います。
当初、画像処理はPhotoshop、レイアウトはIllustratorという具合に。それぞれが「この機能があれば・・・」という関係だったのです。
そしてバージョンアップを繰り返すたびにそのボーダーラインは曖昧になりましたが、Photoshopは画像処理という絶対領域があるのと同じように、レイアウトの柔軟性はIllustratorに軍配が上がります。

解像度

WEBデザインを進める時に基本となるのは、解像度とレスポンシブデザインです。
スマートフォンに限らず、PCであっても高密度化され、解像度でいえば、横が3,000px以上で表示できるノートパソコンもあります。この状況でPC画面のデザインをフルHD（1,920×1,080px）以下で設定するのは危険です。

解像度と密接な関係にあるPhotoshop

Photoshopは解像度に依存しているのでサイズ変更にはナーバスです。ただ、最新のPhotoshopはAI導入による革新がめざましく、新たに画像解像度パレットに「ディテールを保持2.0」という項目が追加され、300%拡大でも一昔前のジャギーが出て見られないといったことがありません。
ベクターデータをスマートオブジェクト（レイヤー）に変換しておけば、ファイルが持つ解像度に依存せず、拡大縮小が可能です・・・と、Photohopでも可能になっていますが、Illustratorのように試行錯誤を繰り返したり、あるオブジェクトを控えておいて、別のオブジェクトを入れ替えてみたりといった柔軟性は乏しく、前述した「作り方に工夫が必要」ということに違いはありません。

Illustratorであっても配置したイメージ画像の解像度以上に出力することはできません。ただ、イメージ画像のピクセルが十分であれば、幾度となく拡大縮小ができることも優位です。

レスポンシブデザイン

アートボードという概念ができたことで、WEBデザインにおいては特に便利になったのがIllustratorです。個人的には従来からあったガイドライン（ルーラーから引き出したりするアレです）を殆ど使わなくなりました。
WEBデザインは少なくともPC画面、スマートフォン画面のレイアウトデザインが必要です。
レスポンシブデザインは切り離すことができません。
Illustratorのアートボードを使えば、1つのファイル内にPCとスマホの両画面を作成することができます（コンテンツの内容量によりますが）。隣り合った状態でデータを流用できるので、レスポンシブデザインをする上で有効です。
Photoshopにもアートボードがありますが、難関はオブジェクトがレイヤーに依存していることです。例えば、PC画面では横だったオブジェクトをスマホ画面では縦にしたい場合、レイヤー内で2つのオブジェクトを存在させることはできますが、そのオブジェクトを書き出しする際、結果的に手間が増えてしまいます。書き出しを考慮するとレイヤーを増やさざるを得ず、レイヤーが煩雑になっていきます。

書き出されるファイルの形式とサイズ

WEBデザインとコーディングの制作時間に対する理解がされていないことで、結果的に公開されたWEBサイト（ページ）は、本来はテキスト（文字）であるはずの部分の殆どが「画像」となって出力されていたりします。
見た目は変わりません（状況によっては明らかに違いますが）、何ならデザイン通りですから間違いもありません。しかし、いろいろな意味で問題があります。

デザインされた状態から分解、再構築

コーディング作業とは簡単にいえば、PhotoshopやIllustratorなどで作成されたデザインデータをすべてバラバラにして組み立て直しています。組み立て直す際、PhotoshopやIllustratorといったWYSWIGなアプリケーションではなく、HTML・CSSといったコード、文字で組み立てていきます。

この組み立て直す時にテキスト（文字）はテキストとして、イメージ画像は画像（JPEGやPNG,GIF）として、ロゴやキャッチーなタイトルはSVG形式として書き出し（出力）する作業が発生します。
テキスト以外は、デザインされたレイアウトによって、または、動くことを前提としてどういったサイズで書き出しを行うのが良いかを考慮しています。
オブジェクトの周囲に空きが必要なのか、PCとスマホで共通データとして取り扱いできるか否か、重なったオブジェクトを別々のデータとして出力する必要があるか、または統合して1つのデータにするのかなど様々です。こうした工程を経て、組み立て直されたオブジェクトは可能な限りデザインレイアウトに近くなるよう調整をしていきます。

動かすという以外では、どういう形式、サイズで書き出せばよいかという作業が時間のかかる作業です。オブジェクトを個別にしたり、グループにしたり、ジャストサイズで書き出すのか、余白を与えて書き出すのか、こうした作業を考えるとやはりIllustratorで作成されたデータの方が柔軟で作業効率も高いと思います。