Illustratorの習得からスタート

Illustratorは、Adobeから発売されているグラフィックソフトである。
グラフィックソフトは、ベクターデータ系、ビットマップデータ系の２つにわかれる。Illustratorの場合、ベクター系のソフトに分類される。

ベクターデータは、線と点のデータ。

ビットマップデータ。ピクセルごとに色をもっていて、ピクセルが集まって画像を作っている。

Web制作での画像は、今後はベクターデータが増えてくる

ベクターデータとは、点と線からデータが成り立っているイメージだ。例えば、四角形は、点が４つあり、その点と点を線が結んで、図形をつくっている。

ベクターデータは、拡大縮小、変形などをしても、画像が劣化しない、データ容量が軽量という特徴をもつ。

SVGの台頭

近年でのWeb制作（とくにスマートフォンサイト）ではSVG（Scalable Vector Graphics）というデータ形式が、ロゴやアイコンなどで使われてきている。SVGはベクターデータである。

従来のWeb制作での画像は、GIF（ジフ）、PNG（ピング）、JPEG（ジェイペグ）という画像データ形式が多く使われた。これらは、ビットマップデータである。iPhoneのような高解像度のモニターでみると、拡大されて、ぼやけてしまう。iPhoneサイトの場合、倍のサイズのビットマップ画像を用意する必要がある。

SVGだと、解像度に依存せず、きれいにうつる。

現在のWebは、みている人の端末のサイズが多様だ。画像は、いろいろなスクリーンサイズにあわせて、複数のサイズを用意するか、大きめの画像を用意して、様々なサイズに小さくして対処するかの必要がある。SVGであれば、１サイズでいろいろなサイズに対応が可能になる。

また、SVGはレイヤー構造（レイヤーとは、透明なシートのようなもので、何枚も重ねて、画像同士を分離したまま、画像を重ねることができる仕組み）をもてる。１枚のSVGファイルに、複数の画像を重ねておいて、CSSで切り替えて表示ができる。

今後の、Web制作の画像は、SVGのようなベクターデータが中心になってくると予想できる。 ただ、写真はベクターデータには向かないので、従来通り、JPEGをつかっていくことになるだろう。

GIF、PNG、JPEG、SVGのまとめ

４つの画像データ形式がでてきたので、簡単にまとめておきたい。
これら４つは、Illustratorから書き出すことが可能である。 GIFは、Web制作の黎明期から存在するもっとも古い形式で、いまも健在である。

Illustratorの入手方法は、Adobe Creative Cloudの購読型のみ

Illustratorの入手方法は、Adobeの『Adobe Creative Cloud』というサービスを利用する。
バージョンは、CCという名前である。これは、ソフトを買うのではなく、毎月一定の利用料を払う仕組み（購読型）になっている。

Illustrator単品のプランもあるが、Web制作の場合、Adobeの他のソフトである、PhotoshopやDreamweaverも使える「コンプリートプラン」に入ることになるだろう。このプランの場合、月ごとに4,980円の費用が必要になる。量販店やAmazonなどでは、Adobe Creative Cloud用のカードが販売されている。これを買うと、一定期間、ソフトを使うことができる。ときおり、割引キャンペーンをやっているので、安いときに買っておけばトクである。カードのまとめ買いも可能だ。

従来は、IllustratorはCS6というバージョンまでは、パッケージ販売がされていた。いま、IllustratorはAdobe Creative Cloudのみの提供である。

満遍なく機能をおぼえない

これはWebの学習全般にいえるのだが、Illustratorの場合も、機能やコマンドを満遍なく覚える必要はない。むしろ、限られた機能やコマンドだけで、制作をしていくことをおすすめする。実際に、頭に覚えるのは全体の20%くらい。残りは、必要に応じてその都度調べていこう。 これは、Illustratorだけでなく、Phoroshop、HTML、CSS、JavaScript、PHPにもいえる。

Illustrator習得の入口は、イラスト、アイコンのチュートリアル本

まずは、チュートリアル本（手順形式の本）を買おう。
作例はアイコンやイラストなどの小さいグラフィック制作がおすすめだ。

