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