「Illustrator」で何ができるの？Photoshopとの違いは？

前回はプロのWEBデザイナーも良く使っている画像編集ソフト「Photoshop」について紹介しました。
WEBデザインを作る時に便利なツールは、他にも様々なものがあります。
Photoshopと同じくらいメジャーなものとして、「Illustrator（イラストレーター）」が挙げられるでしょう。
今回は谷宜樹が、「Illustrator」がどんなツールなのか解説します。

■「Illustrator」って？

Illustratorは、ロゴや画像、アイコンなどを作るのに使われるツールです。
ポスターなどの印刷物をデザインする時に利用されることも多いでしょう。
これに対し、主に写真などの画像を編集するために使われるのがPhotoshopです。
一からデザインを作り出すのがIllustrator、用意した写真や画像を元にデザインを加えていくのがPhotoshopと覚えてくださいね。

■2つのツールを使いこなす方法も

IllustratorとPhotoshop、両方を使ってデザインすることも可能です。
谷宜樹も、まずPhotoshopで写真のデータを補正し、Illustratorでイラストを加えたりレイアウトしたりということがあります。
それぞれ得意とするものが違うので、両方使えばより良いものが作れるでしょう。
どちらか一方だけを使っていると、「こんな機能があったら・・・」と思うことも。
そんな時には、別のツールが使えないか試してみると良いですね。

■Illustratorはどうやって使うの？

Illustratorを提供している「Adobe」という会社は、画像編集ソフトなど様々なツール、アプリケーションを開発しています。
PhotoshopもAdobe社が提供しているツールの1つです。
Adobe社のツールは、サブスクリプション形式で利用することができます。
それぞれのツールを単体で使うプラン、Illustratorを使うためのプラン、全てのツールが使えるプランなどがあります。
どんなプランが自分に合っているかは、Adobe社公式サイトを見て判断してくださいね。
IllustratorやPhotoshopの他にも、20以上のツールが提供されています。
気になる人はチェックしてみてくださいね。

■Illustratorで作れるもの

Illustratorは多くの機能がありますが、基本的に次のようなものを作成できます。

・図形
円、四角形、星型など、様々な図形をツールバーから選択して作れます。
数値を入力するなど、細かい設定をすれば変形も可能です。

・ロゴ
文字を指定して、装飾やイラストの追加ができます。
テンプレートに頼らない自由なデザインをしたい人におすすめです。

・イラスト
ペンツールを使えば、自由に絵を描くことができます。
また、図形を組み合わせたアートにしても良いでしょう。
マウスでも描きやすいので、谷宜樹も手書きイラストを加えたい時に使います。

今回は、Illustratorについて紹介しました。
WEBデザインにも便利なツールですが、デジタル画を描いてみたい人にもおすすめです。
テンプレートに使いたいロゴやアイコンがなかったら、Illustratorで作ってみても良いですね。

これさえあればOK！WEBデザインには「Photoshop」を使おう

WEBデザインに使うソフトは、様々なものが登場しています。
しかし谷宜樹は、プロでもアマチュアでもとりあえず「Photoshop（フォトショップ）」から始めてみるべきだと考えます。
今回は、WEBデザイナーも使っている代表的なデザインソフトPhotoshopについて解説していきましょう。

■Photoshopでできることは？

Photoshopは、写真の修正や補正、合成や切り抜きもできる画像編集ソフトです。
制作のプロであるクリエイターやデザイナーから、趣味で写真を撮る人まで多くの人に愛されています。
このソフトは、人物の肌をキレイに見せる、余計な被写体を削除する、または別の写真と合成させるということも可能です。
さらに、被写体の色を変える、写真全体の色味やテクスチャを変えることもできます。
そのほか、写真を使わずにCG（コンピューターグラフィック）の作成もできてしまうので、これ1つあればもう何も必要ないかもしれません。

■WEBデザインで使える！プレゼンに活かせる機能も

Photoshopでは、WEBデザインに使う画像やボタンも作成できます。
サイト作成ツールなどにはテンプレートが用意されていますが、デザインの幅が決まってしまいますよね。
Photoshopでオリジナルのパーツを作成すれば、より自由にデザインできるでしょう。
スライドショー機能もあるので、作ったデザインを確認したり、クライアントに説明したりするのにも便利です。

■どうやって利用するの？使用料が必要

Photoshopはサブスクリプション形式のソフトです。
月間契約、年間契約から選び、使用料を支払って購入します。
試しに使ってみたいという人は、月額料金の契約にするのが谷宜樹のおすすめです。
他にも画像編集ソフトやアプリがあるので、合わなければ解約しましょう。

■iPadでも利用可能！どこでも仕事ができる

