今回は、Web制作に必要不可欠なデザインツールについて調査しました。特に人気のある Illustrator、Photoshop、Adobe XD について、各ソフトが得意とする作業をご紹介します。
Illustrator
文字の装飾や、図形の描画など、デザイン作成を得意とするソフトです。点の位置と線、色などを数値データとして記憶する「ベクター形式」で描画します。縮小・拡大しても綺麗に描写する点が特徴です。
■Illustratorが得意な作業
- ・ロゴやアイコンの作成
- ・Webサイトのレイアウト作成
■役立つツール
- シェイプ形成ツール：ペンを使わずに記号だけでイラストを描くことができます。
- 線幅ツール：線のオブジェクトに対して、簡単に強弱をつけられます。一定の太さだった線にメリハリが生まれ、より特徴的な線を描くことが可能です。
■Illustratorのデメリット
数値データで表現するため、写真や細かいイラストなどの表現は苦手とされています。複雑な画像を編集する場合は、これから紹介するPhotoshopのご利用をおすすめします。
Photoshop
色彩の補正や写真の加工など、画像編集を得意とするソフトです。複数の点を集めて表現する「ラスター形式」で描画します。“にじみ”やグラデーションなど、多彩な色を立体的に描写する点が特徴です。
■Photoshopが得意な作業
- ・色彩の補正（例えば、フルカラーからセピア調に変更、青みを強くした色調に変更など）
- ・Webページ用の画像の加工や合成
- ・CG・イラストの作成
■役立つ機能
- アクション：繰り返し行う単純作業を記憶し、自動的に実行することができます。
- スクリプト：アクションは、複雑な条件や、ファイル操作を記憶することができません。しかし、スクリプトを使用することで、それらの作業を記憶することができます。より複雑な作業はスクリプトを利用するようにしましょう。
■Photoshopのデメリット
拡大すると画像がぼやけてしまい、劣化して見える点がデメリットです。
Adobe XD
Webサイトやアプリなどの、プロトタイプ作成に特化したUI/UXデザインツールです。初心者でも簡単に、ブログやWebサイトのデザイン作成が行えます。
■Adobe XDが得意な作業
- ・Webサイトのデザイン作成
■役立つ機能
- リピートグリッド：繰り返し使いたいデザインを作った後「repeat-grid」をクリックして、繰り返したい方向にドラッグします。この手順だけで、コンテンツを手間なく増やすことができます。
■おすすめ情報
Adobe XDの公式サイトから、XDの主要機能を試せる「Adobe XD スターターキット基礎編＆中級編」がダウンロードできます。まだXDを未体験の方は、この機会に試してみてはいかがでしょうか。
Adobe XD 公式サイト(https://www.adobe.com/jp/products/xd.html)
Webサイトのデザインツールを3種類ご紹介しました。それぞれのソフトには特徴があります。ご自分の目的にあったデザインツールを利用して、素敵なWebサイトを作成してくださいね！