【Web制作】Illustrator最終チェック項目
約１ヶ月ぶりの投稿になります。
以前Illustrator CC のスライス注意点を投稿しましたが、
その後、制作の中でWebデザインにおけるIllustratorの注意点をまとめる必要がでてきたため、
合わせてこちらを投稿したいと思います。
そもそも注意点を守らないとどうなるの？
関わる人が大体困ってしまいます。 例えばコーダーがスライスを行う場合、注意点が守られていないとデザインの修正が発生します。
デザイナーさんがスライスする場合は、スライスしてやっと終わったと思ったらデザインの修正を言われてしまいます。
デザイン修正はコーダーの作業の開始が遅れにも影響しますし、デザイナーも何回も修正するのは嫌だと思います。
制作の流れをスムーズに進めるためにも、最初にちょっと手間を掛けて対策しましょう。
注意点まとめ
1. カラーモードはRGBで作成する
Webサイトで使用しているモニターは「RGB」です。
表現が変わってきてしまうので「RGB」で対応しましょう。
もしかしたら、「CMYK」の状態の色でも構わないという人もいるかもしれませんが、
「RGB」で制作していただくとカラーパレットも「RGB」表記になるので色を取得するコーダーにとっては大助かりです。 ちょっとしたことですが、喜びます
2. 単位はpxを使用する
色と同じくモニターは「px」単位なので、「px」対応しましょう。
コーディング作業はしっかりと数値を図り行われます。
数値を図る箇所も、コンテンツの大きさ・コンテンツ通しの距離（マージン）・線の大きさ・文字サイズと多岐に渡ります。
その一つ一つが「px」でないとなると大変疲れてしまいます。（一つ一つを変換しながら作業する人はいないと思いますが・・・）
「px」にするとちょっとしたことですが、喜びます。
3. 線を使用する場合は、内側にする
Illustratorは「外側」・「中間」・「内側」と線の位置を調整できますが、「内側」の設定をお願いします。
CSSにも「outline」プロパティがありこれが「外側」と同じ位置になりますが、大きさが変わってしまいます。
だいたいは、線を含めてコンテンツの大きさだと思います。
コーダー側は勝手に内側にしてサイトを見ていたら変になってるなんてことにならないように事前設定をお願いします。
喜びます。
4. パスの最適化をする
紙媒体用の設定で作成をするとスライスしたときずれたり、端がぼやけてしまいます。
それを防ぐためパスの最適化を行って下さい。
たった1pxかもしれませんが、その1pxで変になるので確認してみてください。
スライスのやり直しがコーダーは嫌いだと思うので、
ちゃんとスライスができると喜びます。
詳しくは「Illustrator CC のスライス注意点」や下記サイトをご確認ください。
デザインのピクセルを最適化
5. アウトライン対応をする
印刷するときも行うことだと思いますが、デザイナーに比べてコーダーは持っているフォント数が恐らく違います。
サイト見たら違うということにならないように、支給する場合はアウトライン前と後、両方支給ください。
喜びます。
まとめ
いかがしたでしょうか？
上記の注意点は初めに設定すれば大体解決できるものです。
最新Illustrator CCでは新規作成する際に「印刷用」と「Web用」のタブがあると思います。
そこで「Web用」を選択していただき、サイズを選択していただくと注意点の１～４がはじめから設定されています。
「印刷用」を選択していただければ、カラーモードなど印刷用になっているので一々環境を変更する必要がありません。
これでIllustratorを使ったデザイン制作が楽になると思います。
ご参考にしていただけたら幸いです。
ここまで読んでいただきありがとうございました。
コメント一覧