Successfully reported this slideshow.

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

9

Share

Loading in …3
×
1 of 49
1 of 49

More Related Content

Viewers also liked

Related Books

Free with a 14 day trial from Scribd

See all

今から始めよう!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:960px Photoshopで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 Switcher http://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検索 それ以外なら→Mobilizer Adobe Airの簡易シミュレーターツール 簡易シミュレーター(Adobe Air製)Mobilizer http://www.springbox.com/mobilizer/ ブラウザ確認→Safariで開発メニューからユーザーエージェント変更
  46. 46. まとめ 6 まとめ
  47. 47. まとめ ♥ 色々な手法があるけどターゲット、目的に合った設 計をするのはPCサイトもスマホサイトも同じ ♥最新の技術を追っていく事になるので日々勉強! ♥ WordPressはphpで構成されているけどデザイ ナーさんが触りやすいような作りだと思います

×