Kazuhito Kidachi's Firefox Developer Conference slides from 30th June 2012. The theme is the development of our own site under the principle of mobile first and documents our use of responsive web design.

1. ミツエーリンクス
自社サイトの取り組み
2012年6月30日
Firefox Developers Conference 2012 in Osaka
株式会社ミツエーリンクス
木達一仁

2. 木達 一仁
• 株式会社ミツエーリン
クス
取締役 兼 R&D本部長
• HTML5、アクセシビリ
ティ、JavaScript、品質
管理の4部門を統括
• Twitter：@kazuhito

3. Web制作会社のWebサイト
• （Webサイトの）あるべき姿の体現
• デザイン力や技術力などのアピール
• さまざまな技術実証、仮説検証の場

4. 2004年4月のリニューアル
• Web標準準拠
• 「テーブルレイアウト」から「フルCSS
レイアウト」へ
• ビジュアルデザインは維持
• Netscape、Mac IEなどもサポート対象

7. インターネットトレンド
出典：MorganStanley『Internet Trends April 12, 2010』
http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf

8. Mobile First
http://www.lukew.com/ff/entry.asp?933

9. デスクトップファーストにおける優先度
デスクトップ ＞ モバイル
モバイルファーストにおける優先度
デスクトップ ＜ モバイル

10. モバイルファーストの有効性
• モバイル市場の成長は新たなビジネス機
会をもたらす
• モバイルデバイスの制約はビジネス上の
フォーカスをもたらす
• モバイルデバイスの新たな能力が革新的
なサービス、UXを生み出す

11. 2012年2月のリニューアル
• 企画そのものは2006年初頭に る
• 「モバイルファースト」ではなく「デスクトッ
プファースト」
• 「レスポンシブWebデザイン」の考え方の導入

12. A List Apart: Articles: Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/

13. レスポンシブWeb
デザインの3要件
• フレキシブルなグリッドベースのレイアウト
スクリーン幅に応じて変化するグリッド
• フレキシブルな画像/メディア
伸縮しフィットする画像/メディア
• メディアクエリー
メディア特性に応じてスタイルをスイッチ

14. The Boston Globe
http://bostonglobe.com/

15. Mitsue-Links

16. 設計・実装上のポイント
• レスポンシブなデザイン実装
• スマートフォンの小さな画面でも、デスクトップPCの
大画面でも「そこそこ」便利に
• 新たなWeb標準の採用
• HTML5やCSS3といった比較的新しいWeb標準を以前よ
りも積極的に利用
• 古いブラウザへの対応は必要最小限

17. レスポンシブWebデザイン
関連での方針
• 特定のデバイスにフォーカスしない
• 画像は1パターンのみ、差し替えなし
• マルチカラムレイアウトの維持にはこだわらない
• タッチスクリーン上での画面拡大を許容
• 1281px以上のワイドスクリーンにも対応
• ベストビュー：982∼1280px

18. 表示高速化への対応
• CSS3の積極的採用とスタイルシートの一元化・集約化
• ロールオーバー効果はすべてCSS
• モジュールのバリエーションの最小化
• 合理的かつコンパクトなマークアップ
• 不人気なWeb標準の不採用（P3P、PICS）
• 有効性の低い記述の削減（meta要素を使ったキー
ワードほか）

19. レスポンシブWebデザイン
関連での課題
• 画像の扱いの改善
• 表の扱いの改善
• Retinaディスプレイ対応
• HTTPリクエスト数の削減
• 各種リソースの圧縮

20. これからのWebデザイン
• Webサイトの標準形はデスクトップPC専
用からマルチデバイス前提へ
• さまざまなデバイス特性（特にスクリーン
のサイズ、ピクセル密度）に対応した表現
の提供や表示高速化がポイント
• ガバナンス強化とアクセシビリティ確保が
一層重要に