Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
2016年11月19日
WordBench奈良
Cherry Pie Web 川井昌彦
Adobe Illustratorによる
WordPressテーマ作成ワークフロー
2
自己紹介
●川井 昌彦(かわい まさひこ)
 東京の制作会社に24年間勤めた後、
 京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。
 提案・見積・ディレクション・デザイン・コーディング・
   プログラミング・顧客サ...
3
「WordCamp Kansai 2016」では、
セッションスピーカーをさせていただきました。
「熊本地震の支援サイトを30分で立ち上げ、
 独自ドメイン新規取得込みで即日運用開始した話」
4
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 !
2015年に
  MovableTypeから
    WordPressに移行
5
私とAdobe Illustratorとのお付き合い
初めて触ったのは、今から約20年前
・	Illustrator 5.5(CSではなく無印!)
以降、7~ CC2017まで、
全バージョンでの作業経験あり
CS5発売時には、東京・表参道...
6
本日の予定
1.	 WebデザインにIllustratorを使う理由
2.	 IllustratorとHTML+CSS
3.	 重要な初期設定
4.	 テンプレート=アートボード
5.	 HTML+CSS=スウォッチとスタイル
6.	 シン...
7
Webデザインに
Illustratorを使う理由
もともとは、Fireworksを使っていた
Ps、Aiも併用していた
写真・画像加工 ロゴ・地図
レイアウト
図形
文字
8
CS6をもって、Fireworks開発中止・・・
Fwの代わりに、Aiを使用することに
写真・画像加工 ロゴ・地図
レイアウト
図形
文字
9
デザインの目的で、使うツールは異なる
ビジュアルがメイン → Photoshop
・	画像やパーツを作るのが目的
コンテンツ(テキスト)がメイン → Illustrator
・	画像やパーツを作るだけでなく、
文字や画像ボックスの装飾を考え...
10
IllustratorとHTML+CSS
Illustratorデータの構造と、HTML+CSSは親和性が高い
・	画像が「リンク」で配置できる
(画像がドキュメントの解像度に依存しない)
・	スタイルと外部CSSは考え方が近い
スウォッ...
11
脱 ピクセルパーフェクトの考え方
ピクセルパーフェクト:
 デザインとコーディングを、1pxの狂いもなく合わせて制作すること
Illustratorではピクセルパーフェクトのデザインが難しいため、
 Webデザインには向かないと言われてき...
12
脱 ピクセルパーフェクトの考え方
・	レスポンシブデザインでは、
ピクセルパーフェクトの実現が現実的ではない
・	Retinaディスプレイ登場で、従来の倍の解像度のデータが必要になった
Photoshopではデータが重くなりすぎる
→ ベ...
13
ここからは、実際のIllustratorデータを見ながら、説明していきます。
14
本日のサンプル
         
                          
15
重要な初期設定
・	プロファイル:Web
●詳細設定(~ CC2015)
 プレビューモード:ピクセル
 新規オブジェクトをピクセルグリッドに整合:しない
・	設定
単位・キー入力など数値に関わるものは、
 すべて「1px」の単位に修正
