CSS Nite in OSAKA, Vol.28 presented by リクルートエージェント

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デザインのエッセンスにフォーカスします。

写真:鷹野雅弘

鷹野 雅弘(たかの・まさひろ)

スイッチ

Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、スクールなどのカリキュラム開発も手がける。テクニカルライターとして10冊以上の著書を持つほか、書籍の企画や編集なども行っている。
2005年からCSS Niteを主宰。

主な著書に『効率的なサイト制作のためのDreamweaverの教科書(CS5.5対応版)』(共著、毎日コミュニケーションズ、『できるクリエーターDreamweaver独習ナビ』(インプレス)、『Illustrator CS4 完全制覇パーフェクト』(共著、翔泳社)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(毎日コミュニケーションズ)など。

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テーマ作成など、エクステンションの機能を解説します。

写真:丸山章

丸山 章(まるやま・あきら)

フリーランス

1970年岡山生まれ。鳥取県在住。

鳥取大学農学部大学院中退後、鳥取市内のデザイン会社に約10年間勤務。そこでいきなり自社Webページの作成を命じられ、以後Webの世界へ。その後派遣等を経て、現在フリーで細々と活動中。長年使っているFireworksやDreamweaverの機能拡張などをときどき作成してブログにて公開中。

共著に『Dreamweaver プロフェッショナル・スタイル』(毎日コミュニケーションズ)。

Blog(旧サイト:Dreamweaver 覚え書き
@akira_maru
Facebook

このページのトップへ

プレゼント

■DreamweaverCS5 DVD 達人編

株式会社ウォンツさんよりプレゼントのご提供をいただきました。当日1名の方に抽選で差し上げます。

DreamweaverCS5 DVD 達人編 厳密なDOC宣言に、CSSファイルの分割、positionを使ったページレイアウトの仕組みなど、プロなら必ず知ってる達人ワザを収録!
詳細はこちら:http://wants.jp/shopping/products/dream_weaver/

「jQuery Mobileでスマホサイト作成」セミナー 無料ご招待

「jQuery Mobileでスマホサイト作成」セミナー 無料ご招待r360studio 森和恵 さんよりプレゼントのご提供をいただきました。当日3名の方に抽選で差し上げます。

「jQuery Mobileでスマホサイト作成」セミナー 無料ご招待

当日のセッション内容をさらにくわしくお話しします。
基本的には講義形式で進めますが、ノートパソコンをお持ち頂ければ、講師と一緒に試してみることも可能です。

日時:1月28日(土) 18:00~20:00
場所:江坂駅 徒歩5分、株式会社プロシーズさま運営の「Virtual Live Studio V.V.[ヴィヴィ]」にて。

予定しているセッション

2011年12月3日 時点で最新のもので、内容、セッション時間ともに少々変更の可能性はありますが、マルチデバイスとレスポンシブWebデザインをテーマにすることには変わりありません。

時刻 進行 時間
13:30 開場 -
14:00 開演/オープニング -
14:05 スマートフォン向けサイト制作の概論/鷹野 雅弘(スイッチ) 50分
  〜休憩〜  
15:10 jQuery Mobileで、ちゃっちゃと作ろう!スマホサイト/森 和恵(r360studio) 40分
  〜休憩〜  
16:05 Fireworks de jQuery Mobile/丸山 章 40分
  〜休憩〜  
17:00 「レスポンシブWebデザイン」の実装/鷹野 雅弘(スイッチ) 50分
17:50 エンディング 10分
18:00 歓談タイム 30分
18:30 撤収  

(19時より、別会場にて忘年会を別途開催)

このページのトップへ

満席になりました

満席になりました

BANNER

CSS Nite in OSAKA, Vol.28 presented by リクルートエージェント

ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。

ARCHIVES

CSS Nite in OSAKA, Vol.13以前の開催はこちら