連載 | #1 クリエイターズライフハック

IllustratorでWebデザインをする時に気をつけておきたい設定あれこれ

IllustratorでWebデザインをする時に気をつけておきたい設定あれこれ
IllustratorでWebデザインをする時に気をつけておきたい設定あれこれ
Webデザインに使用するソフトはデザイナーさんの好みや、制作するサイトのテイストによっても様々だと思いますが、今回は表題にちなみIllustratorにフォーカスして紹介していこうと思います!

「いや、PhotoshopかFireworks使えよ」という声が多々聞こえてきそうではありますが…、押さえておくべき部分をしっかり押さえておけばIllustratorも結構Webデザインに使えますよね。

IllustratorでWebデザインをする大きなメリットとして、「サイズを計りやすい」、「アートボードを複数設置できる」といったことがあります。では、実際どういった部分に気をつける必要があるのか。押さえておきたい設定を以下にまとめてみました。

① 表示形式を「ピクセルプレビュー」に
②「ピクセルグリッドに整合」にチェック
③「ピクセルにスナップ」にチェック
④ アートボード定規の基準点を正確に

① 表示形式を「ピクセルプレビュー」に

この表示形式にすることで、オブジェクト全体を72dpiの画像として表示することができます。設定方法は、新規ドキュメント時の詳細から選択する or 表示>ピクセルプレビューから選択することができます。
ピクセルプレビューを使用するとスマートガイドが適用されなくなるという欠点もありますので、実際には表示形式をうま〜く使い分けながら作業することになるかと思います。

②「ピクセルグリッドに整合」にチェック

Webデザイン以外ではイラッとしてしまう場面が多いこちらの機能ですが(アップデート直後は、知らずにチェックが入っていて端数に泣かされていました)、これがかなり重要。この部分にチェックをいれることでピクセル単位でオブジェクトを作成・配置することができます。

③「ピクセルにスナップ」にチェック

②と似ている機能ですが、表示>「ピクセルにスナップ」にチェックをいれることによってピクセル単位で移動・配置することができます。
①②③を設定することで、端数によって起こる不要なアンチエイリアスを避けることができ、オブジェクトをキレイに保つことができるのです!

④ アートボード定規の基準点を正確に

デザインデータとWeb上の位置を正確に合わせるため、アートボード定規の基準点を正確に設定する必要があります。この設定を疎かにしてしまうと位置が計りづらくなったり、スライスする場合にずれてしまうことがあるので要注意。アートボード定規の基準点とwebページの左上の端点が同じ役割を持つように設定しましょう。
以上の設定を行うことでIllustratorでも円滑にWebデザインが可能に!
また、①と②を設定することにより「キー入力」で定めている値に関係なく、1pxずつ移動させることが可能なので、紙・Webと平行して作業をしている方にも便利な機能となっています。

キャプション:このような設定値でも1pxごとに移動・配置される

個人的には画像の書き出しまでデザイナー側で済ませておいた方が後々問題も発生しにくいと思っているので、実際にはこの設定をした上で、画像データとして扱う部分は画像として配置し、テキストデータとして扱う部分は標準フォントなどを選択し保存しています。その後、画像は一つのファイルにまとめ、確認用のjpgデータとIllustratorデータとを一緒にしてコーディングの担当者などにバトンタッチをするようにしています。
というより、HTML・CSSレベルはデザイナー側で組むのが一番の理想ですよね…エンジニアの方々いつもお世話になっていてすみません^^;

コーディング作業を担当してくれる方と連携しつつ、一度試してみてはいかがでしょうか。 執筆者:みなみうらそうすけ

SHARE

この記事をシェアする

Post
Share
Bookmark
LINE

連載

クリエイターズライフハック

クリエイターが活用できるライフハックをお届けする連載。

関連キーフレーズ

0件のコメント

※非ログインユーザーのコメントは編集部の承認を経て掲載されます。

※コメントの投稿前には利用規約の確認をお願いします。

コメントを削除します。
よろしいですか?

コメントを受け付けました

コメントは現在承認待ちです。

コメントは、編集部の承認を経て掲載されます。

※掲載可否の基準につきましては利用規約の確認をお願いします。

POP UP !

もっと見る

もっと見る

よく読まれている記事

KAI-YOU Premium

もっと見る

もっと見る
KEYPHRASE

いま、みんなが気になっていること

KAI-YOU.netにログインしているユーザーなら誰でも編集できるKAI-YOU.netの百科事典、それが「キーフレーズ」です。

キーフレーズ機能をもっと知る

イラスト・アートの週間ランキング

イラスト・アートの画像ランキング

もっと見る

もっと見る

最新のPOPをお届け!

もっと見る

もっと見る

このページは、株式会社カイユウに所属するKAI-YOU編集部が、独自に定めたコンテンツポリシーに基づき制作・配信しています。 KAI-YOU.netでは、文芸、アニメや漫画、YouTuberやVTuber、音楽や映像、イラストやアート、ゲーム、ヒップホップ、テクノロジーなどに関する最新ニュースを毎日更新しています。様々なジャンルを横断するポップカルチャーに関するインタビューやコラム、レポートといったコンテンツをお届けします。

ページトップへ