開催日:

2013/3/9(Sat.)

コーダー・マークアップエンジニア・Webデザイナー・Webディレクター・Web担当者・Webサイト発注者

マルチデバイス時代の新常識レスポンシブWebデザインの今と未来

マルチデバイス化対応のためにレスポンシブWebデザインは必須になる技術です。なぜレスポンシブWebデザインが選べる技術なのか?レスポンシブWebデザインを構築する上でのノウハウと今後についてご紹介いたします。

2012年に日本でもレスポンシブWebデザインは話題となりバズワードのひとつとなっています。メリット、デメリットが語られていますが、人それぞれの見解で情報が散漫している状況です。振り分けに限界がでて結局レスポンシブWebデザインが選択される場面が今後より増えてくるでしょう。しかし、レスポンシブWebデザインについてのキチンとした情報、ノウハウを知っていなければ正しいレスポンシブWebデザインのサイトを作ることができません。デザインが切り替わるだけの手法だけを真似てもレスポンシブWebデザインの本質を学ぶことができません。今回のDoubbbleではレスポンシブWebデザインを実装するためのノウハウ、と近未来についてご紹介いたします。

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

概要

イベント名 SwapSkills doubbble(9)
マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来
日時 2013年3月9日()13:15 〜 17:00(13:00受付開始)
会場 きゅりあん
定員 200名
スピーカー
対象者
  • Webディレクター
  • Webデザイナー
  • コーダー
  • マークアップエンジニア
  • Web担当者
  • Webサイト発注者

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

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

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

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

セッションタイトル

レスポンシブWebデザインで変わるワークフロー

レスポンシブWebデザイン(RWD)でウェブサイトを作るには、いままでと同じやり方では進めにくいことがあります。たとえば、Photoshopでカンプを作ってHTMLにおこしていくようなやり方では、複数の画面サイズに対応するRWDでは無理が生じてしまいます。では、RWDでの制作には、どのようなワークフローが必要なのか?ワークフローを変えるにはどのようなことが必要なのか?担当ウェブサイトをRWDでリニューアルした際の体験談を交えつつご紹介します。

  • RWDの基礎:おさえるべきポイント
  • ワークフローはこう変わるべき
  • ワークフローを変えるために必要なこと
  • 事例の紹介
写真 渡辺竜

渡辺 竜(わたなべ りょう)

  • テンプル大学ジャパンキャンパス ウェブマスター

1974年東京生まれ。都立新宿高校45回生。米タフツ大学を1998年に卒業後、ボストンと東京の制作会社でウェブ制作に従事。現在はテンプル大学ジャパンキャンパスでウェブサイトの制作・運営に携わる。

セッションタイトル

レスポンシブWebデザインのパフォーマンスチューニング

レスポンシブWebデザイン(以下RWD)はパソコン用の画像をスマホにも読み込ませてしまうことがデメリットとされています。対策としてJavaScriptで画像の切り替えを行う方法などが取られているが実際にはどの方法が賢明なのでしょうか?
2013年現在、既にパフォーマンスアップに関してのメソッドは多くでていますが、RWDを実装した際にどのようなパーフォマンスチューニングが最適化なのかを実例を用いながら解説いたします。

  • レスポンシブWebデザインだからこそ考える高速化
  • パフォーマンスチェック
  • パフォーマンスチューニング
写真:諸星一行

諸星 一行(もろほし かずゆき)

  • 株式会社Lei Hau'oli フロントエンドエンジニア

2009年、株式会社レイハウオリに入社。長年のHTML/CSSの経験値を生かし、フロントエンドエンジニアとして同社のハイパフォーマンスHTMLのサービスを支える。株式会社リクルートの主要サービスのフロントを担う他、大のガジェット好き(自前の検証端末は数知れず)、趣味でもあるカメラなど個性を生かしたWORKで、幅広くクリエイティブ制作に貢献。好きな言葉は「可愛いは正義」。好きな色はピンク。

写真:猪狩丈治

