コーディングメソドロジー

第33回 IllustratorでWebデザインをする

画像をピクセルの集合で描写するPhotoshopやFireworksとは異なり、画像を座標と捉え描写するIllustratorは、紙媒体をデザインするときに用いられるアプリケーションです。しかし、Webに合わせた設定をすることでWebのデザインをすることも、ある程度可能です。

IllustratorでWebデザインするための4つの設定

新規ドキュメントの設定

新規ドキュメントの設定をしましょう。
Illustratorのバージョンにもよりますが、「新規ドキュメントプロファイル」に「Web」という設定があります。デフォルトの「サイズ」だと「800×600」で、最近の標準モニターサイズの1029×768pxの想定よりも小さい設定となります。
そこで「幅」や「高さ」を1024×768pxに大きく設定することで、標準モニターサイズを意識したアートボードで制作することができます。
併せて、「カラーモード」はRGB、「ラスタライズ効果」は72ppi、「プレビューモード」をピクセルに設定します。

Illustratorで1pxにこだわる

Illustratorで1pxにこだわる

Illustratorで、ピクセル単位のデザインをするには設定に少しコツがあります。
まずは「環境設定」で「単位・表示パフォーマンス」を選び、単位を全て「ピクセル」にします。

次に「ガイド・グリッド」を選択し、「グリッド」内の「グリッド」を10pxに、分割数を「10」にします。
また、デザイン制作中はメニューバーから「表示」→「ピクセルにスナップ」を選んでおくと、ピクセルのグリッドに沿って配列されます。

小数点は「にじむ」

小数点は「にじむ」

Illustratorで制作したデザインを、いざWebにしようとすると罫線や囲い線などに「にじみ」が発生したり、狙った幅や高さのずれが発生することがあります。
これはIllustratorでは小数点以下を表現できるのに対し、Webでは小数点以下を1pxとして表現することしかできないことに原因があります。

ですので、できるだけ小数点を出さないようにデザインをすることが最も重要です。
先ほどの新規ドキュメントのときに設定したように「ピクセルプレビュー」を選択すると、制作画面をピクセルで見ることができます。

Web用に保存したときのデザインがある程度プレビューでき、想定しない「にじみ」を少しでも解消できるので、おすすめです。

普段Illustratorを主に使用しており、Photoshopはなかなか・・・という状況でも、こういったコツを知っておくことで、IllustratorでWebサイトを意識したデザインを制作することができます。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム