Contenu connexe
Similaire à 文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
Similaire à 文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう (20)
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
- 1. 文系デザイナーでも大丈夫！
レスポンシブWebサイトを で作ってみよう
November 3,2012
WordCamp Osaka
額賀 順子
12年11月3日土曜日
- 3. 自己紹介
額賀 順子 | ヌカガジュンコ
フリーランスのWebディレクター／デザイナー。
つまり１人で大概の事はやっちゃう人。
Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く
制作を手がけています。
綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん
な効果が欲しいのか。プランニングを重要視します。
制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ
ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ
クター、セミナー講師も兼務。
Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な
Twitter ＠nukaga ど、積極的に人と関わる活動を行っております。
Facebook nukagajunko
インターネット大好き！
WordCamp Osaka 2012 副実行委員長をさせて
頂いています。
12年11月3日土曜日
- 4. 本日のアジェンダ
✤ レスポンシブWebデザインとは？
✤ レスポンシブWebデザインの考え方
✤ 実践編
✤ 便利ツール
12年11月3日土曜日
- 6. レスポンシブWebデザインとは
画像解像度（ユーザーの見ている環境・デバイス）
にあわせて見やすいように表示を切り替えるデザイン
HTMLはひとつ
12年11月3日土曜日
- 7. レスポンシブWebデザインとは
ワンソース型 マルチソース型 プログラム変換型
HTML HTML HTML
HTML HTML
CSS CSS
CSS CSS
CSS CSS
12年11月3日土曜日
- 9. レスポンシブWebデザインとは
考え方がとても大事！
PC、モバイルを振り分けるという考え方ではありません
PC用デザインをモバイル用に変換するという考え方では
ありません
これをわかっていないと苦しみます
12年11月3日土曜日
- 11. メリット
・ワンソースなので、HTML1カ所修正したら全てに反映される
→分岐型と違って何カ所も更新する必要が無い
・CSSだけで実装できる
→WordPressでもCSSの調整だけで対応できる
・1つのHTML（URL）で対応できるのでSEO的に有効
12年11月3日土曜日
- 12. デメリット
・サイトが重くなる可能性がある
・開発に時間がかかる可能性がある
・表示の最適化であって、
デバイス（利用シーン）への最適化ではない
12年11月3日土曜日
- 13. WordPressとレスポンシブWebデザイン
WordPress 3.2からのデフォルトテーマ レスポンシブWebデザイン対応
Twenty Eleven
http://twentyelevendemo.wordpress.com/
12年11月3日土曜日
- 17. 構築ポイント
Acruのサイトは Twenty Elevenを親テーマにして構築してます
WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能
にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな
り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの
知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え
ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。
そのため、親テーマがアップデートされても子テーマの変更は保持されます。
http://wpdocs.sourceforge.jp/子テーマ
12年11月3日土曜日
- 19. レスポンシブWebデザインの考え方
モバイルファースト
パソコン
タブレット
スマートフォン
320px 480px 600px 768px 960px 1200px∼
12年11月3日土曜日
- 20. レスポンシブWebデザインの考え方
モバイルファーストって何？
ルーク・ウロブルスキーさんの提唱したコンセプト
（プロダクトの戦略や製品のデザインのコンサルタント会社
「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ ）
WebサイトやWebアプリを開発するうえで、
まずモバイルから開発してPCに展開していくべきだ
とする考え方
そうしたいけど、それがなかなか難しい
12年11月3日土曜日
- 21. レスポンシブWebデザインの考え方
モバイルファーストによるメリット
そのサイト（画面）で見せたいものが何かということがはっきりする
小さい画面で見せる際の優先順位
12年11月3日土曜日
- 22. レスポンシブWebデザインの考え方
ワイヤーフレームが非常に大事
レイアウトの切り替えパターンを知っておこう！
パソコン
タブレット
スマートフォン
320px 480px 600px 768px 960px 1200px∼
12年11月3日土曜日
- 26. ワークフロー
スマートフォン用のカンプデザイン
タブレット用のカンプデザイン
パソコン用のカンプデザイン
そろそろこの考え方やめませんか？
何故かというと
12年11月3日土曜日
- 27. ワークフロー
特にスマートフォンやタブレットは画面サイズだけでなく、
機種ごとの差異があり、全部にPSDでのデザインを
きっちり反映させるのは厳しい。
PC用のデザインをPSDデータ
タブレット／スマートフォンはワイヤーフレームで確認
12年11月3日土曜日
- 29. ワークフロー
大事なのは考え方
どこを優先的に見せるか
コンテンツファースト
内容ありき
12年11月3日土曜日
- 30. 実装編
ブレークポイント
CSS側記述
HTML側記述
12年11月3日土曜日
- 32. ブレークポイント
今回の実装は２ヶ所
480px 960px
12年11月3日土曜日
- 33. メディアクエリーと書き方
メディアクエリー（Media Queries）って？
CSS3からの機能
ユーザーのビューサイズによって読み込むCSSを
分岐させることができる
12年11月3日土曜日
- 34. メディアクエリーと書き方
CSSソース内に記述する おすすめ
@media
screen
and
(max-‐width:
1024px){
/*
タブレット用のスタイル記述
*/
}
HTMLの<head>内に書き込んでCSSを読み込ませる
<link
rel="stylesheet"
media="screen
and
(max-‐width:
1024px)"href="tablet.css"
/>
CSSの@importに記述する
@import
url("tablet.css")
screen
and
(max-‐width:
1024px)
12年11月3日土曜日
- 36. メディアクエリーと書き方
特にWordPressの場合
style.css １つの方がやりやすい
12年11月3日土曜日
- 37. HTMLの設定（viewport）
<meta name="viewport" content="width=device-width">
「viewportの幅をデバイスのスクリーンの幅に合わせる」
12年11月3日土曜日
- 38. HTMLの設定（viewport）
<meta name="viewport" 一般的に多い設定
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0">
表示幅をスクリーン幅と一致
初期拡大率を等倍
最小拡大率を等倍
最大拡大率を等倍
12年11月3日土曜日
- 39. HTMLの設定（viewport）
<meta name="viewport" 実際に使った設定
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.6,
user-scalable=yes,">
最大拡大率を1.6にして、
ユーザーさんが画面を拡大できる
ようにしました
12年11月3日土曜日
- 40. IE8以下の対応について
JavaScriptを使う
Respond.js
https://github.com/scottjehl/Respond
css3-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
CSSを分岐させる
<!-‐-‐[if
IE
8
]>
<link
rel="stylesheet"
type="text/css"
href="ie8.css">
<![endif]-‐-‐>
12年11月3日土曜日
- 41. IE8以下の対応について
JavaScriptを使う
Respond.js
https://github.com/scottjehl/Respond
Acru(アクリュ) http://acru.jp/
css3-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
劇団ヌカガ公式サイト http://nukaga-theater.com/
12年11月3日土曜日
- 43. レスポンシブWebデザインにおいての画像の扱い方
切り替える 画像が各サイズ必要
CSSで呼び出している画像の場合、メディアクエリーで切
り替えて呼び出す画像を変える事が可能。
JavaScriptを使う
Responsive-Images
http://filamentgroup.com/lab/
responsive_images_experimenting_with_context_aware_image_sizing/
Responsive-Enhance
https://github.com/joshje/Responsive-Enhance
12年11月3日土曜日
- 44. レスポンシブWebデザインにおいての画像の扱い方
画像が重いという問題に対しては その１
CSS Sprite
1枚の画像の中に必要な画像を全部入れ必要に応じて
表示させる部分を変える手法
1枚画像を最初に読み込む事によって余分なトラフィックが
かかるのを防ぐ
YouTube
12年11月3日土曜日
- 45. レスポンシブWebデザインにおいての画像の扱い方
画像が重いという問題に対しては その２
データURIスキーム
HTMLやCSSに埋め込まれたデータに直接アクセスする
サーバーにリクエストせずに画像を表示することができる
.mainbg {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
Data-URI-Convertor
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
12年11月3日土曜日
- 46. レスポンシブWebデザインにおいての画像の扱い方
WordPressの場合ユーザーが画像を更新して行く
@media only screen and (max-width: 480px)
{
.cpost img {
! ! max-width: 300px;
! ! width: auto;
! ! height: auto;
! ! }
} クラスつけないと全部の画像に反映されちゃうから気をつけてね
12年11月3日土曜日
- 47. レスポンシブWebデザインでの文字の扱い方
解像度によってフォントの大きさの変更が必要となった場合
ウェブフォントが使いたくなる。
CSS3
@font-‐face
これからの課題
フリーの日本語フォントが少ない。重い。
windowsで見ると読みにくい。
12年11月3日土曜日
- 48. レスポンシブWebデザインの向き・不向き
向いてる
文字ベースのサイト
構造が簡単なサイト
大変
各ページによって表示を変えたいなど構造が複雑なサイト
利用シーンによって見せ方を大きく変えたいサイト
可能不可能で言ったら可能だけれど負担が大きい
12年11月3日土曜日
- 49. 便利ツール
フレームワーク（Framework）
モックアップ用アイテム
ギャラリーサイト
確認用ツール
スライド用JavaScript
WordPressテーマの紹介
12年11月3日土曜日
- 52. 便利ツール（モックアップ用アイテム）
Responsive Design Mock-up Pack
テキスト
http://medialoot.com/item/free-responsive-screen-mockup-pack/
12年11月3日土曜日
- 53. 便利ツール（ギャラリーサイト）
ギャラリーサイト（国内）
http://responsive-jp.com/
ギャラリーサイト（海外）
http://mediaqueri.es/
12年11月3日土曜日
- 54. 便利ツール
Responsive.is
http://responsive.is
Responsive Design Bookmarklet
http://responsive.victorcoulon.fr/
Viewport resizer
http://responsive.victorcoulon.fr/
12年11月3日土曜日
- 56. WordPressレスポンシブテーマ
SUNSPOT
テーマダウンロード
http://wordpress.org/extend/themes/sunspot
デモ
http://sunspotdemo.wordpress.com/
12年11月3日土曜日
- 57. WordPressレスポンシブテーマ
Hatch
テーマダウンロード
http://wordpress.org/extend/themes/hatch
デモ
http://devpress.com/demo/hatch/
12年11月3日土曜日
- 58. WordPressレスポンシブテーマ
Origin
テーマダウンロード デモ
http://wordpress.org/extend/themes/origin http://devpress.com/demo/origin/
12年11月3日土曜日
- 59. 最後に
ご清聴ありがとうございました！
まだまだ話しきれない
WordPressとレスポンシブの関係
新しいことに挑戦できるのはWebの良いところ
これからの技術だからこそ挑戦するのは楽しい！
Twitter: ＠nukaga
額賀 順子 | ヌカガジュンコ
Facebook: nukagajunko
12年11月3日土曜日
