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

557 views

Published on

2016年11月19日
WordBench奈良

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
557
On SlideShare
0
From Embeds
0
Number of Embeds
263
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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 ご清聴ありがとうございました。

×