Illustratorでwebデザイン・バナーデザインを作るための初期設定の手順
Mika
私がIllustratorでwebデザインやバナーデザインを行なっている初期設定について説明します。
私は企業サイトのweb/LPデザインはAdobeXDを主に使いますが、Illustratorでバナーデザインをよく作ります。
昔から一番慣れているソフトという理由もあります。
目次
（１）web用の設定になってるか確認します。（カラーがCMYKになってる場合はRGBへ変更）
環境設定の単位は全てピクセルへ変更します。
一般設定のキー入力を1pxへ変更します。
（２）表示＞プレビューはピクセルプレビューへ変更します。
（３）ピクセルグリッドの整合の設定をします。
こちらを全てオンの状態にして保存します。
イラレでよくあるオブジェクトの滲み、ボケを回避できます。
（４）デザインするレイヤーは3〜5つ程度に分けます。
Illustratorでwebデザイン、チラシの紙デザインする際でもそうですが、通常3〜4レイヤー程度にしか分けません。
数多く分け過ぎても見辛いので納品先や他のデザイナーに嫌われます ^^；使わない余分なレイヤーは削除しましょう。
Illustratorでレイヤー多めに分ける人はPhotoshopの感覚なんだろうか？と思います。
▼私はバナー制作だと下記の3レイヤー程度にしています。
- 文字、画像（ここに文字と画像を入れる）
- 枠（バナーのフチがある場合に作る）
- 背景（背景素材、写真はここに入れる）
あとはこのまま自由にデザインしていきます。
投稿者プロフィール
- LP専門Webデザイナー（フリーランス協会会員・インボイス登録済）
- 地元商社ECサイト・楽天ショップのサイト更新担当、web制作会社のwebデザイナー経験を経てフリーランスLP専門Webデザイナーとして独立。
健康食品・化粧品などの通販業界から、不動産・住宅・士業といった法人向けLPまで、コンバージョンに直結するデザイン制作を多数手がける。
「売れる構成」と「集客に繋がるデザイン」の構築を得意とし、WordPress（X-T9/Lightning）への実装からHTML制作まで、目的に応じて柔軟に対応。
納品後の修正・運用を見据えたLP制作で企業のWeb集客をサポートしています。
👉LP制作のご相談はこちら
