今から始めよう！奥辞谤诲笔谤别蝉蝉で作る女子ウケ★スマホサイト
?
9 likes?3,719 views
WordCamp Osaka 2012でお話した「今から始めよう！奥辞谤诲笔谤别蝉蝉で作る女子ウケ★スマホサイト」セッション資料です。
![スマホサイトデザイン
～実例ギャラリーサイト～
★スマートフォンサイト集めました。
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/](https://image.slidesharecdn.com/wordcampss-121105131540-phpapp01/85/WordPress-27-320.jpg)
今から始めよう！奥辞谤诲笔谤别蝉蝉で作る女子ウケ★スマホサイト
- 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神戸で使った資料データ （惭惭総研调べ）
- 8. 最新スマホ事情 現在の推移 （惭惭総研调べ）
- 9. 最新スマホ事情 つい最近の出来事は… ■iPhone5登場！ ■Android最新機種は OS4.1 ■Windows Phoneは 奥颈苍诲辞飞蝉8発売と共に8搭载机种発売の见込み
- 10. 最新スマホ事情 iPhone Android Windows Phone
- 11. 最新スマホ事情 （惭惭総研调べ）
- 12. スマホサイトとは 2 スマホサイトとは
- 13. スマホサイトとは スマートフォンに最適化 されているサイト 例）楽天市場TOPページ
- 14. スマホサイトとは スマートフォンに最適化 されていないサイト 例）Tullys Co?eeサイト
- 15. スマホサイトとは ★スマートフォンに最適化されているサイトとは… マウスではなく指でタップするため、ボタンは押しやすくするなど の独自UIが必要 弱い3G回線でみられることも考慮した軽量化サイト 太陽光の下で見られても見やすいようコントラストに注意した配色 ユーザーエージェントをみて振り分け
- 17. スマホサイトとは HTML5 + CSS3／ 闯补惫补蝉肠谤颈辫迟で制作
- 18. スマホサイトとは Jquery mobileで制作
- 20. スマホサイトとは オリジナルデザインを作って WordPressでスマホテーマ制作
- 22. スマホサイトデザイン 3 スマホサイトデザイン
- 23. スマホサイトデザイン iPhone Android ボタンは1つ ボタンは3つ （ホーム） （メニュー/ホーム/戻る）
- 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
- 36. コーディングと奥笔テーマ化 私はコーディングはCodaを使います このへんは好みで
- 37. コーディングと奥笔テーマ化 まずはコーディングから。 積極的に最新技術を使っていきましょう
- 38. コーディングと奥笔テーマ化 <meta name="viewport" content="width=device-width" /> viewportとは？ ウィンドウのサイズのようなもの。初期値は横幅980px。 このコードをhtmlのhead内に書いて指定してあげること で任意の横幅を指定できる。width:device-width と指定すると、そのデバイスの幅で調整されます。
- 39. コーディングと奥笔テーマ化 コーディングが終わったらテーマ化 公式テーマ公開やテーマ配布をしない場合、 最小构成で作ってしまいましょう
- 40. コーディングと奥笔テーマ化 テーマ構成 index.php style.css php css header.php footer.php php php include(読み込み) してくる用
- 41. コーディングと奥笔テーマ化 コーディングしたデータをテーマ構成用に拡張子を 変えて.phpにする cssはひとつのstyle.cssファイルにまとめる ファイルにWPタグをいれていく →DEMO
- 42. コーディングと奥笔テーマ化 WordPress3.4から使えるようになった 条件分岐関数→wp_is_mobile <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?> スマホ用コンテンツ <?php else: ?> PC用コンテンツ <?php endif; ?> 注意！このままだとタブレットもスマホ用と判定されてしまうので カスタマイズしないとだめ。
- 43. コーディングと奥笔テーマ化 プラグイン ■Multi Device Switcher http://wordpress.org/extend/plugins/multi-device-switcher/ インストール→有効化でスマホ用、タブレット用などのデバイスでどのテーマを表示させ るか設定できます。国産、アップデートも2012/10/16にされています。
- 44. コーディングと奥笔テーマ化 容量制限に注意 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 まとめ