概要
| イベント名 | CSS Nite LP, Disk 13 reprise 通称「lp13」（えるぴー・じゅうさん・りぷらいず） |
|---|---|
| 日時 | 2011年2月5日(土) 12:15-18:40（開場は11:50） |
| 会場 | ベルサール九段 東京都千代田区九段北1−8−10 住友不動産九段ビル3F （九段下、神保町、飯田橋下車） |
| 定員 | 240名 |
| 出演（順不同） | たにぐちまこと（H2O Space.） @seltzer 益子貴寛（サイバーガーデン） @takahiromashiko 谷 拓樹 @hiloki 高津戸 壮（ピクセルグリッド） @Takazudo 小山田 晃浩（ピクセルグリッド） @yomotsu 外村 和仁（ピクセルグリッド） @hokaccha 多田吉臣（ヘルツ） @yoshitomi_t 伊原 力也（ビジネス・アーキテクツ） @magi1125 クロカワ リュート@180mm |
| 主催 | CSS Nite実行委員会 |
| 協賛 | デジタルスケープ、KDDIウェブコミュニケーションズ、 Designer's Garage、Web検定、WEBSTAFF、サイボウズ |
| 協力 | サイバーガーデンbiz、OpenCU、アドビ システムズ |
| プレゼント協賛 | awesome! クリエイターズショップ、毎日コミュニケーションズ ウォンツ、ラトルズ |
| メディア協賛 | Web担当者Forum |
| 参加費 | 9,000円 |
| 事前登録 | 必要 |
| 備考 | スクール形式（机あり） |
| 懇親会 | 予定しています（別途、実費） |
| twitterタグ | #cssnitelp13r |
- 順不同です（=掲載している順序には、意図はありません）。
- 会社名のうち、株式会社などは省いています。
セッション概要と出演者のプロフィール
出演者、講演内容は、予告なく変更になる可能性があります。
プロフィールは、本セミナーイベント開催時のものです。
スマートフォン時代のWeb制作
iPhone、Androidケータイといったスマートフォンユーザーは着実に増えています。それらのデバイスおよびユーザーへの対応を考えなければいけなくなりますが、どのように対応していけば良いでしょうか。
デスクトップ向けサイトをただ小さくすればいいわけではありません。デスクトップとスマートフォンの違いを理解しながら、スマートフォン専用サイトをつくるということ、そしてこれからのWeb制作において有益な「Mobile First」のことを考えてみましょう。
谷 拓樹（たに・ひろき）
Webデザイナー
1982年三重県生まれ。大阪在住。
大学卒業後、デジタルハリウッド、フリーランス（ユニット）活動を経て、株式会社 EC studioに入社。Webサイトの診断士業務を経験し、その後、自社サイト・サービスのデザイン、UI設計、コーディング、ディレクション業務に携わる。2010年10月に退職。現在はフリーランスとして活動中。
また関西では Re:Creator's Kansai（リクリ）、.coder（ドットコーダー）などの勉強会コミュニティを運営し、関西のWeb業界を盛り上げる活動もおこなっている。
Web上でのIDは hiloki。（Twitter, Facebook）
2010年11月25日にiPhone関連の著書『HTML5&CSS3で作る魅せるiPhoneサイト』（ラトルズ）を発売。
ライブコーディングで学ぶ、iPhoneサイト制作のキホン
iPhoneは、PCと携帯電話の両方の特徴やクセをあわせ持つ、かなり特殊な環境です。そのため、設計・デザイン及びコーディングの各段階で、デスクトップ向けのサイトと携帯電話向けのサイト制作のノウハウを合わせた知識が必要になってきます。
さらに、作ったサイトの確認にはシミュレータの利用や実機での確認など、手軽とは言えない環境で、表示確認をしていかなければならない点がPC制作と異なります。
本セッションでは、そんなiPhone向けサイトのキホンを、実際にサイトを作る流れをお見せしながら、各段階での注意点などを紹介していきます。
たにぐち まこと
株式会社エイチツーオー・スペース
代表取締役
ソネットエンタテインメント（So-net）で Webエンジニアを経て2002年に、株式会社エイチツーオー・スペースを設立。Ajax開発やスマートフォン向けサイト制作・開発などを手がける。
CSS Niteをはじめ、MdNスクール・オブ・デザイン、WAOクリエイティブカレッジなどでの講師経験も多数。
主な著書に『iPhone+Android スマートフォンサイト制作入門』、『よくわかるPHPの教科書』（アスキー・メディアワークス）、『Dreamweaver PHPスターティングガイド』、『基本からしっかりわかる Adobe Spryプログラミングブック』（毎日コミュニケーションズ）、共著に『Dreamweaverプロフェッショナル・スタイル』（毎日コミュニケーションズ）など
iPhone/iPadサイト制作でHTML5活用
HTML5の新しい要素・属性のなかでも「文書構造」と「フォーム」にフォーカスし、iPhone/iPadサイト制作に役立てる方法を解説します。
これまでのHTMLやXHTMLとの書式の違い、セクション定義要素など、HTML5の基本を簡単におさらいしたあと、iPhone/iPad特有のmeta要素、iPhone/iPadがサポートしているフォーム機能、指によるタッチ操作などiPhone/iPadの特性を踏まえたフォーム設計、デスクトップ用ページとiPhone/iPad用ページの振り分け処理などを扱います。
益子 貴寛（ましこ たかひろ）
株式会社サイバーガーデン 代表取締役
金沢工業大学大学院 工学研究科 客員教授
1975年、栃木県宇都宮市生まれ。早稲田大学大学院商学研究科修了。Webサイトのコンサルティング、プランニング、制作業務、教育、執筆活動に従事。2008年8月より、金沢工業大学大学院工学研究科知的創造システム専攻 客員教授。
現在、スマートフォン向けWebサービスの企画・制作、HTML5、CSS3、各種APIを利用したWebサービスの開発にも積極的に関わる。
主な著書に『Web標準の教科書』『伝わるWeb文章デザイン100の鉄則』（秀和システム）、『現場のプロから学ぶXHTML+CSS』（共著、毎日コミュニケーションズ）など。
iPhone/iPadサイト制作でハマらないために
iPhoneやiPad用サイトを作るとき、HTML、CSS、JavaScriptを使います。革命的で魔法のようなデバイスと思われがちなこれらのデバイスですが、PC向けサイト制作と同じ感覚で作っていると、色 々なところでハマります。HTML5、CSS3等の新しい技術も使えるわけですが、それもすんなり問題なく使わせてくれるわけではありません。
このセッ ションでは、弊社が今までiPhoneやiPad向けに制作してきたサイトを作る上で、陥った問題を中心に共有させていただきます。
高津戸 壮（たかつど・たけし）
株式会社ピクセルグリッド
フロントエンドエンジニア
大手Web制作会社にてHTML、CSS、JavaScriptエンジニアとして経験を積む。その後フリーランスとしての活動を経て、株式会社ピクセルグリッドに入社。数10カ国語対応サイトや数千ページ規模のWebサイトのCSS、JavaScirpt設計の経験を持つ。
月に1回、フロントエンド周りの話題を持ち寄る勉強会"Sugamo.css"の副主催を務めている。MdN web creatorsにて、CSSやJavaScriptに関する特集の記事を多数、執筆している。
これまでの制作実績から得たiPhone/iPad向け実用Tips集
ピクセルグリッドでは、HTML5、CSS3、JavaScriptを駆使してiPhone/iPadに対応したvalveat81の事例をはじめ、GPUでの描画に切り替えてアニメーションを軽快にする方法、MediaQueriesを利用したページ構築フローなど、さまざまなノウハウを蓄積してきました。
これまでに得たさまざまな成功例、失敗例を時間の許す限りご紹介します。
小山田 晃浩 （おやまだ・あきひろ）
株式会社ピクセルグリッド
フロントエンドエンジニア
1982年生まれ。2006年よりweb制作会社におけるUI実装や運用を経験した後、2010年からフロントエンド・エンジニアとして（株）ピクセルグリッドに参加。コーポレートサイトを中心に、数々のWebサイトにおけるUI実装を手がけている。
Web関連雑誌での執筆活動や技術関連の講演も行うほか、個人のブログ「ヨモツネット」ではHTMLやXML、CSSなどに関する技術の情報を発信している。
Web制作のノウハウでつくるiPhoneアプリ
iPhoneでネイティブのアプリをつくるにはObjective-Cという言語で作る必要があります。しかし、Web制作をおこなっている人には敷居が高く、アプリをつくりたくても一から勉強するのはとてもコストがかかります。
そこでJavaScriptを使ってネイティブなアプリをつくるTitaniumやWebViewを使ってSafariをベースにアプリ化するphoneGapなど、Web制作をおこなっている人でもアプリをつくれる環境が整ってきました。
実際にphoneGapを使ってアプリを作った経験を元に、ネイティブアプリとWebアプリの違いやWeb制作のノウハウを使ったアプリ制作のTipsなどを解説します。
外村 和仁 （ほかむら・かずひと）
株式会社ピクセルグリッド
フロントエンドエンジニア
HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会、jstudyを主催している。
WEB+DB PRESS、Software Designなどに寄稿。
クロカワ リュート
株式会社 NHN Japan
フロントエンドエンジニア
1985年生まれ 東京都出身
ジュエリーの専門学校卒業後にジュエリー職人としてアトリエに所属。その後、Web業界へ転職。制作会社にて HTML/CSS/JavaScriptを用いて大手飲料メーカー系キャンペーンサイトや、ゲームと連動したSNSサイト構築などWebサイト制作の経験 を積む。
2011年2月にNHN Japan株式会社に入社。私生活でもWeb関連技術やプログラミング言語の探求を楽しんでいる。
地方におけるミニマムなiPad用Webアプリ制作事例
初代iPhoneが登場して早4年。その間、何度かiPhone用アプリ開発の相談があったものの、Objective-Cによるネイティブアプリ開発は、制作会社にとっても、お金を出すクライアントの担当者にとっても、けっして敷居の低いものではありませんでした。
そこで最近、何かと盛り上がりを見せているのがWebアプリ。HTML5にCSS3やJavaScriptなど、比較的とっつきやすい技術を組み合わせて実現する、まさにWebの技術でつくられたアプリです。
このセッションでは、僕が携わった1つの案件についてお話しします。戸建住宅のメーカーが提案する「体感型モデルハウス」の来場者の手にiPad。使っている技術は「jQtouch」に「video・audioタグ」ぐらい。
なかなかビジネスとしての折り合いがつきにくい地方の開発において、僕自身、いくつかのヒントと可能性が見えてきた事例をご紹介します。
多田 吉臣（ただ・よしとみ）
Webridge Kagawa
Webクリエイター
1977年香川県生まれ。専門学校卒業後にデジタルハリウッドにて3DCG制作に没頭する日々を過ごすが、とある事情で故郷に帰省。
その後、SPマン・イベントディレクターなどを経験したのちに、やっとCG制作をしている地元のプロダクションに出会う。そこで初めてWebサイトを実務で制作したのがきっかけで、今に至る。
現在はこれまでの経験を活かし、「有限会社ヘルツ」にてWebサイトの立ち上げから運用まで、幅広い業務に従事している。
また、香川県のWeb制作者コミュニティ「Webridge Kagawa（ウェブリッジかがわ）」では、実行委員として「CSS Nite in TAKAMATSU」など各種セミナーイベントやワークショップを開催している。
事例から学ぶスマートフォンサイトの設計手法
今後も増加の一途を辿るスマートフォンユーザーに対し、対応サイトやアプリをリリースしたいという要望が増えてくることは確実です。
そんな中で、今の周りの状況や、既にあるPC・モバイルサイトと照らし合わせ、どのような要件の整理を行うのがよいのでしょうか。
また、この新しいデバイスに対して、どのようなワークフローで制作するのがよいのでしょうか。
サッポロビールのスマートフォン対応の事例を通して、それらを考えるための「ヒント」や、意外に気づきにくい「盲点」をお伝えしていきます。
伊原 力也（いはら・りきや）
株式会社ビジネス・アーキテクツ
マークアップデザインエンジニア
インフォメーションアーキテクト
マークアップデザインエンジニア、インフォメーションアーキテクト。大規模プロジェクトのCSSサイト構築・製品プロモーションサイトの設計・モバイルコンテンツ構築も手がけるデバイス非依存実装のスペシャリスト。クリエイティブ集団mokuva所属。
タイムテーブル
2012年1月2日 時点で最新のものです。変更の可能性があります。
- タイムテーブルはあくまでも目安であり、当日の流れによって、調整しながら進行します。
| 開始 | セッション | 出演者 | 時間 |
|---|---|---|---|
| 11:35 | 開場 | ||
| 12:15 | オープニング | (5分) | |
| 12:20 | スマートフォン時代のWeb制作 | 谷 拓樹 | (30分) |
| 12:55 | iPhone/iPadサイト制作でHTML5活用 |
益子貴寛 （サイバーガーデン） |
(30分) |
| 13:30 | 休憩 | ||
| 13:50 | ライブコーディングで学ぶ、 iPhoneサイト制作のキホン |
たにぐちまこと （H2O Space.） |
(55分) |
| 14:45 | 休憩 | ||
| 14:55 | iPhone/iPadサイト制作での CSS設計とデザイン最適化事例 |
小山田 晃浩 （ピクセルグリッド） |
(45分) |
| 15:40 | 休憩 | ||
| 16:00 | iPhone/iPadサイト制作でハマらないために | 高津戸 壮 （ピクセルグリッド） |
(35分) |
| 16:40 | Web制作のノウハウでつくるiPhoneアプリ | 外村 和仁 （ピクセルグリッド） +クロカワ リュート |
(30分) |
| 17:10 | 休憩 | ||
| 17:30 | 地方におけるミニマムな iPad用Webアプリ制作事例 |
多田吉臣（ヘルツ） | (25分) |
| 18:00 | 事例から学ぶ スマートフォンサイトの設計手法 |
伊原 力也 （ビジネス・アーキテクツ） |
(40分) |
| 18:40 | 終了（18:50まで延長の可能性アリ） | ||
| 19:00 | アフターパーティ（事前希望者のみ） |
終了後に、アフターパーティ（別途、実費）を開催します。
参加費とお申し込み
CSS Nite LP, Disk 13にご参加いただくには、参加登録が必要です。
満席になりました。キャンセル待ちの受付も終了しました。
参加費
- 9,000円（事前決済）
- 8,000円（12月20日17時まで早期割引）
| 参加費 | |
|---|---|
| 12月20日17時まで | 8,000円（1,000円OFF） |
| それ以降 | 9,000円 |
| 請求書発行 | 10,500円 |
なるべく「請求書発行なし」にご協力ください。なお、請求書発行時は外税です。請求書発送後に請求書不要に切替の場合にも手数料を頂戴します。
決済方法
CSS Nite LP, Disk 13は有料のイベントです。事前決済をお願いします。
決済方法はPayPal（クレジットカード）、および、銀行振込です。
| PayPal | 銀行振込 | |
|---|---|---|
| 手数料 | 0円 （CSS Niteが負担します） |
振込手数料は ご負担ください。 |
開催の背景
CSS Niteについて
2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っている。
名古屋、大阪、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都、石川、高松、山形、富山、静岡、宮崎にて、“地方版”を展開。地方版は現地の有志が運営し、地方のコミュニティ活性化の一助となっている。
北九州、熊本、茨城での開催も構想中。
これまでに195回の関連イベントを通して、のべ28,000名以上が参加している（2010年10月末現在）。
CSS Nite LP
CSS Nite LPは、回ごとにテーマを設け、土日などに開催するCSS Niteの有料版。今回のCSS Nite LP, Disk 13はその第13弾。「lp13」はそこから来ています。
『Dreamweaverプロフェッショナル・スタイル』（Dreamweaver CC連動）、『Movable Typeプロフェッショナル・スタイル』（MT4LP5の連動）など、連動書籍をリリースする試みも行っています（今回、書籍企画はありません）。
アップルストア銀座でのCSS Niteをシングル盤に見立てると、LP盤だよね、ということでVolではなく、Diskでカウントしています。
過去の開催
- CSS Nite LP, Disk 1（ブラウザ、2006年10月）
- CSS Nite LP, Disk 2 "Dreamweaver CC"（Dreamweaver、2006年12月）
- CSS Nite LP, Disk 3 "Coder's High"（コーディング/マークアップ、2007年5月）
- CSS Nite LP, Disk 4 "Web Directions NEXT"（Webディレクション、2007年10月）
- MT4LP5（企業サイト構築におけるCMSとしてのMovable Type、2008年4月）
- CSS Nite LP, Disk 6「CMSリベンジ編」 （国産CMS、2009年6月）
- CSS Nite LP, Disk 7「IAスペシャル」 （IA「情報アーキテクチャ」、2009年9月）
- CSS Nite LP, Disk 8「Google Analyticsを使ったWebアクセスログ解析とサイトへの反映」 （2010年1月）
- CSS Nite LP, Disk 9「Coder's Higher」 （2010年4月開催）
- CSS Nite LP, Disk 9.2 reprise （2010年6月開催）
- CSS Nite LP, Disk 10「SEOの棚卸し」 （2010年7月開催）
- CSS Nite LP, Disk 11「Designer's High」Part 1 （2010年10月開催）
- CSS Nite LP, Disk 12「Designer's High」Part 2 （2010年11月開催）
FAQ’s
- 都内以外での開催はありますか？
- 今のところ、予定していません。
- LP13と内容は同じですか？
- ほぼ同一内容です。ただし、比留間さん（KAYAC）のセッションがありません（ほかのセッションを企画中）。LP13 repriseご参加の方には、LP13の比留間さん（KAYAC）のセッション資料（スライドと音声）を、一般公開前にシェアします。
- 複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
- はい。その場合、お振り込み後に「振込名義」と、どなたの分かをご連絡ください。
- 諸事情により参加できなくなりました。
- キャンセルフォームからご連絡ください。決済後のキャンセルについては下記のポリシーにて行わせていただきます。手数料を頂戴しますので、あらかじめご了承ください。
期間 返金額 開催1ヶ月前 全額返金 10日前まで 半額 前日、当日 1/4 連絡なし 0円 - なお、キャンセルの返金は、イベント開催後、その月末に行わせていただきます。
- 請求書は発行いただけますか？
- はい、ご希望される場合には発行いたします。その場合、決済方法は銀行振込のみ、かつ、定価に消費税をオンしてのご請求とさせていただきます。
なるべく「請求書なし」にご協力いただければ助かります。 - 領収書はいただけますか？
- はい。開催当日にお渡しします。コンビニ決済の方はレシート、または、入金確認メールのプリントアウトなどをご持参ください。
法人名などの宛名が必要な場合には、休憩時間に受付にてお申し出ください（事前のご連絡は不要です）。 - 当日は何を持参すればよいですか？
- 開催の1週間くらい前に受講票をメールにて発送します。そちらをプリントアウトしてご持参してください。プリントアウトが困難な方は、携帯電話の画面でのご提示でも結構です。
- 当日の配布資料はありますか？
- ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
- セッション登録はどのように行えばよいですか？
- 今回のCSS Nite LPは1トラックで開催します。つまり、同時進行で複数のセッションは進行しませんので、セッション登録などは不要です。すべてのセッションをお楽しみいただけます。
- 諸事情で、遅刻（途中退席）しなければなりません。
- 問題ありません。ただし、部分的な返金等はご容赦ください。
- 視力が弱いのですが、大丈夫でしょうか？
- スクリーンは250インチ（幅5m）と、かなり大きめですので、後方の席でも十分に見やすいと思われます。ご心配な方は、お早めにご来場いただき、見やすい席を確保していただければ確実です（自由席です）。
なお、途中でもお困りの際には移動いただいて結構ですし、お申し出くだされば、（席替えなど）対応いたします。 - 急遽参加できなくなりました。代わりの人間が参加してもよいですか？
- はい、どうぞ。その際には、cssnite@gmail.comまでご一報ください。
- パソコンを持参した方がいいですか？
- いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
- 無線LANなどの環境はありますか？
- 若干のご準備はいたしますが、基本的にはご自身でご用意ください。
- twitterで実況中継（TSUDAっても）いいですか？
- はい、どうぞ。ハッシュタグは「#cssnitelp13r」です。なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いいたします。
- USTREAMで中継してもいいですか？
- こちらはご容赦ください（=NGです）。
- Androidは扱わないのですか？
- 今回は、iPhone/iPadにフォーカスします。なお、Android対応は、2011年5月にスマートフォン特集（2）として扱う予定です。
フォローアップ
- フォローアップ（1）谷 拓樹さん
- フォローアップ（2）益子貴寛さん
- フォローアップ（3）たにぐちまことさん
- フォローアップ（4）小山田 晃浩さん
- フォローアップ（5）高津戸 壮さん
- フォローアップ（6）外村さん
- フォローアップ（7）クロカワ リュートさん
- フォローアップ（8）多田さん
- フォローアップ（9）伊原さん
関連情報
バナー
ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。
（幅160ピクセル×高さ160ピクセル）
発言の最後に半角スペース＋「 #cssnitelp13」を入れてつぶやいていただくと「#cssnitelp13」に自動的にリンクが張られて、CSS Nite LP, Disk 13関連の発言を参照することができます。ぜひ中継や覚え書きなどにご利用ください。
お問い合わせ
ご不明点やお気づきの点がありましたらこちらのフォームからお知らせください。
お問い合わせ前に、FAQをご一読ください。
