Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ

ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。
ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。

Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。

Speed Design with Illustrator
翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ

ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介。
作業手順がアニメーションgifになっているので、IllustratorでどうやってWebデザインするのか雰囲気も分かると思います。

IllustratorをWeb作業に最適化するためのポイント

Illustratorは確かにDTP系の機能が充実していますが、設定をきちんと行うことでWe bの作業に適した環境をつくることができます。
IllustratorやPhotoshopのテクニック本を数多く執筆している井上のきあ氏の「Illustrator ABC（amazonで見る）」のフォローサイトで、他にも文字組や図版の描き方など役立つTipsが満載です。

IllustratorでWeb向けの作業を行うときのチェックリスト

Illustratorで作成した既存のドキュメントをWeb向けとして作業する際のチェックリスト、またその逆の作業を行えばWebからDTPへ。

Illustratorでのウェブデザイン、環境設定からスライスまでの流れ

IllustratorでWebデザインの作業をする時にしておきたい環境設定、CS6をサンプルにCCまで対応。

IllustratorでWEBデザインを納品する方法（CS5版）

特にDTPデザイナーがIllustratorでWebデザインを行う際に、制作時に気をつけたい方法がまとめられています。

フラットデザイン時代に突入？これからのWEBデザインは100%illustratorで行こう。その3

Web用の画像はイラレ一択、画像ファイルの管理もらくちんと、Photoshop, Fireworksを使ってる人にはちょっと読んでほしい実用的なチュートリアルも備えたゆるめのコラム。
その1、その2もあります。

IllustratorをWebデザインに使う時に気をつけたい設定

共同で作業する時のレイヤー管理方法、テキストデータのルール、オブジェクトのサイズは奇数ではなく偶数で、スライス用のレイヤーの作成など、制作時に役立つノウハウが紹介されています。

Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題）

一つ上で紹介した奇数ではなく偶数でや、アンチエイリアスの処理の影響で作成したオブジェクトが見た目と異なってちょっと太くなって（にじんで）しまう時の解決策です。

現役Webデザイナー カワココが断言! 「IllustratorはWeb制作に使える」

2013年11月のAdobe主催のクリエイティブフェスでカワココ氏のセッションから、Web制作向けのレイアウトやパーツを作る上で覚えておきたいポイントを解説。
動画はこちら：IllustratorはWebには使えない?

動画では、WebデザインをIllustratorで行う利点をはじめ、最大のネックとなるオブジェクトがにじんでしまう理由とその解決方法に焦点がおかれています。

なんでWebデザインをイラレでやるん？

• ピクセルパーフェクトが実装されたし！
• オブジェクトの座標やサイズが数値でコントロールできる
• アピアランスで様々な効果を使い分けることができる
• 合成フォントや文字スタイルや詰め組みなど文字を扱いやすい
• ベクターデータは使い回しがしやすい
• スライスが楽ちん！
• Retinaなど高解像度ディスプレイの登場でSVGの時代が来るかも！

最後にスライドを4つほど。