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

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

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

November 3,2012WordCamp Osaka

額賀順子

12年11月3日土曜日

ようこそWordCamp Osaka 2012 へ


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

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

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

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

インターネット大好き！WordCamp Osaka 2012 副実行委員長をさせて頂いています。

Twitter ＠nukagaFacebook nukagajunko


本日のアジェンダ

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

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

✤ 実践編

✤ 便利ツール


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


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

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

HTMLはひとつ


HTML

CSS CSS HTML

CSS CSS

HTML

HTML

CSS CSS

HTML


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



HTMLはひとつ

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

PHPとか関係ないよ



考え方がとても大事！

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

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

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



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


メリット

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

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

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


デメリット

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

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

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


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

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

http://twentyelevendemo.wordpress.com/




WordPressでレスポンシブ　事例１

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


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

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

WordPressでレスポンシブ　事例２

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


http://www.loftwork.com/

http://www.loftwork.com/

WordPressでレスポンシブ　事例３

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


http://acru.jp/

http://acru.jp/

構築ポイント

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

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

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

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


http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

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


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

320px 480px 600px 768px 960px 1200px～

スマートフォン

タブレットパソコン

モバイルファースト



モバイルファーストって何？

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

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

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


http://www.lukew.com/

http://www.lukew.com/


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

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



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

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

320px 480px 600px 768px 960px 1200px～

スマートフォン

タブレットパソコン



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

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


http://www.lukew.com/ff/entry.asp?1514



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

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

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





基本はCSS

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


ワークフロー

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

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


ワークフロー

特にスマートフォンやタブレットは画面サイズだけでなく、機種ごとの差異があり、全部にPSDでのデザインを

きっちり反映させるのは厳しい。

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


ワークフロー

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

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

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


ワークフロー

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

コンテンツファースト

内容ありき


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


ブレークポイント

切り替えのポイント

320px 768px 960px

メジャーブレークポイント


ブレークポイント

今回の実装は２ヶ所

480px 960px


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

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

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



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から書いていく方がいいよ



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

特にWordPressの場合


HTMLの設定（viewport）

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

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


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を分岐させる


https://github.com/scottjehl/Respond


http://code.google.com/p/css3-mediaqueries-js/


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/






http://acru.jp/

http://acru.jp/

http://nukaga-theater.com/

http://nukaga-theater.com/

実際にあったトラブル

JavaScriptを使う

スライド

カレンダー

スクロールバー

マウスオーバー

ギャラリー

IE8以下メディアクエリー

コンフリクトを起こしました

読み込みの順番を変える事で解決


レスポンシブ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

画像が各サイズ必要









CSS Sprite

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

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

YouTube



データ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 );}


http://websemantics.co.uk/online_tools/image_to_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デザインでの文字の扱い方

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

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

CSS3 @font-‐face

これからの課題


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

文字ベースのサイト構造が簡単なサイト

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

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

向いてる

大変


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


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://mediaqueri.es/

http://responsive-jp.com/






便利ツール

http://responsive.is

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

Responsive.is

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


http://responsive.is/

http://responsive.is/

http://responsive.victorcoulon.fr/




WordPressレスポンシブテーマ

74



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

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

SUNSPOT


http://wordpress.org/extend/themes/sunspot


http://sunspotdemo.wordpress.com

http://sunspotdemo.wordpress.com


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

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

Hatch




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

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


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

Origin

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




http://devpress.com/demo/origin/

http://devpress.com/demo/origin/

最後に

ご清聴ありがとうございました！まだまだ話しきれない

WordPressとレスポンシブの関係

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

Twitter: ＠nukagaFacebook: nukagajunko

額賀順子 | ヌカガジュンコ


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

Design

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