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