ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

Illustratorか？ Photoshopか？
Web制作はどちらがおススメ？

WEBデザイン現在、デザイン制作の現場では、Adobe PhotoshopとIllustratorは欠かせないアプリケーションとなっています。
その中で、WebデザインはPhotoshop、DTPデザインはIllustratorで制作という棲み分けができていました。Webデザイナーの場合、デザインからコーディングまで一人で制作する機会も多く、Webデザイナーはコーディングの知識も必要でした。
コーダーしかし、最近は分業化し、グラフィックデザイナーがWebデザインを担当し、それをコーダーがPhotoshopやDreamweaverを使ってWebページ化するという共同作業も多くなり、WebデザインをIllustratorで制作するというケースも少しずつ増えてきました。

コーディングを進めるにあたっては、Photoshopで制作したpsdファイルからWeb用の画像を書き出してHTML化する方法が効率的ですが、Illustratorのデザインデータからコーディングする場合のメリットもあります。以下ではコーダー目線で見たPhotoshopデータ、Illustratorデータのメリット、デメリットを紹介します。

Web制作におけるPhotoshopのメリット・デメリット

photoshopメリット

  • レイヤー階層などに用途名を付加できるので誰が見てもわかりやすい
  • レイヤーカンプ機能を使うことで、修正のバージョン管理がしやすい
  • スライスもレイヤー構造で重ねることでき、重なったスライスから必要な部分をアクティブにしてWeb用画像として書き出せる
  • 共同作業者のPCフォント環境が違っていても、強制的なフォント変換が行われないため、見た目のスタイルを保持しながら作業が進められる

デメリット

  • 後から高解像度PCやRetinaディスプレイに対応した高解像度Webページを求められた場合、拡大したサイズで元データを作り直す必要がある

Photoshopでのデータの作り方はこちら
デザイン→コーディングをスムーズに！Photoshopデータの作り方

Web制作におけるIllustratorのメリット・デメリット

illustratorメリット

  • グラフィック デザイナーが導入しやすい
  • 重い画像データを配置してもアプリ動作が軽い
  • psdへの高解像度出力(144ppi)が可能なため、高解像度Webページにも柔軟に対応できる

デメリット

  • Illustrator上のスライスは機能が少なく使いにくいのでpsdファイルへの変換が必要
  • 乗算やパス、グループなど様々な要因でpsdファイルへの変換時にレイヤーが予期せず合体される場合がある（合体されてしまうと、Web用画像に書き出す際に不都合が生じることがある）
  • 共同作業者のPCフォント環境が違う場合、aiファイルを開いた時点で文字などにスタイル変化が発生する。そのため、複数人で作業をする場合はフォント環境を同じにする必要がある。通常データとアウトライン化したデータを用意するなど、aiファイルを複数人で作業するための対策が必要
  • 修正のバージョン管理ができないため、jpgなどの最終カンプデータを残しておき、修正点を見た目で比較しなければならない。

ここまで書いてきて、Illustratorでのデザイン制作にはメリットが少なく、Photoshopでのデメリットはほとんどないという感じです。
専門的にWebデザインに取り組むなら、やはりPhotoshopを使うことをおススメします。
ただ、すでにIllustratorをパーフェクトに使いこなしていて「今からPhotoshopでデザインするのはちょっと敷居が高いな」と思う方

こちらをご覧ください。
IllustratorでWEBサイトデザイン 機能的メリットは？

コーディングの画像を倍のサイズで制作するとは？

Illustrator のデザインデータからWebページ化することの特徴的なメリットもあげておきましょう。

「解像度を高く(144ppi)出力し、psdファイル化できる」ことが特記に値します

レスポンシブWebサイトのレスポンシブ コーディングが主流となり、ネット環境が良くなる中で、表示画像の軽量化に力を注ぐより、クリア感・画像がぼやけて見えないことが現在のサイト コーディングで大きなポイントとなってきました。特にMac のRetinaディスプレイや4Kモニタなどの高解像度PC、また、スマホでWebサイトをみる人も多くなり＜Webサイトの高解像度化＞が必須となりました。
css（スタイルシート）で以前より複雑な表現ができるようになり、装飾文字やボタン、ナビゲーションなどの画像率が減ってWebページ自体は軽量化をしていますが、サイト内でメインに大きく扱うイメージや一押し商品などの画像は一層の表示のキレイさが求められます。

そこでIllustratorの書き出しオプションが役に立ちます
IllustratorのWeb書き出しはPhotoshopと比較すると機能的に使いにくいので、まずpsdファイルに書き出します。

「ファイル」⇒「書き出し」⇒「書き出し形式」⇒「Photoshop（*.psd）」を選ぶと、「Photoshop書き出しオプション」の解像度を聞いてきます。プルダウンを開くとスクリーン(72ppi)と標準(150ppi)という表記があります。PSDに書き出し
通常、Webブラウザでの画像表示の解像度は72ppi（pixels per inchの略）が基本となるのでスクリーン（72ppi）での書き出し制作で問題はありません。キレイな表示画像を作成するのなら高解像度にすればよいですね？と標準の150ppiで書き出したいところですが、これだと結局は余計に表示がにじむことになります。

Webブラウザの基本解像度は72ppiなので、
150ppi÷72ppi ≒ 2.08… と割り切れない数字になることが、にじみの原因となるのです。

高解像度対応の画像で制作したい場合は「その他」を選択し、144ppiとして書き出しましょう。このpsdを使ってWebサイトを制作すれば、クリアな画像でサイトが仕上がります。PSDに書き出し144ppiで書き出されたpsdデータは、通常の72ppiと比較すると縦横サイズ（pixel）が２倍になります。このpsdデータから書き出されたWeb用画像も縦横サイズが２倍になりますので、下記のようにコーディング時に半分のサイズを設定する必要があります。

<img src=”img/kv_img.jpg” alt=”” width=”2000″ height=”600″/>
↓　ブラウザの表示サイズに合わせる
<img src=”img/kv_img.jpg” alt=”” width=”1000″ height=”300″/>

まとめ

デザイン共同作業Photoshop、Illustratorのどちらがおススメかという点では、やはり専門的にWebデザインをしたいのならPhotoshopを選ぶことをおススメします。しかし自分が操作しやすく自分らしいデザインを表現できるアプリを選んだ方が効率的にデザインを進められます。
それが分かったうえで、共同でデザイン制作を進める場合には、デザイナーやコーダーなど、他の制作者と共有しやすい形式（ファイル）でデザインできるアプリを選ぶことが一番ではないかと思います。

WEBプログラマー ／ H.C

WEBデザイン・コーディングに関するお問合せはこちら