doors doors

WEBデザイン|PSかAIかXDか

  • HOME
  • OTHERS
  • WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD

この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討することが多く、結果的によく分からないということになります。また、PhotoshopやIllustrator、熟成されるXDなど、バージョンアップごとにアプリケーションのボーダーレスが顕著で、一長一短です。

ここで提案するのは、デザイナーとエンジニアの齟齬をなくすための方法が行われているか、公開されるまで、それぞれの役割(特に後工程)によって決めるのが良いのではないか、ということです。
それが明確であれば、WEBデザインをするためのアプリケーションにそこまでこだわる必要はないと考えます。データの互換性は注意しなければいけませんが、使い慣れたアプリケーションで作るのが早く、キレイに仕上がるのではないでしょうか。(ここで紹介するのは小規模なサイトです。何百ページなどという大規模なサイト制作では、より包括的なガイドラインが必要になるでしょう。)

なぜ、Photoshopだったのか

一番の要因は、WEBはRGBでピクセル基準であることです。それと文字詰めや組版がデバイスフォントでは不要なため、細かい設定をしなくて良いからではないでしょうか。
しかし、Illustratorを使える方なら分かる通り、RGBもピクセルもIllustratorで可能です。

いきなり結論になりますが、RGBでピクセルで作成されているのが良いということです。CMYKで作成してもRGBに変換してしまうので結果として同じですが、黒が(C=0,M=0,Y=0,K=100)≠(R=0,G=0,B=0)でないことを理解しておく必要があります。
因みにリッチブラックや4色ベタ(印刷ではありえませんが)だとR=0,G=0,B=0になります。

オブジェクトをレイヤーで管理するか

Photoshopにレイヤー概念が搭載された時は歓喜しましたが、今や当たり前で、逆にIllustratorにレイヤーをグルーピングする機能がないことを残念に思うこともあります。
そもそもIllustratorには、始めからオブジェクトにレイヤー概念があったので、それが視覚化されたということだと思います。
Photoshopはオブジェクト=レイヤーですから、作れば作るほどレイヤーが増えていきます。統合するのがNGならグループレイヤーで管理していくわけですが、オブジェクト=レイヤーには変わりません。

デザインする側から言うと、このレイヤーが足かせになる場合があります。
例えば、A,B,C,Dというオブジェクトがあったとして、AとB、CとDでグルーピングしていたところ、修正が入りBとC、AとDというグループにして、レイアウトも変更、そこへB,CとA,Dに共通するEというオブジェクトを追加しなけばならない、となるとPhotoshopのレイヤーパレットはお祭り騒ぎです。
そういう意味では、レイヤーはあくまで視覚化しているだけ、オブジェクト単位でグループ化できるIllustratorが分かりやすく、扱いやすいのではないかと思います。

Photoshopはレイヤーをアセット書き出しできる

詳しくはこちら(Photoshop|画像アセット)を見ていただくと分かりますが、Photoshopはレイヤーを直接、ファイル化する機能が備わっています。一度、設定すると自動で書き出してくれるので便利です(ファイル形式、JPEGの圧縮率なども可能です)。しかし、先ほどのように修正が多かったり、レイアウトが複雑になるとそれらを書き出すゴールを考えながらレイヤーを作り、デザイン・レイアウトを行うのはなかなかハードだなと思います。

Illustratorのレイヤーは視覚化しているだけなので、Photoshopのようには機能しませんが、画像を書き出すアセット機能はあります。何だか、結果的にIllustratorの方が良いように聞こえてきますが、レイアウトが画一的で、変更が少ないデザインであればPhotoshop、一旦、デザインを作らなければいけない(デザイナーあるあるですが)とか、サイズ含めて変更が多く見込まれるなどといった場合は、Illustratorに軍配があがると思います。

解像度から解き放て

スマートオブジェクト

画像に関しては、PhotoshopもIllustratorも解像度に依存しています。Illustratorも配置された画像の持つ解像度以上には質を高めることができません。Photoshopはスマートオブジェクト化することで可逆的にサイズを変更できますが、そのファイル自体が持つ解像度を逸脱することができません。

よく言われる「幾つで作れば良いの」

表示ピクセル

今までは、Macintoshなら72dpi、Windowsなら96dpiと言っていたと思いますが、スマートフォンが劇的に変化させたのです。表示ピクセルは小さくても解像度が高い(実ピクセル数が大きい)ため、表示ピクセル等倍でデザインすると悲惨な状態になります。
一般的には2〜3倍のサイズでデザインするのが良いと思いますが、これがパソコンモニタにも波及してきたわけです。
ただ、ポジティブに考えれば、どちらも2〜3倍で作ればよいわけで、デザインデータ上はPCもSPも同じサイズ感で作ることができるメリットがあります。とは言え、絶対的に画面が横か縦かの違いがあるので、そのまま横移動させられることばかりではなくデザイン・レイアウトは必須です。

最後に

XDはいろいろとできるようになったと思いますが、PhotoshopやIllustratorに匹敵する操作性、機能があったなら100%、XDで制作して良いかなと思います。レスポンシブだし、サイトマップを動的に見せることができるし、カルーセルの動きを見せることも・・・。個人的にはがっつりデザインをするというより、ああしたい、こうしたいといったマインドマップ的なアプリケーションではないかと思います。

忘れていけないのは、どのアプリケーションで作成するということよりも、RGB、ピクセル、表示デバイスサイズ、画像の解像度などWEB用として準備されているか、パララックスやアニメーションなどがエンジニアとコンセンサスを得られる説明になっているか、そうしたコミュニケーションが大切です。

関連記事

AfterEffectsでボーリングやってみよう

最近無性にボーリングがやりたくなる自分です。昔のようにパワーがないので、行く人に声かけて、グループ分けして、賞品考えて… なんてことを考えると急に億劫になってし...

aspect

要素のアスペクト比(縦横比)を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。 単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に...

Adobe AfterEffects

AfterEffects|スプラッシュスクリーン

AfterEffects|これはもしかして・・・ Photoshopでは有名なスプラッシュスクリーンの隠し絵柄バージョン。After Effectsにも存在して...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...