フリーランスでWEBデザインをする人は、タブレットを利用するのもおすすめです。
PhotoshopはiPad版も提供されているので、オフィス以外でも仕事をしたい人はぜひ利用してみましょう。
機能面についても、パソコン版とiPad版で違いはほとんどありません。
（ショートカットキーなどの違いはあり）
指やApple Pencilを使用すれば、パソコンよりも自由に描画できるかもしれません。
WEBデザインに使う画像を1から作成したい人にも便利ですね。

WEBデザイナーだけでなく、ホームページ制作やサイト運営など、ITに関わる多くの人がPhotoshopを利用しています。
どのソフトを使おうか迷っている人は、ぜひ機能性の高いPhotoshopを試してみてくださいね。

「UIデザイン」「UXデザイン」って何？より専門性の高い働き方も

WEBデザイナーを目指す人は、「UIデザイン」や「UXデザイン」についても知っておくべきだと谷宜樹は思います。
WEBデザイナーと業務内容が同じになることもありますが、UIデザイナー・UXデザイナーにしかできない仕事もあるでしょう。
人によってはWEBデザインよりも、UI・UXデザインの方が向いている場合もあります。
今回は、UIデザイン、UXデザインについて学び、自分の適性と照らし合わせてみましょう。

■「UI」とは？

パソコンやスマホなどの機器と、それを使うユーザーの関係からデザインを考えていくことを「User Interface」といいます。
これを略したのが、「UI」です。
見やすく分かりやすいサイトにしていくのがWEBデザインであるならば、UIはさらにユーザーの操作性を重視するものです。
例えば、画像やボタンなどがUIデザインの代表的なものとして知られています。
画像が文章の意味を分かりやすくし、ボタンがユーザーの行動（商品注文、詳細ページへの移動など）を簡単にしているでしょう。

■UIデザイナーの仕事とは？

WEBデザインと同じく、クライアントとの打ち合わせから仕事が始まります。
アプリやWEBサイトがユーザーにとって使いやすいものになるようにデザインするのが基本ですが、クライアントの要望とのすり合わせも行う必要があります。

■「UX」とは？

WEBサイトによってユーザーが得ることができる体験を「User Experience」、略して「UX」といいます。
サイトから商品を購入する、観光情報サイトから地域の特産品について知るというのは、ユーザーが得た「体験」と言えるでしょう。
UXデザインとは、ユーザーがサイトからの体験を得るためのWEBデザインを考えていくことです。

■UXデザイナーの仕事とは？

WEBデザイナーやUIデザイナーと大きく違う点はありませんが、UXの場合、デザイナーはアプリ・サイト作成に留まらず幅広い分野の仕事を受け持つこともあるでしょう。
例えば、ユーザーが求める体験を知るために、マーケティングリサーチやインタビューなどをするのもUXデザイナーが担当します。
単にユーザーが使いやすい、見やすいサイトを作るWEBデザイン・UIデザインとは違い、ビジネス戦略をデザインに落とし込んでいくのがUXの仕事です。

■UXデザイナーは格上？兼任する人も

WEBデザイナー、UIデザイナー、UXデザイナーはそれぞれ別の求人が出されていることもあれば、まとめてWEBデザイナーとして募集しているところもあります。
また、就職してから兼任することになるかもしれません。
ちなみに、UXデザイナーはマーケティングに関する知識も求められるため、WEBデザイナーやUIデザイナーよりも格上だと考える人も多いでしょう。

谷宜樹は、WEBデザインを勉強していくうちに得意な分野・苦手な分野が分かってくると思います。
大学の経済学部などでマーケティングを学んでいた人は、UXに挑戦してみてはいかがでしょうか。

ワイヤーフレームを作ってみよう！設計図をイメージ

前回は「ワイヤーフレーム」とは何か、について谷宜樹が解説しました。
今回は、具体的にどうやって作成していくかお話ししていきます。
作ってみたいWEBデザインがある人は、ぜひ一緒にワイヤーフレームを作成してみてくださいね。

■「サイトマップ」を作ろう！全体像をイメージ

いきなりページ内のテキスト・画像の位置を決めようとしても上手くいきません。
まずは、どのようなものが必要になるかイメージしてみましょう。
例えば、企業説明のページを作る場合は、何が必要でしょうか。
企業のロゴ、本社の画像、事業内容が分かるテキスト・・・他にもたくさんの要素があります。
ホームページであれば、トップページの他に複数の子ページを作ることが多いですよね。
どのページに何を表示するか、全体像を把握する「サイトマップ」を作りましょう。
サイトマップは、エクセルで作成するのが谷宜樹のおすすめです。
トップページから子ページまでどのようにつながっていくか、1ページずつ書き表してみてください。

