レスポンシブ＋フラットデザイン＋wordpress
TRANSCRIPT
Junko NukagaWordBench Osaka > Special Version
レスポンシブ + フラットデザインで WordPressテーマを作ってみよう
13年9月28日土曜日
今年最後のWordBench大阪WordBench大阪特別編へようこそ！
13年9月28日土曜日
自己紹介
額賀 順子 | ヌカガジュンコ
フリーランスのWebディレクター／デザイナー。つまり１人で色々やっちゃう人。
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.asp30
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-nuunoAuthor:nukagaAuthor URI:http://nuuno.net/Template:twentythirteenVersion: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-flatonica71
13年9月28日土曜日
WordPress公式テーマSensitive
http://wordpress.org/themes/sensitive72
13年9月28日土曜日
WordPress公式テーマ
Responsive
http://wordpress.org/themes/responsive73
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日土曜日