IllustratorでのWebデザイン

IllustratorでWebデザインをする際のチェックリストです。
デザイン制作前やコーディングファクトリーに依頼される場合は、
入稿前にご確認ください。

Webサイトは、PhotoshopやFireworksで制作することがほとんどです。
コーディングファクトリーでも、制作はPhotoshopで行なっています。
IllustratorでデザインされたものをそのままWebサイトにしようとすると不具合がでることが多々あります。

IllustratorでWebデザインをする際に注意していただきたいポイントを以下にまとめています。
コーディングファクトリーにコーディングを依頼する・しないに関係なく、 IllustratorでWebデザインをする時に必要な内容になりますので、是非ご確認ください。
印刷物を制作されているデザイナー様や、主にIllustratorで制作されている方には、特にお役に立つと思います。

Illustrator入稿チェックリスト
  • 環境設定

    「単位・表示パフォーマンス」を全て「ピクセル」に設定していますか?

    「一般」のキー入力を「1px」に設定していますか?

    メニューバー「表示」の「ピクセルにスナップ」にチェックがありますか?

  • ドキュメントの設定

    1024px×768px(横×縦)のモニターサイズを意識した作りをしていますか?

    画像解像度72dpiに対応していますか?

    「カラーモード」を「RGB」に設定していますか?

    「ラスタライズ効果」を「スクリーン72dpi」に設定していますか?

    「プレビューモード」を「ピクセル」に設定していますか?

  • デザイン作成時

    ロールオーバーのデザインは忘れていませんか?
    「弊社にてCSSで色が薄くなる処理をする」・「ロールオーバーの状態をデザインする」
    のいずれかを選択

    デザインの各パーツをレイヤーとして個々に分けるか、レイヤー内でグループ化してありますか?

    画像などのリンクファイルの付け忘れの確認もしくは画像の埋め込みをしましたか?

    レイヤーを最低限分ける箇所
    1.メニュー類(例:グローバルナビ、ローカルナビ)
    2.バナー
    3.ボタン類
    (例:デフォルト画像、マウスオーバー画像(ロールオーバー画像)、送信ボタン、詳しくはこちら)

  • 入稿時

    確認用JPEGは付けましたか?

    文字がデジタルデータで取れるものは付けましたか?
    (アウトライン化前のaiデータ、word、powerpoint、テキストデータなど)

小冊子無料プレゼント

IllustratorでWebデザインをする際のポイントを小冊子にまとめました。
社内での共有、Webデザイン制作時のガイドラインとしてお使い下さい。

IllustratorでのWebデザイン小冊子を無料でプレゼントします。
PDFファイルでお送りします。
IllustratorとPhotoshopのデザインの違いやIllustratorでWebデザインをするときのポイントをまとめています。
社内での共有やIllustratorでのWebデザイン制作のガイドラインとしてご活用下さい。

お申し込みフォーム

ご希望の方は、下記フォームよりお申し込みください。

※は必須項目になります。

御社名

御社名(カタカナ)

役職

担当者様

担当者様(カタカナ)

郵便番号

-

住所

お電話番号

E-mail

コメント欄

リセット

お電話でのお問い合わせは、こちらからどうぞ

まずはお気軽にお電話ください。

0120-551-747

平日

9:30〜19:00