この記事を読んでほしい人
- 何をもとにコーディングするのか知らない人
- デザインツールについて知りたい人
XD・Photoshop・Illustratorは、Adobe社が提供しているデザインをするためのツールです。
デザインツールなので、Webデザインや、その他のデザインに使われます。
ただこれらのツールの使い方は、フロントエンドのエンジニアも知っておくべきかなと思います。
なぜかといいますと理由は単純で、コーディングするときに必要な情報を抜き取るためですね。
その他にも、ちょっとした画像加工ができると、デザイナーに頼らず作業できます。
ある程度画像加工ができるようになって、UI/UXにある程度詳しくなることができれば、
デザイン・コーディングを一貫して担うこともできるかと思います。
それぞれ何ができるか、書いていきますね。
XDの特筆すべき点
XDは主にWebサイトやアプリデザインに特化してます。
細かい写真の加工や文字の調整などは、Photoshop・Illustratorの方が向いている印象です。
XDの特筆すべき点は、
- 操作が簡単・直感的で扱いやすい
- 「PCやスマホで見たときのざっくりした見た目」を確認することができる
- Webサイトやアプリによく用いられるレイアウトを簡単に実装できる
このあたりになります。
操作が簡単・直感的で扱いやすい
XDの操作パネルは、Photoshop・Illustratorで見るよりも簡易的です。
初心者でも直感的に扱うことができるでしょう。
ただその分、画像やテキストの細かい調整をすることにはあまり向いておらず、
「CSSで調整できる部分」は、XDの機能を使って実装できる感じです。
ちょっと深堀りすると、
Webサイトは画像を多用するより、基本的にはCSSを使って実装した方がより良いです。
画像に比べてCSSは軽いのでサイトスピードに影響しづらいですし、
テキストなんかも画像でつくってしまうと、
デザインツールを挟んで、コーディングに反映させないといけないです。
テキストをコーディング側だけで書き換えるのみで修正できたほうが、即座に対応できます。
「PCやスマホで見たときのざっくりした見た目」を確認することができる
また、「PCやスマホで見たときのざっくりした見た目」を確認することができます。
具体的に言いますと、Webデザインを制作するときには、
サイト1ページ分全体が見えるようにデザインすることが一般的です。
そのサイト1ページ分に対して、PCで見える範囲、スマホで見える範囲を設定できます。
その後、確認する機能を使うとPC画面やスマホ画面で見たときの見た目を確認できて、
スクロールしてサイト全体を見る、みたいなことができます。
また、ボタンをホバー、つまりマウスをボタンに乗っけたときに
どんな変化をするのか、表すことができます。
さらに、どのボタンがどのページに遷移するのか、まとめることができます。
総じて言えることは、
「デザイナーからコーダー・フロントエンドエンジニアに意図を直感的に伝えることができる」
ということがかなりの強みです。
Webサイトやアプリによく用いられるレイアウトを簡単に実装できる
レイアウトを実装する機能が多数あります。
たとえば、よく使われる「2カラム、3カラムレイアウト」が、簡単に実装できます。
具体的には同じパーツを、同じ余白を保って並べる機能ですね。
並べたパーツは一つの大きさを変えるだけで、他の並べたパーツも同じように変化してくれます。
要はコーディングの特性に合わせた動きになってくれます。
コーディングだと、同じCSSのクラス名がついているパーツに対して、CSSの記述を変えると、全て同じように変わってくれますよね。それに近い感覚です。
また、パーツをコンポーネント化といって、部品化してくれる機能があります。
これも同じように、一つのパーツのデザインを変えると、コンポーネントで作られたデザインは一気に同じデザインに変化します。
デザイナーからコーダー・フロントエンドエンジニアに意図を伝えるときは、
サイト1ページ分だけでなく、コンポーネントの部品も明確に示しておくと丁寧ですね。
Photoshopの特筆すべき点
Photoshopは主に画像加工に特化してます。
特筆すべき点は、
- 画像の切り抜きや透過、色の調整など細かい設定ができる
- 画像を組み合わせてデザインできる
このあたりになります。
画像の切り抜きや透過、色の調整など細かい設定ができる
画像の切り抜きや透過ができます。
たとえば、人が写っている写真の「人だけ」を切り取ることができます。
この作業を「パス抜き」と言ったりします。
昔はできなかったみたいなんですが、最近ではある程度コンピュータが色の違いを認識して、
自動で人の周りをパス抜きしてくれる機能とかあります。（めっちゃすごい。）
また、背景にある物体をなくして、背景をなじませる（もとから物体がなかったように加工する）
といったこともできます。（これもすごい。）
この機能は「コンテンツに応じた塗りつぶし」などの機能で実装できます。「コンじる」と呼んでいる記事をよく見かけますね。
あとは、背景を透過したり、色の調整ができます。
色の調整は、明度、彩度などを調整して、より鮮やかにしたり、逆にシックにしたりできます。
画像を組み合わせてデザインできる
「画像の切り抜きや透過」に関連するんですが、
加工した画像同士を組み合わせて、一つの画像にできます。
透過した画像同士をきれいに繋げて、一つの画像にしたり、といったことですね。
あとは自分が経験してきた中で、ある企業の商品リニューアルがあったんですが、
「旧商品を新商品の画像と入れ替える」という作業を100枚近く行なったことがあります。
やり方としては基本的に、
新商品画像のpsdデータ（Photoshopのデータ形式です。）を
旧商品が載っている画像の上に乗っけて、背景とかは変えずに商品だけ変える
といった作業です。
場合によっては、背景と商品画像をうまく繋がらなかったりしたので、
きれいに繋げるために微調整したりだとか、色々やりましたが、Photoshopの機能を使って
すべて対応しました。
むっちゃ余談ですが、どちらかといえば管理が大変で、専用のスプレッドシートを作ったりとかやりましたね。
効率よく作っていく上ではツールをうまく活用することがおすすめです。
Illustratorの特筆すべき点
Illustratorは主に画像加工に特化してます。
特筆すべき点は、
- パスデータに強い
これですね。
パスデータに強い
パスデータは、他の画像データと比較して、「画像を綺麗に見せることができる」という特徴があります。
人の目で見たら、同じ画像をパスデータで作っても、その他の画像データで作っても、同じように見えるんですが、
コンピュータ上では、パスデータは「画像の外形をくり抜いた外形」のような形で認識されます。（ざっくりした説明ですみません。）
このパスデータ、Web上で反映させたいときは、svgとして書き出すことをおすすめします。
svgで書き出してWeb上に反映させると、画像を拡大縮小しても綺麗に見えます。
画像の拡大縮小は、レスポンシブデザインが一般的になってきた現在では気をつけたいところです。
デバイスの幅によって画像の大きさが変わることも多いので、svgは使えるところで使った方が良いと思います。（写真とかでは使えないです。。）
このパスデータは、コードで色を容易に変えることができる、というところも特筆すべき点です。
デザインツールが使えればフロントエンド業務も楽しくなる話
僕の個人的な意見ですが、
デザインツールが使えれば、幅も広がってフロントエンド業務は楽しくなります。
コーディングだけをやっていると、「画像が綺麗に反映できない。。」とか
「レスポンシブデザインに特化した画像を作りたい。。」とか
色々疑問ややりたいことが出てくると思います。
フロントエンド初学者のうちは、まずコーディングをできるようになった方がいいと思いますが、
ぜひデザインツールも使いこなせるようになって作業を楽しみましょう！それでは〜。
