2016年11月19日

WordBench奈良

Cherry Pie Web 川井昌彦

Adobe Illustratorによる WordPressテーマ作成ワークフロー

2

自己紹介●川井 昌彦 （かわい まさひこ）

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

　京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。

　提案・見積・ディレクション・デザイン・コーディング・

　　　プログラミング・顧客サポート・・・

　　　　　制作の上流から下流までを一手に引き受けています。

　「WordBench京都」などで、たまに登壇させていただいています。

3

「WordCamp Kansai 2016」では、

セッションスピーカーをさせていただきました。

「熊本地震の支援サイトを30分で立ち上げ、 　独自ドメイン新規取得込みで即日運用開始した話」

4

Cherry Pie Webhttp://www.cherrypieweb.com

1997年開設

今年で19年目 ！

2015年に

　　MovableTypeから

　　　　WordPressに移行

5

私とAdobe Illustratorとのお付き合い初めて触ったのは、今から約20年前

・ Illustrator 5.5（CSではなく無印！）

以降、7～CC2017まで、

全バージョンでの作業経験あり

CS5発売時には、東京・表参道で開かれた

「世界で最も早くAdobe Creative Suite 5 に触れられるリアルスポット

Station5 」　 にて説明員を担当しました。

6

本日の予定1. WebデザインにIllustratorを使う理由

2. IllustratorとHTML+CSS

3. 重要な初期設定

4. テンプレート＝アートボード

5. HTML+CSS=スウォッチとスタイル

6. シンボル

7. 画像アセット

8. まとめ

7

Webデザインに Illustratorを使う理由もともとは、Fireworksを使っていた

Ps、Aiも併用していた

写真・画像加工 ロゴ・地図

レイアウト 図形 文字

8

CS6をもって、Fireworks開発中止・・・

Fwの代わりに、Aiを使用することに

写真・画像加工 ロゴ・地図

レイアウト 図形 文字

9

デザインの目的で、使うツールは異なるビジュアルがメイン → Photoshop・ 画像やパーツを作るのが目的

コンテンツ（テキスト）がメイン → Illustrator・ 画像やパーツを作るだけでなく、

文字や画像ボックスの装飾を考えるのが目的

（必ずしも、パーツを作るわけではない）

※CMSのデザインなら、Illustratorが向いている

10

IllustratorとHTML+CSSIllustratorデータの構造と、HTML+CSSは親和性が高い・ 画像が「リンク」で配置できる

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

・ スタイルと外部CSSは考え方が近い

スウォッチ（グローバル）

段落スタイル・文字スタイル

グラフィックスタイル

パーツ作成だけでなく、HTML部分のデザインもできる

11

"脱" ピクセルパーフェクトの考え方

ピクセルパーフェクト： 　デザインとコーディングを、1pxの狂いもなく合わせて制作すること

Illustratorではピクセルパーフェクトのデザインが難しいため、

Webデザインには向かないと言われてきた

特に、線がボケると言われてきたのが大きい

（設定次第なんですけどね）

12

"脱" ピクセルパーフェクトの考え方・ レスポンシブデザインでは、

ピクセルパーフェクトの実現が現実的ではない

・ Retinaディスプレイ登場で、従来の倍の解像度のデータが必要になった

Photoshopではデータが重くなりすぎる

→ ベクターグラフィックの必要性

　 アピアランス、ブラシやストロークの進化で、

　　　Illustratorでも美麗なグラフィック作成が可能に

・ CSSの表現力が増し、画像書き出しの必要性が低下

13

ここからは、実際のIllustratorデータを見ながら、説明していきます。

14

本日のサンプル

　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　

15

重要な初期設定・ プロファイル：Web

●詳細設定（～CC2015）

　プレビューモード：ピクセル

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

・ 設定

単位・キー入力など数値に関わるものは、

　すべて「1px」の単位に修正

・ ピクセルのスナップ（CC2017～）

16

データ制作のポイント・ レイヤーは、HTMLの入れ子構造を意識する

body, article, section, div(container, row, col), p, ul, li ・・・

画像を埋め込まない

Retina対応のため、高解像度の画像をリンクして縮小して配置

画像の加工はPhotoshopで行う

body

header

div.containerdiv.containerarticlesection

section

footer

17

テンプレート＝アートボードWordPressのテンプレートを、アートボードで作成

・ 一つのドキュメントに、デザインが必要なすべてのテンプレートを作成

（重くならない作り方をすることが重要）

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

・ 共通部分（ヘッダー、フッターなど）は、シンボルで作成

18

HTML+CSS=スウォッチとスタイル・ ブロックレベル要素のCSS → 段落スタイル

