ＷＥＢデザイナーはフォトショイラレどちらを極める？

質問

ＷＥＢデザイナーの仕事を目指していて何時かフリーになりたいと夢見ている者です。

いまフォトショとイラレの初級本が終わった所なのですが、その後ＷＥＢデザイナーはどちらを中心にＷＥＢ用の中級本を購入して習得していった方が良いか悩んでいます。

ＤＴＰなどではなくＷＥＢデザイナーはどちらを中心にレベルを上げていくべきでしょうか？
フォトショは写真加工ができればそれで良いのでしょうか？
アイコンやバナーなどはイラレで主に作り、悪魔でフォトショはＷＥＢの場合は写真加工ができるレベルで良いのでしょうか？

また、ＷＥＢ用の良い中級本が見つからないのですが、有りましたら教えてください。
よろしくお願いします。

またフリーを考えるならＷＥＢだけでは厳しいでしょうか？
もしそうならフラウドソーシングなどのサイトでバナーやＰＰＣの画像作りなどもするのが最低条件でしょうか？

そこまで必要なら下記くらいのＷＥＢを超える本をやった方が良いのでしょうか？
http://www.amazon.co.jp/FASHION-ILLUSTRATION-WORKS-Photoshop-Illustrator/dp/4798123803/ref=pd_sim_b_4

そこまで要らないなら下記のどちらかしか私には見つけられませんでした。ＷＥＢ限定で良いのがありません。どちらがマシでしょうか？
http://www.amazon.co.jp/Web%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E9%BB%84%E9%87%91%E5%89%87-%E3%80%8C%E6%97%AC%E3%80%8D%E3%81%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E5%AD%A6%E3%81%B676%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9-Web-Designing-Books/dp/4839928614/ref=cm_cmu_up_add_glance

http://www.amazon.co.jp/Photoshop-%E3%82%B6-%E8%B3%AA%E6%84%9F-UP-Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E9%80%9F%E5%8A%B9%E6%8A%8060/dp/4844328336/ref=cm_cr_pr_product_top
他にもっといいのがあると良いのですが

回答No.2

tkmojo · ベストアンサー

まず、No.1の方が言うDreamweaverはコーディングの為のツールなので、デザイナーには関係ありません。
が、フリーになるなら当然ある程度コーディングも出来ないと話にならないので覚える必要がありますが、
コードについて覚える順番は、htmlとcssの基本をまず手打ちで覚え、それを便利に使うツールとしてDreamweaverを使う、という感じですね。
時間効率を気にしなければ、Dreamweaverが無くてもテキストエディタがあれば十分コーディングは可能ですが、
効率化の為のプロ用ツールがDreamweaverとお考えください。
デザインだけをして、コーディングを外注するなら特に使いこなせなくてもいいツールです。

で、本題に関して結論を言いますと、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では「画像、背景、テキスト」で考えますのでそもそも使い方が違うのです。

本等の資料に関しては、「デザイン」と「アプリケーションの使い方」で別と考えてください。
挙げている、二つ目の本に関しては、すぐに時代遅れになるので不要だと思います。
Webデザインは流行の変化が速いので、本よりもデザインリンク集を見た方が良いです。
http://www.ikesai.com/
http://bm.s5-style.com/
等。

Photoshopの使い方に関しては、Webに限定せずPhotoshopの専門書を読むといいです。
デザインの参考書に関しても、Webに限定しない方が為になると思います。
挙げている一番上の本は良いと思いますよ。

それと、PhotoshopはWeb専用ツールではないので、Webデザイン作成時にはある程度設定する必要があります。
下記の記事を参考にしてください。
http://stocker.jp/diary/switch-to-photoshop/
http://designcolor-web.com/2012/05/29/photoshop-first-setting/

お礼

＞Photoshopでデザインする事を覚えてください。
IllustratorでWebデザインを行うのは論外です。

びっくりしました。Photoshopを中心に行うのがＷＥＢは良いのですね。イラレは初級本で最低限できれば十分ということですね。
Photoshopは徹底的に極めた方が良いということですね。

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

