WEBデザインはPhotoshopでしますか?それともIllustrator?

STEP1
WEBデザインを作るのはPhotoshopの方がいいのか?

しばしWEBデザインは、PhotoshopとIllustratorどちらのソフトを使うべきか決まりはあるのかということについて質問をもらいます。

結論から言うと、どちらでも良く、
あなたの使いやすいソフトを使い効率よく作ることを優先させると良い、と考えています。

それについて、以前の受講生の質問に対する返答もとにまとめました。

 

受講生質問:                                       
以前に受けたwebの講座で、webページのデザインをする場合は、PhotoshopかXDでやる人が大半でIllustratorでやる人はほとんどない、と聞いたことがあります。
ですが、私は背景の装飾やボタンなどは、Illustratorの方が作りやすくて、Illustratorで作ったものをPhotoshopで配置したりしていました。

なんだかそれが乱雑だなぁ、と思ったのですが、実際webのページのデザインをIllustratorで作成する人は少ないのでしょうか?

講師返答:                                        
少ない、多い、で言えば、確かにIllustratorでWEBデザインする人の方がまだ少ないかもしれません。
元々はIllustratorは紙媒体を作成するために開発されたソフト。
Photoshopは写真加工のためのソフトなので、カラーモードがRGBに対応したソフトでした。

そのルートをたどれば、必然的に、Photoshopの方がWEBデザインに向いていて
WEB系のものはPhotoshopで作ると言うのが常識でした。
サイト制作のための拡張機能も多くあります。
その流れから、WEBデザイン= Photoshopが一般的である。
または、数年前からWEBデザインをしている人はPhotoshopを使うと言えるかもしれません。

ただ時代は変化していて…

IllustratorもPhotoshopとの互換性ができてその後もさらに改良され続けてきた。
IllustratorはWEB制作との互換性はさらに上がり、カラーモードRGB、単位がpx(紙媒体は通常mm)でも全く問題なく作業でき、WEBデザインを作るためのアセット機能なども充実するようになりました。

ですので、私の考えは、

自分が得意、使いやすいと思うソフトで作業すること、が、効率よく成果も出しやすいものだと思います。
また、やはり細かいデザインの作業はベクトル画像が特徴Illustratorの方が向いていると思っています。

ただ注意しなくてはいけないのは
デザインした後に構築を依頼するコーディング会社(または個人)が、
Illustratorを扱えるかを確認しておくことです。
なぜなら、まだ一般的にはWeb = Photoshopと言うところが多く、プログラミングやコーディング会社にIllustratorが触れる人がいないと言う状況にあるからです。
納品先の業者(コーディング会社)はPSDデータのみしか扱えないと言うのは珍しくないからです。

その場合
・自分で画像書き出しをして(スライスの作業)画像にして納品
または
・Photoshopにデータ変換して納品
する必要が出てくるからです。

スライスの作業は、コーディングをする側に任せたい作業なので
・Illustratorを扱える業者(個人)を探しておく必要があります。

このどれもが難しければ、初めからPhotoshopで作成していくほうが良いでしょう。

また、前提として
これはIllustratorの方が得意な方に向けて、イラストレーターでの作成を推奨していると言う話ですが
Photoshopの方が得意と言う方は、わざわざWEBデザインをIllustratorで作成する必要は全くないです。

私の場合で言うと、
イラストレーターで作成、aiをそのまま納品
→イラストレーターを触れるスライス作業から構築までする、が、70%

Figmaで制作
→そのままリンクURLをコーダーに共有する、が、30%(FigmaについてはFB会でお話しします。)

XDソフト・Figmaについては、ホームページの導線、ページ構成やテンプレート制作、フレーム制作するのに便利です。
また、デザインした数枚のwebページをクライアントに確認してもらう導線を確認してもらうときに役立ちます。
Illustrator等が触れたらXDソフト・Figmaは自主学習で十分に触られるようになるソフトだと思います。
WEBサイト制作といってもいろいろな過程があるので、XDソフト・Figmaはどちらかと言えばディクション向きです。

 

 

コメント