IllustratorでWEBデザインを納品する方法(CS5版)

DTPデザイナーがWEBデザインを担当した場合、WEBのフォーマットと違うためクライアントやコーダーが困るケースがあります。へたをすると費用面でのトラブルになりかねません。WEBデザイナーはコーディングまでを考慮したデザインを考える必要があると思います。今回は、私がIllustratorでWEBデザインを制作するときに設定している方法と、制作時に気をつける点をまとめました。

新規ファイルの構成

  • アートボードサイズ:背景を入れたコンテンツ幅、1280pxや1440pxあたりが目安。高さは任意
  • ラスタライズ解像度:72dpi
  • カラーモード:RGB
  • 単位、プレビューモード:ピクセル
  • ピクセルグリッドに整合にチェックを入れる
DTPで通常設定するmm単位や350dpiの高解像、CMYKなどは使いません。アートボードは制作したデザインをクライアントに見せる事を想定し、背景を入れて設定します。幅はターゲットモニタサイズを考慮して決めます。上記の設定は後でも変更が可能です。 新規ドキュメント構成例

下準備

  • 定規を表示、スマートガイドを表示
  • コンテンツ幅にガイドをセット、コンテンツ幅は960pxあたりが目安
  • 定規の原点はコンテンツ幅の左側、アートボードの上部にセット
ピクセルで制作するのでガイドヒントや基準点を決めると制作が捗ります。コンテンツ幅は背景を抜いたサイズで、最近のグリッドシステムでは960pxが好んで使われているようです。 下準備の例

レイヤーの設定

  • ガイドレイヤー:ガイドはここに全て集約
  • メインレイヤー:基本コンテンツのオブジェクトを全て制作
  • オーバーレイヤー:ロールオーバー用として基本コンテンツを複製する
  • メインレイヤーのオブジェクトはヘッダーやフッターなど各コンテンツをグループ化してまとめる
オブジェクトがバラバラになのは汚部屋と同じです。仕事によってはデータを他人に渡す場合がありますので整理しておきます。ボタンロールオーバーを考えて、オーバー用のレイヤーを作ります。メインレイヤーを複製してオーバーのみ変更するのが基本的です。CSS Spritを使う場合にはナビゲーション用アートボードを用意してそこにまとめます。 レイヤーの設定例

HTMLテキスト

  • 基本文字サイズ12px、小さいサイズは10px、書体はMSゴシック
  • テキスト比率は高さ、幅100%固定。文字詰め、文字間隔をしない(行間は可能)
  • テキストのアンチエイリアスを「なし」にする。太字は複製して1px左右どちらかにずらす
文字については画像化する文字とHTMLテキストの2種類があります。他人が見てもどちらかが分かるように加工します。文字は小さすぎると見づらくなるのでHTMLテキスト化する場合には注意が必要です。アンチエイリアスは、下位バージョンでは効果のラスタライズで代替します。 画像テキストとHTMLテキストの違い

注意点

  • 画像は全て埋め込みにする
  • オブジェクトをピクセル単位に合わせる
  • 線があるオブジェクトは線の位置を内側か外側に指定する
  • コンテンツ幅を外れたデザインは行わない
  • 背景が複雑化したデザインは切り分ける
DTPでは画像はリンクすることが一般的ですが、WEBでは容量や解像度が低いのでファイルに埋め込みます(※画像の縮小時、元データを保持した表示をするので、書き出す前は見た目の画像が荒れて見えることがあります)。また、せっかく作ったデザインが劣化(ぼけ)しないよう、ピクセルにしっかりと合わせることも必要です。Illustratorの線は中央から太るため、ピクセルグリッドに整合させないとぼけますので気をつけましょう。 コンテンツ幅をはみ出したデザインや、背景に地紋が入って複雑化したデザインは綺麗ですがコーディングするときに問題が発生しやすいです。そのため、デザイン制作時にクライアントやコーダーと意識の統一を図る必要があります。基本的なデザインで印象良く見せる事も仕事では重要です。 背景と画像が重なっている状態

出力

  • PNG24でWEB書き出し
  • メールで確認する場合にはPDFでも可。必要であればHTMLに画像を貼り付けサーバーにアップする
  • 紙で見せる場合にはA3原寸で印刷
