Illustratorでwebデザインをするときのポイント <1.設定編>

Pocket

今後Illustratorでデザインする機会が増えそうなので、復習もかねてイラレでのwebデザインについて書いていこうと思います。

前置き

SketchやAdobe XDなどwebに特化しているツールが出ている昨今。
お仕事ではPhotoshopかIllustratorで指定されることが多いかと思います。
ただ、PhotoshopもILlustratorも、web向けに作られたツールではないので、作成にあたっていろいろ気をつける点が多いように思います。

webに関してはデザインを作って終わりではなく、その後コーディングをする人がいるので、そういった人にやさしいデータづくりも大事だと思っています。
また、将来手直しするであろう自分に向けても、やさしいデータであるといいなと思います。
ということで「やさしい❤️Aiデータ」をテーマに、何回かに分けて書いていこうと思います。

イラレで作るメリット

  • ベクターデータなので、いろいろなサイズ展開が可能
  • SVGが書き出せる
  • アイコンやイラストの作成をスムーズに行える
  • Photoshopよりも軽い
  • 文字スタイルを作成できる
  • 印刷物への流用ができる

ざっとあげるとこんなかんじ。

新規で作成する場合

チェックポイント

  • 単位: ピクセル
  • カラーモード: RGB
  • ラスタライズ効果設定: スクリーン(72dpi)
  • プレビューモード: ピクセル
  • [新規オブジェクトをピクセルグリッドに整合]:
    チェックをはずす
    (チェックしていると、図形がずれる原因になるので注意!)

「新規オブジェクトをピクセルグリッドに整合」については、人によっては別れるところなのですが、チェックしておくと、図形がずれる原因になったりするので私ははずしてます。
ピクセルプレビューで作業していれば、ピクセルグリッドにスナップするので、チェックしなくてもいいかなと思います。

サイズについて

Illustratorに最初から設定されてるサイズでもいいですが、最近のデバイスのサイズを知っておくとよいと思います。

サイズを考える上で参考にするサイト

コーディングする人によってはフレームワークなどを利用していて、「このくらいのサイズで作ってもらえるとありがたいな〜」という人もいるので、可能であれば作る前にサイズについて聞いておくとよいかも。

web用にチェックするポイント

環境設定

一般

< キー入力 >
1px、または0.5pxに変更します。
0.5pxだと、ピクセルプレビュー時にShift + orを押したとき、5pxずつ動かせるので、細かい位置調整をしたい人におすすめ。

< プレビュー境界を使用 >
プレビュー境界は、線幅まで含めた境界線でのサイズが表示される機能です。
ドロップシャドウなどの効果を設定すると、オブジェクトのサイズがわからなくなるので、基本的にはチェックを外すようにしています。

テキスト


< サイズ/行送り & ベースラインシフト >
1pxに設定しておくとブラウザ上の文字サイズ指定に近い値になります。

< トラッキング >
10/1000emにしておくと、ブラウザ上で letter-spacing: 0.01em; に相当になります。

< 最近使用したフォントの表示数 >
最高で15まで設定できるので、多めにしておくと便利。
[書式]メニュー > [最近使用したフォント]から確認できます。

単位


< 単位 >
全てピクセルになってるかチェック

常にチェック!

ピクセルプレビュー

[表示]メニュー > [ピクセルプレビュー] をチェック ( + option + Y)

解像度

161005_07

[効果]メニュー > [ドキュメントのラスタライズ効果設定]で解像度をスクリーン(72ppi)に設定。

RGB

[ファイル]メニュー < [ドキュメントのカラーモード]をRGBカラーに設定。

カラー・校正設定

webの場合はsRGBに設定しておきましょう。
「sRGB」は世界標準として使われている色空間で、webの場合はこちらに設定しておくのが無難です。
ちなみにCSS/HTMLで指定する色はsRGBで表現されています。
(参考:CSS Color Module Level 4)

Adobe RGBはsRGBと比べ表現できる色の範囲が広いため、グラデーションなどのときムラがなくてきれいという特徴があります。
が、再現できるディスプレイが限られていて、sRGBに対応しているモニタでみると色がくすんでしまう原因になったり…。逆に、sRGBのものをAdobe RGBでみると彩度があがってしまうようです。
(参考: Adobe RGB とは アドビアールジービー: – IT用語辞典バイナリ)

作業用スペース

[編集]メニュー > [カラー設定]から、RGBのところを「sRGB」に設定。

校正設定

[表示]メニュー > [校正設定]で[インターネット標準RGB(sRGB)]に設定。

アピアランス

[アピアランス]パネルメニュー > [新規アートに基本アピアランスを適用]のチェックは外しておくと便利です。
チェックをはずしておくと、新規オブジェクトに対し、その直前にアピアランスパネルで表示していたアピアランス情報を引き継いでくれるようになります。

線の位置を「線を内側に揃える」にしておきましょう。

アートボード

新規作成からでも設定できますが、後からどんどん増えるので自分で作ることが多いです。
一番間違いがない作り方は、長方形ツールで長方形を書いた後、[オブジェクト]メニューの[アートボード]-[アートボードに変換]で作成する方法。

アートボードのサイズについては、必ず整数値を入れるようにしましょう。
XとY座標に小数点が入ったまま、書き出しを行うとエッジがぼけてしまうことがあります。
設定はコントロールパネル、もしくはアートボードオプションから設定できます。

[表示]メニューの[定規] < [アートボード定規に変更] にチェックをつけると、基準点がアートボードの左上になるので便利です。

テンプレートを作っておこう

毎回web用に設定するのは手間なので、自分用にテンプレートを作っておきましょう。
[ファイル]メニューの[テンプレートとして保存…]で、ファイル形式がaitになっているのを確認して保存します。
できれば、パソコン用、スマートフォン用、アプリアイコン用などサイズ別に何パターンかあると便利かと思います。

以上。
なんだかweb用に設定するだけでも、確認するポイントが山盛りですね…。
次、余力があれば、アピアランスやら納品時にチェックするポイントやらもまとめていこうと思います。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。