アドビ システムズは、11月8日に東京・丸の内のJPタワーにてクリエイティブフェスティバル「Create Now / PLUS ONE DAY」を開催した。ここでは、アドビ製品のツールを使用するためのコツやユニークな使用方法を様々なジャンルのクリエイターが披露した同フェスティバルのセッションから、Webデザイナーのカワココ氏が「Illustrator」によるWebデザインのポイントを解説したセッションの様子をレポートする。

Webデザイナーのカワココ氏が「Illustrator」によるWebデザインのポイントを解説

IllustratorはWebには使えない?

カワココ氏は、アナログ時代のカタログやパンフレット制作からDTPへ移行し、Webデザインは黎明期から着手したという経歴を持つWebデザイナー。現在はフリーランスでWebデザインとイラストをメインに活動しており、デジタルコンテンツ制作者に向けたIllustratorに関する話題を掲載するWebサイト「イラレラボ」の運営も行っている。

カワココ氏のセッションは『IllustratorはWebには使えない?』というタイトルで、IllustratorでWeb向けのパーツやレイアウトを作る上で必ず覚えておきたいポイントを解説。セッションの冒頭では「IllustratorはWebに使えます」と断言し、IllustratorをWebデザインで使用する理由として、以下の7つの理由を挙げた。

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

オブジェクトが「にじむ」理由と対策

IllustratorがWebに使えないとされるのは、オブジェクトが「にじむ」と言われていることが大きな理由だという。そこのためセッションは、にじむと言われる訳とその対策方法の解説に重点を置いた内容となった。

にじんでしまったオブジェクトの様子を拡大して説明

「変形パネル」の数値を整数に修正すると、にじみは解消される

Illustratorのオブジェクトがにじんでしまうのは、オブジェクトの座標がピクセルグリッドとズレて、アンチエイリアスが掛かってしまうことが原因とのこと。セッションでは、実際にオブジェクトがどのようににじんでいるのかを見せ、そのオブジェクトの「変形パネル」を表示して、座標が整数になっていないことを確認。これを直すために、ピクセルグリッドが表示される「ピクセルプレビュー」を活用しながら編集を行い、ピクセルグリッドとオブジェクトがズレてしまった場合は、「変形パネル」で数値を整数に修正する、という手法が解説された。

また、予防する手段として、新規ドキュメントを作成する際は「プロファイル」で「Web」を選択して「新規オブジェクトをピクセルグリッドに整合」にチェックを入れておくと、Illustratorが自動的にオブジェクトをピクセルグリッドに沿わせるため、にじむことがなくなるという。さらに、環境設定で単位を「px」に、キー入力を「1px」に設定したり、「変形パネル」のオプションを表示すると「ピクセルグリッドに整合」という項目が表示される、オブジェクトではなくアートボードがズレてしまうことでもにじみが発生する、線幅が1pxの際は0.5px分のズレが発生する場合がある、といった機能や事例も紹介。Illustratorはオブジェクトがにじむからと敬遠していたWebデザイナーにとって、目から鱗の内容となったはずだ。

今後のWebデザインに役立つSVGなどを紹介

既存のWebデザインの解像度は72dpiが標準となっているが、Retinaなどの高解像度ディスプレイで72dpiの画像を表示するとぼやける、という問題が発生している。また、PC用ディスプレイよりも近い位置で見ることになるタブレットPCでも、同じように72dpiの画像がぼやけて見えてしまう。これは、ディスプレイの高解像度化とタブレットPCの普及がさらに進めば深刻な問題となるが、カワココ氏はその解決手段のひとつとして、Illustratorが対応しているSVG(Scalable Vector Graphics)の書き出し機能を紹介した。

SVGで書き出されたデータは、拡大してもぼやけない

SVGは、Webブラウザでの表示が可能なXMLで記述されるベクターデータ。ビットマップデータではないため、高解像度ディスプレイで表示したり、拡大表示を行ってもぼやけることはないとのこと。Illustratorでは「別名で保存」を実行する際のファイル形式選択でSVGを選択することができ、XMLを知らなくてもSVGの作成が可能だ。にじんで欲しくないロゴなどの作成に利用すると良いとのこと。

最後に、Illustrator CCのCSS書き出し機能などにも触れて、カワココ氏のセッションは終了した。第一線で活躍するWebデザイナーらしい実践的な内容となり、受講者の実務にもきっと役立つはずだ。