開催日:

2012/6/9(Sat.)

コーダー・Webディレクター・Webデザイナー・アプリ開発者向け

WebサイトもスマートフォンアプリもOne Web

ワンソースでのメリットを理解しながらも現場では直ぐに取り込むことはできないと諦めていませんか?このイベントではOne Webをテーマに、海外で話題になっている最新情報、実現できるノウハウや考え方、ワークフローをご紹介いたします

2011年7月に「One Web」というテーマで 初の SwapSkills Doubbble を開催しました。 海外でイーサン・マルコッテ氏がレスポンシブウェブデザインを提唱し、世界中がざわめいているや否や日本でも海外情報をシームレス提供していたことにより業界で話題となりました。

当然ながら、モバイルファーストレスポンシブウェブデザインをテーマに行われたのはイベントは日本初となり、このイベントから他のイベントや媒体でも取り上げられるようになりました。その話題は、流行としか受け取られない場面や異議もありますが、現場ではその必要性に迫られ提唱されたコンセプトを取り入れる企業が増えてきています。もちろん、ビジネスシーンにおいてもそのメリットは多大で、本当のコンセプトを理解せず表面的な理解や言葉遊びではそのメリットを活かしきれません。

2012年の One Web は昨年に引き続き、より複雑化し多種多様になっているデバイスにどのようなアプローチで対応すべきかをご紹介いたします。さらに今年は、コンテンツやスマートフォンアプリについてもご紹介いたします。
社内の Webディレクター、 Webデザイナー、コーダーなど股がる役職の方と一緒にご参加いただきますとより効果的に学習することができます。

イベント情報のご案内です

概要

イベント名 SwapSkills doubbble(5)
Webサイトもスマホアプリも!One Web
日時 2012年6月9日()13:00 〜 17:00(12:45受付開始)
会場 きゅりあん
定員 245名(満席:受付終了) 
スピーカー
対象者
  • Webディレクター
  • Webデザイナー
  • コーダー
  • アプリ開発、企画者

こんな方に参加いただきたいです。

備考
  • スクール形式(机あり)
  • 電源(席の近くのコンセントをご利用いただけますが数に限りがございます。譲り合ってご利用ください。延長コード持参をおすすめいたします)
  • Wifiはございません。
協力/関連記事
twitter タグ #swapskills_w ※つぶやく時は、「半角スペース+#swapskills_w」

ご紹介いただく内容と講演者のプロフィールです

セッション&スピーカー紹介

セッションタイトル

Transformative Web Design
~変化にしなやかに対応するデザイン力~

あなたは今「Web」という言葉を聞いて、何を思い浮かびますか? パソコン上のブラウザに表示される Webサイトを想像するかもしれませんし、モバイルアプリなのかもしれません。クラウドを中心にしたエコシステムかもしれませんし、人と人が繋がるソーシャルメディアを連想している方もいるでしょう。皆が考えるすべてが Web であり、今後私たちが想像もつかない場所やデバイスを通して Webに触れることになるでしょうし、Webに関わる「当たり前」も常に変わり続けるでしょう。 明確な姿・型が存在しない上、誰がどのようにして見たり操作するかも分からなくなってきた中、私たちはどのようにして Webをデザインしていけば良いのでしょうか。Webサイトを作るだけでなく、その枠を超えた設計が余儀なくされた今、私たち制作者は何に注視したら良いのでしょうか。 今セッションではコンテンツを起点したデザインプロセスを紹介すると共に、予想不可能な未来に対応するための Web デザインの未来を共有していきます。

写真 長谷川恭久

長谷川 恭久(はせがわ やすひさ)

  • Could Webデザイナー

デザインやコンサルティングを通じてWebの仕事に携わる活動家。 アメリカの大学にてビジュアルコミュニケーションを専攻後、マルチメディア関連の制作会社に在籍。日本に帰国後、数々の制作会社や企業とコラボレーションを続け、現在はフリーで活動。
自身のブログとポッドキャストではWebとデザインをキーワードに情報発信をしているだけでなく、各地でWebに関するさまざまなトピックで講演を行ったり、多数の雑誌で執筆に携わる。
著書に『スタイルシート・スタイルブック』『Web Designer 2.0』など。

