CSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」

LPシリーズの27弾は、スマートフォン対応サイト制作にフォーカスします。
開演、終演時間が変更になりましたのでご注意ください。当日枠の受付は終了しています。

イベント概要

イベント名
CSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」
日時
2013年5月25日（土） 13:20 -19:40（開場13:05）
会場
ベルサール九段
定員
240名
出演予定、
神森 勉（KDDIウェブコミュニケーションズ）、
矢野 りん、
益子 貴寛（サイバーガーデン）、
こもり まさあき、
たにぐち まこと（エイチツーオー・スペース）、
松田 直樹（まぼろし）、
西畑一馬（まぼろし）、
木村 哲朗（まぼろし）、
伊原 力也（ビジネス アーキテクツ）、
徳田 和規（ピクセルグリッド）、
小林 信次（まぼろし）、
田代 豊（anygraphica）、
森本 恭平（NTTレゾナント）
司会進行
鷹野 雅弘（スイッチ）
山本 和泉（#fc0）
主催
CSS Nite実行委員会
協賛
写真素材 PIXTA（ピクスタ）、NTTレゾナント（AppKitBox）、
クラウド型ビジネスチャットツール チャットワーク （ChatWork）
協力
サイバーガーデンbiz、H2O Space.、サイボウズ、Designer's Garage、
コワーキングスペース茅場町Co-Edo、
KDDIウェブコミュニケーションズ
プレゼント協賛
awesome! クリエイターズショップ、マイナビ
メディア協賛
Web担当者Forum
参加費（事前決済）
9,000円（事前決済）※事前決済は終了しました、
10,000円（当日）※受付は終了しました、
8,000円（4月25日15時まで） 、
7,000円（4月4日15時まで） 、
2,800円（フォローアップ参加）
事前登録
必要
備考
スクール形式（=机あり）
備考2
フォローアップのみを開催直後（1週間以内）に受け取れるフォローアップ参加を試験的にご用意しています。
懇親会
予定しています（別途、実費）
Twitter
ハッシュタグは #cssnite_lp27 です。
URL
https://lp27.cssnite.jp/
Facebook
このセミナーイベントのFacebookページ

開催の背景

CSS Niteについて

2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っている。

名古屋、大阪、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都、石川、高松、山形、富山、静岡、宮崎、熊本、北九州、岡山、徳島、松山、山梨、長野にて“地方版”を展開。地方版は現地の有志が運営し、地方のコミュニティ活性化の一助となっている。

これまでに、300回を越える関連イベントを通して、のべ40,000名を超える方にご参加いただいている（2012年11月現在）。

CSS Nite LP

CSS Nite LPは、回ごとにテーマを設け、土日などに開催するCSS Niteの有料版。今回のCSS Nite LP, Disk 27はその第27弾。「LP27」はそこから来ています。

アップルストア銀座でのCSS Niteをシングル盤に見立てると、LP盤だよね、ということでVolではなく、Diskでカウントしています。

セッション概要と出演者のプロフィール

講演内容は、予告なく変更になる可能性があります。プロフィールは、本セミナーイベント開催時のものです。

スマートフォン今昔物語

スマートフォン対応と言っても、これまでどんな機種が出ていて、今まさに旬の端末ってなんだろう？って思うことありませんか？

3G専用機種や、LTE対応機種、新旧iOSに同じくAndroid OS。スマートフォン対応を行う上で切っても切り離せないスマートフォンに関する基本的な仕様や今後について紹介します。

神森 勉（かみもり・つとむ）

株式会社KDDI ウェブコミュニケーションズ
SMB事業本部 デザイン部GM

商社営業マンからDTPオペレーターを経て、1997年よりWeb制作に携わる。2000年9月グローバルデザインへマークアップエンジニアとして入社。 2004年に上京し、制作会社にてディレクター、制作部マネージャーを勤める。2002年頃よりアクセシビリティへの取り組みを始め、クライアントサイト の実装、コンサルティング経験を持つ。同時期、web creators、Web Designingの連載や、単著、共著などの執筆活動、CSS NiteやAdobeイベント講師などの講師業も行う。

2011年 KDDI ウェブコミュニケーションズに入社。デザイン部GMとして、CPI、CloudCore、boundioのデザインコンセプトの責任者としてブランド戦略およびWebサイト戦略に携わっている。

モバイルデザインパターンの取り入れかた

フロントエンドのレイアウト設計フェーズでの作業プロセスについての解説を通して「デザインパターンってどうしてつかったほうがいいの？」「たくさんのパターンのなかから何をどう選べばいいの？」 といった悩みを解決します。

