WEBまねきねこ

ホームページをどうすればいいのか分からない中小零細企業のサイト運営を応援するブログ。中小企業診断士に挑戦中3週目。

Illustratoer

ワイヤーフレームをIllustratorを使って作成する際の注意点

投稿日:2014年10月13日 更新日:

前回、ざっくりとしたワイヤーフレームをIllustratorで制作してみました。

次に正確なワイヤーフレームを作成して、そこにデザインを落とし込んで行くのですが、なにぶん普段私がしている仕事はざっくりとしたワイヤーフレームどまりです。たいていの場合、手描きのものをデザイナーさんに渡して終了なので、その先にどういう風にコーディングされていくのかをちゃんと理解できておりません。

ですからこの度、サイトのリニューアルを行うに当たり、ワイヤーフレームからデザインを起こし、コーディングしていくまでの手順や注意点などを色々と調べてみました。

ワイヤーフレーム制作においてイラレデータは嫌われてる?

DTP出身の私はIllustratorが一番得意なんですが、どうやらイラレというのはスライスの書き出しが正確にできなかったり、線がきっちり1pxにならなかったりと、あれやこれやとトラブルが多くWEB制作にはあまり向いていないらしいことがわかりました。

WEB制作に一番向いているのはFireworks、その次にPhotoshopのようですね。
Fireworksは開発が終了しているので今後はPhotoshop一択となるのでしょうか。

Photoshopもキライではないのですが、レイアウトを作る作業をするとなるとブルーな気持ちになってきます。画像加工にしか使ってこなかったので、それ以上を使いこなせていないだけなのかもしれません。

photoshopでの作業にチャレンジしようかとも考えましたが、CS5以降はIllustratorでもそれなりにWEB制作用に適した設定も出来るようになってきているようですので、ちょっとdisられているっぽいことには目をつむって、結局Illustratorを使用することにしました。コーディングをするのも自分だしね。

Illustratorを使用してWEB用データを作る時の注意点

前述のとおり、もともと紙での印刷物などを作るのに使われてきたイラレで作ったデータは、WEB制作に使おうとしたときに、なんだかんだとトラブルが起こることが多いようです。

それを回避するためには、がっちりと初期設定を行う必要があります。
イラストレーター設定

注意点は全部で5つ。多いように思いますが、設定はそれほど大変でもありませんでした。これだけのことがいろいろとトラブルを起こすもとになっているらしいので、気を付けなければいけません。

【1】プロファイルをWEBにする

【2】カラーモードをRGBにする

【3】ラスタライズ効果をスクリーン(72ppi)にする

【4】単位はピクセル

【5】プレビューモードもピクセルプレビュー

【6】新規オブジェクトをピクセルグリッドに整合をオフに

【7】アピアランス>新規アートに基本アピアランスを適用をオフ

【8】線の位置は内側に

【9】プレビュー境界を使用にチェック

【10】キー入力を1ピクセル

【11】カラープロファイルはsRGB

【12】ピクセルビューにチェック

【13】ピクセルにスナップにチェック

【14】「ガイド・グリッド」のグリッド を 1px

【15】「ガイド・グリッド」の分割数 を1

順を追って設定の様子を書いていこうと思ったのですが、なにぶん私の環境はWin7/Illusurator_CS5 と、ちょっとばかり世の中に遅れをとっておりますので、細かいことは割愛することにします。CC使える身分になりたい。

参考にしたのはこちらのサイトです。

大丈夫やで☆イラレでウェブデザイン【その1】ピクセルをにじませない、絶対に! | Factory70 Blog イラスト/ウェブサイト制作

 

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版) – DTP Transit(Illustrator, Web制作, Web制作で使うIllustrator, イラレ)

Illustratorでのウェブデザイン、環境設定からスライスまでの流れ | Design SUKINADAKE

-Illustratoer
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした