記事の詳細

以前こんな記事を書きました。
WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる

WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる
ちょっとデザインかじってる人対象のお話なんですが。私はIllustratorのベジェ曲線にほれ込んでデザイナーを目指したくらいIllustratorが好きなんですが、WEBデザインっ...

最近すっかりIllustratorでWEBデザインをするスタイルになって、そろそろこれが確立し始めているような気が! していますので!
覚書も兼ねてオススメIllustratorのポイント11選です。相変わらずイラレラブ勢です。

IllustratorでWEBデザインを行うときの下準備

環境設定(ショートカット:Ctrl+K/Command+K)

  • キー入力を1px
  • 単位設定をすべてピクセル
  • データの復元はお好みで

IllustratorでWebデザインをするときのポイント IllustratorでWebデザインをするときのポイント IllustratorでWebデザインをするときのポイント

新規ファイルの設定(ショートカット:Ctrl+N/Command+N)

新規ファイルを作成する場合はWeb設定を選びます。
詳細設定をクリックすると昔ながらのファイル設定が出てきます。
カラーモードはRGB72ppiで製作すればだいたい何とかなります。プレビューモードは途中でも変更可能ですがお好みでデフォルトかピクセルを選びましょう。

IllustratorでWebデザインをするときのポイント IllustratorでWebデザインをするときのポイント

ピクセルパーフェクトって何?

Illustratorはベクターですので、ピクセルよりももっと細やかな表現が可能なのですが、ディスプレイ上で表現するにピクセルよりも細かい表現などうろたえるのみになってしまいます。
ピクセルパーフェクトは、Illustrator上でもきっちりピクセルにフィックスしてくれる機能です。これで妙なズレもできない!

IllustratorでWebデザインをするときのポイント

ちなみに新規ファイル作成の時に「Web」から作成を選ぶと、「ピクセルにスナップ」に自動的にチェックが入ります。これは「メニュー>表示」から確認できます。
既存のものをピクセルパーフェクトにしたい場合(言い方としてはピクセル整合、とか、ピクセルにスナップ、もピクセルパーフェクトの範疇内ですね)は、対象のオブジェクトを選択したあと、右クリック>ピクセルを最適化 を選びます。

IllustratorでWebデザインをするときのポイント

ピクセル整合はできるオブジェクトとできないオブジェクトがありますので随時確認しながら作業しましょう。

ピクセルパーフェクトなアートの描画|Adobeサポート

ピクセルパーフェクトが邪魔になることもある?

特に自由にイラストを描いていきたいときは、この「ピクセルにスナップ」というやつが非常に煩わしくなる時があります。私は曲線で表現していきたいときは、別ファイルに描いて、配置時に「ピクセルを最適化」しています。

 

線の設定

環境設定できちんと単位をピクセルに設定しておくと、線幅のスタートは1pxからになります。
線の位置を内側にしておきましょう。中央にすると0.5pxオブジェクトが大きくなっちゃいますからね!

IllustratorでWebデザインをするときのポイント

プレビューについて

ピクセルプレビュー(ショートカット:Ctrl+Alt+Y/Command+Alt+Y 解除:Ctrl+Shift+Alt+Y/Command+Shift+Alt+Y)

表示>ピクセルプレビューでピクセルが見えるようになります。拡大して確認してみましょう。

IllustratorでWebデザインをするときのポイントIllustratorでWebデザインをするときのポイント

新規ファイル作成時にプレビューモードを「ピクセル」にしておくと、このピクセルプレビューがオンになった状態でファイルが生成されます。

アウトラインのプレビュー(ショートカット:Ctrl+Y/Command+Y 解除:Ctrl+Y/Command+Y)

Webデザインのみでなく、DTPなどにもよく使われますが、Illustratorにおけるパスのラインが見えるようになります。

IllustratorでWebデザインをするときのポイント

レイヤーパネルの眼の部分をCtrlを押しながらクリックすると同様の表示になります。レイヤーごとにも可能です。

IllustratorでWebデザインをするときのポイント

ルーラー(定規)の表示とガイドラインの作成

ルーラー(定規)の表示はショートカット:Ctrl+R/Command+Rで、解除も同様です。使い方はPhotoshopなどと一緒で、定規をクリック&ドラッグすると、縦線・横線のガイドラインを作成することができます。

IllustratorでWebデザインをするときのポイント

シェイプツールなどでガイドを作成することもできます。画面の中で描画範囲を決めるときは非常に便利。ショートカット:Ctrl+5/Command+5。

IllustratorでWebデザインをするときのポイント

カラーガイドによる色の置き換えとグローバルカラー

カラーガイド

イラストや図などの微細なカラー変化をしたい場合、細かいパーツをshiftを押しながら選択するのは苦痛極まりないので、カラーガイドを使います。オブジェクトを選択した状態でカラーガイドを出してみると、それぞれのカラーをどのように変えるかを選ぶことができます。
カラーガイドパレット:Shift+F3 表示>カラーガイド

