文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

文系デザイナーでも大丈夫！

レスポンシブWebサイトをで作ってみよう

November 3,2012
WordCamp Osaka
額賀順子

12年11月3日土曜日

ようこそWordCamp Osaka 2012 へ


自己紹介
額賀順子 | ヌカガジュンコ

フリーランスのWebディレクター／デザイナー。
つまり１人で大概の事はやっちゃう人。

Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く
制作を手がけています。

綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん
な効果が欲しいのか。プランニングを重要視します。
制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ
ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ
クター、セミナー講師も兼務。
Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な
Twitter ＠nukaga ど、積極的に人と関わる活動を行っております。
Facebook nukagajunko
インターネット大好き！
WordCamp Osaka 2012 副実行委員長をさせて
頂いています。


本日のアジェンダ

✤ レスポンシブWebデザインとは？

✤ レスポンシブWebデザインの考え方

✤ 実践編

✤ 便利ツール


レスポンシブWebデザインとは？
レスポンシブWebデザインとは？
WordPress＋レスポンシブWebデザイン実例紹介


レスポンシブWebデザインとは

画像解像度（ユーザーの見ている環境・デバイス）
にあわせて見やすいように表示を切り替えるデザイン

HTMLはひとつ



ワンソース型マルチソース型プログラム変換型

HTML HTML HTML

HTML HTML
CSS CSS

CSS CSS
CSS CSS



HTMLはひとつ

実現のポイントはCSSにあります

PHPとか関係ないよ



考え方がとても大事！

PC、モバイルを振り分けるという考え方ではありません

PC用デザインをモバイル用に変換するという考え方では
ありません

これをわかっていないと苦しみます



反対に言うと考え方さえわかっていたらやみくもに
突っ込んでいくよりだいぶ楽に組めます


メリット

・ワンソースなので、HTML1カ所修正したら全てに反映される
→分岐型と違って何カ所も更新する必要が無い

・CSSだけで実装できる
→WordPressでもCSSの調整だけで対応できる

・1つのHTML（URL）で対応できるのでSEO的に有効


デメリット

・サイトが重くなる可能性がある

・開発に時間がかかる可能性がある

・表示の最適化であって、
デバイス（利用シーン）への最適化ではない


WordPressとレスポンシブWebデザイン

WordPress 3.2からのデフォルトテーマレスポンシブWebデザイン対応

Twenty Eleven

http://twentyelevendemo.wordpress.com/


WordPressでレスポンシブ事例１

budori http://www.budori.co.jp/


WordPressでレスポンシブ事例２

loftwork.com http://www.loftwork.com/


WordPressでレスポンシブ事例３

Acru（アクリュ） http://acru.jp/


構築ポイント

Acruのサイトは Twenty Elevenを親テーマにして構築してます

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能
にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな
り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの
知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え
ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。
そのため、親テーマがアップデートされても子テーマの変更は保持されます。

http://wpdocs.sourceforge.jp/子テーマ


レスポンシブWebデザインの考え方
ワークフロー



モバイルファースト

パソコン

タブレット

スマートフォン

320px 480px 600px 768px 960px 1200px∼



モバイルファーストって何？
ルーク・ウロブルスキーさんの提唱したコンセプト
（プロダクトの戦略や製品のデザインのコンサルタント会社
「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ ）

WebサイトやWebアプリを開発するうえで、
まずモバイルから開発してPCに展開していくべきだ
とする考え方

そうしたいけど、それがなかなか難しい



モバイルファーストによるメリット
そのサイト（画面）で見せたいものが何かということがはっきりする

小さい画面で見せる際の優先順位



ワイヤーフレームが非常に大事

レイアウトの切り替えパターンを知っておこう！

パソコン

タブレット

スマートフォン

320px 480px 600px 768px 960px 1200px∼



代表的な切り替えパターンその１代表的な切り替えパターンその２

Multi-Device Layout Patterns
lukew
http://www.lukew.com/ff/entry.asp?1514



代表的な切り替えパターンその3 代表的な切り替えパターンその4

Multi-Device Layout Patterns
lukew
http://www.lukew.com/ff/entry.asp?1514



基本はCSS

できるだけ％やemなど可変で組みたい。
pxを使う場合もある。


ワークフロー

スマートフォン用のカンプデザイン
タブレット用のカンプデザイン
パソコン用のカンプデザイン

そろそろこの考え方やめませんか？
何故かというと


ワークフロー

特にスマートフォンやタブレットは画面サイズだけでなく、
機種ごとの差異があり、全部にPSDでのデザインを
きっちり反映させるのは厳しい。

