4kaku design

マーケティングを勉強しているWebデザイナーのノート

11月28日(金)に開催されたCSS Nite in NAGOYA, Vol.9 「Webで使うIllustrator」に参加しました

11月28日(金)に開催されたCSS Nite in NAGOYA, Vol.9 「Webで使うIllustrator」に参加しました。
CSS Nite in NAGOYA, Vol.9 | Peatix

今までのイメージが変わった点についてと、使ってみたい機能についてまとめます。


「ピクセル・パーフェクト」が厳しい時代だからこそ活躍するIllustrator


講師をされた株式会社スイッチの鷹野さんから、最近のスマートフォンの高解像度化とそれに対応するために必要な画像サイズ、そしてすべてのデバイスに対応することの難しさについてのお話がありました。iPhone 6 Plusではとうとう3倍で書き出した画像が必要になるんですね。

PCでもRetinaモデルが出たりと、すべての端末で理想的なビットマップ画像を見せる厳しさは感じています。SVGやWebフォントを使って、ビットマップ画像を使わずに充実したデザインを目指すのもひとつの選択肢だと思います。


従来の「イラレでWebって難しくない?」イメージは払拭できました


Illustratorは文字を扱う機能は抜群ですし、パスを引くのに慣れているのもあり、イラストや印刷物を作るときに大活躍しています。しかし、Webデザインで使うときに気になるのは独特の「エッジのにじみ」。画像のスライスに苦労をしたイメージがあるので、Web制作での利用は避けてきました。

しかし、今回のイベントに参加して、Illustratorでピクセルを扱うことに対する苦手意識はずいぶんなくなりました。



メニューバーの「表示」で「ピクセルプレビュー」を選択すると、ピクセルベースでデータを確認できます。Web制作で使うには必須の設定です。その後「変形」ウインドウの「ピクセルグリッドに整合」にチェックを入れることで、選択しているオブジェクトのにじみをなくすことができます。

ロゴなどの複雑なパスの場合は図形をがたがたにしてしまう可能性がありますが、長方形(角丸くらいなら綺麗に仕上がります)のオブジェクトをスライスやコーディングしやすく仕上げるにはぴったりの機能です。

Illustarorならではの強みは「文字の扱い」

「文字タッチツール」はロゴ、バナーを作るときに大活躍



ロゴやバナーを作るときに、1文字だけ大きさや角度を変えたいというのはよくあるケースです。今までは一度アウトライン化(文字データをパスに変換)してから編集していました。当然、文字の差し替え作業などが発生すると二度手間です。Illustrator CCからは「文字タッチツール」が使えるので、テキストとしての情報は保ったまま一文字ずつ編集することができるようになりました。

「文字タッチツール」については、下記のページによくまとめられています。
Adobe Design Magazine / Illustrator CCを体験しよう 文字タッチツールと文字周りの機能強化

「合成フォント」で和文・欧文フォントの組み合わせがカンタンに



メニューバー「書式」から「合成フォント...」を選択すると、欧文フォントと和文フォントを組み合わせたオリジナルのフォントを設定することができます。作った合成フォントは通常のフォントと同じように、「テキスト」ウインドウ等から設定できます。和文と半角英数を組み合わせると貧相なイメージになってしまうことも多々あるので、自分好みの合成フォントを1つ2つ作っておくと作業がはかどりそうですね。

ツールの使い分けがクリエイターを幸せにする(かも?)

もともとWebデザインはFireworksで行っていたので、最近はSketch3に手を出したりとデザインツールの模索が続いています。それぞれのツールにいいところがあるので、上手に良いとこ取りをしてデザインワークをスムーズに進めていきたいです。

鷹野さんにご紹介いただいた中では、Illustratorを使ったワイヤーフレーム作りがスピーディーで実演を見ているのがとても楽しかったです。Illustratorのアクションはあまり使いこなせていないので、ぜひ取り入れてみます。

満員御礼で、再演版をやるそうです。詳しくは以下をご覧ください。
CSS Nite in NAGOYA, Vol.9 再演版 ※現在キャンセル待ちです。