...
16
データ制作のポイント
・	レイヤーは、HTMLの入れ子構造を意識する
body, article, section,
div(container, row, col),
p, ul, li ・・・
画像を埋め込まない
Retina対応のた...
17
テンプレート=アートボード
WordPressのテンプレートを、アートボードで作成
・	一つのドキュメントに、デザインが必要なすべてのテンプレートを作成
(重くならない作り方をすることが重要)
・	bootstrapのグリッドをガイドとし...
18
HTML+CSS=スウォッチとスタイル
・	ブロックレベル要素のCSS → 段落スタイル
・	インライン要素のCSS → 文字スタイル
・	装飾のCSS → オブジェクトスタイル
・	カラー → スウォッチ(グローバル)
19
段落スタイル・文字スタイル
CSSを設定する要素に合わせてスタイルを作成する
・	段落スタイル「body」を作成し、基本のプロパティを設定しておく
その他の段落スタイルは、bodyを複製して作成
・	H1 ~ H6, p, strong ...
20
HTMLで表示される部分の注意
・	フォントは、ヒラギノ角ゴW3、メイリオ または Noto sans などの
OS標準のものか、Webフォントを使用する。
・	文字変形、カーニング、トラッキングは使用しない
・	日本語組版設定は使わない...
21
グラフィックスタイル
CSSで表現できるものは、極力画像にしない
CSSを設定する要素に合わせてスタイルを作成する
・	divタグとクラス
・	ブロック要素の文字関連以外のプロパティの指定
設定できるプロパティ
・	アピアランス、グラデー...
22
スウォッチ(グローバル)
・	スウォッチはグローバルにしないと威力半減
グローバルにすれば、スウォッチパネルで色を変更するだけで
同じスウォッチが指定された部分の色を統一して変えられる
・	スウォッチは、カラーパネルで濃度を変えて指定でき...
23
スタイルの残念な点
・	InDesignでできる親子関係のスタイルは、Illustratorではできない
(上流のスタイルを継承して、一部を変更することはできない)
※文字スタイルは、指定外のプロパティは段落スタイルを継承する
・	一つの...
24
シンボル
複数のテンプレートにまたがって読み込まれるモジュールを
シンボルにして使いまわす
・	header.php、footer.php、
sidebar.php など
・	メニュー
・	SNSシェアボタン
・	ブロック要素
・	シンボ...
25
9スライスで拡大縮小に対応
・	9スライスを設定すると、変形時にガイドの外側が変形しない
内容に合わせてサイズが変わるブロック要素を、シンボルにできる
拡大・縮小しても、
ガイドの外側は変形しない
26
ダイナミックシンボル
・	ダイナミックシンボルとして作成したシンボルは、
アピアランスが変えられる
・	アピアランスを変えたシンボルでも、
元のシンボルを修正すると、修正が反映される
塗りや線の変更・追加
不透明度の変更
27
画像アセット
・	画像として書き出したいオブジェクトを、
「アセットの書き出し」パネルにドラッグ&ドロップして
ファイル名を指定するだけ
・	アートボード全体の書き出しもできる
(ページ全体のデザインカンプ)
・	書き出し設定は、×1、×...
28
画像アセットの残念な点
・	アセットごとに書き出し形式を指定できない
(一括書き出しのための機能なので、そもそも無理かも)
Photoshopの画像アセットのほうが使いやすいかも
「Layer Exporter」というPhotoshopラ...
29
まとめ
・	テンプレート構造、HTML構造、CSSについて、
ある程度の理解がないとWebデザインをするのは難しい時代
・	Illustratorはテキストメインのデザインをするうえで強力なアプリだが、
Webデザインに特化されたアプリで...
30
ご清聴ありがとうございました。
Nächste SlideShare
Wird geladen in …5
×

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

3.503 Aufrufe

Veröffentlicht am

