Adobe Illustratorによる WordPressテーマ作成ワークフロー
4 likes6,385 views
2016年11月19日 WordBench奈良
Adobe Illustratorによる WordPressテーマ作成ワークフロー
- 1. 2016年11月19日 WordBench奈良 Cherry Pie Web 川井昌彦 Adobe Illustratorによる WordPressテーマ作成ワークフロー
- 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. まとめ
- 9. 9 デザインの目的で、使うツールは異なる ビジュアルがメイン → Photoshop ・ 画像やパーツを作るのが目的 コンテンツ（テキスト）がメイン → Illustrator ・ 画像やパーツを作るだけでなく、 文字や画像ボックスの装飾を考えるのが目的 （必ずしも、パーツを作るわけではない） ※CMSのデザインなら、Illustratorが向いている
- 12. 12 脱 ピクセルパーフェクトの考え方 ・ レスポンシブデザインでは、 ピクセルパーフェクトの実現が現実的ではない ・ Retinaディスプレイ登場で、従来の倍の解像度のデータが必要になった Photoshopではデータが重くなりすぎる → ベクターグラフィックの必要性 アピアランス、ブラシやストロークの進化で、 Illustratorでも美麗なグラフィック作成が可能に ・ CSSの表現力が増し、画像書き出しの必要性が低下
- 14. 14 本日のサンプル
- 16. 16 データ制作のポイント ・ レイヤーは、HTMLの入れ子構造を意識する body, article, section, div(container, row, col), p, ul, li ・・・ 画像を埋め込まない Retina対応のため、高解像度の画像をリンクして縮小して配置 画像の加工はPhotoshopで行う body header div.containerdiv.containerarticle section section footer
- 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分アキになるのを防ぐ） ・ 標準段落スタイル・標準文字スタイルは、変更しない・使わない （他者とのファイルのやり取りがあるときは事故になりやすい） ※画像として書き出すものは、上記の制限は考えなくてもいいです。