イラレでしかできない所以外は皆フォトショで作った方が良いということですね。
それではアイコンの本などもフォトショ版を購入した方が良いのですね。

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

二つ目の本は古くて使えないとういことですね。教えて頂いたサンプルが一番ですが、教科書でないとまだできない場合は一番良いのは一番目ＷＥＢにこだわるなら３冊目が新しくてまだマシという感じということですね。

補足

何度も質問大変恐縮です。

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

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

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

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

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

回答No.6

ORUKA1951

＞説明不足ですいません。WEBサイト作成に特化してクラウドソーシングのみで月25万位稼いで食っていくことはできるかということです。

　これは道具と言うより、センスと才能ですね。実際にランサーズ( http://www.lancers.jp/ )のようなクラウドサービスを双方の立場で利用しますが、画像製作では食べていくのが難しいでしょう。GIMPやInkscapeでこなしている人は沢山います。
　確かに、クラウドの場合、その多くはロゴ製作です、Illustratorでの提供を求められることが多いでしょう。Illustratorはドロー系のソフトですからね。

　一方、マークアップやサイト管理はそこそこ稼げると思います。それも、ほとんどは個別契約に移行してしまいます。

お礼

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

HTMLなどを使った一連のWEBサイト作成を行うWEBデザイナーのみでもそれなりの実力があればロゴ作成などの仕事を掛け持ちしなくても十分食べていけそうですね。

ただ楽天ビジネスなどのクラウドソーシングで受けるより、WEB制作会社の下請けのようになった方がより収入が良いということですね。

回答No.5

ORUKA1951

No.4です。
＞アイコンやヘッダーの画像の編集はあまり重要でないというご意見ですね。
　そうです。こんなのランサーズ( http://www.lancers.jp/ )のようなクラウドサービスで安価に頼めてしまいます。得手不得手がありますし、顧客の依頼やイメージは様々です。自社でそのための多くの人材を確保するのは無駄です。

　ウェブで使用する画像なんて、写真系の画像最大でも横幅1200px程度まででしょう。ドロー系の画像は、いずれSVGが普及するでしょう。
　ところがポスターやパンフレットとなると、そうはいかないA4縦いっぱいを写真レベルの画像を作成しようとすると、6,000,000px程度の画像となる。Illustratorはドロー/ベクターですから、拡大や縮小しても画質は低下しない。しかし、Illustratorはドロー系の画像をWeb用に上手にビットマップに変換する機能はよくないし。

　多くのウェブ製作をしている会社の求人スキルを見ると、Dreamweaverのスキルを問われることがおいでしょう。

　確かにクライアントと打合せをするときには、Illustratrorを使って作成した完成イメージのコンテストや、クライアントへのプレゼンテーションをしますが、それを切り貼りしてウェブページを作成することは、ある程度以上の制作会社ではありえません。ここは、DTPとは全く異なる部分です。

あなた自身が
＞ＤＴＰなどではなくＷＥＢデザイナーはどちらを中心にレベルを上げていくべきでしょうか？
　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　と言われているように、パンフレットを作る能力ではダメだと自覚されているのでしょう。

＞またフリーを考えるならＷＥＢだけでは厳しいでしょうか？
　　このWebの意味が分からないのですが・・

＞(ク)ラウドソーシングなどのサイトでバナーやＰＰＣの画像作りなどもするのが最低条件でしょうか？
　これって、逆に言うと「バナーやＰＰＣの画像作り」なんて、クラウドに依頼するほうが効率的と言う意味ですよね。独立して喰って行くには、相当のスキルと数をこなさきゃならない。それでも、カジュアルなデザインが得意な人は、フォーマルなデザインは苦手ですね。

　Webで喰っていこうとすると、それは「ウェブマスター」という分野にならざるを得ないでしょう。いくつかの会社のウェブサイトの構築、管理メンテナンスを受ける事です。数十社固定客を持つことが出来れば喰っていけるでしょう。
　⇒ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )
　の「デザインとコンテンツに関するガイドライン」やそこにある「画像、動画、リッチ スニペット」の個別のリンク先を読まれても、ウェブにおけるデザインは、全く異なる概念だということがお分かりでしょう。

お礼

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

＞＞またフリーを考えるならＷＥＢだけでは厳しいでしょうか？
　　このWebの意味が分からないのですが・・

説明不足ですいません。WEBサイト作成に特化してクラウドソーシングのみで月25万位稼いで食っていくことはできるかということです。

回答No.4

ORUKA1951

＞フォトショは良くWEBサイトにある写真加工程度。
＞イラレはデザインカンプができる程度で十分。
　そうです。いずれもWebデザインには、不要と言っても良いでしょう。
　Webで使用する画像なんて、そんな高度なものは不要です。イラストやロゴも同様。
　写真にしても、コントラスト,ガンマ補正,色調補正,サイズ変更が出来れば十分でしょう。イラストにしても、GIMPでも物過ぎるくらいです。

　ウェブデザインは、DTPとは全く異なり
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　のデザインなのです。スクリーンリーダーで読み上げたときに、内容が伝わるか？点字端末できちんと意味が分かるように出力されるかは極端にしても、検索エンジンに正しく内容が伝わるかも、ウェブデザイナーの重要な仕事なのです。
　言い換えれば、それが出来るかできないかが、独立できるか出来ないかの決め手となるでしょう。写真が加工できる、ロゴがうまいなんて、所詮下請け作業で十分なのです。

お礼

アイコンやヘッダーの画像の編集はあまり重要でないというご意見ですね。
ありがとうございます。お忙しい中大変ありがとうございました。

回答No.3

ORUKA1951

Webデザインでしたら、どちらも必須とは言えないでしょう。
Web素材として使用する画像は、jpeg,GIF,PNG・・将来的にはSVG,canvasです。
　いずれのソフトも、その本来の画像保存形式はことなります。あくまで、jpeg,GIF,PNG,SVG,canvasをすべてではないですが、出力できる程度です。それ専用のソフトではありません。
　Illustratorの用途は、完成予定のイメージをクライアントに提示するサンプルを作るのには良いでしょう。
　これらのソフトでWebページを直接作成することは、素人なら兎も角、プロではありえないです。
＞アイコンやバナーなどはイラレで主に作り、悪魔でフォトショはＷＥＢの場合は写真加工ができるレベルで良いのでしょうか？
　で良いでしょう。

　Webデザインと言っても、何を意味するかで全く必要なソフトやスキルが変わります。
　ご存知のように、Webデザインは、DTPとは全く異なります。DTPの場合は、視覚的なデザインのみ考えれば良いですが、Webの場合は、文書構造の適切なマークアップとプレゼンテーションは明確に分けなければなりません。
『文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )』

　となると必要なスキルは、HTMLによるマークアップの能力と、スタイルシートを用いたデザインの能力が必要になります。これらはPhotoshopもIllustratorのいずれも、全く役に立ちません。

　ページデザインには、同じアドビでしたら、fireworks、サイト管理にはDreamweberがありますが、ツールだけ使いこなせれば一人前ではありません。
　HTMLやCSSを自由に書ける能力が必要になりますが、これはソフトでは不可能です。逆に言うとテキストエディタひとつあったら済みます。

お礼

フォトショは良くWEBサイトにある写真加工程度。
イラレはデザインカンプができる程度で十分。
それ以上にどんな環境でもできるHTML、CSSの方が大事ということですね。

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

回答No.1

hirama_24

webならどちらも使える程度で構いませんよ、あくまでもwebの素材作りのためのソフトですから

それをまとめるのがDreamweaver
こっちを覚えるほーが重要です

お礼

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

ＷＥＢデザイナー（一連を一人でこなすタイプ）イラレ、フォトショはこのサイト位のアイコンなどをそれなりに作れる程度で良いということですね。

メインはあくまでどんな環境、でも同じ状態を作れるコーディング力ということですね。