株式会社コミュニティコム星野邦敏communitycom.jp/wp-content/uploads/2012/08/wordbenchkobe...2012/08/26 · （4）WordPressなので、レスポンシブ対応テーマから、

1

株式会社コミュニティコム

〒116-0013東京都荒川区西日暮里5-37-5 NSO2階URL： http://www.communitycom.jp/E-MAIL： [email protected]

星野邦敏

2

制作の工数を下げるために、始めに打ち合わせておくべきこと

WordBench神戸

レスポンシブデザインやるなら座談会

3

株式会社コミュニティコムという会社で、

自社運営サイトやアプリ、他企業様向けサイトも作っています。

オープンソースの活動をしたり、IT系の勉強会を主催したり、

地域の活動をしたり。

WordPressをCMSとしてWEBサイトを作ることが増えています。

星野邦敏(ほしのくにとし)Twitter ： @khoshinoFacebook : 星野邦敏（Kunitoshi Hoshino）

WordBench神戸


4

WordPressのイベントである

「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。

WordBench神戸


5

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ

WordBench神戸


6

公式ディレクトリにプラグインを登録したり。

Japan Tenkiプラグイン→全国142地域の天気を自動表示

Hello Wapuuプラグイン→ブログ更新を応援

WordBench神戸


7

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年1月に出版web creators特別号

Webサイト制作

新トレンドの傾向と対策

2012年3月に出版速習デザインWordPress

2012年2月に出版Web Designing 2012年3月号

WordBench神戸


8

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年7月に出版web creators特別号

スマートフォン・ソーシャル

メディア・WordPress

今も執筆中です。

WordBench神戸


9

参考サイトA List Apart 日本語サイト

http://all-web.org/ala/

WordBench神戸


10

参考サイトOpenCUhttp://www.opencu.com/

WordBench神戸


11

CSS3のMedia Queriesによって、WordPressテーマ側で、

レスポンシブ・ウェブデザインにして、画面サイズに応じて、

表示を振り分けることができます。

WordBench神戸


12

現在のデフォルトテーマ「Twenty Eleven」はもちろん、

2012年12月リリース予定の、WordPress3.5からの

新デフォルトテーマ「Twenty Twelve」テーマも、

レスポンシブ・ウェブデザインに対応したテーマとなる予定です。

（参考）

http://core.svn.wordpress.org/trunk/wp-content/themes/twentytwelve/http://twentytwelvedemo.wordpress.com/

WordBench神戸


13

参考サイト水族館コミュニティ

http://www.japan-aquarium.com/

WordBench神戸


14

同一URLで、ユーザーエージェントで振り分けることにより、

PCサイト・スマートフォンサイト・ガラケー（携帯）サイトの

振り分けることができます。

WordBench神戸


15

方法

（ⅰ）レスポンシブ・ウェブデザインによる画面切り替え

（ⅱ）ユーザーエージェントによる振り分け

メリット

（１）各端末ごとに自動で適な表示

→ ユーザーも見やすい。収益の機会損失が無くなる。

（２）同一URLで自動で振り分け

→ コンテンツを複数書く手間が無い。

ミラーサイトにならないので被リンク分散が無くSEOにも合う。

WordBench神戸


16

WordPressによる実装方法

（方法１）

Media Queriesを使ってテーマで対応。

レスポンシブ・ウェブデザイン。

（方法２）

ユーザーエージェントで振り分けて、PC・スマート

フォン・ガラケー、それぞれのテーマを作る。

（方法３）

それらを組み合わせる。

（方法４）

スマートフォンに自動対応するプラグイン。

WordBench神戸


17

始めに、結局、

何が良いの？

WordBench神戸


18

Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに適化された

ウェブサイトの構築方法

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

→要は、同じHTMLが良いと言ってる。他の方法を否定はしていない。

WordBench神戸


19

Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに適化された

ウェブサイトの構築方法

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

WordBench神戸


20

まとめ・レスポンシブ・ウェブデザインを推奨するGoogleの公式見解。

→（方法１）

・各種バナーの振り分けをCSS3だけでは難しいので、

その部分はWordPressの条件分岐タグを使う。

→（方法２）

・とは言え、レスポンシブ・ウェブデザインにするのが難しい

サイト構成やデザインもある。（←ココ重要）

→（方法２）

・簡易的に対応するなら、プラグインを入れて完了。

→（方法４）

WordBench神戸


21