『Illustratorで作る ロゴ・マークデザインブック』は作例の質が高く、作例手順も丁寧。CS6までの対応だが、CCとあまり基本操作はかわらないので、おすすめしたい。

『デザイナーのためのIllustrator実践テクニック』は、初心者でもわかりやすく、機能も実務で使うところに絞ってあり、個人的には一番おすすめのIllustratorの入門書。

『Illustratorではじめてのイラスト―イラストブック 第2版』は作例がおもしろく、使うコマンドも実践的だ。

レイアウト全体のチュートリアル本

レイアウト全体のイメージを「カンプ」「モックアップ」と呼んでいる。

IllustratorでのWebカンプの手順だと、『Adobe Pinch In』（http://www.adobe.com/jp/jos/pinchin/start.html#ai）にも、無料のチュートリアル記事が読める。 『Illustratorプロフェッショナルの教科書』は、2011年度版にIllustratorのカンプ制作のチュートリアルがのっている。

『Illustrator＆ベクターデータの教科書』の第２章、第３章は必読である。数値に小数点が入らない方法、レイアウト、書き出しなどの実務者向けの Illustratorによるカンプ制作のノウハウが凝縮されている。

『WebデザインのためのPhotoshop+Illustratorテクニック（CC 2017対応版）』

は、Illustratorを使ったワイヤーフレーム、カンプ、書き出しのテクニックがまとまっている。CC2015から追加された「アセットの書き出し」機能も解説されている。

Illustratorでのカンプ制作が増えてくる理由

従来、カンプ制作はPhotoshopでつくることが定番だった。近年は、Illustratorでつくるやり方も見直されている。理由は以下のとおりだ。

• フラットデザインの出現
• SVGの台頭
• もともとレイアウトしやすく、修正がしやすい
• CS5以降から、Photoshop形式への書き出しの品質が改良された

フラットデザインは、単なる流行というより、もっと大きなデザインの流れで、でてきたデザイン手法である。詳しくは、渡邊恵太さんの『融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論』を参照されたい。

SVGはベクターデータ、Illustratorもベクターデータで相性がいい。

ベクターデータなので、ある一定の間隔で長方形を並べるなどの、レイアウト処理が一瞬でできる。レイアウトの修正も簡単だ。

重厚な、メタファー型のデザインならば、Photoshopの方がつくりやすい。ドロップシャドウをつくって、それを変形したり、ブラシで微妙に影をつけたりなどの作業は、Photoshopのほうが向いている。

求められるデザインにあわせて、Illustrator、Photoshopの両方でカンプをつくれるようにしておきたい。

トレースの練習は、文字を下敷きに正確になぞる練習を

Illustratorで、しっかり習得しておきたいスキルは、ペンツールによるトレース技術である。

トレースとは、正確になぞることをいう。ロゴやアイコンを作るときに、どうしても必要なスキルになる。ペンツールは苦手な人が多いが、練習方法としては、文字を入力して、色を薄くする。レイヤーをロックする。レイヤーを１枚増やし、ペンツールで正確に、少ないアンカーポントで、文字をなぞる練習をするとよい。

ペンツールでなぞるときは、線の太さは、なるべく細く設定すると作業がしやすい。

ペンツール、トレースが苦手、不安があるという人は『Illustratorで学ぶ「ベジェ曲線」習熟ドリル』がおすすめである。地味な本だが、何度も版を重ねている名著である。丁寧に、詳細にパスの引き方が解説してある。

デザインの入門書を読もう

デザインの本は、コラム系、カタログ系、理論系などいろいろとジャンルが分かれる。
また、Webだけでなく、グラフィック、建築、プロダクトなど、他のジャンルの本も参考になるので、選択肢は広い。

デザインに隣接している分野だと心理学である。Webデザイナーの必読本、ドナルド・ノーマンさんの『誰のためのデザイン?』は、認知心理学がベースの本である。2015年に全面改訂版の翻訳本がでた。

デザイナーから注目されているのが、ジェームズ・ギブソンの生態心理学である。生態心理学は、通常の心理学とは全く違うアプローチから、人間や動物のふるまいの原理を明らかにしようとしている。