コーディング用の画像を書き出す際には、1677万色使え画質が劣化しないPNG-24で書き出します。900px幅のデザインを印刷するとA4で収まらないので大きな用紙でイメージを伝えます。

納品時

  • ファイルの名称は半角英数を使用
  • ZIP圧縮、aiのバージョンを付記、容量を記載
  • 必要であれば指示書やaiアウトライン化データを添付する
納品データはメール添付やDL、USBメモリなどが増えています。MacやWindowsといったOS間での閲覧不可トラブルをなくすため、名称は半角英数でファイルをまとめてZIP圧縮します。企業によっては下位バージョンしかないところもありますので、あらかじめ制作フォーマットを確認し、対応します。 コーディング等で問題が発生する可能性がある場合には、指示書を添付するなど対応します。文字の見え方に関するトラブルがある場合には、アウトライン化したデータを作っておくケースもあります。

綺麗な『デザイン』のWEBサイトを考える

SaCSS Vol.25で解説した~綺麗な『デザイン』のWEBサイトを考える~について、リファインしたものを記事として掲載します。 WEBサイトではデザインは二の次とよく言われますが、良質なデザインでできた他の商品は売り上げを左右することができるほどの影響力があります。デザインだけに偏ってはいけませんが、WEBに即したデザインの構築は重要です。今回は、良い=綺麗なWEBデザインを構築するにはどんなことを考えたら良いか、概要を挙げてみました。

カラーコンセプト(色の方向性)

WEBデザインを考えるとき、配色を固めておくことでWEBサイトの方向性をある程度決めることができます。色の方向性を決めるための項目として「性別」や「年齢層」を決めるとデザインが作りやすくなります。 子供であれば鮮やかで多色を好みます。年齢が上がるにつれ賑やかなものからシンプルで地味な方法へ色の指向が変化します。親が買う洋服の色が地味なのは、加齢により好みが変化しているからです。 pic01 色を決めるときに指標となるものは、色をより分かりやすく視覚化した色相環と色調(トーン)です。このシステムをPCCSと呼びます。PCCSについては日本色研事業株式会社のWEBサイトに詳しく書かれていますので、そちらを参照下さい。 また、WEBサイトの配色は3色以上からスタートし、ベースカラー70%、サブカラー25%、アクセントカラー5%の割合を守ると全体のバランスが取りやすいです。 pic02

画像の質を高める

WEBサイトで使用する画像の質を高めることで、エンドユーザーに与える印象が大きく変わります。画像を撮影できる状況であれば、一眼レフカメラを使用し、RAWデータで保存します。このデータをPhotoshopの16bitモードで調整することで高画質を維持しながらの加工が可能です。 pic03 また、画像のレイアウト(構図)にもこだわりましょう。WEBの場合、横長画像が多いため、主となる被写体を左右に置き、空いたスペースに文字を配置する形式がよく使われます。 pic04

文字の加工に気を配る

キャッチコピーなど、画像装飾する文字についても考える必要があります。DTPでもよく使われますが、文字を読みやすくするために袋文字や、ドロップシャドウをかけたり、文字の大きさや動きなど変化を付けて印象を際立たせます。 pic05

流行

最近のWEBデザインの傾向は、WEB2.0と呼ばれた角丸で光沢のあるものが減り、白ベースでベタを使うなどシンプルなテイストが増えています。これにより、一概には言えませんが、メインコンテンツをより目立たせることが可能です。

レスポンシブWebデザイン

WEBレイアウトで最近出てきたモノが、ブラウザサイズによる画面構成を決めるレイアウト方法です。1デザインでモバイルやノートブックなど全てのブラウザーに合わせることができます。レスポンシブWebデザインについて詳しく説明しているページはこちらです。

説得性

どんなデザインでも、最終的な判断は基本クライアントが持っていますし、出来たデザインの善し悪しを決めるのはエンドユーザーとなります。そのため、制作した良質なデザインであっても却下されることがあります。デザインが良質であることを相手に伝えるため、デザインがどのように考え、作られたかまとめたモノや説明する必要があります。