2016年11月19日 WordBench奈良

1. 2016年11月19日
WordBench奈良
Cherry Pie Web 川井昌彦
Adobe Illustratorによる
WordPressテーマ作成ワークフロー

2. 2
自己紹介
●川井 昌彦（かわい まさひこ）
東京の制作会社に24年間勤めた後、
京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。
提案・見積・ディレクション・デザイン・コーディング・
プログラミング・顧客サポート・・・
制作の上流から下流までを一手に引き受けています。
「WordBench京都」などで、たまに登壇させていただいています。

3. 3
「WordCamp Kansai 2016」では、
セッションスピーカーをさせていただきました。
「熊本地震の支援サイトを30分で立ち上げ、
独自ドメイン新規取得込みで即日運用開始した話」

4. 4
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 ！
2015年に
MovableTypeから
WordPressに移行

5. 5
私とAdobe Illustratorとのお付き合い
初めて触ったのは、今から約20年前
・ Illustrator 5.5（CSではなく無印！）
以降、7～ CC2017まで、
全バージョンでの作業経験あり
CS5発売時には、東京・表参道で開かれた
「世界で最も早くAdobe Creative Suite 5 に触れられるリアルスポット
Station5 」
にて説明員を担当しました。

6. 6
本日の予定
1. WebデザインにIllustratorを使う理由
2. IllustratorとHTML+CSS
3. 重要な初期設定
4. テンプレート＝アートボード
5. HTML+CSS=スウォッチとスタイル
6. シンボル
7. 画像アセット
8. まとめ

7. 7
Webデザインに
Illustratorを使う理由
もともとは、Fireworksを使っていた
Ps、Aiも併用していた
写真・画像加工 ロゴ・地図
レイアウト
図形
文字

8. 8
CS6をもって、Fireworks開発中止・・・
Fwの代わりに、Aiを使用することに
写真・画像加工 ロゴ・地図
レイアウト
図形
文字

9. 9
デザインの目的で、使うツールは異なる
ビジュアルがメイン → Photoshop
・ 画像やパーツを作るのが目的
コンテンツ（テキスト）がメイン → Illustrator
・ 画像やパーツを作るだけでなく、
文字や画像ボックスの装飾を考えるのが目的
（必ずしも、パーツを作るわけではない）
※CMSのデザインなら、Illustratorが向いている

10. 10
IllustratorとHTML+CSS
Illustratorデータの構造と、HTML+CSSは親和性が高い
・ 画像が「リンク」で配置できる
（画像がドキュメントの解像度に依存しない）
・ スタイルと外部CSSは考え方が近い
スウォッチ（グローバル）
段落スタイル・文字スタイル
グラフィックスタイル
パーツ作成だけでなく、HTML部分のデザインもできる

11. 11
脱 ピクセルパーフェクトの考え方
ピクセルパーフェクト：
デザインとコーディングを、1pxの狂いもなく合わせて制作すること
Illustratorではピクセルパーフェクトのデザインが難しいため、
Webデザインには向かないと言われてきた
特に、線がボケると言われてきたのが大きい
（設定次第なんですけどね）

12. 12
脱 ピクセルパーフェクトの考え方
・ レスポンシブデザインでは、
ピクセルパーフェクトの実現が現実的ではない
・ Retinaディスプレイ登場で、従来の倍の解像度のデータが必要になった
Photoshopではデータが重くなりすぎる
→ ベクターグラフィックの必要性
アピアランス、ブラシやストロークの進化で、
Illustratorでも美麗なグラフィック作成が可能に
・ CSSの表現力が増し、画像書き出しの必要性が低下

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

14. 14
本日のサンプル

15. 15
重要な初期設定
・ プロファイル：Web
●詳細設定（～ CC2015）
プレビューモード：ピクセル
新規オブジェクトをピクセルグリッドに整合：しない
・ 設定
単位・キー入力など数値に関わるものは、
すべて「1px」の単位に修正
・ ピクセルのスナップ（CC2017～）

16. 16
データ制作のポイント
・ レイヤーは、HTMLの入れ子構造を意識する
body, article, section,
div(container, row, col),
p, ul, li ・・・
画像を埋め込まない
Retina対応のため、高解像度の画像をリンクして縮小して配置
画像の加工はPhotoshopで行う
body
header
div.containerdiv.containerarticle
section
section
footer

