ＷＥＢデザイナーはフォトショイラレをどう使いわける

質問

ＷＥＢデザイナーはフォトショイラレどちらをどう使い分けて中心的に極めるべきか質問した時に下記のような回答をもらったのですが、下記のような疑問が残りました。
また、使い分けはおっしゃっているような形が理想と思いますか？
アイコンもバナー以外はPhotoshopで作るほうがよいのは素人の自分でもわかるのですが、アイコンもバナーもPhotoshopで作るほうがよいのでしょうか？
また、バナーとは当サイトの楽天などにあるバナー広告のことでしょうか？

下記疑問に思ったところ。
＞
アイコンもバナーもPhotoshopで作ってください。
そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。
ですので、Illustratorも使えるに越したことはありません。

WEB関係者のフォトショとイラレの使い分けの境界線が難しいのですが、バナーやアイコン、デザインカンプなどフォトショで作れる主な部分は可能な限りフォトショでビットマップデータ作って、どうしても作れない部分だけイラレのベクトルデータでつくりイメージでしょうか？

バナーなら枠や背景はフォトショでつくって、その中にいるキャラクターや、花などはイラレで作り、最終的にフォトショにまとめてビットマップデータで保存するということでしょうか？

イラレで作らないと拡大縮小が出来ないので、アイコンはイラレで作った方が良いのかと思ったのですが、フォトショでビットマップデータが良いのですか？
当サイトならハートのアイコンや上記のOKWAVEのアイコン、お礼のボタンなどもすべてフォトショが良いのですね。
楽天のバナー広告などなら中の楽天イーグルスのキャラなどだけイラレで作るイメージでしょうか？

またイラレはぼけると聞いたのですが、それはWEBページに組み込むとaiをpngにした画像が多少ぼけるということでしょうか？
psdをpngでWEB上で表示すれば一切解像度は下がらないということでしょうか？
素人の質問で大変恐縮です。

下記いただいた回答。
で、本題に関して結論を言いますと、Photoshopでデザインする事を覚えてください。
IllustratorでWebデザインを行うのは論外です。
特に、コーディングを外注するならaiファイルは非常に嫌われます。

アイコンもバナーもPhotoshopで作ってください。
そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。
ですので、Illustratorも使えるに越したことはありません。

プロの現場でも、IllustratorでWebデザインを行う方は居ますが、
そういう方は印刷出身で他のツールを使えない方です。
「これからWEB用にどちらを勉強しようかな」という方がIllustratorを選択する理由はありません。

少し前までは「PhotoshopかIllustratorか」ではなく
「PhotoshopかFireworksか」で議論が分かれていました。

Photoshopの方がアナログでやれる事は多く、自由度は高いですが、
Fireworksの方がWEBに特化している分仕事の効率化に向いています。
どちらも一長一短ですが、FireworksはCreative Cloudに含まれず、開発終了のうわさが流れているので、今からだとPhotoshopが良いかと思います。

一応、IllustratorのWebに向かない理由を列挙します。

・画像のピクセルがぼやける
・書き出しが不便
・同じサイズで作成した複数のアイコンや画像が同じサイズで書き出せない

他にも色々ありますが、最初の理由ひとつだけで残念なサイトにしかなりません。
以下は印刷出身の方がよく作るイラレデータで、Webとしては話にならないものです。
（しかし、こういうデータが本当に多い）

・CMYK
・サイズが適当
・文字サイズを変えすぎ
・乗算などの効果を使用している

Illustrator使用者は紙出身者が多いので、デザインを1枚のものとして考えるので、
パーツ分けした際にそのまま使えない事が少なくありません。
Webでは「画像、背景、テキスト」で考えますのでそもそも使い方が違うのです。

回答No.2

adobe_san · ベストアンサー

私は
ラフ作成（デザイン）はイラレ。
そのラフを画像に起こすときに「フォトショ」を使う。

＃１様が言われてる話は「印刷」のこと。
イラレは「CMYK」「RGB」どちらでも使えるし、ピクセルも指定して作ることが可能。
例えば「横幅800ピクセル」と指定された場合、イラレ新規作成で幅を「800ピクセル」と指定すれば、その幅でラフを作ることが出来る。
つまり・・・クライアントに完成イメージで「説明が出来る」ですわ！
で、ラフを突き詰めて「完成」させれば、そのまま兄弟ソフト「フォトショ」で加工が可能。
拡大・縮小が発生しても「イラレでデザイン修正後、フォトショで反映」出来るので、後作業も楽。
初めからフォトショで行うと、ご質問者様の疑問通り「拡大はどうしよう？？」になり
最悪「一から作り直しだ！！」になっちゃう。

まっ最終的にはオペレーターの作業しやすい方で行うが正解かな？
拘りを持つ方が良くないと思う。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

つまり、ラフ（ワイヤーフレーム）はイラレで作って、その後のデザインカンプはフォトショで作るのがよいということでしょうか？

ロゴやバナーは好みなのですかね？

補足

補足させてください

つまり、ラフ（ワイヤーフレーム）はイラレで作って、その後のデザインカンプはフォトショで作るのがよいということでしょうか？

ロゴやバナーは好みなのですかね？

回答No.3

ORUKA1951

