Suche senden
Hochladen
レスポンシブ+α 第12回WordBench大阪
•
11 gefällt mir
•
1,755 views
Junko Nukaga
Folgen
Melden
Teilen
Melden
Teilen
1 von 72
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Empfohlen
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Marie Suenaga
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Marie Suenaga
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
一生食える強みの作り方 まとめ
一生食える強みの作り方 まとめ
Manabu Uekusa
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
短期間でのスマホ向けWeb開発
短期間でのスマホ向けWeb開発
Manabu Uekusa
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
H2O Space. Co., Ltd.
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
schoowebcampus
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
schoowebcampus
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
Code Anything
Code Anything
Yoshitaka Kawashima
Weitere ähnliche Inhalte
Andere mochten auch
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Marie Suenaga
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Marie Suenaga
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
一生食える強みの作り方 まとめ
一生食える強みの作り方 まとめ
Manabu Uekusa
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
短期間でのスマホ向けWeb開発
短期間でのスマホ向けWeb開発
Manabu Uekusa
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
H2O Space. Co., Ltd.
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
schoowebcampus
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
schoowebcampus
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
Andere mochten auch
(20)
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Node.js Hands-On
Node.js Hands-On
一生食える強みの作り方 まとめ
一生食える強みの作り方 まとめ
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
短期間でのスマホ向けWeb開発
短期間でのスマホ向けWeb開発
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
菊池崇のレスポンシブWEBデザイン道場(1限目:マーケティングから考えるRWD)
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
レスポンシブWebデザインの実装における、よくある間違い・嘘・真実 先生:菊池 崇
プログラムを高速化する話
プログラムを高速化する話
Ähnlich wie レスポンシブ+α 第12回WordBench大阪
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
Code Anything
Code Anything
Yoshitaka Kawashima
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual
SATOSHI TAGOMORI
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
圭輔 大曽根
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
Kunihiko Miyanaga
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
Kunihiko Miyanaga
すごいぞ!Google Chrome
すごいぞ!Google Chrome
Eigoro Yamamura
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
horike37
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
Yoichi Toyota
「LESS」ことはじめ
「LESS」ことはじめ
Eigoro Yamamura
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
Wco2012 不動産プラグイン.活用例
Wco2012 不動産プラグイン.活用例
加藤 貴一
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Komei Otake
セプテーニさんでのセミナー
セプテーニさんでのセミナー
Tokusei Noborio
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
The return of Mobile5 #mobile5
The return of Mobile5 #mobile5
Yusuke Hirano
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Satoshi Noda
Ähnlich wie レスポンシブ+α 第12回WordBench大阪
(20)
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Code Anything
Code Anything
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
すごいぞ!Google Chrome
すごいぞ!Google Chrome
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
「LESS」ことはじめ
「LESS」ことはじめ
Aiming study#6pdf
Aiming study#6pdf
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Wco2012 不動産プラグイン.活用例
Wco2012 不動産プラグイン.活用例
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】
セプテーニさんでのセミナー
セプテーニさんでのセミナー
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
The return of Mobile5 #mobile5
The return of Mobile5 #mobile5
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Mehr von Junko Nukaga
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
Junko Nukaga
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
Junko Nukaga
WordPress公式ディレクトリにテーマ登録をしたので、 そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、 そこらへん絡めつつ「継続すること」について
Junko Nukaga
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeech
Junko Nukaga
レスポンシブ+フラットデザイン+WordPress
レスポンシブ+フラットデザイン+WordPress
Junko Nukaga
今更聞けないWordPress
今更聞けないWordPress
Junko Nukaga
AWSはじめて物語
AWSはじめて物語
Junko Nukaga
Mehr von Junko Nukaga
(7)
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordPress公式ディレクトリにテーマ登録をしたので、 そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、 そこらへん絡めつつ「継続すること」について
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeech
レスポンシブ+フラットデザイン+WordPress
レスポンシブ+フラットデザイン+WordPress
今更聞けないWordPress
今更聞けないWordPress
AWSはじめて物語
AWSはじめて物語
レスポンシブ+α 第12回WordBench大阪
1.
第12回WordBench大阪
文系デザイナーでも大丈夫! α レスポンシブWebサイトを で作ってみよう December 15,2012 WordBench Osaka 額賀 順子 12年12月15日土曜日
2.
今年最後のWordBench大阪 12年12月15日土曜日
3.
自己紹介
額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター/デザイナー。 つまり1人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な Twitter @nukaga ど、積極的に人と関わる活動を行っております。 Facebook nukagajunko インターネット大好き! WordCamp Osaka 2012 副実行委員長をさせて 頂きました。 12年12月15日土曜日
4.
本日のアジェンダ ✤
レスポンシブWebデザインとは? ✤ レスポンシブWebデザインの考え方 ✤ 実践編 ✤ 便利ツール ✤ (時間があったら再度実践もしくは質疑応答) 12年12月15日土曜日
5.
+αって?
サンプルサイトにて実際のHTMLとCSSをお見せします 12年12月15日土曜日
6.
レスポンシブWebデザインとは?
レスポンシブWebデザインとは? WordPress+レスポンシブWebデザイン実例紹介 12年12月15日土曜日
7.
レスポンシブWebデザインとは
画像解像度(ユーザーの見ている環境・デバイス) にあわせて見やすいように表示を切り替えるデザイン HTMLはひとつ 12年12月15日土曜日
8.
レスポンシブWebデザインとは
ワンソース型 マルチソース型 プログラム変換型 HTML HTML HTML HTML HTML CSS CSS CSS CSS CSS CSS 12年12月15日土曜日
9.
レスポンシブWebデザインとは
HTMLはひとつ 実現のポイントはCSSにあります PHPとか関係ないよ 12年12月15日土曜日
10.
レスポンシブWebデザインとは
考え方がとても大事! PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません これをわかっていないと苦しみます 12年12月15日土曜日
11.
レスポンシブWebデザインとは
反対に言うと考え方さえわかっていたら やみくもに突っ込んでいくよりだいぶ楽に組めます 12年12月15日土曜日
12.
メリット
・ワンソースなので、HTML1カ所修正したら全てに反映される →分岐型と違って何カ所も更新する必要が無い ・CSSだけで実装できる →WordPressでもCSSの調整だけで対応できる ・1つのHTML(URL)で対応できるのでSEO的に有効 12年12月15日土曜日
13.
デメリット
・サイトが重くなる可能性がある ・開発に時間がかかる可能性がある ・表示の最適化であって、 デバイス(利用シーン)への最適化ではない 12年12月15日土曜日
14.
大事なこと
全ての事例においてレスポンシブWebデザインがベストとい うわけではない デメリットを知ってこそメリットを提供できる。 事例にあわせてベストの方法を提案しよう! 12年12月15日土曜日
15.
各手法によるメリット・デメリット
ワンソース型 マルチソース型 プログラム変換型 HTML HTML HTML HTML HTML CSS CSS CSS CSS CSS CSS メリット メリット メリット 運用効率の向上 デバイスごとに 既存のサービスの利用 最適なレイアウトが提供できる デメリット デメリット レイアウトの制限 デメリット 利用するサービスによる制限 対応するデバイスが増えると 開発する場合コストがかかる 制作コストがかさむ 12年12月15日土曜日
16.
WordPressとレスポンシブWebデザイン
WordPress 3.2からのデフォルトテーマ レスポンシブWebデザイン対応 Twenty Eleven http://twentyelevendemo.wordpress.com/ 12年12月15日土曜日
17.
WordPressとレスポンシブWebデザイン WordPress
3.5 “Elvin”デフォルトテーマ レスポンシブWebデザイン対応 Twenty Twelve http://twentytwelvedemo.wordpress.com/ 12年12月15日土曜日
18.
WordPressでレスポンシブ 事例
Acru(アクリュ) http://acru.jp/ 12年12月15日土曜日
19.
構築ポイント
Acruのサイトは Twenty Elevenを親テーマにして構築してます WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 http://wpdocs.sourceforge.jp/子テーマ 12年12月15日土曜日
20.
WordPressでレスポンシブ サンプルサイト 12年12月15日土曜日
21.
レスポンシブWebデザインの考え方
レスポンシブWebデザインの考え方 ワークフロー 12年12月15日土曜日
22.
レスポンシブWebデザインの考え方
モバイルファースト パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px∼ 12年12月15日土曜日
23.
レスポンシブWebデザインの考え方
モバイルファーストって何? ルーク・ウロブルスキーさんの提唱したコンセプト (プロダクトの戦略や製品のデザインのコンサルタント会社 「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ ) WebサイトやWebアプリを開発するうえで、 まずモバイルから開発してPCに展開していくべきだ とする考え方 そうしたいけど、それがなかなか難しい 12年12月15日土曜日
24.
レスポンシブWebデザインの考え方
モバイルファーストによるメリット そのサイト(画面)で見せたいものが何かということがはっきりする 小さい画面で見せる際の優先順位 12年12月15日土曜日
25.
レスポンシブWebデザインの考え方
ワイヤーフレームが非常に大事 レイアウトの切り替えパターンを知っておこう! パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px∼ 12年12月15日土曜日
26.
レスポンシブWebデザインの考え方 代表的な切り替えパターンその1
代表的な切り替えパターンその2 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年12月15日土曜日
27.
レスポンシブWebデザインの考え方 代表的な切り替えパターンその3
代表的な切り替えパターンその4 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年12月15日土曜日
28.
レスポンシブWebデザインの考え方
基本はCSS できるだけ%やemなど可変で組みたい。 pxを使う場合もある。 12年12月15日土曜日
29.
ワークフロー
スマートフォン用のカンプデザイン タブレット用のカンプデザイン パソコン用のカンプデザイン そろそろこの考え方やめませんか? 何故かというと 12年12月15日土曜日
30.
ワークフロー
特にスマートフォンやタブレットは画面サイズだけでなく、 機種ごとの差異があり、全部にPSDでのデザインを きっちり反映させるのは厳しい。 PC用のデザインをPSDデータ タブレット/スマートフォンはワイヤーフレームで確認 12年12月15日土曜日
31.
ワークフロー 基本の設計をしっかりしてワイヤーフレームをきっちり書く
デザイナー・マークアップエンジニアが参加する事が大切 設計/ワイヤーフレーム デザイン モックアップ 実装 12年12月15日土曜日
32.
ワークフロー
大事なのは考え方 どこを優先的に見せるか コンテンツファースト 内容ありき 12年12月15日土曜日
33.
ワークフロー
デザインカンプ ワイヤーフレーム ロゴ グローバルナビ カルーセル 患者様とのつながり 地域とのつながり • • • 12年12月15日土曜日
34.
ワークフロー
第二階層が曲者だから気をつけて 第二階層のナビゲーションどうするの? 12年12月15日土曜日
35.
ナビゲーションの処理
できるだけテキストベースで作って折り畳む派です 12年12月15日土曜日
36.
ナビゲーションの処理 12年12月15日土曜日
37.
実装編
ブレークポイント CSS側記述 HTML側記述 WordPressにするには? WordCampで話せなかったこと! 12年12月15日土曜日
38.
ブレークポイント
切り替えのポイント メジャーブレークポイント 320px 768px 960px 12年12月15日土曜日
39.
ブレークポイント
Acruの実装は2ヶ所 480px 960px 12年12月15日土曜日
40.
ブレークポイント
サンプルサイト実装は1ヶ所 480px 12年12月15日土曜日
41.
メディアクエリーと書き方
メディアクエリー(Media Queries)って? CSS3からの機能 ユーザーのビューサイズによって読み込むCSSを 分岐させることができる 12年12月15日土曜日
42.
メディアクエリーと書き方
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年12月15日土曜日
43.
メディアクエリーと書き方
モバイルのCSSから書いていく方がいいよ 12年12月15日土曜日
44.
メディアクエリーと書き方
特にWordPressの場合 style.css 1つの方がやりやすい 12年12月15日土曜日
45.
HTMLの設定(viewport)
<meta name="viewport" content="width=device-width"> 「viewportの幅をデバイスのスクリーンの幅に合わせる」 12年12月15日土曜日
46.
HTMLの設定(viewport) <meta
name="viewport" 一般的に多い設定 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 表示幅をスクリーン幅と一致 初期拡大率を等倍 最小拡大率を等倍 最大拡大率を等倍 12年12月15日土曜日
47.
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年12月15日土曜日
48.
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年12月15日土曜日
49.
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年12月15日土曜日
50.
実際にあったトラブル JavaScriptを使う
スライド コンフリクトを起こしました カレンダー スクロールバー 読み込みの順番を マウスオーバー 変える事で解決 ギャラリー IE8以下メディアクエリー 12年12月15日土曜日
51.
レスポンシブ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年12月15日土曜日
52.
レスポンシブWebデザインにおいての画像の扱い方
画像が重いという問題に対しては その1 CSS Sprite 1枚の画像の中に必要な画像を全部入れ必要に応じて 表示させる部分を変える手法 1枚画像を最初に読み込む事によって余分なトラフィックが かかるのを防ぐ YouTube 12年12月15日土曜日
53.
レスポンシブWebデザインにおいての画像の扱い方
画像が重いという問題に対しては その2 データ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年12月15日土曜日
54.
レスポンシブWebデザインにおいての画像の扱い方
WordPressの場合ユーザーが画像を更新して行く @media only screen and (max-width: 480px) { .cpost img { ! ! max-width: 300px; ! ! width: auto; ! ! height: auto; ! ! } } クラスつけないと全部の画像に反映されちゃうから気をつけてね 12年12月15日土曜日
55.
レスポンシブWebデザインでの文字の扱い方
解像度によってフォントの大きさの変更が必要となった場合 ウェブフォントが使いたくなる。 CSS3 @font-‐face これからの課題 フリーの日本語フォントが少ない。重い。 windowsで見ると読みにくい。 12年12月15日土曜日
56.
レスポンシブWebデザインの向き・不向き
向いてる 文字ベースのサイト 構造が簡単なサイト 大変 各ページによって表示を変えたいなど構造が複雑なサイト 利用シーンによって見せ方を大きく変えたいサイト 可能不可能で言ったら可能だけれど負担が大きい 12年12月15日土曜日
57.
WordPress化してみよう
触るのは wp-content→themes だけ! twentytwelve original(任意の名前) twentyeleven twentyten これが自分で作成した オリジナルテーマ用の フォルダになります。 index.php 12年12月15日土曜日
58.
WordPress化してみよう @charset
"UTF-8"; style.cssの一番最初に /* Theme Name:テーマの名前 「これはWordPressのテーマだよ」 Theme URI:テーマを配布する際はここにURL Description:テーマの説明です ということを書く Author:作成者名。 Author URI:作成者のサイトURL Version:テーマのバージョンを書きます。 */ 親テーマを使うならTemplateの記述が必須 Template: twentyeleven Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します 12年12月15日土曜日
59.
WordPress化してみよう
header.php sidebar.php footer.php 12年12月15日土曜日
60.
WordPress化してみよう
インクルードタグ • <?php get_header(); ?> / header.phpと結びます。 • <?php get_footer(); ?> / footer.phpと結びます。 • <?php get_sidebar(); ?> / sidebar.phpと結びます。 <?php include( TEMPLATEPATH . '/header2.php' ); ?> その他任意の結びたいphpがあったら 12年12月15日土曜日
61.
便利ツール
フレームワーク(Framework) モックアップ用アイテム ギャラリーサイト 確認用ツール スライド用jQuery JetPackのギャラリー機能 12年12月15日土曜日
62.
Framework(Twitter Bootstrap)
http://twitter.github.com/bootstrap/index.html 12年12月15日土曜日
63.
Framework(Zurb Foundation)
http://foundation.zurb.com/ 12年12月15日土曜日
64.
便利ツール(モックアップ用アイテム)
Responsive Design Mock-up Pack テキスト http://medialoot.com/item/free-responsive-screen-mockup-pack/ 12年12月15日土曜日
65.
便利ツール(ギャラリーサイト)
ギャラリーサイト(国内) http://responsive-jp.com/ ギャラリーサイト(海外) http://mediaqueri.es/ 12年12月15日土曜日
66.
便利ツール
Responsive.is http://responsive.is Responsive Design Bookmarklet http://responsive.victorcoulon.fr/ Viewport resizer http://responsive.victorcoulon.fr/ 12年12月15日土曜日
67.
WordPressレスポンシブテーマ
11/3は74だったのに12/15には 87 12年12月15日土曜日
68.
スライド用jQuery
http://responsive-slides.viljamis.com/ 12年12月15日土曜日
69.
JetPack
http://wordpress.org/extend/plugins/jetpack/ 12年12月15日土曜日
70.
JetPack
ギャラリー機能を使ってのカルーセルがレスポンシブ対応。 便利で綺麗。 ちょっと見てみましょう http://wordpress.org/extend/plugins/jetpack/ 12年12月15日土曜日
71.
再度実践
再度実践 12年12月15日土曜日
72.
最後に
今年最後のWordBench大阪ありがとうございました! 来年もよろしくね。 新しいことに挑戦できるのはWebの良いところ これからの技術だからこそ挑戦するのは楽しい。 レスポンシブのスライド用プラグイン誰か作って! もしくは一緒に作ろう! Twitter: @nukaga 額賀 順子 | ヌカガジュンコ Facebook: nukagajunko 12年12月15日土曜日
Jetzt herunterladen