Submit Search
Upload
Adobe Illustratorによる WordPressテーマ作成ワークフロー
•
4 likes
•
6,146 views
Cherry Pie Web
Follow
2016年11月19日 WordBench奈良
Read less
Read more
Technology
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
EXPO ABOUT THE BOOK THE PRINCE AND THE PAUPER BY MARK TWAIN
EXPO ABOUT THE BOOK THE PRINCE AND THE PAUPER BY MARK TWAIN
Mary cielo Rodas
Kof index of globalisation
Kof index of globalisation
Steven Heath
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: FAMILY AND DEMOGRAPHIC CHANGE
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: FAMILY AND DEMOGRAPHIC CHANGE
George Dumitrache
Newspaper article on Romeo and Tybalt fight (Shakespeare)
Newspaper article on Romeo and Tybalt fight (Shakespeare)
Tendai Sigauke
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: EMPLOYMENT
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: EMPLOYMENT
George Dumitrache
English Assingment:The Life of Timon Of Athens
English Assingment:The Life of Timon Of Athens
Army_of_Change
History of Immigration
History of Immigration
RCSDIT
harry potter and the deathly hallows
harry potter and the deathly hallows
Kiran vora
Recommended
EXPO ABOUT THE BOOK THE PRINCE AND THE PAUPER BY MARK TWAIN
EXPO ABOUT THE BOOK THE PRINCE AND THE PAUPER BY MARK TWAIN
Mary cielo Rodas
Kof index of globalisation
Kof index of globalisation
Steven Heath
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: FAMILY AND DEMOGRAPHIC CHANGE
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: FAMILY AND DEMOGRAPHIC CHANGE
George Dumitrache
Newspaper article on Romeo and Tybalt fight (Shakespeare)
Newspaper article on Romeo and Tybalt fight (Shakespeare)
Tendai Sigauke
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: EMPLOYMENT
GLOBAL PERSPECTIVE CAMBRIDGE IGCSE: EMPLOYMENT
George Dumitrache
English Assingment:The Life of Timon Of Athens
English Assingment:The Life of Timon Of Athens
Army_of_Change
History of Immigration
History of Immigration
RCSDIT
harry potter and the deathly hallows
harry potter and the deathly hallows
Kiran vora
私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」
Masahiko Kawai
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
Cherry Pie Web
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
2015年のWebを考える
2015年のWebを考える
kenji goto
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
古川 恵子
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
僕のFireworks普及計画!!
僕のFireworks普及計画!!
Yuuki Kashimoto
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Word camp2016lt matsuo
Word camp2016lt matsuo
Shintaro Matsuo
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
Kunitoshi Hoshino
20160430co-edo
20160430co-edo
Chieko Aihara
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Tsuzurahara Tohru
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
Hidekazu Ishikawa
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
Keysuke Mizuno
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
南実業会Webサイト開設について
南実業会Webサイト開設について
Cherry Pie Web
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
Cherry Pie Web
More Related Content
Similar to Adobe Illustratorによる WordPressテーマ作成ワークフロー
私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」
Masahiko Kawai
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
Cherry Pie Web
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
2015年のWebを考える
2015年のWebを考える
kenji goto
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
古川 恵子
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
僕のFireworks普及計画!!
僕のFireworks普及計画!!
Yuuki Kashimoto
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Cherry Pie Web
Word camp2016lt matsuo
Word camp2016lt matsuo
Shintaro Matsuo
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
Kunitoshi Hoshino
20160430co-edo
20160430co-edo
Chieko Aihara
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Tsuzurahara Tohru
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
Hidekazu Ishikawa
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
Keysuke Mizuno
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
Similar to Adobe Illustratorによる WordPressテーマ作成ワークフロー
(20)
私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
2015年のWebを考える
2015年のWebを考える
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
僕のFireworks普及計画!!
僕のFireworks普及計画!!
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
Word camp2016lt matsuo
Word camp2016lt matsuo
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
20160430co-edo
20160430co-edo
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
2016/11/16セキビズ ビジネスブログ講座(ポエジー・オカビズ水野)
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
More from Cherry Pie Web
南実業会Webサイト開設について
南実業会Webサイト開設について
Cherry Pie Web
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
Cherry Pie Web
WordPressのサーバー間引っ越しのツボ
WordPressのサーバー間引っ越しのツボ
Cherry Pie Web
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
Contact Form 7 よくあるカスタマイズ
Contact Form 7 よくあるカスタマイズ
Cherry Pie Web
More from Cherry Pie Web
(6)
南実業会Webサイト開設について
南実業会Webサイト開設について
「フォントはしゃべる」というお話
「フォントはしゃべる」というお話
WordPressのサーバー間引っ越しのツボ
WordPressのサーバー間引っ越しのツボ
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Contact Form 7 よくあるカスタマイズ
Contact Form 7 よくあるカスタマイズ
Adobe Illustratorによる WordPressテーマ作成ワークフロー
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スライスで拡大縮小に対応 ・ 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 ご清聴ありがとうございました。
Download now