デザイン入門書は、カイシトモヤさんの『How to Design いちばん面白いデザインの教科書』、佐藤直樹さんの『レイアウト、基本の「き」』を、まずはおすすめしたい。

どれも、グラフィックデザイナー向けの本だが、Webデザイナーでも基本はかわらない。カイシトモヤさんの本では、後半にA4チラシの作例の過程がのっている。与件の確認→情報の整理→手描きのラフ→視線の検証→画面分割→文字組み→崩し→微調整→バリエーションという制作の流れ、思考の流れが丁寧に言語化されている。どういう判断で、デザインが出来ているか？一番知りたいことが書いてある。

佐藤直樹さんの本は、ノンデザイナーでもわかる一般向けのデザイン入門書。タイトルにレイアウトとなっているが、文字、色、写真などにも言及されている。

デザインの勉強は、数年で古くなるものではなく、長く使える基礎レイヤーの分野である。じっくり取り組んで損はない。

タイポグラフィを学ぼう

タイポグラフィは、文字組みである。
日本語の場合、ひらがな、漢字、カタカナ、記号、英語が混ざるため、入力したあとに、文字間、サイズ、ベースライン、フォントの種類の調整をしなくてはいけない。

普段使われている、さりげない見出しでも、よく文字をみると、数字やひらがなを、別なフォントで混ぜて、サイズを調整して使っている場合がある。

『タイポグラフィの基本ルール』は、オーソドックスな内容の入門書。
タイプグラフィの知識をしると、目の解像度があがり、今まで見えなかった細部が見えてくるようになる。

カタログ本の決定版

『デザインのルール、レイアウトのセオリー。』は、様々なデザイン技法やよくでてくるパターンを集めて、１冊のカタログにした本。作例も、オリジナルの作例＋実際の作例の２つが紹介されている。理論の説明文も明解でよみやすい。

正方形と正円は特別な図形

図形の中でも、正方形と正円は特別な位置をしめている。幻の本といわれて、2010年に復刊されたブルーノ・ムナーリさんの『正方形　－　ブルーノ・ムナーリ かたちの不思議１』『円形　－　ブルーノ・ムナーリ かたちの不思議２』はカタログ系の本で、ブルーノ・ムナーリさんがいろいろ図案を集めてスクラップした本。おもしろいので、目を通しておきたい。

実際に、チラシやエディトリアル（雑誌）のデザインで、正方形と正円がどう使われているかを、観察してみよう。また、ロゴデザインで、なぜ正円や正方形が多用されているかを考えてみよう。デザインの見方が変わるだろう。

観察とスクラップをしよう、特に雑誌のデザインは参考になる

観察とデザインのスクラップを普段から続けたい。

気に入ったちらしを集めたり、雑誌を切り抜いたり、スクラップをしていこう。海外の雑誌、地下鉄で配られているフリーの雑誌もおもしろい。Webだと「日本のWebデザインギャラリー」（http://japan.2-wg.com/）のようなギャラリーサイトもみよう。

Webデザインに役に立つのは、雑誌のデザイン（エディトリアルデザイン）である。ページを超えて、統一ルールを出しつつ、ページごとに変化をつけて、読者を読ませる工夫をしている。見出しのデザイン、コピーも参考になる。

いろいろ、みて、集める。そして、デザインを分析しよう。

『ファスト&スロー』を読んでみよう

ダニエル・カーネマンさんの『ファスト&スロー』という文庫本は衝撃の一冊。

人間の脳がどう錯覚にかかり、あまり考えずに、意思決定してしまうかが、一般の人でもわかりやすく、まとめられている。上・下巻の構成だが、上巻だけでも読んでおくと、有名な心理学の実験をまとめて、しることができる。普段、自分の意思で決定していると思いこんでいることが、じつは、簡単に操作可能なものであること知るのはショックである。

著者のダニエル・カーネマンは、ノーベル経済学賞を受賞している。この本は、デザインの棚ではなく、行動経済学の棚に置いてある。デザイナーでも、読んでおきたい。

デザインに強い本屋にいってみよう