セッションタイトル

レスポンシブWebデザインを 商業(ビジネス)サイトで
実現するための考えと仕組み

昨年の「One Web」でご紹介した レスポンシブWebデザイン を 商業(ビジネス)サイトで実装する上で知っておきべき考え方をご紹介いたします。既にいろいろな媒体でご紹介されているレスポンシブWebデザインは「Fluid Image」「Media Query」「Fluid Grid」の3つの要素として実現します。「Fluid Grid」はリキッドレイアウトにおけるグリッドシステムで、ガイドに沿ってデザインをしていきます。
グリッドシステムでの設計を行うと、仕組みだけに捕われてデザインしがちになります。 しかし、Webサイトの目的などによってコンテンツの扱いが異なり全て同じデザインの実装は不適切であると考えられるようになりました。そこで考えられるようになったのがコンテンツアウト手法です。 このセッションでは、レスポンシブWebデザインにおけるコンテンツアウトの考え方と実装ポイントをご紹介いたします。 商業(ビジネス)サイトにおけるレスポンシブWebデザインサイトをお考えの方には必見の内容です。

写真 菊池 崇

菊池 崇(きくち たかし)

米国にてマーケティングを専攻修了。貿易会社を経て、オーストラリア発祥、米国、カナダなど世界各所で開催されている世界的に有名なカンファレンスWeb Directionsの日本版Web Directions Eastの発起人&CTOを務める。allWebクリエイター塾では、HTML5+CSS講座CSS3講座スマートフォンサイト制作講座などの講師を担当。CSS3大接近[gihyo.jp]、[Think IT][ascii:Web Professional]などで連載。実践的なCSS3の使い方について[Adobe MAX09]など講演に出演。海外の技術書やブログを読みあさり、最新の技術をいちはやく習得している。

セッションタイトル

マルチデバイス対応に最適な手法「デザインニング・イン・ ブラウザ」

固定幅の画面をデザインする時代から、 様々なデバイスに対するデザインをこれまで以上のスピードで行うことが当たり前になってきました。 そこで従来のPhotoshop、Fireworksでのモックアップ制作からコーディングというワークフローを見直し、ブラウザでデザインする手法を採用することが増えています。実際にデモを通じて「デザインニング・イン・ブラウザ」の即効性、柔軟性を体験してください。
斉藤氏が記載されているブログCSS Raderでもご紹介されているのでご参考ください。

  • ブラウザでデザインすることの利点
  • デモ: 色、カラースキーム
  • デモ: レイアウト
  • デモ: アイコン、ボタン、テクスチャ
  • デザインニング・イン・ブラウザを加速するツール集
写真 斉藤 祐也

斎藤 祐也(さいとう ゆうや)

ウェブデザイナ/フロントエンドデベロッパ。1979年生まれ。ネバダ州立ラスベガス大学、プリントジャーナリズム学部卒。株式会社All Aboutで6年、2012年2月からは株式会社サイバーエージェントへ。
個人では、フロントエンドデベロッパのためのミニブックというコンセプトのブログCSS Radar、海外のウェブ開発情報をキュレートしているメールマガジン CSS Radar Newsletterを運営。

著書・関連サイト

セッションタイトル

「制作」から「開発」へ、そして最先端へ - Webアプリ開発の現状と未来

思い通りのデザインやインタラクションを実現するために、JavaScriptはもはや欠かせない技術の一つ。 JavaScriptを活用したWebアプリの構築にあたっては、デザイン、マークアップ、スタイリング、 そしてプログラミングがうまく協調する必要があると感じています。 本講演では、実際にデザイナと協調してWebアプリを構築した経験・ノウハウの共有に加え、 最新のWebテクノロジーについても触れることで、「アプリ化を極めるとWebはここまで進化する!」 ことをお伝え出来ればと思います。

  • Webアプリ構築ノウハウ
  • jQuery Mobile
  • プログレッシブ・エンハンスメント
  • 最先端のWebテクノロジー
  • Webアプリはどこまで進化するか
写真 白石俊平

白石 俊平(しらいし しゅんぺい)

Java EEエンジニア、フリーのテクニカルライターを経て、HTML5 開発者コミュニティ 「HTML5-developers-jp」(現html5j.org)管理人、Google公認 API Expert (HTML5)、Microsoft MVP 2011 (IE)なども務める。2010年3月に株式会社オープンウェブ・テクノロジーを設立、2012年1月より株式会社シーエー・モバイル Web先端技術フェロー。著書に「Google Gearsスタートガイド」(技術評論社)、 「HTML5&API入門」(日経BP) 「jQuery Mobile」(オライリー、監訳)がある。

セッションタイトル

OneWebにする前に、コンテンツを見直そう!コンテンツ・ストラテジーの意味。

デバイスの多様化は、つまりはユーザのコンテキストの多様化です。”マルチチャンネルのコミュニケーションを”と言われる今日ですが、わたしたちが企画・制作するサイトやアプリは、利用されるシーンが変わっていることを理解するところから始まると言えます。モバイル対応が完璧でも、ビジネスゴールを達成するコンテンツの制作・運用をしなければ、本末転倒です。このセッションでは、IAやコンテンツストラテジーの海外カンファレンスでの議論をご取り入れながら、クライアントワークの現場で導入できるツールやワークフローを解説し、急成長中のコンテンツストラテジーの分野をご紹介します。

写真 佐々木朋美

佐々木 朋美(ささき ともみ)

翻訳者、システムエンジニアを経て、オンラインとオフラインのグレイゾーンを彷徨うWebディレクターへ。主に、デジタルコミュニケーション戦略、サービス設計、UXデザインを担当する。 個人では、2009年から2011年まで、世界中の市民メディアをつなげる国際ネットワークGlobal Voicesの日本語エディターを務める。また、学生時代からアートイベント情報プラットフォームの東京アートビートに参加し、現在はその運営母体であるNPO法人GADAGOの理事として、企画・運営に携わる。

開催される当日のスケジュールです

タイムテーブル

  • 開始時間
  • セッション内容
    出演者名
  • 時間(分)
  • 12:45
  • 受付開始
    受付後、お好きな席にお座りください。
  • 15分
  • 13:00
  • 開催のあいさつ
    主催者
  • 5分
  • 13:05
  • Transformative Web Design ~ 変化にしなやかに対応するデザイン力
    長谷川恭久
  • 40分
  • 13:45
  • レスポンシブWebデザインを 商業(ビジネス)サイトで実現するための考えと仕組み
    菊池崇
  • 30分
  • 14:15
  • 休憩
  • 10分
  • 14:25
  • マルチデバイス対応に最適な手法「デザインニング・イン・ブラウザ」
    斎藤祐也
  • 40分
  • 15:05
  • 休憩
  • 10分
  • 15:15
  • 「制作」から「開発」へ、そして最先端へ - Webアプリ開発の現状と未来
    白石俊平
  • 40分
  • 15:55
  • 休憩
  • 10分
  • 16:05
  • OneWebにする前に、コンテンツを見直そう!コンテンツ・ストラテジーの意味。
    佐々木朋美
  • 40分
  • 16:45
  • 質疑応答
    登壇者
  • 10分
  • 16:55
  • 閉会のあいさつ
    主催者
  • 5分

こんな方にはぜひともご参加いただきたいです

対象者

技術的な内容をテーマに開催いたしますが、テクニカルな情報はあまりなく 今後のサイト設計や進化するワークフローなどのご紹介や、最先端情報のご紹介のため ディレクターの方にもご参加いただける内容になっています。社内知識を統一するためにも プログラマー、コーダー、デザイナー、ディレクターのみなさまにご参加いただきたいです。

  • 海外情報/サイト制作情報をいち早く習得されたい方
  • Webアプリケーションでできることを知りたい方
  • アプリケーション開発で多デバイスに悩まされている方
  • 今後のサイト設計をどうしたら良いか迷われている方
  • 多くのデバイスに対応しなくてはならいと悩んでいる方

Page Top