PC用のデザインをPSDデータ
タブレット／スマートフォンはワイヤーフレームで確認


ワークフロー

基本の設計をしっかりしてワイヤーフレームをきっちり書く

デザイナー・マークアップエンジニアが参加する事が大切

設計／ワイヤーフレームデザインモックアップ実装


ワークフロー

大事なのは考え方
どこを優先的に見せるか

コンテンツファースト

内容ありき


実装編
ブレークポイント
CSS側記述
HTML側記述



切り替えのポイントメジャーブレークポイント

320px 768px 960px



今回の実装は２ヶ所

480px 960px


メディアクエリーと書き方

メディアクエリー（Media Queries）って？

CSS3からの機能
ユーザーのビューサイズによって読み込むCSSを
分岐させることができる



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)



モバイルのCSSから書いていく方がいいよ



特にWordPressの場合

style.css １つの方がやりやすい


HTMLの設定（viewport）

<meta name="viewport" content="width=device-width">

「viewportの幅をデバイスのスクリーンの幅に合わせる」


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]-‐-‐>


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/


実際にあったトラブル

JavaScriptを使う

スライドコンフリクトを起こしました

カレンダー
スクロールバー
読み込みの順番を
マウスオーバー
変える事で解決
ギャラリー
IE8以下メディアクエリー


レスポンシブWebデザインにおいての画像の扱い方

切り替える画像が各サイズ必要

CSSで呼び出している画像の場合、メディアクエリーで切
り替えて呼び出す画像を変える事が可能。

JavaScriptを使う

Responsive-Images
http://ﬁlamentgroup.com/lab/
responsive_images_experimenting_with_context_aware_image_sizing/
Responsive-Enhance
https://github.com/joshje/Responsive-Enhance



画像が重いという問題に対してはその１

CSS Sprite
1枚の画像の中に必要な画像を全部入れ必要に応じて
表示させる部分を変える手法
1枚画像を最初に読み込む事によって余分なトラフィックが
かかるのを防ぐ

YouTube



画像が重いという問題に対してはその２

データ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/



WordPressの場合ユーザーが画像を更新して行く

@media only screen and (max-width: 480px)
{
.cpost img {
! ! max-width: 300px;
! ! width: auto;
! ! height: auto;
! ! }
} クラスつけないと全部の画像に反映されちゃうから気をつけてね


レスポンシブWebデザインでの文字の扱い方

解像度によってフォントの大きさの変更が必要となった場合
ウェブフォントが使いたくなる。
CSS3
@font-‐face

これからの課題

フリーの日本語フォントが少ない。重い。
windowsで見ると読みにくい。


レスポンシブWebデザインの向き・不向き

向いてる
文字ベースのサイト
構造が簡単なサイト

大変

各ページによって表示を変えたいなど構造が複雑なサイト
利用シーンによって見せ方を大きく変えたいサイト

可能不可能で言ったら可能だけれど負担が大きい


便利ツール
フレームワーク（Framework）
モックアップ用アイテム
ギャラリーサイト
確認用ツール
スライド用JavaScript
WordPressテーマの紹介


Framework（Twitter Bootstrap）

http://twitter.github.com/bootstrap/index.html


Framework（Zurb Foundation）

http://foundation.zurb.com/


便利ツール（モックアップ用アイテム）
Responsive Design Mock-up Pack

テキスト

http://medialoot.com/item/free-responsive-screen-mockup-pack/


便利ツール（ギャラリーサイト）

ギャラリーサイト（国内）

http://responsive-jp.com/

ギャラリーサイト（海外）

http://mediaqueri.es/


便利ツール

Responsive.is
http://responsive.is

Responsive Design Bookmarklet
http://responsive.victorcoulon.fr/

Viewport resizer
http://responsive.victorcoulon.fr/


WordPressレスポンシブテーマ

74



SUNSPOT

テーマダウンロード
http://wordpress.org/extend/themes/sunspot

デモ
http://sunspotdemo.wordpress.com/



Hatch

テーマダウンロード
http://wordpress.org/extend/themes/hatch

デモ
http://devpress.com/demo/hatch/



Origin

テーマダウンロードデモ
http://wordpress.org/extend/themes/origin http://devpress.com/demo/origin/


最後に

ご清聴ありがとうございました！
まだまだ話しきれない
WordPressとレスポンシブの関係

新しいことに挑戦できるのはWebの良いところ
これからの技術だからこそ挑戦するのは楽しい！

Twitter: ＠nukaga
額賀順子 | ヌカガジュンコ
Facebook: nukagajunko


文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

More Related Content

What's hot

Similar to 文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

More from Junko Nukaga

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう