Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Cherry Pie Web, profile picture
Uploaded byCherry Pie Web
6,427 views

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

2016年11月19日 WordBench奈良

Technology◦
Download to read offline
2016年11月19日 WordBench奈良 Cherry Pie Web 川井昌彦 Adobe Illustratorによる WordPressテーマ作成ワークフロー
2 自己紹介 ●川井 昌彦（かわい まさひこ） 　東京の制作会社に24年間勤めた後、 　京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。 　提案・見積・ディレクション・デザイン・コーディング・ 　　　プログラミング・顧客サポート・・・ 　　　　　制作の上流から下流までを一手に引き受けています。 　「WordBench京都」などで、たまに登壇させていただいています。
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発売時には、東京・表参道で開かれた 「世界で最も早く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+CSS Illustratorデータの構造と、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.containerarticle section 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 ご清聴ありがとうございました。