ファウンデーショナル体のoと、ストロークの練習。

Adobe Illustratorによるウェブページのデザインデータ制作用備忘録。アプリケーションのバージョンは、Adobe Illustrator CS6を想定。以下、設定など。

• カラーモードはRGBにする。
• カラープロファイルはsRGBにする。
• カラーパレットはHSBで色指定する（自動で小数点以下の端数が入ることがある）。
• ピクセルプレビューモードにする。
• レイヤーごとにわけて管理する（テンプレート化して使う）。
• 線や文字の級数も含め、単位はすべてピクセルを使用する。
• ヘッダーやフッターなどの共通パーツはリンクファイルとして共通化する（Illustratorの仕様上、別ディレクトリのリンクはしないほうがよい。ゆえにリンクファイルを含んだディレクトリごとテンプレートをコピーしてページを制作していく）。
• オブジェクト移動時や矩形ツールでオブジェクトを生成したさいに0.5pxなどの端数が発生する場合がある。その対処としては、Illustratorのオブジェクト移動設定からX軸とY軸の値を、小数点を含まない整数の値で入力してからオブジェクトを任意の場所に配置するとうまくいく。
• ページ内で使用する写真やグラフィックなどは、PSDファイルで配置する。
• 配置するPSDファイルは、スマートオブジェクト化しておくことで後の拡大縮小にも対応できるようにする。
• 配置するPSDファイルのカラープロファイルをsRGBに設定する（AIファイルのカラープロファイルとあわせる）。
• ページ内（AIファイル）へのPSDファイル配置時には、AIファイル内のPSDファイル（画像やグラフィックなど）の縦横ピクセル数とPSDファイル自体の縦横ピクセル数をあわせる。これによってAIファイル上で表示されている状態そのままを書き出せるようになる。ファイルのリンクオプションを設定することで、リンクファイルの更新ダイアログを表示しないようにできるので、その設定でさらに効率が上がる。
• スライス用のレイヤーを用意する（FireworksのWebレイヤーのようなイメージ）。
• スライスは、不透明度50%の蛍光緑（#00EF00）のオブジェクトでつくる。以下、Webレイヤーと表記する。
• スライスを作ったWebレイヤーは、オブジェクトを動かしたりするときにレイヤーを表示する。スライスをするときにはWebレイヤー自体を非表示にする。Webレイヤーを表示したままスライスすると、スライス用のパスに設定されている蛍光緑（#00ef00）のオブジェクトを含めてスライスされてしまうのでWebレイヤーを非表示にする。Webレイヤーを非表示にしていてもスライス自体は機能している（スライスとして書き出せる）。これでFireworksのスライス機能にかなり近づけられる。
• 書き出し時のオプションにて、「文字に最適」を選択することでにじみやブレがなく正確に書き出せる。例外として、PSDファイルを配置して、さらに斜めに配置している場合は「文字に最適」オプションの場合はジャギーのようにエッジが目立つので、その場合は「アートに最適」を選ぶことで、ジャギーのようなエッジを回避できる。
• 複数デバイス用（例えばスマートフォン用）のデザインも、ひとつのファイルでデザインデータをつくる（場合による）。
• ページによってデザインデータをわける（バナーなどは同一のファイルで制作したほうが早いが、あとから探しにくくなるのでページごとに別のデザインデータファイルとしてわける整理方法で管理する）。
• ページはディレクトリによって整理する。ディレクトリの管理は実際のウェブサイト上のディレクトリ構成と同一にする。
  例：http://sample.com/aaa/bbb/index.html の場合、
  /aaa/bbb/Design
  /aaa/bbb/Material
  /aaa/bbb/Document
  のディレクトリを用意する。
• MaterialやDocumentディレクトリは/20130213/などの日付ディレクトリによって素材や資料を管理する。
• Designディレクトリの中のデザインデータ（AIファイル）は、project_aaa_bbb_index_20130213.aiのようなファイル名で管理する。
• 画像のリンクファイルはpc_thumb_mikupa.psdのようなファイル名で管理する。リンクファイル名にも日付を入れるかどうかは検証中。リンクファイルはPCとSP（スマートフォン）にわけたほうが効率的になる場合が多い。
• ディレクトリとファイル名が重複して冗長になるが、移動時の上書き保存ミス回避やSpotlightからの検索時に見つけやすくするために、あえて冗長なファイル名で管理する。
• ファイル名にハイフンは使用しない。アンダースコアで区切る。アンダースコアの区切り方は検証中（ディレクトリや意味の区切りでアンダースコアを用いるか、2単語でアンダースコアを用いるかは検証中）。

ウェブサイトおよびウェブページのデザインデータ制作において、自分のこれまでのアプリケーション変遷は、おおまかにAdobe Photoshop、Adobe Illustrator、Adobe Fireworks、Adobe Illustratorの順です。現在は画像データの書き出し（スライス）も含めてAdobe Illustratorが最も効率的に制作できるアプリケーションだと考えています。実際にはPhotoshopとIllustratorを複合的に使いますが、要素のレイアウト、ページのデザインデータを制作するという点においてはIllustratorが使いやすいと感じます。

上記の主な理由は、要素のレイアウトが容易であること。文字調整がおこないやすいこと。ベクトル形式データで要素の再編集がしやすいこと（グラフィックスタイル、シンボル、スウォッチ、アピアランスなどを活用）。要素を1px単位で正確に書き出せることです。バージョンCS4くらいまでは要素を1px単位で正確に書き出すにはIllustratorでは難がありましたが、設定次第でそれが可能になったため、Illustratorはウェブページのデザインデータ制作に向いていると考えます。

Mac版についてですが、Adobe Illustrator CS6から64ビットにネイティブ対応したらしく、その効果があるためかアプリケーション自体がPhotoshopやFireworksでのレイアウトに比べて軽く感じることも、使用理由として付け加えます。今後のSVG書き出しにも期待しています。

可能であれば、この記事は自分の設定方法にあわせて適時更新予定。

Last Update : Apr 13, 2014

2013年12月31日からはじめました。基本から進めていきたいと思います。

Day image 9

Date : September 20, 2012

Day image 8

• Date : September 11, 2012

Day image 5

Date : September 5, 2012

Day image 4

• Date : September 4, 2012

Day image 3

• Date : September 3, 2012

Day image 2

Date : September 2, 2012

Day image 1

• Date : August 31, 2012

反復

• Date : August 30, 2012

Pass

• Date : August 29, 2012

Duct box

• Date : August 28, 2012