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

5,481 views
5,298 views

Published on

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

Published in: Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,481
On SlideShare
0
From Embeds
0
Number of Embeds
387
Actions
Shares
0
Downloads
27
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

  1. 1. さいしょに この資料は後日アップロードされます!WordCamp大阪公式サイトにリンク掲載します http://2012.osaka.wordcamp.org/
  2. 2. 自己紹介 瀬口理恵(せぐちりえ)@rie05 1983年大阪うまれ大阪そだち 5DGの屋号でフリーランスデザイナーしてます Web/DTP/AppUI/講師業/Ust配信 etc WordCamp大阪 実行委員長 WordBench大阪 管理人 WordCamp神戸実行委員・スピーカー @rie05 /rie.seguchi
  3. 3. アジェンダ 女子ウケなスマホサイトをWPで!1 4 コーディングと 最新スマホ事情 WPテーマ化2 5 スマホサイトとは 検証環境について3 6 スマホサイトデザイン まとめ
  4. 4. 最新スマホ事情 1 最新スマホ事情
  5. 5. 最新スマホ事情 スマートフォン 持ってる人!
  6. 6. 最新スマホ事情 2011年9月11日にWordCamp神戸で使った資料データ (MM総研調べ)
  7. 7. 最新スマホ事情 現在の推移 (MM総研調べ)
  8. 8. 最新スマホ事情つい最近の出来事は…■iPhone5登場!■Android最新機種は OS4.1■Windows Phoneは Windows8発売と共に8搭載機種発売の見込み
  9. 9. 最新スマホ事情iPhone Android Windows Phone
  10. 10. 最新スマホ事情 (MM総研調べ)
  11. 11. スマホサイトとは 2 スマホサイトとは
  12. 12. スマホサイトとは スマートフォンに最適化 されているサイト 例)楽天市場TOPページ
  13. 13. スマホサイトとは スマートフォンに最適化 されていないサイト 例)Tullys Coffeeサイト
  14. 14. スマホサイトとは★スマートフォンに最適化されているサイトとは… マウスではなく指でタップするため、ボタンは押しやすくするなどの独自UIが必要 弱い3G回線でみられることも考慮した軽量化サイト 太陽光の下で見られても見やすいようコントラストに注意した配色 ユーザーエージェントをみて振り分け
  15. 15. スマホサイトとはスマホ制作、いろいろなアプローチ
  16. 16. スマホサイトとはHTML5 + CSS3/ Javascriptで制作
  17. 17. スマホサイトとは Jquery mobileで制作
  18. 18. スマホサイトとはマルチデバイスに対応、ワンソースで運用する レスポンシブ・ウェブデザイン
  19. 19. スマホサイトとは オリジナルデザインを作って WordPressでスマホテーマ制作
  20. 20. スマホサイトとはWordPressとは世界標準のWebパブリッシングプラットフォーム✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト
  21. 21. スマホサイトデザイン 3 スマホサイトデザイン
  22. 22. スマホサイトデザイン iPhone Android ボタンは1つ ボタンは3つ (ホーム) (メニュー/ホーム/戻る)
  23. 23. スマホサイトデザインhttp://static.lukew.com/TouchGestureGuide.pdf
  24. 24. スマホサイトデザイン スマホサイトペーパープロトタイプProject: Date: Notes: Notes: SINGLE VIEW LAYOUT SCROLL VIEW LAYOUT
  25. 25. スマホサイトデザイン ワイヤー作成オンラインツール Cacoo https://cacoo.com/
  26. 26. スマホサイトデザイン∼実例ギャラリーサイト∼★スマートフォンサイト集めました。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/
  27. 27. スマホサイトデザイン ∼UIパターンサイト∼ http://pttrns.com/logins http://www.lovelyui.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http://mockapp.com/m/Home.html
  28. 28. デザイン/UI リキッド(可変幅)でデザインする→Landscape(横画面)表示対策 角丸やグラデ、ドロップシャドウはCSS3で表現 ロールオーバーがないためテキストリンクは色を変え下線を引くなど、タップでアクションがあるボタンはデザインに統一性を。
  29. 29. スマホサイトデザイン私はデザインはPhotoshopで作ります このへんは好みで Adobe Photoshop®
  30. 30. スマホサイトデザイン デザインするサイズについて width:320px height:480px ? Retina display対応 高解像度端末の対応?
  31. 31. スマホサイトデザイン width:320px height:480px width:640px height:960pxPhotoshopで50%縮小表示しながら制作
  32. 32. スマホサイトデザイン デモサイトつくりました
  33. 33. スマホサイトデザイン DEMO
  34. 34. コーディングとWPテーマ化4 コーディングとWordPressテーマ化
  35. 35. コーディングとWPテーマ化私はコーディングはCodaを使います このへんは好みで
  36. 36. コーディングとWPテーマ化 まずはコーディングから。積極的に最新技術を使っていきましょう
  37. 37. コーディングとWPテーマ化<meta name="viewport" content="width=device-width" /> viewportとは?ウィンドウのサイズのようなもの。初期値は横幅980px。このコードをhtmlのhead内に書いて指定してあげることで任意の横幅を指定できる。width:device-widthと指定すると、そのデバイスの幅で調整されます。
  38. 38. コーディングとWPテーマ化コーディングが終わったらテーマ化 公式テーマ公開やテーマ配布をしない場合、 最小構成で作ってしまいましょう
  39. 39. コーディングとWPテーマ化 テーマ構成 index.php style.css php css header.php footer.php php php include(読み込み) してくる用
  40. 40. コーディングとWPテーマ化 コーディングしたデータをテーマ構成用に拡張子を変えて.phpにする cssはひとつのstyle.cssファイルにまとめる ファイルにWPタグをいれていく →DEMO
  41. 41. コーディングとWPテーマ化 WordPress3.4から使えるようになった 条件分岐関数→wp_is_mobile<?php if ( function_exists(wp_is_mobile) && wp_is_mobile() ) :?>スマホ用コンテンツ<?php else: ?>PC用コンテンツ<?php endif; ?> 注意!このままだとタブレットもスマホ用と判定されてしまうので カスタマイズしないとだめ。
  42. 42. コーディングとWPテーマ化 プラグイン■Multi Device Switcherhttp://wordpress.org/extend/plugins/multi-device-switcher/インストール→有効化でスマホ用、タブレット用などのデバイスでどのテーマを表示させるか設定できます。国産、アップデートも2012/10/16にされています。
  43. 43. コーディングとWPテーマ化 容量制限に注意GIF/PNG/TIFF:3メガピクセル以下 JPEG:32メガピクセル以下 HTML/CSS/JS:10MB以下 JSは実行速度10秒以内
  44. 44. 検証環境について 5 検証環境について
  45. 45. 検証環境について Macなら→iOSシミュレーターXcodeをインストール、その後iOSでmac検索 それ以外なら→MobilizerAdobe Airの簡易シミュレーターツール簡易シミュレーター(Adobe Air製)Mobilizerhttp://www.springbox.com/mobilizer/ ブラウザ確認→Safariで開発メニューからユーザーエージェント変更
  46. 46. まとめ 6 まとめ
  47. 47. まとめ♥ 色々な手法があるけどターゲット、目的に合った設計をするのはPCサイトもスマホサイトも同じ♥最新の技術を追っていく事になるので日々勉強!♥ WordPressはphpで構成されているけどデザイナーさんが触りやすいような作りだと思います

×