WEBデザイナーなら知ってて当たり前！？仕事で使うAdobe ツールのわざわざ話すほどでもない基礎をここでおさらい

WEBデザインの制作では、コードをかく前に、WEBサイトで使用する素材（写真やロゴ、イラストなどの各パーツ）を決めてから、「ワイヤーフレーム」と呼ばれる設計図を制作します。

あわせて読みたい

ここで徹底理解！デザインの設計図「ワイヤーフレーム」を作成しサイト制作を加速させる方法とは？

WEBサイト制作では、コードをかく前に、「ワイヤーフレーム」と呼ばれる設計図を作成します。しかし、ワイヤーフレームを作成する方法は、手書きからツールまで何種類もあり、デザインも無数なため、悩まれている方は結構多いのではないでしょうか。 […]

その際、WEBデザイナーが多用するツールは、Adobe（アドビ）という会社が提供しているアプリケーションです。

皆さんの中には、「フォトショ」や「イラレ」というようなツールの略称を聞いたことがある方もいらっしゃるのではないでしょうか。

本記事では、WEBデザイナーが仕事で使うAdobeの代表的なツールを紹介しますので、「WEBデザインで使われるAdobe系のツールの違いがわからない」という方、ぜひ参考にしてみてくださいね。

Adobeの代表的なツール

通称Adobe（アドビ）と呼ばれる会社ですが、正式にはアドビシステムズという社名で、本社はアメリカ合衆国にあり、日本法人であるアドビシステムズ株式会社は、東京都品川区に所在しています。

これまでに多数の製品をリリースしてきましたが、有名なアプリケーションを例に挙げると、Illustrator（イラストレーター：略してイラレ）を1987年、Photoshop（フォトショップ：略してフォトショ）を1989年に発表。

2012年には、月額課金制（サブスクリプション）のAdobe Creative Cloud（インストール型アプリ）を発表し、同時に、それまで販売してきたAdobe Creative Suite（パッケージ型ソフト）を中止し、2013年にはAdobe Creative Cloudへ完全に移行。

現在、以下の3つのアプリケーションがWEBデザインで多用されています。

では、それぞれの特徴を紹介しますね。

PhotoshopでWEBデザインカンプ制作

ビットマップデータ（画像の拡大縮小で画質が劣化する）を扱うPhotoshopは、ドットの集合体で表現されている写真の加工や編集に向いていることから、画像編集で最も使われるツールです。

複雑な画像処理や、軽度の補正や加工を施したりする場合は、Photoshopがよく利用され、どちらかといえば、印刷物の制作よりもWEBサイトの制作で使われます。

― Photoshopの得意分野

・写真の色味や明るさの調整

・写真に写る不要なオブジェクトの消去

― WEBデザインカンプ制作

WEBサイト内の要素の位置関係を指定したワイヤーフレーム（レイアウト）に、具体的な色や画像の指定を行ったものをWEBデザインカンプ（またはモックアップ）といいます。

デザインカンプは、WEBサイトのデザインとしての完成図をイメージする目的で作成され、Photoshopの「デザインスペース」機能を使用して簡単に制作することができます。

Photoshopで制作したデザインカンプから、画像を複数に分割する「スライス」という機能を利用して、任意の範囲のパーツをそのまま切り出すことも可能です。

今後、WEBサイト制作をしてみたいというIT業界未経験者の方は、まずはPhotoshopの操作を習得すると良いですよ。

さらに、プロのWEBデザイナーを目指したいという場合は、Photoshopと併せて、次に紹介するIllustratorも扱えることが望ましいですね。

Illustratorで各パーツ制作

ベクターデータ（画像を拡大縮小しても画質が劣化しない）を扱うIllustratorは、くっきりとしたデータが作れることから、ロゴや図表、グラフなどの各パーツの制作に向いています。

また、図柄の細かな書き込みやテキスト、図形などの各オブジェクトのレイアウトをスムーズにデザインすることができ、どちらかといえば、WEBサイトの制作よりも印刷物の制作で使われます。

― Illustratorの得意分野

・様々なサイズのロゴ制作

・パーツを組み合わせた図表やグラフの制作

Illustratorはクリエイターがよく利用するツールですが、WEBデザインやコーディングする時に、Illustratorから素材を切り出さなければならないことが多々ありますので、IllustratorもWEBデザイナー必須のツールです。

実は、ひと昔前なら、PhotoshopとIllustratorのみでも十分でした。

しかし、今の時代は、次に紹介するAdobe XDという新しいツールもマスターすることをおすすめします。

動的なWEBサイトをほとんど同じようにワイヤーフレームとデザインカンプで再現することが可能で、作業時間も圧倒的に短縮できるからです。

Adobe XDでワイヤーフレーム+デザインカンプ制作

Adobe XDは、共同作業を促進するパワフルで使いやすいプラットフォーム。webサイトやモバイルアプリ、音声インターフェース、ゲームなどのデザイン制作をチーム全体でスムーズにおこなうことができます。

（中略）

Adobe XDなら、ユーザーがアプリからまったく離れずに、完全なインタラクティブエクスペリエンスを簡単に作成できます。

― Adobe 公式サイトからの抜粋 https://www.adobe.com/jp/products/xd.html

少々文章の読解に時間がかかりそうな気がしますので、分かりやすく具体的に説明していきますね。

今の時代のWEBサイトは、WEBサイト内のボタンにカーソルを合わせるとボタンの色が変わったり、ボタンをクリックするとページが遷移したりするのは常識ですよね。

ワイヤーフレームとデザインカンプを制作する際、Photoshopではここまでの再現はできませんが、なんと、Adobe XDは簡単にできるのです。

また、デザインカンプで使用する素材もPhotoshopとIllustratorから持ってくることができるだけではなく、既存のWEBサイトからドラッグアンドドロップで簡単に持ってくることもできるのです。

そして、制作者側のメリットだけではなく、クライアントに対しても非常にメリットがあります。

Photoshopで作るワイヤーフレームやデザインカンプよりも、Adobe XDで作るものの方が、圧倒的にWEBサイトに近いイメージを提示することができるので、コーディングに入る前に、クライアントとのミスマッチを減らすことが可能なのです。

Adobe XDの操作は難解のように思われがちですが、意外と簡単で、PhotoshopとIllustratorを完璧にマスターするよりかは、Adobe XDの習得を進めた方が、今の時代は絶対イイですよ。

ちなみに、PhotoshopとIllustratorの無料お試し期間は限定されているのに対して、Adobe XDには無料版（機能やストレージが限られている）が常備されていますので、IT業界未経験者の方が練習で利用するのにはうってつけです。

まとめ

本記事では、WEBデザイナーが仕事で使うAdobeの代表的なツールを紹介しましたが、一つでも多くのツールを操作できることで、IT業界だけではなく他の業界でも役に立つシーンは必ずあります。

今後もIT業界での人材不足は深刻な問題ですし、グラフィックデザインやUI/UXデザインもできるWEBデザイナーの需要は伸びるでしょう。

あわせて読みたい

初学者必見！WEBデザインを勉強して転職するには！？独学でステップアップに挑戦

あらゆる仕事に必要不可欠なデザイン。例えば、ロゴマークやポスターを作るグラフィックデザイン、商品を作るプロダクトデザイン、家やビルを建てる建築デザインなど、全ての仕事でデザインは重要な役割を果たしています。特に、現代社会で需要が増えている[…]

それには、Adobe系のツールのスキルは必須ですので、それぞれの特徴を理解し、今のうちから少しずつ学んで、どんどんステップアップしてくださいね。