デザイン書の探し方も書いておきたい。
これは大型書店より、デザインに強い本屋がおすすめである。2014年の年末に東京の本屋さんをまわってみて、改めて感じたことである。

例えば、東京だと神楽坂のかもめブックス、表参道の青山ブックセンター本店、京橋のLIXILブックギャラリー、神保町のボヘミアンズギルド、かげろう文庫、がおすすめである。

自分用のロゴをつくろう

この先、必要になっていくのが自分のポートフォリオ（作品集）である。就転職活動の時に必要になる。このとき、あったほうがいいのは自分用のオリジナルのロゴの存在である。あったほうが、強い印象を残すことができる。

訴求力の高いポートフォリオは、ロゴの存在が大きい。

ロゴの基本的な考え方、作り方は『ロゴデザインの現場 事例で学ぶデザイン技法としてのブランディング』が参考になる。

ロゴは、自分の名前のイニシャルをベースにしたものをつくってみよう。もし、屋号が決まっている場合は、その屋号の名前をベースにしたロゴでもいいだろう。

まず、紙にスケッチする。おすすめしたい筆記用具は、ぺんてるの『グラフ1000 フォープロ』という製図用のシャープペンシルである。芯の太さは、0.7mmを選ぶ（通常のシャープペンシルは、0.5mm）、芯の濃さは2Bがおすすめだ。

この組み合わせが、少し太く、やわらかくて、描きやすい。どんどんスケッチしていこう。

Illustratorでペンツールやアイコン制作で学んだパスファインダーの機能で、形をととのえていく。

アナログを活かすのなら、スケッチしたロゴをスキャンして、Illustratorのライブトレース機能で、パスデータにしておく方法もある。

完成したロゴは、今後、ポートフォリオや名刺作成の際に、重要な武器になってくれる。

基本フォントの揃え方

これから、本格的にデザイン制作をしていくとなると、必要になるのがフォントである。

日本語フォント（和文フォント）、欧文フォントの２種類を揃える必要がある。

和文フォントは、フォントワークス株式会社の『LETS』、株式会社モリサワの『MORISAWA PASSPORT』が定番フォントメーカーである。どちらも一定期間のリース契約。和文書体は、１書体の値段が高いので、書体を買ってゆくのは現実的ではない。

予算をおさえたい人は、『FONT x FAN HYBRID 3』というパッケージがある。これだと、１万円以下で購入ができる。基本書体がしっかり入っているので、おすすめしたい。

欧文書体だと、ライノタイプ社が定番メーカーである。ライノタイプ社のサイトから直接ダウンロード購入もできるし、『Adobe Font Folio』のようなパッケージでも買うことができる。Helvetica、Universeなどの定番書体は、ライノタイプ社が版権をもっている。

『TrueTypeフォントパーフェクトコレクション』は、ビットストリーム社の定番書体集で、インプレス社とのライセンス契約で、特別に安く買うことができる。

先ほどかいた『Adobe Creative Cloud』にはいると、Typekit というサービスが使え1,000以上のフォントを使うことができる。また、Windowsであれば、『CorelDRAW』というソフトを買うと、ビットストリーム社の定番書体がおまけでついてくる。

予算が悩ましい

フォントで一番悩ましいのが予算である。たくさん揃えたい、でもお金が…という問題にぶちあたる。
200万円くらいフォントに使える予算があれば、フォントワークスとモリサワの定番書体を買い集め、ライノタイプ社のライブラリ（Linotype Originals Library (6324 Fonts)）をどかんと買うのだが。

名刺をつくろう

いきなりフリーで独立するわけではないが、自分の名刺をつくっておきたい。

自分をアピールして、実績をつくるチャンスは、突然おとずれる。その際に、名刺があると、アピールになる。

前につくったロゴも添える。肩書きは、「Webデザイナー」か、紙ものもやるのであれば、「デザイナー」でもよい。

Illsutratorでデータをつくり、実際に印刷屋さんで刷ってもらおう。印刷屋さんの場合、前もって紙見本をもらっておくとよい。いまは少数部数でもすれるので、少ない枚数で刷っていこう。

名刺入れも買っておき、持ち歩こう。

今回はここまでです。