レスポンシブ・ウェブデザイン＆ WordPress の実装方法は、以下のスライド資料をご覧ください。

WordBench神戸


http://www.communitycom.jp/2012/08/11/wordbench-osaka-20120811/

22

レスポンシブ・ウェブデザイン

のディレクションについて。

WordBench神戸


通常の制作の流れ１．要件定義

２．ワイヤーフレーム

３．デザインをPhotoshopやFireworksなどで作る

４．モックアップ

５．実装

６．デバック

７．完成納品

レスポンシブ・ウェブデザインの

案件だったのに、実現不可能になることも。

ワイヤーフレームを決める段階から

入り込めないと厳しいのでは？ 23

レスポンシブ・ウェブデザインのディレクション

WordBench神戸


24


前提：

「モバイルファースト」

モバイルユーザーに対応したコンテンツ

の出し方から考えていく。

WordBench神戸


25

レスポンシブ・ウェブデザイン

WordBench神戸


コチラへコチラから

26


紙から考えるイメージでは無い。

レスポンシブ・ウェブデザインが普及したら、

Webブラウザベースでデザインしていくことも？例：

text-shadow →影を付ける

border-radius →角丸を付ける

参考：菊池崇さんの技術評論社さんでの記事

http://gihyo.jp/design/feature/01/css3-approach/0001

WordBench神戸


27


そもそも無理なこと（１）

可変にしないpx（ピクセル）指定はできない。

→％やemで！

（２）

グリッドから外れたdivの設定はできない。

→グリッドレイアウト推奨で！

WordBench神戸


28

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) {・・・・・}

ビューエリアの大幅横幅800pxより小さい場合に適用

横幅650pxより小さい場合に適用

横幅450pxより小さい場合に適用

ビューエリアが320px～480pxの場合に適用（iPhone3G/3GSを意識している）

「ブレークポイント」

CSS3のメディアクエリ（Media Queries）

WordBench神戸


29


工数の

掛かる例：

WordBench神戸


例えば、

ココとココの

整合性として、

可変で

どう考えてるの？

30


グリッドレイアウト均等なカラムと隙間から成り立っているCSSのレイアウト

（CSSフレームワーク）

を使うと、レスポンシブ・ウェブデザインがしやすい。

例：Twitter Bootstraphttp://twitter.github.com/bootstrap/scaffolding.html

WordBench神戸


31


例：Twitter Bootstraphttp://twitter.github.com/bootstrap/scaffolding.html

WordBench神戸


32

レスポンシブ・ウェブデザインのディレクション例：Dreamweaver CS6 の「可変グリッドレイアウト」機能

参考記事：

可変グリッドレイアウトで実現するレスポンシブWebデザインhttp://www.adobe.com/jp/devnet/dreamweaver/articles/responsive_web_design_1.html

WordBench神戸


33

まとめ（１）モバイルサイトから考えてPCサイトへ。

（２）ブレークポイントを決めて、

どの画面サイズに対応するか考えよう。

（３）CSSフレームワークベースで初めから提案しても。

（４）WordPressなので、レスポンシブ対応テーマから、

子テーマ or カスタマイズで対応しても。

（５）無理なら、レスポンシブデザインは諦めて、

ユーザーエージェントで振り替え or プラグインで！

WordBench神戸


34

WordPressのコミュニティに、ぜひご参加を！

WordPressのイベントや勉強会に参加してみませんか？

http://ja.wordpress.org/

WordPressで繋がろう！

WordBench神戸


35

2012年9月15日（土）

10:00-17:00大田区産業プラザ

東京都大田区南蒲田1-20-20

http://2012.tokyo.wordcamp.org/

WordCamp Tokyo 2012

WordBench神戸


36

今後のお問い合わせなど

何かありましたら、

Twitter： @khoshinoMail： [email protected]： http://www.communitycom.jp/

http://wp3.jp/などに、ご連絡ください。

ありがとうございました！

株式会社コミュニティコム星野邦敏

WordBench神戸


Documents

株式会社コミュニティコム 星野邦敏communitycom.jp/wp-content/uploads/2012/08/wordbenchkobe...2012/08/26 · （4）WordPressなので、レスポンシブ対応テーマから、

株式会社コミュニティコム星野邦敏communitycom.jp/wp-content/uploads/2012/08/wordbenchkobe...2012/08/26 · （4）WordPressなので、レスポンシブ対応テーマから、