使える画面になるまで作り込む過程については、作例をもとにご紹介します。

写真：矢野 りん（やの・りん）

バイドゥ株式会社 モバイルプロダクト事業部 マネージャー ／ Android女子部部長

フリーランスのデザイナーとして、メーカのWebコンテンツなどデザイン経験多数。2011年12月よりバイドゥ株式会社入社。自社プロダクトのSimejiやBaiduIMEのUX/UIのデザインやプロモーション企画・デザイン担当。

主な著書に『ウェブデザインのつくり方、インターフェイスデザインの考え方。』、『スマートフォンデザイン見本帳』（MdN）、『WEBデザインメソッド-伝わるコンテンツのための理論と実践』 （ワークスコーポレーション） 『Webレイアウトの『解法』 Webデザイナーのための実践的セオリー50』、『デザインのへそ デザインの基礎体力を上げる50の仕事術』（エムディエヌコーポレーション）など。

身長152.2cm。

スマートフォン向けサイト制作の基本

これからスマートフォンサイト制作に取り組みたい、でも、どこから手をつけてよいかわからない、という人向けに、とりあえず、これだけは押さえておきたい内容として、次の項目をコンパクトに解説します。

写真：益子貴寛益子貴寛（ましこ たかひろ）

株式会社サイバーガーデン 代表取締役

1975年、栃木県宇都宮市生まれ。

Webサイトのコンサルティング、Webサービスの企画・制作、Webテクノロジー関連の執筆や教育活動などに従事。

スマートフォン向けWebサービス、HTML5、CSS3、各種APIを利用したWebサービスの開発にも積極的に関わる。

主な著書に『Web標準の教科書』（秀和システム）、『現場のプロから学ぶXHTML+CSS』（共著、マイナビ）、『Web検定 標準ガイドブックシリーズ』（監修、ワークスコーポレーション）など。

レスポンシブWebデザイン実践編

次から次に登場する未知なるデバイスへのコンテンツ配信のひとつの方法として、レスポンシブWebデザインが採用されるサイトも増えてきました。

本セッションでは、変わり続けるレスポンシブWebデザインの実装方法の「今」を取りあげます。

写真：こもり まさあき

フリーランス・デザイナー、テクニカルライター

1972年生まれ。黎明期からWebサイト構築などに関わる。現在はWeb関連業務に加えてテクニカルライティング、講師など業種を限定せずに活動し、仕事の合間にTwitter（@cipher）でたまに毒を吐く日々。

近著に『HTML+CSS コーディングベストプラクティス』（MdN・共著）など。

スマートデバイス時代のWebサイト構築術 LIVE

スマートデバイスの台頭で、Webサイト構築のワークフローにも大きな変化の時が押し寄せています。インブラウザーデザイン、モバイルファースト、レスポンシブWebデザイン。新しい言葉が日々飛び交っていますが、本当にこれらの考え方は、「現場」に浸透しているのでしょうか。

本セッションでは、anygraphicaのワークフローを通じて、Webサイト制作の「現実（リアル）」にフォーカスを当てて、ライブコーディングで紹介していきます。

写真：たにぐち まことたにぐち まこと

株式会社エイチツーオー・スペース 代表取締役
anygraphica プログラマー

Web サイト制作ユニット anygraphicaのプログラマとして Webサイト制作に携わるかたわら、CSS NiteやAndroid bazaarなどでの講演活動、テクニカルライター業などWeb業界の教育事業に取り組んでいる。近年は、スマートフォン向けのサイト制作や、JavaScriptを活用したWebサイトデザインなどが主な業務。

主な著書に『iPhone+Android スマートフォンサイト制作入門（改訂新版）』（アスキーメディアワークス）、『よくわかるPHPの教科書』、『よくわかるJavaScriptの教科書』（共にマイナビ刊）など。

田代 豊（たしろ・ゆたか）

1983年、千葉県出身。

20歳からWeb制作会社で企業サイトのデザインやマークアップ、CMS、JavaScriptなどの実装を経験したのち、2005年、anygraphicaとして独立。

現在は主にディレクションやデザイン、HTML5/CSS3などを利用した企業サイト制作を行っている。

スマートフォンサイトにおける画像の最適化と使いどころ

スマートフォンはその接続回線が貧弱でありながら、デバイスのピクセル密度は高くなる一方、というサイトパフォーマンス上の矛盾をはらんでいます。そのパフォーマンスに大きく起因するのがやはり「画像」まわり。画像表示の選択肢の幅も広がりつつあります。

これまでビットマップに頼っていた部分に変わる有用なフォーマットと手段の使いどころをご紹介します。

写真：松田 直樹（まつだ・なおき）

株式会社まぼろし

ゲーム業界にて企画開発を担当した後、Web業界に転身。
2011年より株式会社まぼろしに参加。
まぼろしのCCOとして、テーマパークの開設運営で培った企画力を生かし、デザイン・マークアップ・プログラム、また書籍・雑誌の執筆、講演といった業務を幅広く担当している。

趣味が高じて、戦国・幕末等の歴史系ライティング活動も行っている。

スマホの検証が10倍はかどる！Remote TestKitの紹介

Developers AppKitBoxは、スマートフォン活用者向けの支援サービスです。この中でスマートフォン向けの検証に役立つ「Remote TestKit」を紹介します。Remote TestKitは一般的な実機レンタルとは一線を画すスマートフォンの「リモート・レンタル・サービス」。利便性の高い検証環境を実現します。

写真：

森本 恭平（もりもと・きょうへい）

NTTレゾナント株式会社

NTTレゾナント株式会社に営業職として入社。「Web会社に勤務したんだから、Webについて学びたい！」との想いから、独学でWeb技術を学び、いつの間にかフロントエンドエンジニアへと転身した。

ActionScriptを使ったインタラクティブなアプリケーションに興味を持ち、HTML5を利用したWebアプリケーションやスマートフォン向けネイティブアプリの開発なども行っている。

現在は、スマートフォン向けサービスや開発者向けサービスなどに従事し、その開発を通して得た知識や独自に学んだことを若手エンジニアへ伝え、社内の技術力向上に貢献している。

著書：『SenchaTouch パーフェクトガイド』（アスキー・メディアワークス・共著）

スマートフォンサイト制作 よくあるトラブルと解決方法・回避方法

スマートフォンサイトへの要求レベルが高まるにつれ、バグに出会う頻度もこれまで以上に増しつつあります。

本セッションでは、わたしたち「まぼろし」での経験を交えながら、スマートフォンサイト制作のフロントエンドまわりでよくあるトラブルについて、その解決方法・回避方法を具体的にご紹介します。

木村 哲朗（きむら・てつろう）

株式会社まぼろし フロントエンドエンジニア

1980年、東京都文京区生まれ。企業サイトや動画サイトの運用更新を経験ののち、2012年5月に株式会社まぼろしへジョイン。主にWebサービス・アプリケーションの仕組みや構成についての設計および、HTML/CSS/JavaScript を用いた実装を行う。

また、写真の技能を習得しているため、ポートレートや商材などの撮影にも対応が可能。

Twitter: @haribote_nobody

西畑 一馬（にしはた・かずま）

to-R 代表 / 株式会社まぼろし フロントエンドエンジニア

JavaScript / Ajaxを利用したWebアプリケーション制作やCSS3 / HTML5を利用したサイト作成を業務で行い、個人でも書籍や雑誌の執筆、Webクリエイター向けの講座 / セミナーなどの活動を行っている。また、ブログではJavaScript/jQueryやCSSなどの情報の発信も行っている。

主な著書に『Web制作の現場で使う jQueryデザイン入門』、『jQuery Mobile スマートフォンサイト デザイン入門』がある。

ケーススタディ：iOS版CodeGrid 設計の裏側

サービス開始から早1年… CodeGridのiOS対応版をようやくリリースできました。

ほぼデザイナー不在の中で実装したこともあり、エンジニアならでは？な設計の裏側を紹介します。

写真：徳田 和規徳田 和規（とくだ・かずのり）

株式会社ピクセルグリッド

HTML/CSSコーダーとしてWebに触れ、その後WebディレクターとしてJavaScriptの特性を活かしたサイトのテクニカルディレクションからUI開発までを経験。2011年にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。CodeGridなどのフロントエンド実装を行っている。

ケーススタディ：NTTデータグループウェブサイトのマルチデバイス対応

2012年4月のグローバルサイト公開を皮切りに、各国でリニューアルされていったNTTデータグループのウェブサイト。レスポンシブウェブデザイン（RWD）の事例として取り上げて頂くことも多いようです。そんな特徴のひとつでもあるRWDについて、どのような観点で検討を進めたか、どのような設計思想に基づいているかなど、実践のプロセスについてご紹介します。

写真：伊原 力也伊原 力也（いはら・りきや）

株式会社ビジネス・アーキテクツ
マークアップデザインエンジニア
インフォメーションアーキテクト

マークアップデザインエンジニア、インフォメーションアーキテクト。大規模プロジェクトのCSSサイト構築・製品プロモーションサイトの設計・モバイルコンテンツ構築も手がけるデバイス非依存実装のスペシャリスト。クリエイティブ集団mokuva所属。

スマホ制作サイトのディレクション術

従来のPCサイト制作の現場においても、ディレクターと現場の作業者間には大きな認識のズレが発生しているということをよく耳にします。

このような状況の中、ディレクターが円滑なコミュニケーションをとるには何を知っておくべきなのか。

小林からテクニカルディレクションに必要なことを重点的にお伝えしつつ、サービス提供者の立場から矢野がツッコミを入れていきます。

写真：小林 信次（こばやし・しんじ）

株式会社まぼろし 取締役副社長COO
1980年、茨城県出身。専修大学経営学部卒業。
Webディレクション、マークアップ、Webクリエーター向けの講義や執筆に従事。共著書に『現場のプロから学ぶXHTML+CSS』（毎日コミュニケーションズ）など。雑誌、メディアサイトへの寄稿多数。

写真：矢野 りん（やの・りん）

バイドゥ株式会社 モバイルプロダクト事業部 マネージャー ／ Android女子部部長

最新エントリー

タイムテーブル

2013年5月22日 時点で最新のものです。変更の可能性があります。

開始 ステージ 出演者
12:50 開場 　
13:20 スマートフォン今昔物語 神森 勉
（KDDIウェブコミュニケーションズ）
13:45 モバイルデザインパターンの取り入れかた 矢野りん
14:20 スマートフォン向けサイト制作の基本 益子 貴寛（サイバーガーデン）
14:40 休憩 　
14:55 レスポンシブWebデザイン実践編 こもり まさあき
15:30 スマートデバイス時代の
Webサイト構築術 LIVE		 たにぐち まこと、
田代 豊（anygraphica）
16:05 スマートフォンサイトにおける
画像の最適化と使いどころ		 松田直樹（まぼろし）
16:40 休憩 　
16:55 スマホの検証が10倍はかどる！
Remote TestKitの紹介		 森本 恭平（NTTレゾナント）
17:05 スマートフォンサイト制作
よくあるトラブルと解決方法・回避方法		 西畑一馬、
木村 哲朗（まぼろし）
17:50 ケーススタディ：
iOS版CodeGrid 設計の裏側		 徳田 和規（ピクセルグリッド）
18:10 休憩 　
18:25 ケーススタディ：
NTTデータグループウェブサイトの
マルチデバイス対応		 伊原 力也
（ビジネス アーキテクツ）
19:05 スマホ制作サイトのディレクション術 小林 信次（まぼろし）
＋矢野りん
19:40 終了 　

会場プレゼント

参加費とお申し込み

CSS Nite LP, Disk 27は有料のイベントです。ご参加いただくには参加登録と事前決済が必要です。 事前決済、当日決済ともに受付終了しています。当日フラリと来られても（物理的に）ご参加いただけませんのでご注意ください。

参加費

なお、ご参加はお支払い済みの方から、参加確定します。
振込後に、こちらのフォームからご連絡いただけると助かります。

キャンセル待ちは終了しました。

会場参加費用にはフォローアップも含まれますので、両方に申し込む必要はありません。

決済に関して

フォローアップ参加について

CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開しています。今回、フォローアップを開催直後（1週間以内）に受け取れる「フォローアップ参加」を試験的に行います。

フォローアップ参加の受付は終了しました（5月31日）。

フォローアップ参加は2,800円です。 なお、受付は2013年5月31日までです。

決済のご確認（入金確認）

PayPalでの決済
PayPalからの自動返信メールをもって入金確認とさせていただきます。
銀行振込での決済
確認取れ次第、入金確認メールをお送りします。お振り込み後、3日から1週間ほどかかることもあります。

お願い

お申し込み前に、下記2件からのアドレスからのメール受信可能にしておいてください。

FAQ

開催に関して

都内以外での開催はありますか？
今のところ、予定していません。
当日は何を持参すればよいですか？
開催の3日から1週間くらい前に受講票をメールにて発送します。そちらをプリントアウトしてご持参してください。プリントアウトが困難な方は、携帯電話の画面でのご提示でも結構です。
当日の配布資料はありますか？
ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
視力が弱いのですが、大丈夫でしょうか？
心配な方は、お早めにご来場いただき、見やすい席を確保していただければ確実です（自由席です）。なお、途中でもお困りの際には移動いただいて結構ですし、お申し出くだされば、（席替えなど）対応いたします。
書籍販売コーナーはありますか？
今回はご用意いたしません。
パソコンを持参した方がいいですか？
いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
なお、「隣に座った方の、キーボードのタイピング音がうるさくて気が散る」といった苦情を最近よくいただきます。ご配慮をお願いします。
無線LANなどの環境はありますか？
若干のご準備はいたしますが、基本的にはご自身でご用意ください。
電源はありますか？
会場に両サイドにある電源をお使いいただいてOKですが、分け合ってお使いください（ぜひ、電源タップなど延長できるものお持ちください）。また、ACアダプターにつまづいてPCが落下などされないように、くれぐれもお気をつけください（休憩中はコードをはずしておいたり、養生テープなどで固定された方がよいかもしれません）。
Twitterで実況中継してもいいですか？
はい、どうぞ。ハッシュタグは「#cssnite_lp27」です。なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いいたします。
Ustreamで中継してもいいですか？
こちらはご容赦ください（=NGです）。主催者サイドでUstream配信する予定はありません。
セッション登録はどのように行えばよいですか？
今回のCSS Nite LPは1トラックで開催します。つまり、同時進行で複数のセッションは進行しませんので、セッション登録などは不要です。すべてのセッションをお楽しみいただけます。

お申し込み・決済に関して

複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
はい。その場合、お振り込み後に「振込名義」と、どなたの分かをフォームからご連絡ください。
請求書は発行いただけますか？
PDFに限り、発行します。請求書発行依頼フォームからご連絡ください。
領収書はいただけますか？
はい。開催当日、全員にお渡しします。
法人名などの宛名の記入が必要な場合には、休憩時間に受付にてお申し出ください（事前のご連絡は不要です）。銀行振込、PayPal決済に関わらず、領収書の日付は開催日です。不都合があれば、当日、ご相談ください。
なお、欠席された場合でも、ご連絡いただければ領収書を郵送します。
フォローアップ参加の方で、必要な方にも領収書をお送りします（PDF、または、郵送）。
諸事情で、遅刻（途中退席）しなければなりません。
問題ありません。ただし、部分的な返金等はご容赦ください。遅刻される場合、（すでに着席されている方の注意を削ぐため）次の転換/休憩時まで、会場の後部にて待機いただきます。
入金確認メールはいつ届きますか？
早ければ翌日。状況によっては1週間くらいかかることもあります。
なお、PayPal決済の場合にはPayPalからの自動返信メールをもって入金確認としますので、CSS Niteからのメールはお送りしていません。
お申し込み者と振込名が異なる場合、こちらでは照合できません。ご連絡をお願いします。
銀行振り込みの場合の振込先は？
お申し込み後に送信される自動返信メールに記載しています。

キャンセルや払い戻しについて

急遽参加できなくなりました。代わりの人間が参加してもよいですか？
はい、どうぞ。その際には、フォームからご連絡ください。
PayPalでダブって決済してしまいました。
ご連絡いただければ払い戻し処理を行います。もちろん、こちらで気付いた場合にはご連絡します。なお、返金の際、手数料（500円）のみご負担ください。
諸事情により参加できなくなりました。
キャンセルフォームからご連絡ください。
決済後のキャンセルについては下記のポリシーにて行わせていただきます。
請求書 PDFのみ発行（希望者）
資料の公開 会場参加者 OK
フォローアップ参加 OK
一般公開 およそ90日後
キャンセル 3日前まで フォローアップ参加費を
除いて返金
（フォローアップあり）
（計算例） 9,000円-2,800円-500円=5,700円
前々日、前日、当日 返金なし（フォローアップあり）

関連情報

バナー

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

CSS Nite LP, Disk 27（幅160ピクセル×高さ160ピクセル）

Twitter

発言の最後に半角スペース＋「 #cssnite_lp27」を入れてツイートしていただくと「#cssnite_lp27」に自動的にリンクが張られて、CSS Nite LP, Disk 27関連の発言を参照することができます。中継や覚え書きなどにご利用ください。

お問い合わせ

ご不明点やお気づきの点がありましたらこちらのフォームからお知らせください。
お問い合わせ前に、FAQをご一読ください。

このページの
上部に戻る

このページの上部に戻る