Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

レスポンシブ+フラットデザイン+WordPress

8,739 views

Published on

特別編 WordBench大阪 in 京セラドーム大阪(JAWS FESTA コラボレーション企画)

Published in: Design

レスポンシブ+フラットデザイン+WordPress

  1. 1. Junko Nukaga WordBench Osaka > Special Version レスポンシブ + フラットデザインで WordPressテーマを作ってみよう 13年9月28日土曜日
  2. 2. 今年最後のWordBench大阪 WordBench大阪特別編へようこそ! 13年9月28日土曜日
  3. 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター/ デザイナー。 つまり1人で色々やっちゃう人。 WordBench大阪の管理人をしてい ます。 nukagajunko @nukaga 3 13年9月28日土曜日
  4. 4. WordBench大阪って? WordBenchとはWordPressの地域コミュニティです。 日本各地で地域のWordBenchが存在します。 たこやきわぷー 4 13年9月28日土曜日
  5. 5. 本日のアジェンダ ✤ レスポンシブWebデザインとは? ✤ フラットデザインってどうよ? ✤ 実践編 ✤ 便利ツール ✤ (時間があったら再度実践もしくは質疑応答) 5 13年9月28日土曜日
  6. 6. レスポンシブWebデザインとは? レスポンシブWebデザインとは? おさらい 6 13年9月28日土曜日
  7. 7. レスポンシブWebデザインとは 画像解像度(ユーザーの見ている環境・デバイス) にあわせて見やすいように表示を切り替えるデザイン HTMLはひとつ 7 13年9月28日土曜日
  8. 8. レスポンシブWebデザインとは 1)接続してきた機器にあわせて見せるテーマを切り替える WordPressの場合 2)レスポンシブWebデザインのテーマを使う(作る) 8 13年9月28日土曜日
  9. 9. レスポンシブWebデザインとは 1)接続してきた機器にあわせて見せるテーマを切り替える WordPressの場合 2)レスポンシブWebデザインのテーマを使う(作る) 今日はこっち 9 13年9月28日土曜日
  10. 10. レスポンシブWebデザインとは HTMLはひとつ 実現のポイントはCSSにあります PHPは関係ないよ 10 13年9月28日土曜日
  11. 11. レスポンシブWebデザインとは 考え方がとても大事! PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません これをわかっていないと苦しみます 11 13年9月28日土曜日
  12. 12. レスポンシブWebデザインとは PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません クライアントにもわかって頂かないと苦しみます! 12 13年9月28日土曜日
  13. 13. レスポンシブWebデザインの考え方 320px 480px 600px 768px 960px 1200px∼ スマートフォン タブレット パソコン モバイルファースト 13 13年9月28日土曜日
  14. 14. レスポンシブWebデザインの考え方 モバイルファーストって何? そうしたいけど、それがなかなか難しい ルーク・ウロブルスキーさんの提唱したコンセプト (プロダクトの戦略や製品のデザインのコンサルタント会社 「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ ) WebサイトやWebアプリを開発するうえで、 まずモバイルから開発してPCに展開していくべきだ とする考え方 14 13年9月28日土曜日
  15. 15. レスポンシブWebデザインの考え方 モバイルファーストによるメリット そのサイト(画面)で見せたいものが何かということがはっきりする 小さい画面で見せる際の優先順位 15 13年9月28日土曜日
  16. 16. ワークフロー 基本の設計をしっかりしてワイヤーフレームをきっちり書く 設計/ワイヤーフレーム デザイン モックアップ 実装 デザイナー・マークアップエンジニアが参加する事が大切 16 13年9月28日土曜日
  17. 17. スマートフォン用のカンプデザイン タブレット用のカンプデザイン パソコン用のカンプデザイン 「そろそろこの考え方やめませんか?」 と言っていたけれど最早「無理」に近い 17 13年9月28日土曜日
  18. 18. Image:OpenSignalMaps 18 13年9月28日土曜日
  19. 19. 特にスマートフォンやタブレットは画面サイズだけでなく、 機種ごとの差異があり、全部にPSDでのデザインを きっちり反映させるのは厳しい。 メインイメージを確認 ワイヤーフレームで確認 インブラウザで作ってキャプチャ 19 13年9月28日土曜日
  20. 20. ワークフロー 大事なのは考え方 どこを優先的に見せるか コンテンツファースト 内容ありき 20 13年9月28日土曜日
  21. 21. ワークフロー 第二階層が曲者だから気をつけて 第二階層のナビゲーションどうするの? 21 13年9月28日土曜日
  22. 22. ナビゲーションの処理 できるだけテキストベースで作って折り畳む派です 22 13年9月28日土曜日
  23. 23. ナビゲーションの処理 23 13年9月28日土曜日
  24. 24. ナビゲーションの処理 jQuery プラグインを使っちゃうのも手 http://www.red-team-design.com/animenu-a-responsive-dropdown- navigation-made-with-sass 24 13年9月28日土曜日
  25. 25. ナビゲーションの処理 jQuery プラグインを使っちゃうのも手 http://srobbin.com/jquery-plugins/pageslide/ 25 13年9月28日土曜日
  26. 26. フラットデザインって? フラットデザインって? 26 13年9月28日土曜日
  27. 27. iOS7 27 13年9月28日土曜日
  28. 28. フラットデザイン シンプルで 平面的なデザイン 28 13年9月28日土曜日
  29. 29. フラットデザイン 実はあんまりピンと来ていません 言っちゃった… 29 13年9月28日土曜日
  30. 30. フラットデザイン アクセシビリティの問題 JISX8341-3 7.1.4.3 最低限のコントラストに関する達成基準 W3C (WCAG) 2.0 1.4.3 最低限のコントラスト ぬ ぬ ぬ ぬ http://www.colorsontheweb.com/colorcontrast.asp 30 13年9月28日土曜日
  31. 31. フラットデザイン アクセシビリティの問題 例)「半角英語だったら18pt以上、日本語は22pt以上」 憂鬱 low 上記は極端ではあるけれど日本語って画数多いよね… 31 13年9月28日土曜日
  32. 32. フラットデザイン ・今のフラットデザインは「色」に特徴がある。 ・中間色を使う場合、特に日本語は気をつけた方が良い。 ・中間色部分ではフォントを十分に大きくする。 ・本文部分では十分なコントラスト比を保てるようにする。 32 13年9月28日土曜日
  33. 33. フラットデザイン その他にもどのボタンを押したら良いのかわからない 等のユーザビリティの問題も指摘されているけれど、 リッチデザインよりフラットデザインはCSSで表現を 作っていけたりと、レスポンシブと相性が良い。 33 13年9月28日土曜日
  34. 34. フラットデザイン フラットデザインは「流行」? テキスト Material Honesty on the Web 流行じゃなくて本質だという記事もあります。 34 13年9月28日土曜日
  35. 35. 実装編 ブレークポイント CSS側記述 HTML側記述 WordPressにするには? 35 13年9月28日土曜日
  36. 36. ブレークポイント メジャーブレークポイントを設定してマイナーブレークポイントで調整 320px 768px 960px 36 13年9月28日土曜日
  37. 37. メディアクエリーと書き方 ユーザーのビューサイズによって読み込むCSSを 分岐させることができる メディアクエリー(Media Queries)って? @media  screen  and  (max-­‐width:  1024px){        /*  タブレット用のスタイル記述  */ } 37 13年9月28日土曜日
  38. 38. メディアクエリーと書き方 CSSはモバイルのCSSから書いていく方がいいよ 38 13年9月28日土曜日
  39. 39. HTMLの設定(viewport) <meta name="viewport" content="width=device-width"> 「viewportの幅をデバイスのスクリーンの幅に合わせる」 39 13年9月28日土曜日
  40. 40. 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を分岐させる 40 13年9月28日土曜日
  41. 41. レスポンシブWebデザインにおいての画像の扱い方 WordPressの場合ユーザーが画像を更新して行く @media only screen and (max-width: 480px) { .cpost img { ! ! max-width: 300px; ! ! width: auto; ! ! height: auto; ! ! } } クラスつけないと全部の画像に反映されちゃうから気をつけてね 41 13年9月28日土曜日
  42. 42. レスポンシブWebデザインにおいての画像の扱い方 Retina対応 IE8はheightが弱い .ie8 .class img { ! ! width: 300px; ! ! height: 300px; ! ! } <!--[if IE 8]> <html class="ie ie8"> <![endif]--> HTML CSS 42 13年9月28日土曜日
  43. 43. WordPress化してみよう twentyeleven index.php original(任意の名前) これが自分で作成した オリジナルテーマ用の フォルダになります。 触るのは wp-content→themes だけ! twentytwelve twentythirteen 43 13年9月28日土曜日
  44. 44. WordPress化してみよう @charset "UTF-8"; /* Theme Name:テーマの名前 Theme URI:テーマを配布する際はここにURL Description:テーマの説明です Author:作成者名。 Author URI:作成者のサイトURL Version:テーマのバージョンを書きます。 */ style.cssの一番最初に 「WordPressのテーマだよ」 ということを書く 親テーマのディレクトリ名, 大文字小文字を区別します Template: twentyeleven 子テーマにするならTemplateの記述が必須 44 13年9月28日土曜日
  45. 45. WordPress化してみよう header.php footer.php sidebar.php 45 13年9月28日土曜日
  46. 46. WordPress化してみよう • <?php get_header(); ?> / header.phpと結びます。 • <?php get_footer(); ?> / footer.phpと結びます。 • <?php get_sidebar(); ?> / sidebar.phpと結びます。 <?php include( TEMPLATEPATH . '/header2.php' ); ?> インクルードタグ その他任意の結びたいphpがあったら 46 13年9月28日土曜日
  47. 47. フレームワークを使う 今回使ったのはこれ http://designmodo.github.io/Flat-UI/ 47 13年9月28日土曜日
  48. 48. フレームワークを使う Bootstrapを基調にしながらフラットデザインへ特価 48 13年9月28日土曜日
  49. 49. 余談 http://getbootstrap.com/ BootstrapはLESSファイルがあります 49 13年9月28日土曜日
  50. 50. 余談 http://foundation.zurb.com/ FoundationはSassファイルがあります 50 13年9月28日土曜日
  51. 51. 子テーマ+フレームワーク Twenty Thirteen+Flat UI 51 13年9月28日土曜日
  52. 52. 構築ポイント 子テーマとは WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 http://wpdocs.sourceforge.jp/子テーマ 52 13年9月28日土曜日
  53. 53. 子テーマ+フレームワーク ものぐさ子テーマディレクトリ作成 ダウンロードしたFlat UIのフォルダをそのまま 子テーマのディレクトリに style.css 子テーマ用 53 13年9月28日土曜日
  54. 54. 子テーマ+フレームワーク 子テーマstyle.css記述 style.css 子テーマ用 /* Theme Name:flat-nuuno Author:nukaga Author URI:http://nuuno.net/ Template:twentythirteen Version:0.1.0 */ 54 13年9月28日土曜日
  55. 55. 子テーマ+フレームワーク 親テーマのstyle.cssとフレームワークのCSSを インクルード @import url('../twentythirteen/style.css'); @import url('bootstrap/css/bootstrap.css'); @import url('css/flat-ui.css'); 55 13年9月28日土曜日
  56. 56. 子テーマ+フレームワーク ヘッダー画像 変えたい 56 13年9月28日土曜日
  57. 57. 子テーマ+フレームワーク 新規に画像を作成してCSSでbackgroundへ指定 ヘッダー画像は削除 流行りのデザインっぽくする為に高さを400pxに。 (バックグラウンドの画像はちょっとだけ質感を 出す為にテクスチャを使ってます) 57 13年9月28日土曜日
  58. 58. 子テーマ+フレームワーク メニューを 一番上に したい 58 13年9月28日土曜日
  59. 59. 子テーマ+フレームワーク header.phpをコピーしてきてグローバルメニューの 位置を変更。 59 13年9月28日土曜日
  60. 60. 子テーマ+フレームワーク header.phpを作ったついでに、Flat UI用のJSを読 み込むように書き込み。 (template.htmlからコピペ) <!-- Load JS here for greater good =============================--> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.8.3.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-ui-1.10.3.custom.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.ui.touch-punch.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap-select.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap-switch.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/flatui-checkbox.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/flatui-radio.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.tagsinput.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.placeholder.js"></script> 60 13年9月28日土曜日
  61. 61. 子テーマ+フレームワーク <script src=" <?php echo get_stylesheet_directory_uri(); ?> /js/.js"></script> 注意:親テーマを使っていて子テーマのディレクトリ から呼び出したい場合は <?php echo get_stylesheet_directory_uri(); ?> を使う 61 13年9月28日土曜日
  62. 62. 子テーマ+フレームワーク ちなみに 親テーマのディレクトリから呼び出したい場合は <?php echo get_template_directory_uri(); ?> を使う 62 13年9月28日土曜日
  63. 63. 子テーマ+フレームワーク メニューは <?php wp_nav_menu(); ?> を使いたい →管理画面の「メニュー」でメニューを管理できる 63 13年9月28日土曜日
  64. 64. 子テーマ+フレームワーク Bootstrapのナビを WordPressの wp_nav_menuに対応させる https://gist.github.com/johnmegahan/1597994 64 13年9月28日土曜日
  65. 65. 便利ツール フレームワーク(Framework) Webフォント 確認用ツール レスポンシブslideプラグイン プラグイン 65 13年9月28日土曜日
  66. 66. フレームワーク 66 13年9月28日土曜日
  67. 67. フレームワーク 67 13年9月28日土曜日
  68. 68. フレームワーク 68 13年9月28日土曜日
  69. 69. 便利ツール http://responsive.is http://responsive.victorcoulon.fr/ Responsive Design Bookmarklet Responsive.is http://responsive.victorcoulon.fr/ Viewport resizer 69 13年9月28日土曜日
  70. 70. WEBフォント http://webfont.fontplus.jp/ FONTPLUS 日本語でも有料のサービスは快適 70 13年9月28日土曜日
  71. 71. WordPress公式テーマ my flatonica http://wordpress.org/themes/my-flatonica 71 13年9月28日土曜日
  72. 72. WordPress公式テーマ Sensitive http://wordpress.org/themes/sensitive 72 13年9月28日土曜日
  73. 73. WordPress公式テーマ Responsive http://wordpress.org/themes/responsive 73 13年9月28日土曜日
  74. 74. プラグイン http://wordpress.org/plugins/easing-slider/ 74 13年9月28日土曜日
  75. 75. プラグイン http://wordpress.org/extend/plugins/jetpack/ 75 13年9月28日土曜日
  76. 76. 終わり ありがとうございました! 76 13年9月28日土曜日

×