Illsutratorでのウェブデザインワークフロー例の紹介

Fireworks使用時

写真・画像加工

ロゴ・地図

Fireworks開発中止

写真・画像加工

レイアウト

図形

文字

元々は、Fireworksを使っていた

ロゴ・地図

Illsutratorでの

ウェブデザインワークフロー例

の紹介

Ps、Aiも使用していた

ご希望の方には、

　あとで、「Fireworksならでは」の、

　　テーブルレイアウトデータをお見せします！

レイアウト

図形

文字

第1回 D2D WEBグラフィックツール今昔

～デザインワークフローの転換～

Fwの代わりにAiを使用

なぜ、Illustratorを使うのか？

2016-4-2

川井昌彦

Cherry Pie Web

自己紹介

川井昌彦（かわいまさひこ）

東京の制作会社で24年間勤めた後、

京都府舞鶴市に帰郷してフリーランスで活動中

画像が「リンク」で配置できる

（画像も、ドキュメントの解像度に依存しない）

Aiは、HTML+CSSとの親和性が高い

スタイル機能は、外部CSSに考え方が近い

• スウォッチ
• 段落スタイル
• 文字スタイル
• グラフィックスタイル

Cherry Pie Web

http://www.cherrypieweb.com/

1997年開設（今年で19年目！）

アピアランスは、CSSで表現できる（画像書き出ししない）

画像の書き出しだけでなく、

HTMLで表現する部分のデザインもできる

大人の事情で、

公開スライドでは

実データは

お見せできません。

ご了承ください

2012年公開の

記事なのに、

今でもはてブが

増え続けています

ここからは、

　実案件のIllustrator制作データを

　　　　　　　　　　　お見せします！

そのかわり、

実データを見ながらお話したこと、

質疑応答でお話したこと、

当日お話しできなかったこと

について、書き出しておきます。

　スタイルは、class に対応する

• 段落スタイル、文字スタイルで指定できるもの

　　font-family, font-weight, font-size, color, font-style, letter-spacing、

　　text-align, line-height, text-indent, margin

• 段落スタイル → ブロック要素（p など）
• 文字スタイル → インライン要素（span、strong、em など）
• 段落スタイルに文字スタイルを重ね掛けする

• グラフィックスタイル

　　background、border、border-radius

　　グラデーションは、backgroundのgradient

• イラレの設定を、Webデザインに適した設定にしておく

　　プロファイル：Web

　　詳細設定：プレビューモード：ピクセル

　　　　　　　新規オブジェクトをピクセルグリッドに整合：「しない」

• 段落スタイルに、すべてのベースとなる基本のスタイルを設定し、

　　その他の段落スタイルは、基本スタイルを複製して作っていく。

• 設定内容は、bodyタグに設定する文字関係のCSSと同じものを設定
• font-family、font-size、font-weight、line-height、color など
• 文字変形、カーニング、トラッキングは設定しない
• 日本語組版機能は使わない

　　禁則処理：「なし」、ぶらさがり：「なし」、文字組み：「なし」

　　（おかしな詰めや空きが入らないようにするため）

・設定で、単位、キー入力など数値に関わるものは、すべて「1px」の単位に修正

• アートボードはデバイスごと（PC、スマホなど）に用意し、

bootstrapのグリッドをガイドとして配置しておく

• 配置画像は、すべてPSD（編集可能データ）にしてリンク

埋め込み画像はドキュメントが重くなり、修正等が面倒

画像の修正は、すべてPhotoshopで行う

Retina対応を考えるなら、高解像度のものをリンクしておく

• レイヤーはHTMLの入れ子を意識してまとめる

body、article、section、div（container、row、col）、p など

• スライスは一つのレイヤーにまとめる（重なるスライスの前後面を操作しやすい）

• HTMLにする部分には、すべての文字に何らかの「段落スタイル」を適用する

（bodyタグのcssが適用されているという考え）

ご清聴、

ありがとうございました。

• CSSプロパティパネルから、コピー＆ペーストでCSSが得られる

　　（アピアランスは、CSSプロパティパネルからは得られない）

　　（角丸は、アピアランスではなく「変形」を使う）

• スライスが重なっている場合は、

　　書き出したいスライスを最上位に移動してから、そのスライスを選択して書き出す

• スライス時に書き出しサイズを変更できる

　　（x2 を同時に書き出すことは、今のところできない）

• スウォッチは、「グローバル」で使用する

• デザインの統一と効率化や漏れ防止のために、スウォッチ、段落スタイル、

文字スタイル、グラフィックスタイルを積極的に使用する

• CSSで表現できるなら、極力スライスで書き出さないことを考える

• 文字を画像で書き出す部分のスタイルには、

文字の変形、カーニング、トラッキング、日本語組版などを使用してもいい

※文字詰めを自動で行いたい場合は、次の設定を推奨します

• 使用フォント：OpenTypeフォント
• カーニング：自動
• OpenType機能-プロポーショナルメトリクス：ON

※イラレでは、カーニングに「オプティカル」は使わないほうがいいです