・ インライン要素のCSS → 文字スタイル

・ 装飾のCSS → オブジェクトスタイル

・ カラー → スウォッチ（グローバル）

19

段落スタイル・文字スタイルCSSを設定する要素に合わせてスタイルを作成する・ 段落スタイル「body」を作成し、基本のプロパティを設定しておく

その他の段落スタイルは、bodyを複製して作成

・ H1～ H6, p, strong など文字関連のタグ

・ 文字に適用されるクラス

設定できるプロパティ・ font-family, font-size, font-style, font-weight, margin (padding), text-align, text-indent, line-height, color, text-decoration など

・ background, border, border-radius, text-shadow, box-shadow などは、

オブジェクトスタイルを併用する

20

HTMLで表示される部分の注意・ フォントは、ヒラギノ角ゴW3、メイリオ　または Noto sans などの

OS標準のものか、Webフォントを使用する。

・ 文字変形、カーニング、トラッキングは使用しない

・ 日本語組版設定は使わない

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

（日本語と英数字の文字間が4分アキになるのを防ぐ）

・ 標準段落スタイル・標準文字スタイルは、変更しない・使わない

（他者とのファイルのやり取りがあるときは事故になりやすい）

※画像として書き出すものは、上記の制限は考えなくてもいいです。

21

グラフィックスタイルCSSで表現できるものは、極力画像にしない

CSSを設定する要素に合わせてスタイルを作成する・ divタグとクラス

・ ブロック要素の文字関連以外のプロパティの指定

設定できるプロパティ・ アピアランス、グラデーション

・ background, border, border-radius text-shadow, box-shadow など

22

スウォッチ（グローバル）・ スウォッチはグローバルにしないと威力半減

グローバルにすれば、スウォッチパネルで色を変更するだけで

同じスウォッチが指定された部分の色を統一して変えられる

・ スウォッチは、カラーパネルで濃度を変えて指定できる

・ Sassを使うなら、スウォッチを変数として指定する

23

スタイルの残念な点・ InDesignでできる"親子関係"のスタイルは、Illustratorではできない

（上流のスタイルを継承して、一部を変更することはできない）

※文字スタイルは、指定外のプロパティは段落スタイルを継承する

・ 一つのオブジェクトに、複数スタイルをかけられない

・ CSSプロパティで取得できるのは、

文字スタイルとグラフィックスタイルのみ

24

シンボル複数のテンプレートにまたがって読み込まれるモジュールを

シンボルにして使いまわす

・ header.php、 footer.php、 sidebar.php など

・ メニュー

・ SNSシェアボタン

・ ブロック要素

・ シンボルのネストが可能

（シンボルにシンボルを含めることができる）

header.php

メニュー

footer.php

sidebar.php

25

９スライスで拡大縮小に対応・ 9スライスを設定すると、変形時にガイドの外側が変形しない

内容に合わせてサイズが変わるブロック要素を、シンボルにできる

拡大・縮小しても、 ガイドの外側は変形しない

26

ダイナミックシンボル・ ダイナミックシンボルとして作成したシンボルは、

アピアランスが変えられる

・ アピアランスを変えたシンボルでも、

元のシンボルを修正すると、修正が反映される

塗りや線の変更・追加

不透明度の変更

27

画像アセット・ 画像として書き出したいオブジェクトを、

「アセットの書き出し」パネルにドラッグ＆ドロップして

ファイル名を指定するだけ

・ アートボード全体の書き出しもできる

（ページ全体のデザインカンプ）

・ 書き出し設定は、×1、×2・・・以外に、

サイズ指定、解像度指定が可能

・ 書き出し形式は、

PNG,PNG8,JPG100,JPG80,JPG50,JPG20, SVG,PDF

28

画像アセットの残念な点・ アセットごとに書き出し形式を指定できない

（一括書き出しのための機能なので、そもそも無理かも）

Photoshopの画像アセットのほうが使いやすいかも

「Layer Exporter」というPhotoshopライクな書き出しエクステンションがあったが、

CC2015以降は使えない

・ 書き出し形式のプリセットが編集できない

・ クリッピングマスクをかけても、マスク外のオブジェクトごと書き出される

→ 従来の「スライス」を使うしかない？

29

まとめ・ テンプレート構造、HTML構造、CSSについて、

ある程度の理解がないとWebデザインをするのは難しい時代

・ Illustratorはテキストメインのデザインをするうえで強力なアプリだが、

Webデザインに特化されたアプリではない

他のWebデザイン用のツールもチェックしておいたほうがよい

※Sketch、Adobe XD など

30

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