本来は、Photoshopは写真の加工、Iiiustratorはパンフレットやカタログなどで使用するイラストの作成用です。専門分野は、Photshopはビットマップ(ラスター)、Illustratorは、ベクター(ドロー)の二次元コンピューターグラフィックス( http://ja.wikipedia.org/wiki/2%E6%AC%A1%E5%85%83%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9 )を扱うソフトです。
・ビットマップ画像( http://ja.wikipedia.org/wiki/%E3%83%93%E3%83%83%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E7%94%BB%E5%83%8F )
・ベクタ形式( http://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF%E3%82%BF%E5%BD%A2%E5%BC%8F )
　それぞれの特徴や詳細はリンク先を見ていただくとして、大きな差はベクタ形式は、拡大や縮小、あるいは変形してもギャザーが目立たないが、複雑な図形や微妙な色合いのものは苦手です。円を描いてコントロールポイントをつまんで引き伸ばすとかは得意です。一方のビットマップ画像を扱うソフトは、選択部分の色調を変えるとかは得意です。
　とは言っても、今は本来の対象を離れて、互いの機能の主だった機能は扱えるようになっています。

　ただ、これらは、本来はWebページのデザインを行う--それを専門とするツールではありません。
　Webで扱える画像は、基本的にはビットマップ(JPEG,GIF,PNG)です。
・GIF-Graphics Interchange Format( http://ja.wikipedia.org/wiki/Graphics_Interchange_Format )
・JPEGほJoint Photographic Experts Group( http://ja.wikipedia.org/wiki/JPEG )
・PNG-Portable Network Graphics( http://ja.wikipedia.org/wiki/Portable_Network_Graphics )

　※HTML5以降は、ベクタ形式のSVG(Scalable Vector Graphics( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics ))が利用できるようになります。

　よって、Photoshopにしても、Illustratorにしても、あくまで、素材を作るツールです。
写真に手を加えて適当な素材を作るならPhotoshopですし、ロゴやイラストを製作するならIllustratorと選択するのが、圧倒的に機能が豊富なため便利です。
　それを、最終的にはWeb用のビットマップデータに書き出すのは、設定さえ間違わなければ、それぞれのツールで良いです。
　一旦ビットマップにすると、それが最終データになり、後からの編集は行えないと考えたほうが良いでしょう。(GIFとPNGは可逆圧縮ですから画質は変化しませんがJPEGは非可逆です。)

★本題です。
　Webデザインとは、これらの素材を作る作業とは、全く別の作業です。!!ここを誤解されていると思います。
　Webとはなにかは、HTML4.01の仕様書の「HTML 4の概説」によくまとめられています。
　2.1.World Wide Webとは何か?( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.1 )
　2.2.1.HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )
　『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、・・・』
と、DTPやワープロのデザインとは、全く異なる次元のデザインです。
　もちろん、検索エンジンに内容が正しく伝わるデザイン--マークアップ---も重要なデザイン要素なのです。
　いいかえれば、IE,firefox,Chrome,Operaといった「視覚系ブラウザ」は、そのうちのひとつにしかすぎません。

　いまは徹底的に否定されていますが、かってのtableを用いたような手法、ページ全体を画像処理ソフトで作って、それを切り貼りするようなデザインは、今はされていません。すべきではありません。
　具体的には・・
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。←PhotoshopやIllustratorで作ってtableで並べる
・HTMLでページを作らずにプログラムに頼る。←PhotoshopやIllustratorで作った物をそのまま利用する。
　14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より

　とすれば、PhotoShopやIiilustratorで作成したサイトイメージは、クライアントに完成イメージを伝える用途にしか使えません。どちらを使用しても遜色はないでしょう。
　一方、Webページで使用する素材は、写真でしたらPhotoshop,イラストやロゴはIllustratorというのが原則でしょう。餅は餅屋というように、Iiilustratorで作成したロゴが汚くなるということはありません。もしそうなるとしたら使い方を間違っている。

　具体的な例を挙げておきます。
★下記のページは、デザインはすべてテキストエディタを使っていると思われます。すなわち、HTMLとスタイルシートはテキストエディタでないとあのようには書けないでしょう。
　しかし、それぞれの素材は写真はPhotshopなどの写真を処理するツールで、ロゴやイラストはIllustratorなどのベクタ画像処理ツールで作成されていますね。
　そして、ブラウザの[表示]メニューから[スタイル(シート)]を選択することで、デザインは全く変わります。印刷イメージもまた異なります。
　それでいて、スタイルシートを「選択しない」で表示される姿が検索エンジン用のデザインと考えられます。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

すべてフォトショではなく写真でしたらPhotoshop,イラストやロゴはIllustratorというのが原則かもしれませんね。

回答No.1

noname#242220

イラストレータは『リーフレット』を作成する為の印刷原稿を造るアプリです。
なので色管理はCYMKのみです。
サイトの場合の色管理はAppleRGB若しくはsRGBですのでPhotoshopの出番。
現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

サイト作成は専用のアプリで行いますので、フォトショもイラレも基本的には
『材料』を造るアプリ

＊ベクトルデータは解像度に限定されないデータなので、使う時には
ラスタライズして使います。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。
＞現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

つまりすべてＷＥＢはPhotoshopでアイコン、カンプ作成も行い、
それらをPhotoshop上でベクトルデータで作るのがよいということでしょうか？

デザインカンプもフォトショでベクトルがよいのですかね？

補足

補足させてください

＞現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

つまりすべてＷＥＢはPhotoshopでアイコン、カンプ作成も行い、
それらをPhotoshop上でベクトルデータで作るのがよいということでしょうか？

デザインカンプもフォトショでベクトルがよいのですかね？