IllustratorでWebサイトをデザインする際に気をつけたい事を解説

閲覧する人のマシンに入っているフォントまたはWebフォントとして使用可能なもの以外は使用できません。
モリサワ系などのデザイナーが購入しているフォントやフリーフォントは使用しないようにしましょう。

紙媒体では字詰めをしないと怒られますが、Webでは字詰めをすると怒られます。
サイト全体で少し広めとかならいいですが、部分部分での字詰めはやめましょう。

再現できないわけではないですが、とても特殊な場合です。
基本は使わない方が無難です。
端っこまでに収めたいから長体をかける、というのも基本的にコーダーに無視されます。

文章の折り返し位置は閲覧環境によって変わりますので、意図通りの改行はできません。
基本は句点「。」のみの改行にしましょう。

編集 > 環境設定 > 単位から全ての単位をピクセルに変更しましょう。
これでオブジェクトがすべてピクセルで表示されます。

編集 > 環境設定 > 一般のキー入力を1pxに設定。
矢印キーでの移動が1pxになります。

編集 > 環境設定 > ガイド・グリッドからグリッドをpx単位に設定。
例ではグリッドを10px、分割数を10にしていますが好みで結構です。

ファイルの新規作成時に詳細オプションを開き、カラーモードをRGBカラー、ラスタライズ効果をスクリーン(72ppi)、プレビューモードをピクセルに設定しましょう。

ファイルを開いたら、ウィンドウ > ワークスペースでWebにチェックを入れると、開いているウィンドウなどがWeb向きの環境に切り替わります。
普段から使用しているものとインターフェースが変わるため、人によっては使いづらいかもしれませんので、これは任意で結構です。

Webサイトはリキッドデザインという特殊なものを除いて、基本的に横幅は固定です。
一般的なサイトは960px～1200pxあたりが多いです。
横幅を何ピクセルにするか決めてから制作に入りましょう。

アートボードを決めた幅よりも大きく作り、その中央に配置していくのがお薦めです。
そうすることにより横幅を超えた要素を表現できます。（ヘッダーやメインビジュアル等）

Illustratorのデフォルトでは基準点は中央です。
そのため、幅が奇数のオブジェクトを配置するとx軸やy軸が小数点の数値になります。
x軸やy軸が整数でない場合、配置されているオブジェクトは書き出し時に端がぼやけてしまいます。

基準点を左上にすると、アートボードの左上にオブジェクトを配置した場合にはx軸y軸共に0pxになるので、位置や距離の計算もしやすくなります。

線を中央に引いてしまうと、線の幅が奇数だった場合にぼける原因になります。
常に内側に引くように意識しましょう。