17. 17
テンプレート＝アートボード
WordPressのテンプレートを、アートボードで作成
・ 一つのドキュメントに、デザインが必要なすべてのテンプレートを作成
（重くならない作り方をすることが重要）
・ bootstrapのグリッドをガイドとして配置しておく
・ 共通部分（ヘッダー、フッターなど）は、シンボルで作成

18. 18
HTML+CSS=スウォッチとスタイル
・ ブロックレベル要素のCSS → 段落スタイル
・ インライン要素のCSS → 文字スタイル
・ 装飾のCSS → オブジェクトスタイル
・ カラー → スウォッチ（グローバル）

19. 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. 20
HTMLで表示される部分の注意
・ フォントは、ヒラギノ角ゴW3、メイリオ または Noto sans などの
OS標準のものか、Webフォントを使用する。
・ 文字変形、カーニング、トラッキングは使用しない
・ 日本語組版設定は使わない
禁則処理：なし、ぶらさがり：なし、文字組み：なし
（日本語と英数字の文字間が4分アキになるのを防ぐ）
・ 標準段落スタイル・標準文字スタイルは、変更しない・使わない
（他者とのファイルのやり取りがあるときは事故になりやすい）
※画像として書き出すものは、上記の制限は考えなくてもいいです。

21. 21
グラフィックスタイル
CSSで表現できるものは、極力画像にしない
CSSを設定する要素に合わせてスタイルを作成する
・ divタグとクラス
・ ブロック要素の文字関連以外のプロパティの指定
設定できるプロパティ
・ アピアランス、グラデーション
・ background, border, border-radius
text-shadow, box-shadow など

22. 22
スウォッチ（グローバル）
・ スウォッチはグローバルにしないと威力半減
グローバルにすれば、スウォッチパネルで色を変更するだけで
同じスウォッチが指定された部分の色を統一して変えられる
・ スウォッチは、カラーパネルで濃度を変えて指定できる
・ Sassを使うなら、スウォッチを変数として指定する

23. 23
スタイルの残念な点
・ InDesignでできる親子関係のスタイルは、Illustratorではできない
（上流のスタイルを継承して、一部を変更することはできない）
※文字スタイルは、指定外のプロパティは段落スタイルを継承する
・ 一つのオブジェクトに、複数スタイルをかけられない
・ CSSプロパティで取得できるのは、
文字スタイルとグラフィックスタイルのみ

24. 24
シンボル
複数のテンプレートにまたがって読み込まれるモジュールを
シンボルにして使いまわす
・ header.php、footer.php、
sidebar.php など
・ メニュー
・ SNSシェアボタン
・ ブロック要素
・ シンボルのネストが可能
（シンボルにシンボルを含めることができる）
header.php
メニュー
footer.php
sidebar.php

25. 25
９スライスで拡大縮小に対応
・ 9スライスを設定すると、変形時にガイドの外側が変形しない
内容に合わせてサイズが変わるブロック要素を、シンボルにできる
拡大・縮小しても、
ガイドの外側は変形しない

26. 26
ダイナミックシンボル
・ ダイナミックシンボルとして作成したシンボルは、
アピアランスが変えられる
・ アピアランスを変えたシンボルでも、
元のシンボルを修正すると、修正が反映される
塗りや線の変更・追加
不透明度の変更

27. 27
画像アセット
・ 画像として書き出したいオブジェクトを、
「アセットの書き出し」パネルにドラッグ＆ドロップして
ファイル名を指定するだけ
・ アートボード全体の書き出しもできる
（ページ全体のデザインカンプ）
・ 書き出し設定は、×1、×2・・・以外に、
サイズ指定、解像度指定が可能
・ 書き出し形式は、
PNG,PNG8,JPG100,JPG80,JPG50,JPG20,
SVG,PDF

28. 28
画像アセットの残念な点
・ アセットごとに書き出し形式を指定できない
（一括書き出しのための機能なので、そもそも無理かも）
Photoshopの画像アセットのほうが使いやすいかも
「Layer Exporter」というPhotoshopライクな書き出しエクステンションがあったが、
CC2015以降は使えない
・ 書き出し形式のプリセットが編集できない
・ クリッピングマスクをかけても、マスク外のオブジェクトごと書き出される
→ 従来の「スライス」を使うしかない？

29. 29
まとめ
・ テンプレート構造、HTML構造、CSSについて、
ある程度の理解がないとWebデザインをするのは難しい時代
・ Illustratorはテキストメインのデザインをするうえで強力なアプリだが、
Webデザインに特化されたアプリではない
他のWebデザイン用のツールもチェックしておいたほうがよい
※Sketch、Adobe XD など

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