iPhone4Sの発表、そしてAndroid、Windows Phone7と、日々続々と目にする スマートフォン関連のニュース。Web制作を行う上で、スマートフォン対応は 避けては通れないものになりつつあります。
同時に、PCに比べて多様なデバイス、閲覧環境が存在するスマートフォンでは、 すべての機種・環境ごとに個別対応することは非現実的です。そのような状況で、 制作者はどのようにこの問題に取り組んでいけばいいのでしょうか。
リクルートエージェントさんと共催でお届けする今回のCSS Nite in OSAKAでは、 鷹野雅弘さん、森和恵さん、丸山章さんを招き、これからスマートフォン対応を 考えている方や始めたばかりの入門者に向けて、実践的な対応方法を紹介します。
対象：これからスマートフォン対応を考えている方・始めたばかりの方
水準：スマートフォン対応サイト入門者
イベント概要
| イベント名 |
CSS Nite in OSAKA, Vol.28 presented by リクルートエージェント
「マルチデバイスとレスポンシブWebデザイン」 |
| 日時 |
2011年12月4日（日）13:30開場 14:00開演（18:00終演予定）
※このあと、CSS Nite in OSAKA, 2011忘年会を開催します。 |
| 会場 |
リクルートエージェント大阪支社
大阪府大阪市北区角田町8-1 梅田阪急ビル 30階 |
| 定員 |
100名 |
| 主催 |
リクルートエージェント／CSS Nite in OSAKA実行委員会 |
| 参加費 |
一般：4,000円
（11月20日までにお申し込みの方は、早割価格3,000円）
学生：3,000円 |
| 出演 |
鷹野 雅弘（スイッチ）
森 和恵（r360studio）
丸山 章（フリーランス） |
| 事前登録 |
満席になりました |
| 忘年会 |
詳細・お申し込みはこちら |
| Twitterハッシュタグ |
#cssnite_osaka28 |
セッション内容と出演者／プロフィール
マルチデバイスとレスポンシブWebデザイン
スマートフォン向けサイト制作の概論
単純にスマートフォンだけを対象に考えても、画面サイズは統一されていませんし、どんどん新しいデバイスが投入される状況ですので、機種ごとに最適化したレイアウトをピクセルベースで実装することは現実的でありません。その一方、ポートレート（縦置き）とランドスケープ（横置き）の切り替えや、マウスでなく指を使うため、ロールオーバー効果が使えないなど、これまでのPCサイト向けのワークフロー、ノウハウでは対応しきれない部分があります。
まずは、スマートフォン向けサイトの特徴をおさえ、制作の方向性、フローを俯瞰します。
「レスポンシブWebデザイン」の実装
Web制作に関わる方なら誰でも知っているW3C。このサイトを開いて（http://www.w3.org/）ウィンドウサイズを小さくすると、480ピクセルを境にガラっとレイアウトが変わります。このように、ウィンドウサイズに応じてレイアウトを変える手法を「レスポンシブWebデザイン」と呼びます。
スマホ向けのサイト対応のひとつの手法として注目されているレスポンシブWebデザインですが、PC向けのコンテンツを流用しただけでは「スマホ最適化」ではなく、あくまでも「スマホ対応」にすぎません。
その一方、異なるサイズの端末があふれている状況において、「リキッドレイアウト」が思い起こされる流動グリッドと画像の可変などの「レスポンシブWebデザイン」のアプローチは、スマホ向けのコンテンツを制作する上でおさえておきたいスキルです。
このセッションでは、レスポンシブWebデザインのエッセンスにフォーカスします。
jQuery Mobileで、ちゃっちゃと作ろう！スマホサイト
スマートフォン対応サイト制作を手軽にしてくれるのが、jQuery Mobile です。これは、JavaScriptで作られたモバイルサイト構築用フレームワークです。スマホ内蔵のブラウザに最適化されるのはもちろん、スマホサイトらしいページデザインやページ変移アニメーションなども簡単に作れます。
フレームワーク（プログラムを構成する土台になるもの）…などと聞くと、なんだかちょっと難しく感じますがご安心を。この土台がしっかり出来ているので、利用者はプログラムに触れることなくHTMLの記述だけで手軽に組み込めてしまうのです！
今回のセッションでは、この jQuery Mobile のイロハをお話ししようかと思います。「何ができるのか？」から、独特な組み込みのお作法、よくあるカスタマイズ…など、最低限押さえておきたい事項をギュッとご紹介。（作業工程を実感して頂けるよう、シンプルなページを作るデモンストレーションも！）また、Dreamweaver 5.5になって対応した jQuery Mobile関連の機能もお見せします。あなたのスマホサイトに jQuery Mobile が役立てるように、めいっぱいお話しさせて頂きます。
森 和恵（もり・かずえ）
r360studio
YouTube r360studio Channel
サイト制作の教科書 r360study
フリーランスで活動するセミナー講師。数社にてWeb制作、インストラクション業務を経験後、現在はWeb系セミナーの講師として活動中。（Dreamweaver CS4 アドビ認定インストラクター（ACI））著書に「DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン」など。
「難しいことでも、わかり易く伝える」をモットーに、クリエーターの立場で得た知識を制作者や講師の立場から、皆さまに役立てていただだければ…と日々精進している。今後は、eラーニングや電子出版の形式で、Web制作を学ぶための教育コンテンツに注力する予定。
Fireworks de jQuery Mobile
Adobe MAX 2011開催中にAdobe Labsで公開されたFireworks用のエクステンション、Adobe Fireworks CSS3 Mobile Packにフォーカス。デモを交えながらjQuery Mobileテーマ作成など、エクステンションの機能を解説します。
プレゼント
■DreamweaverCS5 DVD 達人編
「jQuery Mobileでスマホサイト作成」セミナー 無料ご招待
r360studio 森和恵 さんよりプレゼントのご提供をいただきました。当日３名の方に抽選で差し上げます。
「jQuery Mobileでスマホサイト作成」セミナー 無料ご招待
当日のセッション内容をさらにくわしくお話しします。
基本的には講義形式で進めますが、ノートパソコンをお持ち頂ければ、講師と一緒に試してみることも可能です。
日時：１月28日(土) 18:00～20:00
場所：江坂駅 徒歩5分、株式会社プロシーズさま運営の「Virtual Live Studio V.V.[ヴィヴィ]」にて。
厳密なDOC宣言に、CSSファイルの分割、positionを使ったページレイアウトの仕組みなど、プロなら必ず知ってる達人ワザを収録！
