![[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法](https://cdn.slidesharecdn.com/ss_thumbnails/wordbenchrwd-140709214312-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Adobe Illustratorによる WordPressテーマ作成ワークフロー (20)
More from Cherry Pie Web (6)
Recently uploaded (11)
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分アキになるのを防ぐ） ? 標準段落スタイル?標準文字スタイルは、変更しない?使わない （他者とのファイルのやり取りがあるときは事故になりやすい） ※画像として書き出すものは、上記の制限は考えなくてもいいです。