2016年11月19日
WordBench奈良

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

  1. 1. 2016年11月19日 WordBench奈良 Cherry Pie Web 川井昌彦 Adobe Illustratorによる WordPressテーマ作成ワークフロー
  2. 2. 2 自己紹介 ●川井 昌彦(かわい まさひこ)  東京の制作会社に24年間勤めた後、  京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。  提案・見積・ディレクション・デザイン・コーディング・    プログラミング・顧客サポート・・・      制作の上流から下流までを一手に引き受けています。  「WordBench京都」などで、たまに登壇させていただいています。
  3. 3. 3 「WordCamp Kansai 2016」では、 セッションスピーカーをさせていただきました。 「熊本地震の支援サイトを30分で立ち上げ、  独自ドメイン新規取得込みで即日運用開始した話」
  4. 4. 4 Cherry Pie Web http://www.cherrypieweb.com 1997年開設 今年で19年目 ! 2015年に   MovableTypeから     WordPressに移行
  5. 5. 5 私とAdobe Illustratorとのお付き合い 初めて触ったのは、今から約20年前 ・ Illustrator 5.5(CSではなく無印!) 以降、7~ CC2017まで、 全バージョンでの作業経験あり CS5発売時には、東京・表参道で開かれた 「世界で最も早くAdobe Creative Suite 5 に触れられるリアルスポット Station5 」  にて説明員を担当しました。
  6. 6. 6 本日の予定 1. WebデザインにIllustratorを使う理由 2. IllustratorとHTML+CSS 3. 重要な初期設定 4. テンプレート=アートボード 5. HTML+CSS=スウォッチとスタイル 6. シンボル 7. 画像アセット 8. まとめ
  7. 7. 7 Webデザインに Illustratorを使う理由 もともとは、Fireworksを使っていた Ps、Aiも併用していた 写真・画像加工 ロゴ・地図 レイアウト 図形 文字
  8. 8. 8 CS6をもって、Fireworks開発中止・・・ Fwの代わりに、Aiを使用することに 写真・画像加工 ロゴ・地図 レイアウト 図形 文字
  9. 9. 9 デザインの目的で、使うツールは異なる ビジュアルがメイン → Photoshop ・ 画像やパーツを作るのが目的 コンテンツ(テキスト)がメイン → Illustrator ・ 画像やパーツを作るだけでなく、 文字や画像ボックスの装飾を考えるのが目的 (必ずしも、パーツを作るわけではない) ※CMSのデザインなら、Illustratorが向いている
  10. 10. 10 IllustratorとHTML+CSS Illustratorデータの構造と、HTML+CSSは親和性が高い ・ 画像が「リンク」で配置できる (画像がドキュメントの解像度に依存しない) ・ スタイルと外部CSSは考え方が近い スウォッチ(グローバル) 段落スタイル・文字スタイル グラフィックスタイル パーツ作成だけでなく、HTML部分のデザインもできる
  11. 11. 11 脱 ピクセルパーフェクトの考え方 ピクセルパーフェクト:  デザインとコーディングを、1pxの狂いもなく合わせて制作すること Illustratorではピクセルパーフェクトのデザインが難しいため、 Webデザインには向かないと言われてきた 特に、線がボケると言われてきたのが大きい (設定次第なんですけどね)
  12. 12. 12 脱 ピクセルパーフェクトの考え方 ・ レスポンシブデザインでは、 ピクセルパーフェクトの実現が現実的ではない ・ Retinaディスプレイ登場で、従来の倍の解像度のデータが必要になった Photoshopではデータが重くなりすぎる → ベクターグラフィックの必要性   アピアランス、ブラシやストロークの進化で、    Illustratorでも美麗なグラフィック作成が可能に ・ CSSの表現力が増し、画像書き出しの必要性が低下
  13. 13. 13 ここからは、実際のIllustratorデータを見ながら、説明していきます。
  14. 14. 14 本日のサンプル                                     
  15. 15. 15 重要な初期設定 ・ プロファイル:Web ●詳細設定(~ CC2015)  プレビューモード:ピクセル  新規オブジェクトをピクセルグリッドに整合:しない ・ 設定 単位・キー入力など数値に関わるものは、  すべて「1px」の単位に修正 ・ ピクセルのスナップ(CC2017~)
  16. 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. 17 テンプレート=アートボード WordPressのテンプレートを、アートボードで作成 ・ 一つのドキュメントに、デザインが必要なすべてのテンプレートを作成 (重くならない作り方をすることが重要) ・ bootstrapのグリッドをガイドとして配置しておく ・ 共通部分(ヘッダー、フッターなど)は、シンボルで作成
  18. 18. 18 HTML+CSS=スウォッチとスタイル ・ ブロックレベル要素のCSS → 段落スタイル ・ インライン要素のCSS → 文字スタイル ・ 装飾のCSS → オブジェクトスタイル ・ カラー → スウォッチ(グローバル)
  19. 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. 20 HTMLで表示される部分の注意 ・ フォントは、ヒラギノ角ゴW3、メイリオ または Noto sans などの OS標準のものか、Webフォントを使用する。 ・ 文字変形、カーニング、トラッキングは使用しない ・ 日本語組版設定は使わない 禁則処理:なし、ぶらさがり:なし、文字組み:なし (日本語と英数字の文字間が4分アキになるのを防ぐ) ・ 標準段落スタイル・標準文字スタイルは、変更しない・使わない (他者とのファイルのやり取りがあるときは事故になりやすい) ※画像として書き出すものは、上記の制限は考えなくてもいいです。
  21. 21. 21 グラフィックスタイル CSSで表現できるものは、極力画像にしない CSSを設定する要素に合わせてスタイルを作成する ・ divタグとクラス ・ ブロック要素の文字関連以外のプロパティの指定 設定できるプロパティ ・ アピアランス、グラデーション ・ background, border, border-radius text-shadow, box-shadow など
  22. 22. 22 スウォッチ(グローバル) ・ スウォッチはグローバルにしないと威力半減 グローバルにすれば、スウォッチパネルで色を変更するだけで 同じスウォッチが指定された部分の色を統一して変えられる ・ スウォッチは、カラーパネルで濃度を変えて指定できる ・ Sassを使うなら、スウォッチを変数として指定する
  23. 23. 23 スタイルの残念な点 ・ InDesignでできる親子関係のスタイルは、Illustratorではできない (上流のスタイルを継承して、一部を変更することはできない) ※文字スタイルは、指定外のプロパティは段落スタイルを継承する ・ 一つのオブジェクトに、複数スタイルをかけられない ・ CSSプロパティで取得できるのは、 文字スタイルとグラフィックスタイルのみ
  24. 24. 24 シンボル 複数のテンプレートにまたがって読み込まれるモジュールを シンボルにして使いまわす ・ header.php、footer.php、 sidebar.php など ・ メニュー ・ SNSシェアボタン ・ ブロック要素 ・ シンボルのネストが可能 (シンボルにシンボルを含めることができる) header.php メニュー footer.php sidebar.php
  25. 25. 25 9スライスで拡大縮小に対応 ・ 9スライスを設定すると、変形時にガイドの外側が変形しない 内容に合わせてサイズが変わるブロック要素を、シンボルにできる 拡大・縮小しても、 ガイドの外側は変形しない
  26. 26. 26 ダイナミックシンボル ・ ダイナミックシンボルとして作成したシンボルは、 アピアランスが変えられる ・ アピアランスを変えたシンボルでも、 元のシンボルを修正すると、修正が反映される 塗りや線の変更・追加 不透明度の変更
  27. 27. 27 画像アセット ・ 画像として書き出したいオブジェクトを、 「アセットの書き出し」パネルにドラッグ&ドロップして ファイル名を指定するだけ ・ アートボード全体の書き出しもできる (ページ全体のデザインカンプ) ・ 書き出し設定は、×1、×2・・・以外に、 サイズ指定、解像度指定が可能 ・ 書き出し形式は、 PNG,PNG8,JPG100,JPG80,JPG50,JPG20, SVG,PDF
  28. 28. 28 画像アセットの残念な点 ・ アセットごとに書き出し形式を指定できない (一括書き出しのための機能なので、そもそも無理かも) Photoshopの画像アセットのほうが使いやすいかも 「Layer Exporter」というPhotoshopライクな書き出しエクステンションがあったが、 CC2015以降は使えない ・ 書き出し形式のプリセットが編集できない ・ クリッピングマスクをかけても、マスク外のオブジェクトごと書き出される → 従来の「スライス」を使うしかない?
  29. 29. 29 まとめ ・ テンプレート構造、HTML構造、CSSについて、 ある程度の理解がないとWebデザインをするのは難しい時代 ・ Illustratorはテキストメインのデザインをするうえで強力なアプリだが、 Webデザインに特化されたアプリではない 他のWebデザイン用のツールもチェックしておいたほうがよい ※Sketch、Adobe XD など
  30. 30. 30 ご清聴ありがとうございました。

×