MTWebサイトをデザインする際に使うツールとして、皆さんは何をお使いでしょうか。現在はPhotoshopが主流だと思いますが、digrartではAdobeがCCをリリースする際に省かれてしまったFireworksも現役で使っています。FireworksはPhotoshopほど自由度が無い反面、Webに特化している分動作が軽く作業が早いメリットがあります。何よりスライスが便利ですよね。今回は上記のどちらでもないIllustratorでのWeb制作についての話題です。CCでFireworksが廃止されたせいか、実は今はIllustratorでも結構ちゃんとしたWebデザインができます。本来が紙媒体向きのツールのため、しっかり設定してから制作に入らないと困ったデータが出来上がってしまいます。Webをデザインするあたって、Illustratorを使いたいという方はWebの専門家ではないグラフィックデザイナー出身の方が多いのではないでしょうか。いう方が陥りやすい、残念な例をまずは紹介しましょう。残念な例:カラーモードがCMYKCMYKはシアン・マゼンタ・イエロー・ブラックの4色のインクをどれだけ混ぜるか、という色の考え方です。Webサイトはモニターで見るため当然インクは使いません。光の三原色であるRGBでデザインする必要があります。「CMYKで作ると表示できない」なんてことはないですが、CMYKではRGBよりも再現できる色が少なく、特にビビッドな色がインクでは出せないため、明るい色使いはできません。個人的によく感じるのは、空の写真なんかが少し暗いなーとか。CMKYデータをそのままRGBに変換しても、作成した意図通りの色にならない場合があります。黒を表現しようとK100%を指定していると、RGBでは茶色になってしまいます。残念な例:単位がmm、サイズが適当Illustratorではデフォルトの状態では単位はmmで、印刷物を作る場合にはこれで問題ありませんがWebではpx(ピクセル)が単位です。Webデザインは1pxの違いが美しさを損なうような世界です。ピクセルに合わせて作らないとオブジェクトの端がぼけるし、サイズが適当ではそもそもサイトの横幅すらわかりません。残念な例:乗算やスクリーン効果を使っている乗算やスクリーンはIllustratorに限らずPhotoshopやFireworksにもある機能で、絶対に使ってはいけないというわけではありません。NGな使い方がIllustratorユーザーに多いと感じたので、一応紹介しています。やってはいけないのは、画像と画像を乗算やスクリーンで重ねることです。Webサイトはページ単位でデザインした後、画像パーツはjpgやpngとして書き出し、テキストはhtmlファイルに入力し、組み立てていく作業に入ります。この際に、別々の画像同士を重ねてそこに乗算効果を加える、という事が出来ないんですよね。背景画像の上に画像を乗算で乗せるなんてのもNGです。一つの画像の中で乗算やスクリーンを使うのは問題ありません。残念な例:再現できない文字ここではIllustratorでの制作に限りませんが、紙媒体出身の方が陥りやすい例を紹介します。現在はレスポンシブデザインが主流で、画像文字はどんどん廃れていっています。どこを画像文字、どこをプレーンテキストで配置するかを意識し、プレーンテキスト部分は下記のようなものに気を付けましょう。特殊なフォント閲覧する人のマシンに入っているフォントまたはWebフォントとして使用可能なもの以外は使用できません。モリサワ系などのデザイナーが購入しているフォントやフリーフォントは使用しないようにしましょう。字詰め紙媒体では字詰めをしないと怒られますが、Webでは字詰めをすると怒られます。できないわけではないですが、とても特殊な場合です。基本は使わない方が無難です。端っこまでに収めたいから長体をかける、というのも基本的にコーダーに無視されます。文章の折り返し位置は閲覧環境によって変わりますので、意図通りの改行はできません。」のみの改行にしましょう。IllustratorでWebデザインをする前置きが長くなりましたが、ここからはWebに適したIllustratorの環境づくりを紹介します。単位から全ての単位をピクセルに変更しましょう。これでオブジェクトがすべてピクセルで表示されます。一般のキー入力を1pxに設定。矢印キーでの移動が1pxになります。ガイド・グリッドからグリッドをpx単位に設定。例ではグリッドを10px、分割数を10にしていますが好みで結構です。ドキュメント作成時の設定ファイルの新規作成時に詳細オプションを開き、カラーモードをRGBカラー、ラスタライズ効果をスクリーン(72ppi)、プレビューモードをピクセルに設定しましょう。ワークスペースでWebにチェックを入れると、開いているウィンドウなどがWeb向きの環境に切り替わります。普段から使用しているものとインターフェースが変わるため、人によっては使いづらいかもしれませんので、これは任意で結構です。横幅を決めてから作るWebサイトはリキッドデザインという特殊なものを除いて、基本的に横幅は固定です。一般的なサイトは960px~1200pxあたりが多いです。横幅を何ピクセルにするか決めてから制作に入りましょう。アートボードを決めた幅よりも大きく作り、その中央に配置していくのがお薦めです。することにより横幅を超えた要素を表現できます。(ヘッダーやメインビジュアル等)オブジェクトの基準点を左上にIllustratorのデフォルトでは基準点は中央です。そのため、幅が奇数のオブジェクトを配置するとx軸やy軸が小数点の数値になります。x軸やy軸が整数でない場合、配置されているオブジェクトは書き出し時に端がぼやけてしまいます。基準点を左上にすると、アートボードの左上にオブジェクトを配置した場合にはx軸y軸共に0pxになるので、位置や距離の計算もしやすくなります。線は内側に引く線を中央に引いてしまうと、線の幅が奇数だった場合にぼける原因になります。常に内側に引くように意識しましょう。まとめいかがでしたでしょうか。Illustratorなら自信があるけどPhotoshopはそんなに使えない...という方でも、設定さえちゃんとしていればWebサイトのデザインは可能です。基本は「RGBで作る」「幅を決める」「ピクセル単位、整数で作る」という事さえ守れば、コーダーが困らないデータに仕上がります。検索カテゴリーデザインWeb制作SEOWebに関するお問い合わせ、ご相談はこちら。