株式会社コプロシステム

お問い合わせ

2014年6月18日

WebデザインもIllustrator派!その訳と設定方法

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループのデザイナー早水です。

これまで「紙デザイン・ベクター作成はIllustrator、画像編集・WebページデザインはPhotoshopで」という常識がありました。(今回の記事ではFireworksを除きます)
しかし、ここのところWebデザインだってIllustratorで!という人が結構増えたのではないでしょうか?
そんな大のIllustrator派のひとりとして今回は"WebデザインをIllustratorでつくる理由"と"設定方法"について書こうと思います。

そもそもなぜWebデザインにはPhotosopだったのか

WebデザインにおいてIllustratorがあまり好まれない理由の1つとして、
Illustratorはもともと印刷物をつくる為に生まれたツールなのでベクター画像を中心に扱う為、ビットマップ画像中心のWebとの相性があまり良くなかったという理由があります。
1px以下の自由な座標にオブジェクトを配置できるため、スライス(素材の切り分け)をするときにズレて時間がかかったり、それをFlashやDreamweaver等のオーサリングツールで開いたときに、エッジが不鮮明にボケて汚くなってしまったりします。

結局何度も素材を作り直すことになっては誰も得をしませんよね。
そういう訳で、多少レイアウトが面倒でも最初からpx単位でキッチリ作れるPhotoshopを使うというわけです。

Illustratorの方が都合が良くなってきた

では、今度はIllustratorが良い理由をいくつか挙げてみます。

  1. レイアウトを組むにはやっぱりIllustratorの方が向いている
  2. Illustratorの機能がだんだんWeb制作に適応してきた
  3. 以前なら画像を使うしかなかったパーツがCSS3で表現できるようになり、画像を書き出す必要が大幅に減った
  4. マルチデバイス、マルチ解像度に対応する為、ビットマップからベクターデータ中心に
  5. デザインの流行がスキューモーフィズム※からフラットデザインへ

※スキューモーフィズム(Skeuomorphism) 他の物質に似せるために行うデザインや装飾のこと

だって楽だから!

本当のところ、一番大きな理由はやっぱり楽だからです。

1ファイルで複数ページを管理、比較できますし、レイヤーやレイアウトの自由度が高いので、修正や試行錯誤が容易です。
ただし、自由だからこそポイントを抑えておかないと、綺麗なデータが作れず、手戻りが増えてしまって意味がありません。
そこで、Webサイトのデザインとしてもキチンとしたモノがつくれるよう、Web制作用の設定を下でご紹介させていただきます。

レスポンシブ!フラットデザイン!CSS3!

絶賛流行中のレスポンシブWebデザインやフラットデザイン。
モバイル(スマートフォン/タブレット)からのWebサイトの閲覧機会の増加に伴って、
マルチデバイス、マルチ解像度での表示対応やタッチスクリーンを意識して、柔軟なレイアウトが必要になった昨今のWebデザイン。ディテールを作り込んだビットマップ画像を多用する機会が減り、シンプル&ミニマルなデザインが注目されるようになってきました。
加えて今ではナビゲーションやボタン類はCSS3での装飾表現が可能ですので、素材として切り出す画像も大幅に少なくなってきています。

img_1.jpg

Webページの本番素材というよりも、デザインカンプやレイアウト作成という意味合いの方が強くなってきているということを考えれば、より一層、それらに強いIllustratorを使った方が効率がいいですよね!

Webデザインの為の設定

それでは、Webデザインの為の設定をしていきます。
※今回の手順は、Illustrator CS5.1で制作しています。

1.ワークスペースの最適化

これは設定しなくても問題なく作業できますが、折角用意されているので、一応設定してみましょう。
画面のウインドウパネル類が、Web制作向けに置き換わります。
ウインドウ→ワークスペース→Web

img_2.jpg

2.新規ドキュメント作成

新しいドキュメントを作成します。
ファイル→新規

img_3.jpg

  • 単位:ピクセル
  • カラーモード:RGB
  • ラスタライズ効果:スクリーン(72 ppi)
  • プレビューモード:ピクセル
  • 新規オブジェクトをピクセルグリッドに整合:チェック

一番上の「プロファイル」で「Web」を選択すると、自動で赤枠の様にpx設定をしてくれます。
「デバイス」を選択すると、iPhoneやiPadなどのサイズに合わせたアートボードを選択することもできます。
プルダウンに無いサイズを設定したい場合は直接幅と高さを入力します。

3.環境設定

メニューから環境設定を行います。
Illustrator→環境設定→

img_4.jpg

  • 一般>キー入力:1px
  • 単位:すべてを「ピクセル」に
  • ガイド・グリッド>グリッド:1px
  • ガイド・グリッド>分割数:1

環境設定内にある上記の4つをそれぞれ設定してください。
※ガイド・グリッドは使いやすいよう調整

4.ピクセルグリッドに整合

「ピクセルグリッドに整合」、「ピクセルにスナップ」にそれぞれチェックが入っていることを確認して下さい。

img_5.jpg

  • ウインドウ→変形 ピクセルグリッドに整合:チェック
  • 表示→ピクセルにスナップ:チェック

これでWebデザインの為の準備は完了です。
Photoshopと同じ様にピクセル単位でオブジェクトを扱うことが出来るようになります。
※せっかく単位をすべてピクセル表示にしても、「ピクセルグリッドに整合」「ピクセルにスナップ」のチェックがはずれているとズレてしまいますので注意してください。

まとめ

いかがでしょうか?
Illustratorには他にもWeb制作に便利な機能がたくさん用意されています。
もちろんプロジェクトの内容にもよるとは思いますが、今まであまりIllustratorをメインでは使わなかったな、という方はこれを期に一度試してみてください。 慣れると結構便利ですよ。


  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「How to do」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP