• Like
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Upcoming SlideShare
Loading in...5
×

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

  • 63,052 views
Uploaded on

WordCamp Osaka 2012

WordCamp Osaka 2012

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
63,052
On Slideshare
0
From Embeds
0
Number of Embeds
47

Actions

Shares
Downloads
425
Comments
0
Likes
187

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 文系デザイナーでも大丈夫! レスポンシブWebサイトを          で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子12年11月3日土曜日
  • 2. ようこそWordCamp Osaka 2012 へ12年11月3日土曜日
  • 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター/デザイナー。 つまり1人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な Twitter @nukaga ど、積極的に人と関わる活動を行っております。 Facebook nukagajunko インターネット大好き! WordCamp Osaka 2012 副実行委員長をさせて 頂いています。12年11月3日土曜日
  • 4. 本日のアジェンダ ✤ レスポンシブWebデザインとは? ✤ レスポンシブWebデザインの考え方 ✤ 実践編 ✤ 便利ツール12年11月3日土曜日
  • 5. レスポンシブWebデザインとは? レスポンシブWebデザインとは? WordPress+レスポンシブWebデザイン実例紹介12年11月3日土曜日
  • 6. レスポンシブWebデザインとは 画像解像度(ユーザーの見ている環境・デバイス) にあわせて見やすいように表示を切り替えるデザイン HTMLはひとつ12年11月3日土曜日
  • 7. レスポンシブWebデザインとは ワンソース型 マルチソース型 プログラム変換型 HTML HTML HTML HTML HTML CSS CSS CSS CSS CSS CSS12年11月3日土曜日
  • 8. レスポンシブWebデザインとは HTMLはひとつ 実現のポイントはCSSにあります PHPとか関係ないよ12年11月3日土曜日
  • 9. レスポンシブWebデザインとは 考え方がとても大事! PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません これをわかっていないと苦しみます12年11月3日土曜日
  • 10. レスポンシブWebデザインとは 反対に言うと考え方さえわかっていたらやみくもに 突っ込んでいくよりだいぶ楽に組めます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日土曜日
  • 14. WordPressでレスポンシブ 事例1 budori  http://www.budori.co.jp/12年11月3日土曜日
  • 15. WordPressでレスポンシブ 事例2 loftwork.com http://www.loftwork.com/12年11月3日土曜日
  • 16. WordPressでレスポンシブ 事例3 Acru(アクリュ) http://acru.jp/12年11月3日土曜日
  • 17. 構築ポイント Acruのサイトは Twenty Elevenを親テーマにして構築してます WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 http://wpdocs.sourceforge.jp/子テーマ12年11月3日土曜日
  • 18. レスポンシブWebデザインの考え方 レスポンシブWebデザインの考え方 ワークフロー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日土曜日
  • 23. レスポンシブWebデザインの考え方 代表的な切り替えパターンその1 代表的な切り替えパターンその2 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?151412年11月3日土曜日
  • 24. レスポンシブWebデザインの考え方 代表的な切り替えパターンその3 代表的な切り替えパターンその4 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?151412年11月3日土曜日
  • 25. レスポンシブWebデザインの考え方 基本はCSS できるだけ%やemなど可変で組みたい。 pxを使う場合もある。12年11月3日土曜日
  • 26. ワークフロー スマートフォン用のカンプデザイン タブレット用のカンプデザイン パソコン用のカンプデザイン そろそろこの考え方やめませんか? 何故かというと12年11月3日土曜日
  • 27. ワークフロー 特にスマートフォンやタブレットは画面サイズだけでなく、 機種ごとの差異があり、全部にPSDでのデザインを きっちり反映させるのは厳しい。 PC用のデザインをPSDデータ タブレット/スマートフォンはワイヤーフレームで確認12年11月3日土曜日
  • 28. ワークフロー 基本の設計をしっかりしてワイヤーフレームをきっちり書く デザイナー・マークアップエンジニアが参加する事が大切 設計/ワイヤーフレーム デザイン モックアップ 実装12年11月3日土曜日
  • 29. ワークフロー 大事なのは考え方 どこを優先的に見せるか コンテンツファースト 内容ありき12年11月3日土曜日
  • 30. 実装編 ブレークポイント CSS側記述 HTML側記述12年11月3日土曜日
  • 31. ブレークポイント 切り替えのポイント メジャーブレークポイント 320px 768px 960px12年11月3日土曜日
  • 32. ブレークポイント 今回の実装は2ヶ所 480px 960px12年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日土曜日
  • 35. メディアクエリーと書き方 モバイルのCSSから書いていく方がいいよ12年11月3日土曜日
  • 36. メディアクエリーと書き方 特にWordPressの場合 style.css 1つの方がやりやすい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日土曜日
  • 42. 実際にあったトラブル JavaScriptを使う スライド コンフリクトを起こしました カレンダー スクロールバー 読み込みの順番を マウスオーバー 変える事で解決 ギャラリー IE8以下メディアクエリー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-Enhance12年11月3日土曜日
  • 44. レスポンシブWebデザインにおいての画像の扱い方 画像が重いという問題に対しては その1 CSS Sprite 1枚の画像の中に必要な画像を全部入れ必要に応じて 表示させる部分を変える手法 1枚画像を最初に読み込む事によって余分なトラフィックが かかるのを防ぐ YouTube12年11月3日土曜日
  • 45. レスポンシブ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年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日土曜日
  • 50. Framework(Twitter Bootstrap) http://twitter.github.com/bootstrap/index.html12年11月3日土曜日
  • 51. Framework(Zurb Foundation) http://foundation.zurb.com/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日土曜日
  • 55. WordPressレスポンシブテーマ 7412年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: nukagajunko12年11月3日土曜日