株 式 会 社 コミュニティコム 星 野 邦 敏 116-0013 東 京 都 荒 川 区 西 日 暮 里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
制 作 の 工 数 を 下 げるために 始 めに 打 ち 合 わせておくべきこと 2
星 野 邦 敏 (ほしの くにとし) Twitter : @khoshino Facebook : 星 野 邦 敏 (Kunitoshi Hoshino) 株 式 会 社 コミュニティコムという 会 社 で 自 社 運 営 サイトやアプリ 他 企 業 様 向 けサイトも 作 っています オープンソースの 活 動 をしたり IT 系 の 勉 強 会 を 主 催 したり 地 域 の 活 動 をしたり WordPressをCMSとしてWEBサイトを 作 ることが 増 えています 3
WordPressのイベントである WordCamp や WordBench に スタッフやスピーカーとして 参 加 4
WordPress 日 本 語 サイトの イベントカレンダー を 更 新 する 係 ココ 5
公 式 ディレクトリにプラグインを 登 録 したり Japan Tenkiプラグイン 全 国 142 地 域 の 天 気 を 自 動 表 示 Hello Wapuuプラグイン ブログ 更 新 を 応 援 6
WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 2012 年 1 月 に 出 版 web creators 特 別 号 Webサイト 制 作 最 新 トレンドの 傾 向 と 対 策 2012 年 2 月 に 出 版 Web Designing 2012 年 3 月 号 2012 年 3 月 に 出 版 速 習 デザインWordPress 7
WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 今 も 執 筆 中 です 2012 年 7 月 に 出 版 web creators 特 別 号 スマートフォン ソーシャル メディア WordPress 8
参 考 サイト A List Apart 日 本 語 サイト http://all-web.org/ala/ 9
参 考 サイト OpenCU http://www.opencu.com/ 10
CSS3のMedia Queriesによって WordPressテーマ 側 で レスポンシブ ウェブデザインにして 画 面 サイズに 応 じて 表 示 を 振 り 分 けることができます 11
( 参 考 ) WordBench 神 戸 現 在 のデフォルトテーマ Twenty Eleven はもちろん 2012 年 12 月 リリース 予 定 の WordPress3.5からの 新 デフォルトテーマ Twenty Twelve テーマも レスポンシブ ウェブデザインに 対 応 したテーマとなる 予 定 です http://twentytwelvedemo.wordpress.com/ http://core.svn.wordpress.org/trunk/wp-content/themes/twentytwelve/ 12
参 考 サイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 13
同 一 URLで ユーザーエージェントで 振 り 分 けることにより PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けることができます 14
方 法 (ⅰ)レスポンシブ ウェブデザインによる 画 面 切 り 替 え (ⅱ)ユーザーエージェントによる 振 り 分 け メリット (1) 各 端 末 ごとに 自 動 で 最 適 な 表 示 ユーザーも 見 やすい 収 益 の 機 会 損 失 が 無 くなる (2) 同 一 URLで 自 動 で 振 り 分 け コンテンツを 複 数 書 く 手 間 が 無 い ミラーサイトにならないので 被 リンク 分 散 が 無 くSEOにも 合 う 15
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 16
始 めに 結 局 何 が 良 いの? 17
要 は 同 じHTMLが 良 いと 言 ってる 他 の 方 法 を 否 定 はしていない Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 18
Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 19
まとめ WordBench 神 戸 レスポンシブ ウェブデザインを 推 奨 するGoogleの 公 式 見 解 ( 方 法 1) 各 種 バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う ( 方 法 2) とは 言 え レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもある ( ココ 重 要 ) ( 方 法 2) 簡 易 的 に 対 応 するなら プラグインを 入 れて 完 了 ( 方 法 4) 20
レスポンシブ ウェブデザイン & WordPress の 実 装 方 法 は 以 下 のスライド 資 料 をご 覧 ください http://www.communitycom.jp/2012/08/11/wordbench-osaka-20120811/ 21
レスポンシブ ウェブデザイン のディレクションについて 22
レスポンシブ ウェブデザインのディレクション 通 常 の 制 作 の 流 れ 1. 要 件 定 義 2.ワイヤーフレーム 3.デザインをPhotoshopやFireworksなどで 作 る 4.モックアップ 5. 実 装 6.デバック 7. 完 成 納 品 レスポンシブ ウェブデザインの 案 件 だったのに 実 現 不 可 能 になることも ワイヤーフレームを 決 める 段 階 から 入 り 込 めないと 厳 しいのでは? 23
レスポンシブ ウェブデザインのディレクション 前 提 : モバイルファースト モバイルユーザーに 対 応 したコンテンツ の 出 し 方 から 考 えていく 24
レスポンシブ ウェブデザイン コチラへ コチラから 25
レスポンシブ ウェブデザインのディレクション 紙 から 考 えるイメージでは 無 い レスポンシブ ウェブデザインが 普 及 したら Webブラウザベースでデザインしていくことも? 例 : text-shadow 影 を 付 ける border-radius 角 丸 を 付 ける 参 考 : 菊 池 崇 さんの 技 術 評 論 社 さんでの 記 事 http://gihyo.jp/design/feature/01/css3-approach/0001 26
レスポンシブ ウェブデザインのディレクション そもそも 無 理 なこと (1) 可 変 にしないpx(ピクセル) 指 定 はできない %やemで! (2) グリッドから 外 れたdivの 設 定 はできない グリッドレイアウト 推 奨 で! 27
style.css 横 幅 に 応 じて 自 動 対 応 させている /* =Responsive Structure ----------------------------------------------- */ @media (max-width: 800px) { } @media (max-width: 650px) { } @media (max-width: 450px) { } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { } WordBench 神 戸 CSS3のメディアクエリ(Media Queries) ブレークポイント ビューエリアの 最 大 幅 横 幅 800pxより 小 さい 場 合 に 適 用 横 幅 650pxより 小 さい 場 合 に 適 用 横 幅 450pxより 小 さい 場 合 に 適 用 ビューエリアが320px~480pxの 場 合 に 適 用 (iphone3g/3gsを 意 識 している) 28
レスポンシブ ウェブデザインのディレクション 工 数 の 掛 かる 例 : 例 えば ココとココの 整 合 性 として 可 変 で どう 考 えてるの? 29
レスポンシブ ウェブデザインのディレクション グリッドレイアウト 均 等 なカラムと 隙 間 から 成 り 立 っているCSSのレイアウト (CSSフレームワーク) を 使 うと レスポンシブ ウェブデザインがしやすい 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 30
レスポンシブ ウェブデザインのディレクション 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 31
レスポンシブ ウェブデザインのディレクション 例 :Dreamweaver CS6 の 可 変 グリッドレイアウト 機 能 参 考 記 事 : 可 変 グリッドレイアウトで 実 現 するレスポンシブWebデザイン http://www.adobe.com/jp/devnet/dreamweaver/articles/responsive_web_design_1.html 32
まとめ (1)モバイルサイトから 考 えてPCサイトへ (2)ブレークポイントを 決 めて どの 画 面 サイズに 対 応 するか 考 えよう (3)CSSフレームワークベースで 初 めから 提 案 しても (4)WordPressなので レスポンシブ 対 応 テーマから 子 テーマ or カスタマイズで 対 応 しても (5) 無 理 なら レスポンシブデザインは 諦 めて ユーザーエージェントで 振 り 替 え or プラグインで! 33
WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 34
WordCamp Tokyo 2012 2012 年 9 月 15 日 ( 土 ) 10:00-17:00 大 田 区 産 業 プラザ 東 京 都 大 田 区 南 蒲 田 1-20-20 http://2012.tokyo.wordcamp.org/ 35
今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 36