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

Más contenido relacionado

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

OSC NAGOYA 2013 WordPressコミュニティの魅力
OSC NAGOYA 2013 WordPressコミュニティの魅力OSC NAGOYA 2013 WordPressコミュニティの魅力
OSC NAGOYA 2013 WordPressコミュニティの魅力takashi ono
 
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について Junko Nukaga
 
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについてWordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについてTsuyoshi.
 
田舎から見るWordPressイベント総括2010
田舎から見るWordPressイベント総括2010田舎から見るWordPressイベント総括2010
田舎から見るWordPressイベント総括2010Hideki Masuoka
 
2013 09-28 wordbench大阪と俺
2013 09-28 wordbench大阪と俺2013 09-28 wordbench大阪と俺
2013 09-28 wordbench大阪と俺Tomoyuki Sugita
 
Wordcamp東京
Wordcamp東京Wordcamp東京
Wordcamp東京rie05
 
2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoyaYasuhiro Nozue
 
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench NagoyaWordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoyatakashi ono
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうTsuzurahara Tohru
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPressJunko Nukaga
 

Similar a レスポンシブ+フラットデザイン+WordPress (10)

OSC NAGOYA 2013 WordPressコミュニティの魅力
OSC NAGOYA 2013 WordPressコミュニティの魅力OSC NAGOYA 2013 WordPressコミュニティの魅力
OSC NAGOYA 2013 WordPressコミュニティの魅力
 
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
 
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについてWordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
 
田舎から見るWordPressイベント総括2010
田舎から見るWordPressイベント総括2010田舎から見るWordPressイベント総括2010
田舎から見るWordPressイベント総括2010
 
2013 09-28 wordbench大阪と俺
2013 09-28 wordbench大阪と俺2013 09-28 wordbench大阪と俺
2013 09-28 wordbench大阪と俺
 
Wordcamp東京
Wordcamp東京Wordcamp東京
Wordcamp東京
 
2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya
 
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench NagoyaWordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
 

Más de Junko Nukaga

WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ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...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...Junko Nukaga
 
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeechWordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeechJunko Nukaga
 
AWSはじめて物語
AWSはじめて物語AWSはじめて物語
AWSはじめて物語Junko Nukaga
 
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪Junko Nukaga
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
 

Más de Junko Nukaga (6)

WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へWordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
 
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
 
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeechWordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeech
 
AWSはじめて物語
AWSはじめて物語AWSはじめて物語
AWSはじめて物語
 
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 

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