Webデザイナーにはillustratorは必要？基本操作とデザインのコツ
「Webデザイナーにはillustratorは必要？」と疑問に感じる方もいるでしょう。
WebデザイナーにとってillustratorやPhotoshopは、デザインの制作現場では欠かせないソフト。
しかし、現在Webデザイナーとして活動している人の中には、Photoshopのみでデザインする人がいることも事実です。
今回はWebデザイナーにとってillustratorの必要性、illustratorの主な機能、Webデザインのコツや注意点などについて詳しく紹介します。
目次
Webデザイナーにはillustratorは必要？
結論、Webデザイナーにはillustratorは必要です。
なぜなら、Webデザイナーとしてデザインの現場で活躍するためには、デザインに関する知識だけでなくillustratorやPhotoshopを使いこなせる技術が求められるからです。
もちろん、Photoshopでデザインカンプを作ることは可能ですが、Photoshopのみを使用できる人よりもillustratorやPhotoshopを使いこなせる技術がある人のほうが需要が高いです。
これは、就職して企業に勤める場合も、転職する時も、フリーランスで活動する場合も同じことが言えます。
そのため、Webデザイナーを目指しており、illustratorを使ったことがない人や使いこなせていない人は、illustratorとPhotoshopどちらも使いこなせる技術を備えておきましょう。
illustratorの7つの基本操作
続いて、illustratorの主な基本操作について紹介します。
以下で紹介する基本操作はWebdデザイナーを目指すなら最低限覚えておきましょう。
illustratorの基本操作1.ファイルを保存する
illustratorでデザインを作成したとしても、保存できなければ意味がありません。
そのため、ファイルの保存方法は事前に把握しておく必要があります。
illustratorで作成したものを保存する場合、上部に表示されているメニューバーの「ファイル」を選択し、保存・上書き保存をします。
また、ファイルを保存する時はショートカットを覚えておくと便利です。
- Mac：「command」+「S」
- Windows：「Ctrl」+「S」
使用しているパソコンによってはファイルサイズが大きくなると、作業中にフリーズしてしまうこともあるため、頻繁に上書き保存する癖をつけるようにしましょう。
illustratorの基本操作2.図形を描く
illustratorでデザインを作るには図形の描き方を覚えるのが必須です。
illustratorでは簡単な操作で四角や楕円、円などの図形を作ることができます。
画面左側に表示されているツールバーの長方形ツールを選択し、ボード上でドラッグすることで簡単に自分の好きな大きさの図形が描けます。
長方形以外でも角丸長方式ツール、楕円形ツール、多角形ツール、スターツール、フレアツールなどを用いてさまざまな図形を実際に作ってみてください。
また、この時に「shift」を押しながらドラッグすると均一な図形を作ることができます。
illustratorの基本操作3.選択・移動・削除
次に、選択・移動・削除方法ですが、実際に図形やイラストなどを描画した後でもできます。
全て描かれているアイテムを変更するためには左側のツールバーから「選択ツール」を選択し、編集したいアイテムをクリックします。
選択したままマウスを動かすと、ポインターの色が変わり、移動や削除などの編集ができるようになります。
illustratorの基本操作4.重ね順を変える
illustratorで作成したオブジェクトは基本的に新しく配置したものが手前に表示されます。
この順番を変えるためには、手前にしたいオブジェクトを選択して右クリック、「重ね順」から選択すると前面や最前面に表示させることができます。
illustratorの基本操作5.文字を挿入する
続いて、文字の装飾です。
illustratorで文字を挿入する時は「Ｔ」マークアイコンを選択して、実際にアートボードで文字を入力してみましょう。
クリックした場所が選択された状態でキーボードで文字を打つと表示されるようになります。
サイズや色などの簡単な変更であれば、コントロールパネルから変更可能です。
illustratorの基本操作6.整列で綺麗に並べる
illustratorで作成した図形や文字などのオブジェクトの位置を揃えたい場合はillustratorで整列パネルを使用すると簡単にできます。
メニューバーから「整列」をクリックすれば水平・上下など、揃えたい位置にキレイに揃えることができます。
また、文字は文字、図は図で揃えるのではなく、表示されているオブジェクト全てを均一に揃えることも可能です。
illustratorの基本操作7.画像を配置する
最後に、アートボードに画像を配置してみましょう。
illustratorでは、使いたい画像をアートボードにドラッグするだけで簡単に画像を配置できます。
大きさも自由に変更できますので、まずは上記で紹介した基本操作が直感的に行えるようになるまで練習しましょう。
少しのアイデアで大きく変わる！Webデザインのコツ3つ
Webデザインは、少しのアイデアだけでもデザインの質を上げることができます。
ここでは、初心者でもすぐに実践できるWebデザインのコツを紹介します。
それでは、一つずつ確認していきましょう。
Webデザインのコツ1.余白を付ける
初心者の人に多いのが、何でもかんでも画面いっぱいに詰め込んでしまうことです。
余白を作らない方がいいのでは？と思う人もいると思います。
ですが、余白無しで隙間なくオブジェクトを詰め込んでしまうと、逆に見えづらく、伝えたい部分が協調できなくなります。
余白を上手く使うことで届けたい、見てもらいたい部分を協調すことができ、デザインの質が高まります。
また、文章が長い場合は文章と文章の間の余白を取ると、スッキリとした印象を与えることも可能です。
Webデザインのコツ2.装飾のアイデア
レイアウトは、デザインの基本原則を使うだけで初心者でも劇的に改善します。
デザインの基本原則は以下の4つです。
- 近接
- 整列
- 反復
- 対比
初心者の人は上記の基本原則を意識してみてください。
Webデザインのコツ3.写真の色
たくさん色を使っているWebデザインが全て良いというわけではありません。
写真の色が多いと、逆にゴチャゴチャして大切な部分や協調したい部分が分かりづらくなったり、目に優しくないサイトになってしまいます。
基本的に、使用する色は3～5色程度に抑えるのがポイントです。
また、色には相性があり、背景と文字の色の要素はしっかりと工夫するようにしてください。
色だけでもサイトの内容や雰囲気を分かりやすく伝えることができます。
illustratorだけでWebデザインはできる？
結論から言うと、illustratorだけでWebデザインはできます。
最近ではillustratorだけでWebデザインをする人が増えてきています。
ただし、逆にPhotoshopのみでWebデザインをする人がいることも事実です。
一般的には、PhotoshopはWebサイト全体のデザインやバナーの作成、画像可能などを行い、illustratorでアイコン、インフォグラフィック（図形）を作成することが多いです。
どちらを使用してもWebデザインはできますので、まずは一つに絞って経験を重ねていきましょう。
IllustratorでのWebデザインの注意点3つ
最後に、illustratorでのWebデザインの注意点を見ていきましょう。
それでは、それぞれ解説します。
IllustratorでのWebデザインの注意点1.同じillustratorでも設定で大きく変わる
同じillustratorでも設定で大きく変わります。
例えば、普段使い慣れているドキュメントで制作してしまう人もいますが、設定次第では単位がmm、CMKYカラーで解像度は300ppiになり、色が変化したりおかしなデザインとなってしまいます。
モバイルやWebから新しいドキュメントを作成すると単位はピクセル（px）、RGBカラーで、解像度は72になるためスムーズに進めることが可能です。
IllustratorでのWebデザインの注意点2.閲覧者のモニタサイズを考える
実際に作成したWebサイトを閲覧するユーザーのモニタサイズは千差万別です。
大きなモニタで表示されるデザインはインパクトもあり、魅力的ですが、スマホ端末で見るとデザインが一つの画面に収まらずに見づらいサイトになともあります。
そのため、Webサイトを作成する時はノートパソコンやスマホの端末で見ることも考えて作成することが大切です。
IllustratorでのWebデザインの注意点3.設計脳になる
illustratorの操作やWebデザインに慣れてくると単純作業が続き設計脳になることがあります。
Webデザインは流行やクライアントが求める要望などを叶える必要があり、知識や情報を常に新しい状態にしておく必要があります。
そのため、自分の考えだけに縛られずに、柔軟に対応できるWebデザイナーになるのが理想です。
illustratorのみでWebデザインはできる
今回はWebデザイナーにとってillustratorの必要性、illustratorの主な機能、Webデザインのコツや注意点などについて詳しく紹介しました。
Webデザインはillustratorのみで進めることができます。
ですが、プロのWebデザイナーはillustratorとPhotoshopの両方を使いこなせている人が多いです。
しかし、同時に覚えるのは難しいため、illustratorでのWebデザインに慣れてきたら、Photoshopも利用して仕事の幅を広げてみてはいかがでしょうか。
こういったことをご相談頂いています。
- ・初心者でも大丈夫ですか？
- ・他のスクールとの違いは何ですか？
- ・副業からのスタートでも大丈夫ですか？