更新日:2021年12月12日(日)Illustratorの習得からスタートIllustratorは、Adobeから発売されているグラフィックソフトである。グラフィックソフトは、ベクターデータ系、ビットマップデータ系の2つにわかれる。Illustratorの場合、ベクター系のソフトに分類される。ベクターデータは、線と点のデータ。ピクセルごとに色をもっていて、ピクセルが集まって画像を作っている。Web制作での画像は、今後はベクターデータが増えてくるベクターデータとは、点と線からデータが成り立っているイメージだ。四角形は、点が4つあり、その点と点を線が結んで、図形をつくっている。ベクターデータは、拡大縮小、変形などをしても、画像が劣化しない、データ容量が軽量という特徴をもつ。Graphics)というデータ形式が、ロゴやアイコンなどで使われてきている。SVGはベクターデータである。従来のWeb制作での画像は、GIF(ジフ)、PNG(ピング)、JPEG(ジェイペグ)という画像データ形式が多く使われた。これらは、ビットマップデータである。iPhoneのような高解像度のモニターでみると、拡大されて、ぼやけてしまう。iPhoneサイトの場合、倍のサイズのビットマップ画像を用意する必要がある。SVGだと、解像度に依存せず、きれいにうつる。現在のWebは、みている人の端末のサイズが多様だ。画像は、いろいろなスクリーンサイズにあわせて、複数のサイズを用意するか、大きめの画像を用意して、様々なサイズに小さくして対処するかの必要がある。SVGであれば、1サイズでいろいろなサイズに対応が可能になる。SVGはレイヤー構造(レイヤーとは、透明なシートのようなもので、何枚も重ねて、画像同士を分離したまま、画像を重ねることができる仕組み)をもてる。1枚のSVGファイルに、複数の画像を重ねておいて、CSSで切り替えて表示ができる。今後の、Web制作の画像は、SVGのようなベクターデータが中心になってくると予想できる。写真はベクターデータには向かないので、従来通り、JPEGをつかっていくことになるだろう。GIF、PNG、JPEG、SVGのまとめ4つの画像データ形式がでてきたので、簡単にまとめておきたい。これら4つは、Illustratorから書き出すことが可能である。GIFは、Web制作の黎明期から存在するもっとも古い形式で、いまも健在である。万能フォーマット、アルファチャンネルをつかった256階調の透明処理が可能。Cloud』というサービスを利用する。バージョンは、CCという名前である。これは、ソフトを買うのではなく、毎月一定の利用料を払う仕組み(購読型)になっている。Illustrator単品のプランもあるが、Web制作の場合、Adobeの他のソフトである、PhotoshopやDreamweaverも使える「コンプリートプラン」に入ることになるだろう。このプランの場合、月ごとに4,980円の費用が必要になる。Cloud用のカードが販売されている。これを買うと、一定期間、ソフトを使うことができる。割引キャンペーンをやっているので、安いときに買っておけばトクである。カードのまとめ買いも可能だ。従来は、IllustratorはCS6というバージョンまでは、パッケージ販売がされていた。Cloudのみの提供である。満遍なく機能をおぼえないこれはWebの学習全般にいえるのだが、Illustratorの場合も、機能やコマンドを満遍なく覚える必要はない。限られた機能やコマンドだけで、制作をしていくことをおすすめする。実際に、頭に覚えるのは全体の20%くらい。残りは、必要に応じてその都度調べていこう。これは、Illustratorだけでなく、Phoroshop、HTML、CSS、JavaScript、PHPにもいえる。Illustrator習得の入口は、イラスト、アイコンのチュートリアル本まずは、チュートリアル本(手順形式の本)を買おう。作例はアイコンやイラストなどの小さいグラフィック制作がおすすめだ。ロゴ・マークデザインブック』は作例の質が高く、作例手順も丁寧。CS6までの対応だが、CCとあまり基本操作はかわらないので、おすすめしたい。『デザイナーのためのIllustrator実践テクニック』は、初心者でもわかりやすく、機能も実務で使うところに絞ってあり、個人的には一番おすすめのIllustratorの入門書。第2版』は作例がおもしろく、使うコマンドも実践的だ。レイアウト全体のチュートリアル本レイアウト全体のイメージを「カンプ」「モックアップ」と呼んでいる。In』(http://www.adobe.com/jp/jos/pinchin/start.html#ai)にも、無料のチュートリアル記事が読める。『Illustratorプロフェッショナルの教科書』は、2011年度版にIllustratorのカンプ制作のチュートリアルがのっている。『Illustrator&ベクターデータの教科書』の第2章、第3章は必読である。Illustratorによるカンプ制作のノウハウが凝縮されている。2017対応版)』は、Illustratorを使ったワイヤーフレーム、カンプ、書き出しのテクニックがまとまっている。CC2015から追加された「アセットの書き出し」機能も解説されている。従来、カンプ制作はPhotoshopでつくることが定番だった。近年は、Illustratorでつくるやり方も見直されている。理由は以下のとおりだ。フラットデザインの出現SVGの台頭もともとレイアウトしやすく、修正がしやすいCS5以降から、Photoshop形式への書き出しの品質が改良されたフラットデザインは、単なる流行というより、もっと大きなデザインの流れで、でてきたデザイン手法である。―ハード×ソフト×ネット時代の新たな設計論』を参照されたい。SVGはベクターデータ、Illustratorもベクターデータで相性がいい。ベクターデータなので、ある一定の間隔で長方形を並べるなどの、レイアウト処理が一瞬でできる。レイアウトの修正も簡単だ。重厚な、メタファー型のデザインならば、Photoshopの方がつくりやすい。ドロップシャドウをつくって、それを変形したり、ブラシで微妙に影をつけたりなどの作業は、Photoshopのほうが向いている。求められるデザインにあわせて、Illustrator、Photoshopの両方でカンプをつくれるようにしておきたい。補足(2016年4月23日)筆者の現状をフォローしておきたい。現在、カンプはほぼPhotoshopベースでつくっている。理由はCC以降のガイド機能の充実化にある。揃えたり、均等にならべたりの処理が簡単になった。フラットデザインもふくめてPhotoshopでつくっている。Illustratorはパーツ単位でつくり、Photohsopにベクトルスマートオブジェクトで貼り付けている。トレースの練習は、文字を下敷きに正確になぞる練習をIllustratorで、しっかり習得しておきたいスキルは、ペンツールによるトレース技術である。トレースとは、正確になぞることをいう。ロゴやアイコンを作るときに、どうしても必要なスキルになる。ペンツールは苦手な人が多いが、練習方法としては、文字を入力して、色を薄くする。レイヤーをロックする。レイヤーを1枚増やし、ペンツールで正確に、少ないアンカーポントで、文字をなぞる練習をするとよい。ペンツールでなぞるときは、線の太さは、なるべく細く設定すると作業がしやすい。ペンツール、トレースが苦手、不安があるという人は『Illustratorで学ぶ「ベジェ曲線」習熟ドリル』がおすすめである。地味な本だが、何度も版を重ねている名著である。丁寧に、詳細にパスの引き方が解説してある。デザインの入門書を読もうデザインの本は、コラム系、カタログ系、理論系などいろいろとジャンルが分かれる。Webだけでなく、グラフィック、建築、プロダクトなど、他のジャンルの本も参考になるので、選択肢は広い。デザインに隣接している分野だと心理学である。Webデザイナーの必読本、ドナルド・ノーマンさんの『誰のためのデザイン?』は、認知心理学がベースの本である。2015年に全面改訂版の翻訳本がでた。デザイナーから注目されているのが、ジェームズ・ギブソンの生態心理学である。生態心理学は、通常の心理学とは全く違うアプローチから、人間や動物のふるまいの原理を明らかにしようとしている。さんの『レイアウト、基本の「き」』を、まずはおすすめしたい。どれも、グラフィックデザイナー向けの本だが、Webデザイナーでも基本はかわらない。カイシトモヤさんの本では、後半にA4チラシの作例の過程がのっている。み→崩し→微調整→バリエーションという制作の流れ、思考の流れが丁寧に言語化されている。いう判断で、デザインが出来ているか?一番知りたいことが書いてある。佐藤直樹さんの本は、ノンデザイナーでもわかる一般向けのデザイン入門書。タイトルにレイアウトとなっているが、文字、色、写真などにも言及されている。デザインの勉強は、数年で古くなるものではなく、長く使える基礎レイヤーの分野である。面白いデザインの教科書』、『レイアウト、基本の「き」』ともどちらも2017年に改訂版が出ている。タイポグラフィを学ぼうタイポグラフィは、文字組みである。日本語の場合、ひらがな、漢字、カタカナ、記号、英語が混ざるため、入力したあとに、文字間、サイズ、ベースライン、フォントの種類の調整をしなくてはいけない。普段使われている、さりげない見出しでも、よく文字をみると、数字やひらがなを、別なフォントで混ぜて、サイズを調整して使っている場合がある。『タイポグラフィの基本ルール』は、オーソドックスな内容の入門書。タイプグラフィの知識をしると、目の解像度があがり、今まで見えなかった細部が見えてくるようになる。『デザインのルール、レイアウトのセオリー。』は、様々なデザイン技法やよくでてくるパターンを集めて、1冊のカタログにした本。作例も、オリジナルの作例+実際の作例の2つが紹介されている。理論の説明文も明解でよみやすい。図形の中でも、正方形と正円は特別な位置をしめている。かたちの不思議2』はカタログ系の本で、ブルーノ・ムナーリさんがいろいろ図案を集めてスクラップした本。おもしろいので、目を通しておきたい。実際に、チラシやエディトリアル(雑誌)のデザインで、正方形と正円がどう使われているかを、観察してみよう。ロゴデザインで、なぜ正円や正方形が多用されているかを考えてみよう。デザインの見方が変わるだろう。観察とスクラップをしよう、特に雑誌のデザインは参考になる観察とデザインのスクラップを普段から続けたい。気に入ったちらしを集めたり、雑誌を切り抜いたり、スクラップをしていこう。海外の雑誌、地下鉄で配られているフリーの雑誌もおもしろい。Webだと「日本のWebデザインギャラリー」(http://japan.2-wg.com/)のようなギャラリーサイトもみよう。Webデザインに役に立つのは、雑誌のデザイン(エディトリアルデザイン)である。ページを超えて、統一ルールを出しつつ、ページごとに変化をつけて、読者を読ませる工夫をしている。見出しのデザイン、コピーも参考になる。デザインを分析しよう。『ファスト&スロー』を読んでみようダニエル・カーネマンさんの『ファスト&スロー』という文庫本は衝撃の一冊。人間の脳がどう錯覚にかかり、あまり考えずに、意思決定してしまうかが、一般の人でもわかりやすく、まとめられている。上・下巻の構成だが、上巻だけでも読んでおくと、有名な心理学の実験をまとめて、しることができる。普段、自分の意思で決定していると思いこんでいることが、じつは、簡単に操作可能なものであること知るのはショックである。著者のダニエル・カーネマンは、ノーベル経済学賞を受賞している。この本は、デザインの棚ではなく、行動経済学の棚に置いてある。デザイナーでも、読んでおきたい。デザインに強い本屋にいってみようデザイン書の探し方も書いておきたい。これは大型書店より、デザインに強い本屋がおすすめである。2014年の年末に東京の本屋さんをまわってみて、改めて感じたことである。東京だと神楽坂のかもめブックス、表参道の青山ブックセンター本店、京橋のLIXILブックギャラリー、神保町のボヘミアンズギルド、かげろう文庫、がおすすめである。自分用のロゴをつくろうこの先、必要になっていくのが自分のポートフォリオ(作品集)である。就転職活動の時に必要になる。このとき、あったほうがいいのは自分用のオリジナルのロゴの存在である。あったほうが、強い印象を残すことができる。訴求力の高いポートフォリオは、ロゴの存在が大きい。事例で学ぶデザイン技法としてのブランディング』が参考になる。ロゴは、自分の名前のイニシャルをベースにしたものをつくってみよう。屋号が決まっている場合は、その屋号の名前をベースにしたロゴでもいいだろう。フォープロ』という製図用のシャープペンシルである。芯の太さは、0.7mmを選ぶ(通常のシャープペンシルは、0.5mm)、芯の濃さは2Bがおすすめだ。この組み合わせが、少し太く、やわらかくて、描きやすい。Illustratorでペンツールやアイコン制作で学んだパスファインダーの機能で、形をととのえていく。アナログを活かすのなら、スケッチしたロゴをスキャンして、Illustratorのライブトレース機能で、パスデータにしておく方法もある。完成したロゴは、今後、ポートフォリオや名刺作成の際に、重要な武器になってくれる。基本フォントの揃え方これから、本格的にデザイン制作をしていくとなると、必要になるのがフォントである。日本語フォント(和文フォント)、欧文フォントの2種類を揃える必要がある。PASSPORT』が定番フォントメーカーである。どちらも一定期間のリース契約。和文書体は、1書体の値段が高いので、書体を買ってゆくのは現実的ではない。3』というパッケージがある。これだと、1万円以下で購入ができる。基本書体がしっかり入っているので、おすすめしたい。欧文書体だと、ライノタイプ社が定番メーカーである。Folio』のようなパッケージでも買うことができる。Helvetica、Universeなどの定番書体は、ライノタイプ社が版権をもっている。『TrueTypeフォントパーフェクトコレクション』は、ビットストリーム社の定番書体集で、インプレス社とのライセンス契約で、特別に安く買うことができる。いうサービスが使え1,000以上のフォントを使うことができる。Windowsであれば、『CorelDRAW』というソフトを買うと、ビットストリーム社の定番書体がおまけでついてくる。予算が悩ましいフォントで一番悩ましいのが予算である。揃えたい、でもお金が...という問題にぶちあたる。Fonts))をどかんと買うのだが。補足(2017年2月26日)Linotype、Monotype、Ascender、ITC、Bitstreamの書体を購読できるサービスが2016年に登場しています。月定額で利用できます。予算が悩ましかった欧文フォントにとってありがたいサービスです。名刺をつくろういきなりフリーで独立するわけではないが、自分の名刺をつくっておきたい。自分をアピールして、実績をつくるチャンスは、突然おとずれる。その際に、名刺があると、アピールになる。前につくったロゴも添える。肩書きは、「Webデザイナー」か、紙ものもやるのであれば、「デザイナー」でもよい。Illsutratorでデータをつくり、実際に印刷屋さんで刷ってもらおう。印刷屋さんの場合、前もって紙見本をもらっておくとよい。いまは少数部数でもすれるので、少ない枚数で刷っていこう。名刺入れも買っておき、持ち歩こう。