猪狩 丈治(いがり たけはる)

  • 株式会社Lei Hau'oli フロントエンドエンジニア兼エバンジェリスト

2008年、設立間もない株式会社レイハウオリに入社、経験ゼロからのキャリアスタート。1年目よりレイハウオリが掲げるハイパフォーマンスHTMLのクオリティを維持しながら年間1,000を超えるページのマークアップを行うことで、未経験から大きくスキルアップ。現在では株式会社リクルートの主要サービスのフロントをリードする他、技術評論社「WEB+DB PRESS」などの特集執筆を行うなど対外活動も活発に行う。

セッションタイトル

ツールで直感的にレスポンシブWebデザインが作成できる!

レスポンシブWebデザイン(以下RWD)の実装を画面を見ながら直感的にデザインできるツールが発売予定されています。RWDの基本的なレイアウトの実装方法やいくつかのパターンの実装をデモ踏まえ新しいツールの可能性をご紹介いたします。

  • レスポンシブWebデザインのレイアウトの基本
  • レスポンシブWebデザインのレイアウトパターン
  • デモ
  • Adobe Edge Inspectとの同期
写真:轟啓介

轟 啓介 (とどろき けいすけ)

  • アドビシステムズ株式会社 エバンジェリスト

1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野でJ2EE開発に携わるが、Flexとの衝撃的な出会いを機にRIAの世界へ。 2008年4月、アドビシステムズ入社。 Web製品全般のデベロッパーマーケティングを担当。 Twitter ID : @keisuke322

セッションタイトル

フルードグリットを理解することからレスポンシブWebデザインは始まる

ブレイクポイントでレイアウトが変わるデザインをレスポンシブWebデザインと考えている方が多いようですが、その間の端末にも対応できるのがレスポンシブWebデザインの基本的な考え方です。つまり、ブレイクポイントとブレイクポイント間のサイズにあたるデバイスでもレイアウトが乱れたり文字被りせず綺麗に見えることが前提ということになります。美しいデザインをみせるためには正しく計算されたグリットシステムが必要です。このセッションではフルードグリットについて正しく理解していただき、次なるレスポンシブWebデザインの未来についてご紹介いたします。

  • 正しいのレスポンシブWebデザインとは
  • なぜフルードグリットが必要なのか?
  • ブレイクポイントはどこに設定がベスト?
  • クリックしやすいレイアウトの実装方法
  • RWDの今後と未来
写真 菊池崇

菊池 崇(きくち たかし)

  • Web Directions East CEO

世界最高峰のカンファレンスWeb Directions Eastの代表。大手IT企業、システム会社、Web制作会社のコンサルティングを行う。企業向け研修、イベント出演、書籍の執筆などを行う。自身でも大手通信会社のアプリ案件のUIを担当。モバイルファースト、レスポンシブWebデザインなど最新情報を日本のWebメディアにいち早く寄稿し話題を提供している。

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

タイムテーブル

  • 開始時間
  • セッション内容
    出演者名
  • 時間(分)
  • 13:00
  • 受付開始
    受付後、お好きな席にお座りください。
  • 15分
  • 13:15
  • 開催のあいさつ
    主催者
  • 5分
  • 13:20
  • レスポンシブWebデザインで変わるワークフロー
    渡辺 竜
  • 50分
  • 14:10
  • 休憩
  • 15分
  • 14:25
  • レスポンシブWebデザインのパフォーマンスチューニング
    諸星 一行/猪狩 丈治
  • 50分
  • 15:15
  • ツールで直感的にレスポンシブWebデザインが作成できる!
    轟 啓介
  • 30分
  • 15:55
  • 休憩
  • 15分
  • 16:10
  • フルードグリットを理解することからレスポンシブWebデザインは始まる
    菊池 崇
  • 50分
  • 16:50
  • 閉会のあいさつ/抽選会
    主催者
  • 10分

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

対象者

  • Webディレクター
  • Webデザイナー
  • コーダー
  • マークアップエンジニア
  • Web担当者
  • Webサイト発注者

Page Top