株式会社コミュニティコム...
TRANSCRIPT
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
方法
(ⅰ)レスポンシブ・ウェブデザインによる画面切り替え
(ⅱ)ユーザーエージェントによる振り分け
メリット
(1)各端末ごとに自動で 適な表示
→ ユーザーも見やすい。収益の機会損失が無くなる。
(2)同一URLで自動で振り分け
→ コンテンツを複数書く手間が無い。
ミラーサイトにならないので被リンク分散が無くSEOにも合う。
WordBench神戸
レスポンシブデザインやるなら座談会
16
WordPressによる実装方法
(方法1)
Media Queriesを使ってテーマで対応。
レスポンシブ・ウェブデザイン。
(方法2)
ユーザーエージェントで振り分けて、PC・スマート
フォン・ガラケー、それぞれのテーマを作る。
(方法3)
それらを組み合わせる。
(方法4)
スマートフォンに自動対応するプラグイン。
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の公式見解。
→(方法1)
・各種バナーの振り分けをCSS3だけでは難しいので、
その部分はWordPressの条件分岐タグを使う。
→(方法2)
・とは言え、レスポンシブ・ウェブデザインにするのが難しい
サイト構成やデザインもある。(←ココ重要)
→(方法2)
・簡易的に対応するなら、プラグインを入れて完了。
→(方法4)
WordBench神戸
レスポンシブデザインやるなら座談会
21
レスポンシブ・ウェブデザイン & WordPress の実装方法は、以下のスライド資料をご覧ください。
WordBench神戸
レスポンシブデザインやるなら座談会
http://www.communitycom.jp/2012/08/11/wordbench-osaka-20120811/
22
レスポンシブ・ウェブデザイン
のディレクションについて。
WordBench神戸
レスポンシブデザインやるなら座談会
通常の制作の流れ1.要件定義
2.ワイヤーフレーム
3.デザインをPhotoshopやFireworksなどで作る
4.モックアップ
5.実装
6.デバック
7.完成納品
レスポンシブ・ウェブデザインの
案件だったのに、実現不可能になることも。
ワイヤーフレームを決める段階から
入り込めないと厳しいのでは? 23
レスポンシブ・ウェブデザインのディレクション
WordBench神戸
レスポンシブデザインやるなら座談会
24
レスポンシブ・ウェブデザインのディレクション
前提:
「モバイルファースト」
モバイルユーザーに対応したコンテンツ
の出し方から考えていく。
WordBench神戸
レスポンシブデザインやるなら座談会
25
レスポンシブ・ウェブデザイン
WordBench神戸
レスポンシブデザインやるなら座談会
コチラへ コチラから
26
レスポンシブ・ウェブデザインのディレクション
紙から考えるイメージでは無い。
レスポンシブ・ウェブデザインが普及したら、
Webブラウザベースでデザインしていくことも?例:
text-shadow →影を付ける
border-radius →角丸を付ける
参考:菊池崇さんの技術評論社さんでの記事
http://gihyo.jp/design/feature/01/css3-approach/0001
WordBench神戸
レスポンシブデザインやるなら座談会
27
レスポンシブ・ウェブデザインのディレクション
そもそも無理なこと(1)
可変にしないpx(ピクセル)指定はできない。
→%やemで!
(2)
グリッドから外れた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
まとめ(1)モバイルサイトから考えてPCサイトへ。
(2)ブレークポイントを決めて、
どの画面サイズに対応するか考えよう。
(3)CSSフレームワークベースで初めから提案しても。
(4)WordPressなので、レスポンシブ対応テーマから、
子テーマ or カスタマイズで対応しても。
(5)無理なら、レスポンシブデザインは諦めて、
ユーザーエージェントで振り替え 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神戸
レスポンシブデザインやるなら座談会