■トップページはワイヤーフレームが必須！あとは臨機応変に

サイトに必要なページが出揃ったら、どのページにワイヤーフレームを作るか決めましょう。
トップページはサイトの顔なので、必ずワイヤーフレームを作成する必要があります。
しかし、子ページの場合は画像とテキストのみの簡単な配置になっている場合もあるので、絶対に作らなくてはいけないというわけではありません。
サイトの中で重要だと考えられるページのみ、ワイヤーフレームを作っても良いでしょう。

■レイアウトを決めよう！アイディアはメモしておく

ワイヤーフレーム化するものが決まったら、レイアウトを考えながら作成していきます。
レイアウトには列状になっているもの、タイル状になっているものがあり、それぞれイメージが異なります。
どれを選べば良いか、また後日谷宜樹が解説していきますね。
自由に配置しても良いですが、まずは代表的なレイアウトから選ぶのがおすすめです。
テキストや画像の位置とともに、
「ここはこの色を使う」
「○○という内容をポイントとして表示する」
というメモも入力しておくと便利です。

■効果的なコンテンツに仕上げる

テキストと画像を貼り付けるだけでなく、ヘッダー・フッターを印象的にしたり、「グローバルナビゲーション」というメニューを表示させたりすると魅力的なページになります。
内容によって、ヘッダーに入力するべきもの、メニューバーに取り入れるべきものがあるので、よく考えてみましょう。
詳しい方法については、また後日解説していきます。

ワイヤーフレームが完成したら、それをもとにデザインカンプを作成してみてください。
デザインカンプを作っていてつまづいたら、またワイヤーフレームを見直すと忘れていたことや新たなアイディアに気付けるでしょう。

「ワイヤーフレーム」って何だろう？デザインカンプに必要不可欠

WEBデザインを作る上でとても大事なのは、しっかりと準備をしておくことです。
「こういうものを作ろう」とイメージしていても、いざphotoshopを開くと全く手が動かない・・・ということはよくあります。
それは、WEBデザインの設計図がないから。
どんなベテランでも、設計図なしに完璧なWEBデザインは作れません。
今回は、谷宜樹がWEBデザインの設計図「ワイヤーフレーム」について解説していきましょう。

■「ワイヤーフレーム」って何？

家を新築する時やマンションの部屋を探す時、必ずと言っていいほど目にするのが間取り図ですよね。
どこに部屋があって、どこにトイレやお風呂があるのか、それぞれどのくらいの大きさなのか知ることができるのが間取り図です。
WEBデザインにおいても、まずどこに何をレイアウトするのかを明確にしておきます。
ホームページであれば、ロゴやトップ画像、メニューバーの位置などをあらかじめ決めておきましょう。
このページ内の間取りを表すのが、「ワイヤーフレーム」です。
そしてこれを見ながらWEBデザインに起こしていくので、設計図としての役割もあります。

■なぜワイヤーフレームが必要なの？

ワイヤーフレームを作らずに、クライアントからの指示をメモしたものだけを見ながらWEBデザインをするとどうなるでしょうか。
一般的なプロのデザイナーではあり得ないことですが、独学で学び副業でWEBデザインを請け負っている人のなかには、そういう人がいるかもしれません。
しかし、ワイヤーフレームを作っておかないと、プロでもWEBデザインは難しいものになるでしょう。
ワイヤーフレームは、ページのデザインを作っていく上で忘れてはいけない情報を整理し、十分なアイディアを集めるために必要不可欠なものです。
ワイヤーフレームがない場合、クライアントからの指示を忘れてしまったり、指示やアイディアを全て取り入れたために、ちぐはぐな印象になってしまったりすることがあります。
また、チームでWEBデザインする時に意見がまとまらないこともあるでしょう。
設計図の段階でしっかり情報を整理し、クライアントやチームメンバーの意見をまとめておくことで、スムーズにデザインカンプへ進めます。

■何をワイヤーフレームに記入するの？

ページに入力するテキストや画像を、どこに配置するのか分かるようにするのがワイヤーフレームです。
位置や大きさが分かれば、内容は「ロゴ」「本文」「トップ画像」などのメモ書きで良いでしょう。
ワイヤーフレームの段階では修正が多くなるので、谷宜樹はphotoshopを使って作成することをおすすめします。
ツールを使うのに慣れていない人は、もちろん手書きでも良いですよ！

今回は、ワイヤーフレームを作ることの意味について谷宜樹が解説しました。
次回からは、具体的にどのようにしてワイヤーフレームを作成していけば良いかお話ししていきますね。