IllustratorでWebデザインをするときのポイントIllustratorでWebデザインをするときのポイントIllustratorでWebデザインをするときのポイント

カラーグループ(カラーハーモニー)|Adobeサポート

グローバルカラー

作成した色を多用する場合、色をグローバルカラーとして登録しておくことが可能です。汎用の、広域の色、ってことですね。

IllustratorでWebデザインをするときのポイント

グローバルにチェックを入れておくと、スウォッチパネル上で色を変更したときに、同じ色がすべて変化します。
グローバルカラーにしてスウォッチパネルに登録するより前に同色で作っていたものは、デフォルトとして残ってしまいますので、後からいちいち色を登録したグローバルカラーで置き換えしなければならなくなりますので、先にグローバルカラーを作っておくと便利ですね。

なお、一気にグローバルカラーを適応したい場合は、グローバルカラーでないデフォルトの色を乗せたオブジェクトを選択したのち、選択>共通>カラー(塗りor線)を選ぶと便利です。

スウォッチの使用と作成|Adobeサポート

段落スタイルで見出しやフォントのテンプレート化

同じく文字スタイルというのもあるのですが、段落スタイルの方が使い勝手がよいです。hで見出しを組むことが多いので、h1からh5くらいまで、あらかじめフォントサイズとフォントファミリー、カラーくらいは設定しておくと便利です。

IllustratorでWebデザインをするときのポイント

文字スタイルと段落スタイル|Adobeサポート

変形

しょっちゅう使います。基本的な使い方をおさらいしておきましょう。
「角を拡大・縮小」「線幅と効果を拡大縮小」にチェックを入れると、それぞれが比率を保ったまま拡大縮小します。線幅を変えたくない、とか、角の丸みはそのままで、といったときはチェックを外しておくのがベストです。

IllustratorでWebデザインをするときのポイント

変形パネルの使い方(Illustrator CC)|Adobeサポート

アセット

アセットあればもうスライスとかいらないんじゃないの? なんて思っちゃいます。本当にスライスを作る機会が激減しました。
詳しくはこちら。

2016年6月20日のAdobeソフトアップデートで Illustratorに画像アセットが追加されました

WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる
ちょっとデザインかじってる人対象のお話なんですが。私はIllustratorのベジェ曲線にほれ込んでデザイナーを目指したくらいIllustratorが好きなんですが、WEBデザインっ...

アセットの収集と一括書き出し|Adobeサポート

グラフィックスタイル

アピアランスで設定した、オブジェクトに適応するフィルターや、線や塗りの色、パターン、ブラシなどをひとまとめにして登録できます。WebデザインのみでなくDTPでもよく利用されるツールですね。

IllustratorでWebデザインをするときのポイントIllustratorでWebデザインをするときのポイント

シンボル

画像やアイコン、イラストといった様々なオブジェクトの要素をひとまとめにして登録することができます。グラフィックスタイルと違って、もうすでに完成された形を登録しておくことになるので、ヘッダーやフッターをひとまとめにしてシンボル化しておくといいでしょう。
シンボルは、該当するシンボルをパレット上でダブルクリックorアートボード上のシンボルをダブルクリックで編集ができ、同じシンボルを使用している場合は変更がすべてに適応されます。

IllustratorでWebデザインをするときのポイント IllustratorでWebデザインをするときのポイント IllustratorでWebデザインをするときのポイント

リンク

Illustratorで画像を配置したとき、画像にガイドカラーでばってんが描かれているとリンク画像です。ファイル>配置 で出てくるダイアログで「リンク」にチェックを入れておくとこういった設定になります。
画像は「オリジナルを編集」することで、Photoshopで編集を行うことができます。リンクの更新は自動で行われますが、手動でも行うことができます。

IllustratorでWebデザインをするときのポイント

ちなみにjpegなどの単独ファイルは、ペインタや他のソフトで開かれる場合があります。これはIllustratorのプログラムではなく、各OSで「jpegを開くソフトはPhotoshopだよ」という具合に指定してあげると、Illustratorの「オリジナルを編集」からPhotoshopに飛ぶようになります

IllustratorでWebデザインをするときのポイントIllustratorでWebデザインをするときのポイント

Illustratorでのワイヤーフレーム、およびデザインの書き出し方について

illustratorのデータはアートボードごとにpdfの書き出しが可能です。
別名で保存>ファイルの種類:Adobe PDFにして、
「全て」をチェックする場合:すべてのアートボードを含む全画面のPDFが生成されます。
「範囲」をチェックする場合:各々アートボードごとに書き出しされます。数字をハイフンでつなぐと、数字の範囲内のアートボードを書き出し(1-5なら1、2、3、4、5のアートボード)カンマで区切ると指定されたアートボードを書き出します(2,5なら2と5のアートボード)合わせ技として1-5,8,12とすると、1から5のアートボードと、8と12のアートボードを書き出します。

長くなりましたね!皆様のよいWebデザインライフをお楽しみくださいませー!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る