今から始めよう！WordPressで作る女子ウケ★スマホサイト

さいしょに

この資料は後日アップロードされます！

WordCamp大阪公式サイトにリンク掲載します

http://2012.osaka.wordcamp.org/

自己紹介

瀬口理恵（せぐちりえ）＠rie05

1983年大阪うまれ大阪そだち

5DGの屋号でフリーランスデザイナーしてます

Web/DTP/AppUI/講師業/Ust配信 etc
WordCamp大阪実行委員長
WordBench大阪管理人
WordCamp神戸実行委員・スピーカー

@rie05 /rie.seguchi

アジェンダ

女子ウケなスマホサイトをWPで！

１ 4 コーディングと
最新スマホ事情
WPテーマ化

2 5
スマホサイトとは検証環境について

3 6
スマホサイトデザインまとめ


１最新スマホ事情


スマートフォン

持ってる人！


2011年9月11日にWordCamp神戸で使った資料データ

（MM総研調べ）


現在の推移



つい最近の出来事は…
■iPhone5登場！

■Android最新機種は OS4.1

■Windows Phoneは Windows8発売と共に8搭載機種発売の見込み


iPhone Android Windows Phone

スマホサイトとは

2 スマホサイトとは


スマートフォンに最適化
されているサイト

例）楽天市場TOPページ


スマートフォンに最適化
されていないサイト

例）Tullys Coﬀeeサイト


★スマートフォンに最適化されているサイトとは…

マウスではなく指でタップするため、ボタンは押しやすくするなど
の独自UIが必要

弱い3G回線でみられることも考慮した軽量化サイト

太陽光の下で見られても見やすいようコントラストに注意した配色

ユーザーエージェントをみて振り分け


スマホ制作、いろいろなアプローチ


HTML5 + CSS3／ Javascriptで制作


Jquery mobileで制作


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


オリジナルデザインを作って
WordPressでスマホテーマ制作


WordPressとは
世界標準のWebパブリッシングプラットフォーム

✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア
✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト

スマホサイトデザイン

3 スマホサイトデザイン


iPhone Android

ボタンは1つボタンは3つ
（ホーム）（メニュー/ホーム/戻る）


http://static.lukew.com/TouchGestureGuide.pdf


スマホサイトペーパープロトタイプ
Project: Date: Notes: Notes:

SINGLE VIEW LAYOUT SCROLL VIEW LAYOUT

ワイヤー作成オンラインツール

Cacoo

https://cacoo.com/


∼実例ギャラリーサイト∼

★スマートフォンサイト集めました。
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/


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

デザイン/UI

リキッド（可変幅）でデザインする

→Landscape（横画面）表示対策

角丸やグラデ、ドロップシャドウはCSS3で表現

ロールオーバーがないためテキストリンクは色を

変え下線を引くなど、タップでアクションがあるボ

タンはデザインに統一性を。


私はデザインはPhotoshopで作ります

このへんは好みで
Adobe Photoshop®


デザインするサイズについて
width:320px height:480px ？

Retina display対応

高解像度端末の対応？


width:320px height:480px

width:640px height:960px

Photoshopで50%縮小表示しながら制作


デモサイトつくりました


DEMO

コーディングとWPテーマ化

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


私はコーディングはCodaを使います

このへんは好みで


まずはコーディングから。

積極的に最新技術を使っていきましょう


コーディングが終わったらテーマ化

公式テーマ公開やテーマ配布をしない場合、
最小構成で作ってしまいましょう


テーマ構成

index.php style.css

php css

header.php footer.php

php php

include(読み込み)
してくる用


コーディングしたデータをテーマ構成用に拡張子を
変えて.phpにする

cssはひとつのstyle.cssファイルにまとめる

ファイルにWPタグをいれていく

→DEMO


WordPress3.4から使えるようになった

条件分岐関数→wp_is_mobile
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>

スマホ用コンテンツ

<?php else: ?>

PC用コンテンツ

<?php endif; ?>

注意！このままだとタブレットもスマホ用と判定されてしまうので
カスタマイズしないとだめ。

プラグイン

■Multi Device Switcher
http://wordpress.org/extend/plugins/multi-device-switcher/

インストール→有効化でスマホ用、タブレット用などのデバイスでどのテーマを表示させ

るか設定できます。国産、アップデートも2012/10/16にされています。


容量制限に注意

GIF/PNG/TIFF:3メガピクセル以下

JPEG:32メガピクセル以下

HTML/CSS/JS:10MB以下

JSは実行速度10秒以内

検証環境について

5 検証環境について

検証環境について

Macなら→iOSシミュレーター
Xcodeをインストール、その後iOSでmac検索

それ以外なら→Mobilizer
Adobe Airの簡易シミュレーターツール

簡易シミュレーター（Adobe Air製）Mobilizer
http://www.springbox.com/mobilizer/

ブラウザ確認→Safariで開発メニューからユーザーエージェント変更

まとめ

6 まとめ

まとめ

♥ 色々な手法があるけどターゲット、目的に合った設

計をするのはPCサイトもスマホサイトも同じ

♥最新の技術を追っていく事になるので日々勉強！

♥ WordPressはphpで構成されているけどデザイ

ナーさんが触りやすいような作りだと思います

今から始めよう！WordPressで作る女子ウケ★スマホサイト

今から始めよう！WordPressで作る女子ウケ★スマホサイト

More Related Content

What's hot

Similar to 今から始めよう！WordPressで作る女子ウケ★スマホサイト

More from rie05

今から始めよう！WordPressで作る女子ウケ★スマホサイト