WordCamp Osaka 2012でお話した「今から始めよう！WordPressで作る女子ウケ★スマホサイト」セッション資料です。

2. さいしょに
この資料は後日アップロードされます！
WordCamp大阪公式サイトにリンク掲載します
http://2012.osaka.wordcamp.org/

3. 自己紹介
瀬口理恵（せぐちりえ）＠rie05
1983年大阪うまれ大阪そだち
5DGの屋号でフリーランスデザイナーしてます
Web/DTP/AppUI/講師業/Ust配信 etc
WordCamp大阪 実行委員長
WordBench大阪 管理人
WordCamp神戸実行委員・スピーカー
@rie05 /rie.seguchi

4. アジェンダ
女子ウケなスマホサイトをWPで！
１ 4 コーディングと
最新スマホ事情
WPテーマ化
2 5
スマホサイトとは 検証環境について
3 6
スマホサイトデザイン まとめ

5. 最新スマホ事情
１ 最新スマホ事情

6. 最新スマホ事情
スマートフォン
持ってる人！

7. 最新スマホ事情
2011年9月11日にWordCamp神戸で使った資料データ
（MM総研調べ）

8. 最新スマホ事情
現在の推移
（MM総研調べ）

9. 最新スマホ事情
つい最近の出来事は…
■iPhone5登場！
■Android最新機種は OS4.1
■Windows Phoneは Windows8発売と共に8搭載機種発売の見込み

10. 最新スマホ事情
iPhone Android Windows Phone

11. 最新スマホ事情
（MM総研調べ）

12. スマホサイトとは
2 スマホサイトとは

13. スマホサイトとは
スマートフォンに最適化
されているサイト
例）楽天市場TOPページ

14. スマホサイトとは
スマートフォンに最適化
されていないサイト
例）Tullys Coffeeサイト

15. スマホサイトとは
★スマートフォンに最適化されているサイトとは…
マウスではなく指でタップするため、ボタンは押しやすくするなど
の独自UIが必要
弱い3G回線でみられることも考慮した軽量化サイト
太陽光の下で見られても見やすいようコントラストに注意した配色
ユーザーエージェントをみて振り分け

16. スマホサイトとは
スマホ制作、いろいろなアプローチ

17. スマホサイトとは
HTML5 + CSS3／ Javascriptで制作

18. スマホサイトとは
Jquery mobileで制作

19. スマホサイトとは
マルチデバイスに対応、ワンソースで運用する
レスポンシブ・ウェブデザイン

20. スマホサイトとは
オリジナルデザインを作って
WordPressでスマホテーマ制作

21. スマホサイトとは
WordPressとは
世界標準のWebパブリッシングプラットフォーム
✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア
✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト

22. スマホサイトデザイン
3 スマホサイトデザイン

23. スマホサイトデザイン
iPhone Android
ボタンは1つ ボタンは3つ
（ホーム） （メニュー/ホーム/戻る）

24. スマホサイトデザイン
http://static.lukew.com/TouchGestureGuide.pdf

25. スマホサイトデザイン
スマホサイトペーパープロトタイプ
Project: Date: Notes: Notes:
SINGLE VIEW LAYOUT SCROLL VIEW LAYOUT

26. スマホサイトデザイン
ワイヤー作成オンラインツール
Cacoo
https://cacoo.com/

27. スマホサイトデザイン
∼実例ギャラリーサイト∼
★スマートフォンサイト集めました。
http://sp-web.jp/
★iPhone対応サイト トップ | meet i [ミートアイ]
http://web.meet-i.com/?type=web
★iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています
http://www.ishowcase.jp/
★優れたiPhoneサイトデザイン集 - iPhoneデザインボックス
http://design.web-hon.com/

28. スマホサイトデザイン
∼UIパターンサイト∼
http://pttrns.com/logins
http://www.lovelyui.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://mockapp.com/m/Home.html

29. デザイン/UI
リキッド（可変幅）でデザインする
→Landscape（横画面）表示対策
角丸やグラデ、ドロップシャドウはCSS3で表現
ロールオーバーがないためテキストリンクは色を
変え下線を引くなど、タップでアクションがあるボ
タンはデザインに統一性を。

30. スマホサイトデザイン
私はデザインはPhotoshopで作ります
このへんは好みで
Adobe Photoshop®

31. スマホサイトデザイン
デザインするサイズについて
width:320px height:480px ？
Retina display対応
高解像度端末の対応？

32. スマホサイトデザイン
width:320px height:480px
width:640px height:960px
Photoshopで50%縮小表示しながら制作

33. スマホサイトデザイン
デモサイトつくりました

34. スマホサイトデザイン
DEMO

35. コーディングとWPテーマ化
4 コーディングとWordPressテーマ化

36. コーディングとWPテーマ化
私はコーディングはCodaを使います
このへんは好みで

37. コーディングとWPテーマ化
まずはコーディングから。
積極的に最新技術を使っていきましょう

38. コーディングとWPテーマ化
<meta name="viewport" content="width=device-width" />
viewportとは？
ウィンドウのサイズのようなもの。初期値は横幅980px。
このコードをhtmlのhead内に書いて指定してあげること
で任意の横幅を指定できる。width:device-width
と指定すると、そのデバイスの幅で調整されます。

39. コーディングとWPテーマ化
コーディングが終わったらテーマ化
公式テーマ公開やテーマ配布をしない場合、
最小構成で作ってしまいましょう

40. コーディングとWPテーマ化
テーマ構成
index.php style.css
php css
header.php footer.php
php php
include(読み込み)
してくる用

41. コーディングとWPテーマ化
コーディングしたデータをテーマ構成用に拡張子を
変えて.phpにする
cssはひとつのstyle.cssファイルにまとめる
ファイルにWPタグをいれていく
→DEMO

42. コーディングとWPテーマ化
WordPress3.4から使えるようになった
条件分岐関数→wp_is_mobile
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマホ用コンテンツ
<?php else: ?>
PC用コンテンツ
<?php endif; ?>
注意！このままだとタブレットもスマホ用と判定されてしまうので
カスタマイズしないとだめ。

43. コーディングとWPテーマ化
プラグイン
■Multi Device Switcher
http://wordpress.org/extend/plugins/multi-device-switcher/
インストール→有効化でスマホ用、タブレット用などのデバイスでどのテーマを表示させ
るか設定できます。国産、アップデートも2012/10/16にされています。

44. コーディングとWPテーマ化
容量制限に注意
GIF/PNG/TIFF:3メガピクセル以下
JPEG:32メガピクセル以下
HTML/CSS/JS:10MB以下
JSは実行速度10秒以内

45. 検証環境について
5 検証環境について

46. 検証環境について
Macなら→iOSシミュレーター
Xcodeをインストール、その後iOSでmac検索
それ以外なら→Mobilizer
Adobe Airの簡易シミュレーターツール
簡易シミュレーター（Adobe Air製）Mobilizer
http://www.springbox.com/mobilizer/
ブラウザ確認→Safariで開発メニューからユーザーエージェント変更

47. まとめ
6 まとめ

48. まとめ
♥ 色々な手法があるけどターゲット、目的に合った設
計をするのはPCサイトもスマホサイトも同じ
♥最新の技術を追っていく事になるので日々勉強！
♥ WordPressはphpで構成されているけどデザイ
ナーさんが触りやすいような作りだと思います