SlideShare a Scribd company logo
1 of 178
Download to read offline
Responsive Web Design について
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
Responsive Web Design

        とは?
Responsive
  Design
  とは?
Responsive
  Design
  とは?




             http://www.creativesurvey.jp

             http://adaptive-images.com/
Responsive
  Design
  とは?




   スクリーン幅に応じて、レイアウトを変える手法
Responsive
  Design
  とは?




   スクリーン幅に応じて、レイアウトを変える手法




             レイアウトの話
Responsive
  Design
  とは?


             なぜ注目されているのか?
Responsive
  Design
  とは?


             なぜ注目されているのか?

 • 様々なデバイスに適応できる
Responsive
  Design
  とは?


             なぜ注目されているのか?

 • 様々なデバイスに適応できる
 • 発行されるURLが一つである
Responsive
  Design
  とは?


             なぜ注目されているのか?

 • 様々なデバイスに適応できる
 • 発行されるURLが一つである
 • 最新の技術を使用している
Responsive
  Design
  とは?


             なぜ注目されているのか?

 • 様々なデバイスに適応できる
                        特徴なので
 • 発行されるURLが一つである       後述します
 • 最新の技術を使用している
Responsive
  Design
  とは?


             なぜ注目されているのか?

 • 様々なデバイスに適応できる
                        特徴なので
 • 発行されるURLが一つである       後述します
 • 最新の技術を使用している
 • 新しい考え方への転換
Responsive       新しい
  Design
  とは?            考え方




             Progressive Enhancement
Responsive       新しい
  Design
  とは?            考え方




             Progressive Enhancement

                最新のUA(User Agent)で、
              最高のUX(User Experience)を。
Responsive
              Progressive
  Design
             Enhancement
  とは?




    Responsive Design ≠ Cross Browser
Responsive
              Progressive
  Design
             Enhancement
  とは?




    Responsive Design ≠ Cross Browser
             伝える情報をきちんと伝える
Responsive
              Progressive
  Design
             Enhancement
  とは?




    Responsive Design ≠ Cross Browser
             伝える情報をきちんと伝える

             UAに応じたUXを提供する
Responsive
               Progressive
  Design
              Enhancement
  とは?




    Responsive Design ≠ Cross Browser
              伝える情報をきちんと伝える

               UAに応じたUXを提供する



             ビジュアルエレメントが先行しない
Responsive
              Progressive
  Design
             Enhancement
  とは?




                  STRATEGY

                             SCOPE

                                     STRUCTURE

                                                 SKELTON

                                                           SURFACE
Responsive
              Progressive
  Design
             Enhancement
  とは?


                 Cross Browser / Regressive Enhancement の一般的なタイムライン


                  STRATEGY

                              SCOPE

                                        STRUCTURE

                                                    SKELTON

                                                              SURFACE
Responsive
              Progressive
  Design
             Enhancement
  とは?


                 Responsive Designのタイムライン


                  STRATEGY

                              SCOPE

                                       STRUCTURE

                                                   SKELTON

                                                             SURFACE
Responsive
              Progressive
  Design
             Enhancement
  とは?
                                            情報を構造をふまえて表現する


                 Responsive Designのタイムライン


                  STRATEGY

                              SCOPE

                                        STRUCTURE

                                                    SKELTON

                                                              SURFACE




                                        様々なレイアウトを考慮すると、
                                      視覚構造と情報構造のミスマッチがおきる
Responsive
                   Progressive
  Design
                  Enhancement
  とは?




                                       一つの幹が複数の枝を持つ
        HTML                           「分木構造」


                                    表層構造 = 情報構造
HEAD              BODY


         HEADER           ARTICLE   FOOTER
Responsive
              Progressive
  Design
             Enhancement
  とは?
                                            情報を構造をふまえて表現する


                 Responsive Designのタイムライン


                  STRATEGY

                              SCOPE

                                        STRUCTURE

                                                    SKELTON

                                                              SURFACE




                                        様々なレイアウトを考慮すると、
                                      視覚構造と情報構造のミスマッチがおきる
Responsive
  Design
  とは?




    Responsive ≠ Liquid / Fluid Layout
             混同しやすいイメージ
Responsive
             混同しやすい
  Design
  とは?         イメージ




         Webデザインのレイアウト手法
             1. Fixed Layout
                ・固定幅中央     え

             2. Liquid / Fluid Layout
                ・可変幅 横幅目一杯

             3. Flexible Layout
                ・可変幅 最大値 / 最小値を固定

             4. Elastic Layout
                ・幅を文字数から決定する
Responsive
             混同しやすい
  Design
  とは?          イメージ




Liquid / Fluid Layout
 http://andreagandino.com/


Responsive Web Design
 http://www.creativesurvey.jp/
 http://adaptive-images.com/
Responsive
             混同しやすい
  Design
  とは?          イメージ




Liquid / Fluid Layout
 http://andreagandino.com/


Responsive Web Design
 http://www.creativesurvey.jp/   Liquid の時もある
 http://adaptive-images.com/
                                 Fixed の時もある
Responsive
                混同しやすい
  Design
  とは?            イメージ




    レスポンシブデザインのレイアウトは?

                    CSS3を使って、
             Fixed / Liquid Layout を使い分ける
Responsive
             混同しやすい   Layout
  Design
                      使い分け
  とは?         イメージ




  CSS3は古いブラウザでは動かないのでは?
Responsive
                   混同しやすい            Layout
  Design
                                     使い分け
  とは?               イメージ



                                     IE10                Firefox
 IE6         IE7    IE8     IE9                 Chrome             Safari
                                  (12. 10/26)             (3.5+)

  X          X      X      ▲          o           o        o        o

                                                IE7 4%前後
                                                IE8 20%前後

                                     1/4に対応できない?
Responsive
               混同しやすい   Layout
  Design
                        使い分け
  とは?           イメージ




             CSS は 「使い分け」のスイッチ
Responsive
               混同しやすい   Layout
  Design
                        使い分け
  とは?           イメージ




             CSS は 「使い分け」のスイッチ




  1. 使い分け前の状態を通常のサイトとする
Responsive
               混同しやすい   Layout
  Design
                        使い分け
  とは?           イメージ




             CSS は 「使い分け」のスイッチ




  1. 使い分け前の状態を通常のサイトとする
      2. 「使い分け」を別の方法で実現する
Responsive
              混同しやすい      Layout
   Design
                          使い分け
   とは?          イメージ



              CSS3は古いブラウザでは動かないのでは?




                                      Responsive


CSSによる使い分けを使わない状態も一つの適応例
まとめ
Responsive Web Design

       とは?
スクリーン幅に応じて、レイアウトを変える手法
スクリーン幅に応じて、レイアウトを変える手法



      Progressive   Layout
     Enhancement    使い分け
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
Responsive Web Design

    メリット・デメリット
メリット
デメリット




   Responsive Web Design : メリット


   様々なデバイスに    発行されるURLが
                           CSSシフト
       適応できる    一つである
メリット
デメリット




   Responsive Web Design : メリット


   様々なデバイスに    発行されるURLが
                           CSSシフト
       適応できる    一つである
メリット    様々な
デメリット   デバイス
メリット    様々な
デメリット   デバイス




               SmartTV?
メリット          様々な
 デメリット          デバイス




SmartGadgets?          SmartTV?
メリット            様々な
 デメリット           デバイス




SmartGadgets?                         SmartTV?


         特定のデバイスをターゲットとせずに、広く情報を発信できる

                「シームレスにレイアウトを適応させる」
メリット            様々な
 デメリット           デバイス




SmartGadgets?                                SmartTV?


         特定のデバイスをターゲットとせずに、広く情報を発信できる

                「シームレスにレイアウトを適応させる」

                   Progressive Enhancement
メリット    様々な
デメリット   デバイス
メリット        様々な
デメリット       デバイス




        UAに応じて+αのUXを余白だった部分に展開できる
メリット        様々な
デメリット       デバイス




        UAに応じて+αのUXを余白だった部分に展開できる


             Progressive Enhancement
メリット
デメリット




   Responsive Web Design : メリット


   様々なデバイスに    発行されるURLが
                           CSSシフト
       適応できる    一つである
メリット      URLが
デメリット     ひとつ




  複数の最適化ページの場合
メリット      URLが
デメリット     ひとつ




  複数の最適化ページの場合   Responsive Web Designの場合
メリット    URLが
デメリット   ひとつ




          修正 / 更新作業
メリット    URLが
デメリット   ひとつ



          修正 / 更新作業
メリット        URLが
デメリット       ひとつ



                   ただし、



         HTML        CSS     JavaScript
       データソース      データ修飾   UAに応じた処理




       データ / ヴィジュアルが分離していれば
       データのみの変更ですべてに適応できる
メリット    URLが
デメリット   ひとつ




               SEO
メリット                                      URLが
        デメリット                                       ひとつ



                                                                           SEO




                                                      Googlebotくん                                          Googlebotくん

http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.co.jp/ja/jp/intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf
メリット    URLが
デメリット   ひとつ




         サーバーアプリケーション
メリット    URLが
デメリット   ひとつ




               サーバーアプリケーション




                     フルスクラッチ
メリット            URLが
 デメリット           ひとつ




                        サーバーアプリケーション

デバイス振り分けロジック
デバイス分のテンプレート検証


                              フルスクラッチ
メリット            URLが
 デメリット           ひとつ




                        サーバーアプリケーション

デバイス振り分けロジック
デバイス分のテンプレート検証


                              フルスクラッチ




                  デバイス振り分けロジック
                  デバイス分のテンプレート検証
                  をHTMLに依存させる
メリット            URLが
 デメリット           ひとつ




                        サーバーアプリケーション

デバイス振り分けロジック
デバイス分のテンプレート検証


                              フルスクラッチ




                  デバイス振り分けロジック
                  デバイス分のテンプレート検証
                  をHTMLに依存させる




               バックエンドとフロントエンドの分離
メリット
デメリット




   Responsive Web Design : メリット


   様々なデバイスに    発行されるURLが
                           CSSシフト
       適応できる    一つである
メリット
           CSSシフト
デメリット




        JavaScriptや画像の扱いを工夫する必要があった。
        その副作用としていくつかのメリットがあった。
メリット
               CSSシフト
デメリット




            JavaScriptや画像の扱いを工夫する必要があった。
            その副作用としていくつかのメリットがあった。




 ロジック/ヴィジュアル
       分離
メリット
               CSSシフト
デメリット




            JavaScriptや画像の扱いを工夫する必要があった。
            その副作用としていくつかのメリットがあった。




 ロジック/ヴィジュアル
                     パフォーマンス
       分離
メリット
               CSSシフト
デメリット




            JavaScriptや画像の扱いを工夫する必要があった。
            その副作用としていくつかのメリットがあった。




 ロジック/ヴィジュアル                        レイアウト変更に
                     パフォーマンス
       分離                           関わる画像変更
ロジック
メリット
           CSSシフト    ビジュアル
デメリット
                       分離




        ヴィジュアルにタッチする部分をCSSに限定した。
ロジック
メリット
           CSSシフト      ビジュアル
デメリット
                         分離




        ヴィジュアルにタッチする部分をCSSに限定した。




          さりげないJavaScriptの実現に貢献した
ロジック
メリット
            CSSシフト      ビジュアル
デメリット
                          分離




        ヴィジュアルにタッチする部分をCSSに限定した。




           さりげないJavaScriptの実現に貢献した




         HTML
       データソース
ロジック
メリット
            CSSシフト       ビジュアル
デメリット
                             分離




        ヴィジュアルにタッチする部分をCSSに限定した。




           さりげないJavaScriptの実現に貢献した




         HTML          CSS
       データソース        データ修飾
ロジック
メリット
            CSSシフト       ビジュアル
デメリット
                             分離




        ヴィジュアルにタッチする部分をCSSに限定した。




           さりげないJavaScriptの実現に貢献した




         HTML          CSS          JavaScript
       データソース        データ修飾        UAに応じた処理
ロジック
メリット
            CSSシフト       ビジュアル
デメリット
                             分離




        ヴィジュアルにタッチする部分をCSSに限定した。




           さりげないJavaScriptの実現に貢献した


                                           低機能UA:補助
                                           高機能UA:追加 

         HTML          CSS          JavaScript
       データソース        データ修飾        UAに応じた処理
メリット
             CSSシフト        パフォーマンス
デメリット




        Progressive Enhancementの考えに実現したかった。
               IEでアニメーションをやめた。
メリット
              CSSシフト        パフォーマンス
 デメリット




         Progressive Enhancementの考えに実現したかった。
                IEでアニメーションをやめた。



それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
メリット
              CSSシフト        パフォーマンス
 デメリット




         Progressive Enhancementの考えに実現したかった。
                IEでアニメーションをやめた。



それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる




                 さらなる
             ロジック/ヴィジュアル   パフォーマンス改善
                  分離
メリット
        CSSシフト    画像置換
デメリット




        画像テキストの使いどころが難しい
メリット
              CSSシフト   画像置換
デメリット




       画像               画像


       画像               画像


       デバイステキストブロック     デバイステキスト
                        ブロック
メリット
          CSSシフト     画像置換
デメリット




          画像テキストの使いどころが難しい




  テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
メリット
          CSSシフト     画像置換
デメリット




          画像テキストの使いどころが難しい




  テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した




   柔軟なレイアウト
メリット
          CSSシフト     画像置換
デメリット




          画像テキストの使いどころが難しい




  テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した




   柔軟なレイアウト   ファイル転送量縮小
メリット
          CSSシフト     画像置換
デメリット




          画像テキストの使いどころが難しい




  テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した




   柔軟なレイアウト   ファイル転送量縮小     Retina対応簡略化
メリット
デメリット




  Responsive Web Design : デメリット


    開発コストが   モバイル向けの     プラグイン・広告
    割高である?   ”最適化”ではない     に注意
メリット
デメリット




  Responsive Web Design : デメリット


    開発コストが   モバイル向けの     プラグイン・広告
    割高である?   ”最適化”ではない     に注意
メリット
        開発コスト
デメリット




  開発コストが高いという印象を持たれている
メリット
         開発コスト
デメリット




  開発コストが高いという印象を持たれている




        それほど難しいと感じなかった
メリット
         開発コスト
デメリット




  開発コストが高いという印象を持たれている


                 なぜ?


        それほど難しいと感じなかった
メリット
        開発コスト
デメリット




1. 制作者の習熟度に依存する部分が大きい

2. 設計:実装が密に連携する場面がある可能性が強い
メリット
デメリット




  Responsive Web Design : デメリット


    開発コストが   モバイル向けの     プラグイン・広告
    割高である?   ”最適化”ではない     に注意
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?


         モバイルに適したコンテンツ
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?


         モバイルに適したコンテンツ

         モバイルに適したレイアウト
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?


         モバイルに適したコンテンツ

         モバイルに適したレイアウト

          ファイル転送量の削減
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?


         モバイルに適したコンテンツ

         モバイルに適したレイアウト

          ファイル転送量の削減
メリット    モバイル   コンテンツ
 デメリット   最適化    レイアウト




(実装的な)無理が生じない分にはResponsiveで対応可能




 モバイルでしかできないことはモバイルでやるべき
   条件分岐の処理分のパフォーマンスは落ちる
メリット      モバイル
デメリット     最適化




        モバイル向けの最適化とは何か?


         モバイルに適したコンテンツ

         モバイルに適したレイアウト

          ファイル転送量の削減
メリット       モバイル   不必要な
デメリット      最適化     画像




        不必要な画像の読み込みが発生する?
メリット       モバイル
デメリット      最適化




        不必要な画像の読み込みが発生する?




   imgタグ              背景画像
メリット       モバイル
デメリット      最適化




       imgタグと背景画像の2パターンで実験




                  ウィンドウサイズ
メリット       モバイル
デメリット      最適化




        imgタグ:ページ読み込み時のリソース
メリット       モバイル
デメリット      最適化




        背景画像:ページ読み込み時のリソース
メリット       モバイル
デメリット      最適化




        非表示の背景画像は読み込まれません
メリット           モバイル
デメリット          最適化




        非表示の背景画像は読み込まれません




  データソースとしての
        HTML
メリット           モバイル
デメリット          最適化




        非表示の背景画像は読み込まれません




  データソースとしての          表示装飾としての
        HTML             CSS
メリット           モバイル
デメリット          最適化




        非表示の背景画像は読み込まれません




  データソースとしての          表示装飾としての
        HTML             CSS

 表示すべき=読み込むべき
メリット       モバイル
デメリット      最適化




        不必要な画像の読み込みが発生する?




   imgタグ              背景画像


                      CSSシフト
メリット        モバイル
デメリット       最適化




                   ブラウザのハック
   背景画像              実装の手間

   CSSシフト
                   imgである必要がある
メリット        モバイル
デメリット       最適化




                   ブラウザのハック
   背景画像              実装の手間

   CSSシフト
                   imgである必要がある




        不必要な画像の読み込みは発生します
メリット
デメリット




  Responsive Web Design : デメリット


    開発コストが   モバイル向けの     プラグイン・広告
    割高である?   ”最適化”ではない     に注意
メリット    プラグイン
デメリット    広告




        可変サイズに対応できるか
        見えないときに動作するか
まとめ
メリット                  デメリット




         CSSシフト                 開発コスト




様々なデバイスに      発行されるURLが
                          モバイル最適化       プラグイン
 適応できる            一つである
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
Responsive Web Design

        プロセス
ブラウザごとの
挙動を決定する
ブラウザ
プロセス
               挙動




                    CSS3 対応表

                              IE10                Firefox
IE6    IE7   IE8     IE9                 Chrome             Safari
                           (12. 10/26)             (3.5+)

X      X     X       ▲         o           o        o        o
ブラウザ
プロセス
                        挙動




                              CSS3 対応表

                                        IE10                     Firefox
 IE6       IE7       IE8       IE9                  Chrome                     Safari
                                     (12. 10/26)                  (3.5+)

  X         X         X        ▲         o            o            o            o




                                        IE10                     Firefox
 IE6       IE7       IE8       IE9                  Chrome                     Safari
                                     (12. 10/26)                  (3.5+)

default   default   default    !     responsive    responsive   responsive   responsive
ブラウザ
プロセス
                          挙動




                                CSS3 対応表

                                          IE10                     Firefox
 IE6       IE7         IE8       IE9                  Chrome                     Safari
                                       (12. 10/26)                  (3.5+)

  X         X           X        ▲         o            o            o            o



                    可変カラム不可!!
                                          IE10                     Firefox
 IE6       IE7         IE8       IE9                  Chrome                     Safari
                                       (12. 10/26)                  (3.5+)

default   default     default    !     responsive    responsive   responsive   responsive
ブラウザ
プロセス
               挙動




  ヴィジュアルデザインを組む上での制約が決定



       IE9 > IE8 モード, default: 1024px fixed
ヴィジュアル
デザイン
ヴィジュアル
プロセス
         デザイン



       レイアウト分岐数を決める

 例えば5つ
                0. 1200px +

                1. 1024px

                2. 768px

                3. 480px

                4. 320px
ヴィジュアル
プロセス
         デザイン



       レイアウト分岐数を決める

                0. 1200px +   ページ単位ではなく
 例えば5つ
                              ボックス単位。

                1. 1024px     レイアウトに変更が
                              あれば作成する。
                2. 768px

                3. 480px

                4. 320px
ヴィジュアル
プロセス
       デザイン



       レイアウトを決める
       1. Fixed Layout
          ・固定幅中央     え

       2. Liquid / Fluid Layout
          ・可変幅 横幅目一杯

       3. Flexible Layout
          ・可変幅 最大値 / 最小値を固定

       4. Elastic Layout
          ・幅を文字数から決定する
ヴィジュアル
プロセス
       デザイン



       レイアウトを決める
       1. Fixed Layout            1024~768のように
          ・固定幅中央     え            シームレスを
       2. Liquid / Fluid Layout   前提として
          ・可変幅 横幅目一杯              レイアウトを決定。

       3. Flexible Layout
          ・可変幅 最大値 / 最小値を固定

       4. Elastic Layout
          ・幅を文字数から決定する
ヴィジュアル
プロセス
       デザイン



       レイアウトを決める
       1. Fixed Layout            1024~768のように
          ・固定幅中央     え            シームレスを
       2. Liquid / Fluid Layout   前提として
          ・可変幅 横幅目一杯              レイアウトを決定。

       3. Flexible Layout
          ・可変幅 最大値 / 最小値を固定

       4. Elastic Layout          ワイヤーフレームで
          ・幅を文字数から決定する            も同様に、
                                  カラムになる場合は
                                  レイアウトを考える
実装
プロセス    実装




       シームレスかどうか
プロセス            実装




             シームレスかどうか

       画像


       画像


       デバイステキストブロック
プロセス            実装




             シームレスかどうか

       画像             画像


       画像             画像


       デバイステキストブロック   デバイステキスト
                      ブロック
実装




           シームレスかどうか           はみ出る



     画像             画像


     画像             画像


     デバイステキストブロック   デバイステキスト
                    ブロック


                               折り返す
プロセス   実装




文章構造と情報構造が一致しているか
プロセス           実装




文章構造と情報構造が一致しているか

       メニュー1        文言変更


       メニュー2        並び順
プロセス           実装




文章構造と情報構造が一致しているか

       メニュー1        文言変更 


       メニュー2        並び順 ▲
プロセス           実装




文章構造と情報構造が一致しているか

       メニュー1        文言変更 


       メニュー2        並び順 ▲


                            隠しておく
プロセス            実装




文章構造と情報構造が一致しているか




         HTML          CSS     JavaScript
       データソース        データ修飾   UAに応じた処理
プロセス            実装




文章構造と情報構造が一致しているか

  ページ読み込みの段階から
   変更を加える考え方はNG




         HTML          CSS     JavaScript
       データソース        データ修飾   UAに応じた処理
プロセス   実装




       STRATEGY

                  SCOPE

                          STRUCTURE

                                      SKELTON

                                                SURFACE
プロセス      実装




           STRATEGY

                      SCOPE

                              STRUCTURE

                                          SKELTON

                                                    SURFACE




  弊社内で完結したのでスムーズだったが、実際の案件単位では未知数
まとめ
まとめ




レイアウト
 挙動
まとめ




レイアウト   ビジュアル
 挙動     デザイン
まとめ




レイアウト   ビジュアル
                実装協議
 挙動     デザイン
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
Responsive Web Design

         設計
情報を構造をふまえて表現する


        Responsive Designのタイムライン


         STRATEGY

                     SCOPE

                              STRUCTURE

                                          SKELTON

                                                    SURFACE




                               様々なレイアウトを考慮すると、
                             表層構造と情報構造のミスマッチがおきる
表層構造 = 情報構造
情報を構造をふまえて表現する


        Responsive Designのタイムライン


         STRATEGY

                     SCOPE

                              STRUCTURE

                                          SKELTON

                                                    SURFACE




                               様々なレイアウトを考慮すると、
                             表層構造と情報構造のミスマッチがおきる
表層構造 = 情報構造
             重要!
どのぐらい重要?

  STRATEGY

             SCOPE

                     STRUCTURE

                                 SKELTON

                                           SURFACE




  表層構造 = 情報構造
どのぐらい重要?

  STRATEGY

             SCOPE

                     STRUCTURE

                                 SKELTON             ユーザーに負荷
                                           SURFACE




                                   実現不可能       非効率な処理

  表層構造 = 情報構造
どのぐらい重要?

  STRATEGY

             SCOPE

                     STRUCTURE

                                 SKELTON             ユーザーに負荷
                                           SURFACE




                                   実現不可能       非効率な処理

  表層構造 = 情報構造
どのぐらい重要?

  STRATEGY

              SCOPE

                      STRUCTURE

                                  SKELTON             ユーザーに負荷
                                            SURFACE




                                    実現不可能       非効率な処理

  表層構造 = 情報構造




              事故を前提にするようなもの

             コスト              スケジュール                  クオリティ
言い換えると
今までのリニアなやり方なら、
 表層構造はある程度無視できた


STRATEGY

           SCOPE

                    STRUCTURE

                                SKELTON

                                          SURFACE
                   今まで以上に
                    両面から
                   考える必要性




                   高度化
どのように高度化するのか。

     STRATEGY

                SCOPE

                         STRUCTURE

                                     SKELTON

                                               SURFACE
                        今まで以上に
                         両面から
                        考える必要性



    今までと同様
どのように高度化するのか。

     STRATEGY

                SCOPE

                          STRUCTURE

                                      SKELTON

                                                SURFACE
                        今まで以上に
                         両面から
                        考える必要性



                                           表層構造において
                                 あるべき姿を理解する

    HTML構造              HTMLタグの意味                実装コスト
どのように高度化するのか。

     STRATEGY

                SCOPE

                          STRUCTURE

                                      SKELTON

                                                SURFACE
                        今まで以上に
                         両面から
                        考える必要性



                                           表層構造において
   それって現実的?
                                 あるべき姿を理解する

    HTML構造              HTMLタグの意味                実装コスト
理想的な解決
理想的な解決


  ・情報設計の担当がもともと知識が超豊富
   HTMLや最新のJS/CSS事情にも詳しいレベル




  ・情報設計の担当がそのままデザインと実装を行う
   自己完結すれば問題が顕在化しない。




  ・情報設計の必要がないぐらい作るものがシンプル
理想的な解決


? ・情報設計の担当がもともと知識が超豊富
   HTMLや最新のJS/CSS事情にも詳しいレベル




  ・情報設計の担当がそのままデザインと実装を行う
   自己完結すれば問題が顕在化しない。




  ・情報設計の必要がないぐらい作るものがシンプル
理想的な解決


? ・情報設計の担当がもともと知識が超豊富
   HTMLや最新のJS/CSS事情にも詳しいレベル




? ・情報設計の担当がそのままデザインと実装を行う
   自己完結すれば問題が顕在化しない。




  ・情報設計の必要がないぐらい作るものがシンプル
理想的な解決


? ・情報設計の担当がもともと知識が超豊富
   HTMLや最新のJS/CSS事情にも詳しいレベル




? ・情報設計の担当がそのままデザインと実装を行う
   自己完結すれば問題が顕在化しない。




? ・情報設計の必要がないぐらい作るものがシンプル
                   今あるレスポンシブデザインはこういうものが多い
現実的な解決



  1:専門知識は専門家に。


  2:担当領域の分担と分離。
1:専門知識は専門家に。

  STRATEGY

             SCOPE

                        STRUCTURE

                                    SKELTON

                                              SURFACE

                     IA担当だけでなく
                     みんなで考える
1:専門知識は専門家に。

  STRATEGY

             SCOPE

                        STRUCTURE

                                    SKELTON

                                               SURFACE

                     IA担当だけでなく
                     みんなで考える
                                       デザイナー
                                      デベロッパー
                                       エンジニア
1:専門知識は専門家に。

  STRATEGY

             SCOPE

                        STRUCTURE
                                        WFは仕様書ではなくなる
                                    SKELTON

                                               SURFACE

                     IA担当だけでなく
                     みんなで考える
                                       デザイナー
                                      デベロッパー
                                       エンジニア


             反復型チーム開発マネジメント
1:専門知識は専門家に。

  STRATEGY

             SCOPE

                     STRUCTURE
                                     WFは仕様書ではなくなる
                                 SKELTON


   情報設計の不確実性を
        IA担当だけでなく
                                            SURFACE



       サポートする体制
           みんなで考える
                                    デザイナー
                                   デベロッパー
                                    エンジニア


             反復型チーム開発マネジメント
2:担当領域の分担と分離

 STRATEGY

            SCOPE

                    STRUCTURE

                                SKELTON

                                          SURFACE




素材や分量や優先順位を               表層の専門領域を担保しながら
作り上げる。                    料理を仕上げて行く
現実的な解決


   1:専門知識は専門家に。
         情報設計のレイヤーで表層領域の専門性を付加。
         のちの変更を受け入れる意識的なマネジメント。




   2:担当領域の分担と分離。
         情報設計の工程を分担し、具体化を分離する。
         その後の検証も含めて分担できる可能性。
たとえば
STRATEGY

           SCOPE

                     STRUCTURE

                                 SKELTON

                                           SURFACE




              コンサル
               A社                             4D
                                              B社
たとえば
STRATEGY

           SCOPE

                        STRUCTURE

                                    SKELTON

                                              SURFACE




                   A社                            B社




           このやり方だとリスクが大きくなる
STRATEGY

            SCOPE

                       STRUCTURE

                                   SKELTON

                                             SURFACE
                    IA担当だけでなく
                    みんなで考える
                                   デザイナー
                                   デベロッパー
                                   エンジニア




素材や分量や優先順位を                   表層の専門領域を担保しながら
作り上げる。                        料理を仕上げて行く
たとえば
STRATEGY

            SCOPE

                     STRUCTURE

                     まとめ         SKELTON

                                           SURFACE

           コラボレーションが生まれる
           よりよい関係性が求められる

                A社                           B社


            このやり方だとリスクが大きくなる
Responsive Web Design   Responsive Web Design   Responsive Web Design   Responsive Web Design

        とは?                メリット・デメリット                  プロセス                      設計
ご清聴ありがとうございました!!
®


         ターゲット消費者のインサイトが「見える」リサーチツール

                 Get Insights for Better Design !!



          https://www.creativesurvey.jp/




ブログやソーシャルメディアで             LAB. BLOG
最新情報を更新しています。
                               ブログ                   facebook   Twitter

More Related Content

What's hot

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之schoowebcampus
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道schoowebcampus
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようMasayuki Abe
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインToshihiko Yamakami
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前にレスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前にYuki Nakane
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローHiroyuki Ogawa
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futuremasaaki komori
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法Hiroyuki Ogawa
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ力也 伊原
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~Horiguchi Seito
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法Keisuke Imura
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びSeiko Kuchida
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりtomoakitomono
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 

What's hot (20)

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
Web design
Web designWeb design
Web design
 
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前にレスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
 
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
 
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選びWeb制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 

Viewers also liked

Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒントWebデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒントYasuhisa Hasegawa
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意Yasuhisa Hasegawa
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Chihiro Tomita
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座Mariko Yamaguchi
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Yossy Taka
 
脱!Web制作における5年前の常識
脱!Web制作における5年前の常識脱!Web制作における5年前の常識
脱!Web制作における5年前の常識Mayumi Tanji
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』Naoki Matsuda
 
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)CREATIVE SURVEY
 
感情のコントロールの仕方について@おいカフェボウル
感情のコントロールの仕方について@おいカフェボウル感情のコントロールの仕方について@おいカフェボウル
感情のコントロールの仕方について@おいカフェボウルYuji Noguchi
 
【マインドセット5】
【マインドセット5】【マインドセット5】
【マインドセット5】Akkun Akkun
 
(プロ向け資料)ホールボディーカウンター 理想と現実
(プロ向け資料)ホールボディーカウンター 理想と現実(プロ向け資料)ホールボディーカウンター 理想と現実
(プロ向け資料)ホールボディーカウンター 理想と現実Ryu Hayano
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成Kazuki Akiyama
 
第2回気持ちと向き合う Opening
第2回気持ちと向き合う Opening第2回気持ちと向き合う Opening
第2回気持ちと向き合う OpeningfantasistaVppr
 
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...Fitzgerald Analytics, Inc.
 

Viewers also liked (20)

Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒントWebデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
Vpp手順 20140617
Vpp手順 20140617Vpp手順 20140617
Vpp手順 20140617
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
 
脱!Web制作における5年前の常識
脱!Web制作における5年前の常識脱!Web制作における5年前の常識
脱!Web制作における5年前の常識
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
 
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)
お客様の印象を見える化し、求められるデザインへ。ユーザーニーズに直結したデザイン戦略とは(MarkeZineDay2011)
 
感情のコントロールの仕方について@おいカフェボウル
感情のコントロールの仕方について@おいカフェボウル感情のコントロールの仕方について@おいカフェボウル
感情のコントロールの仕方について@おいカフェボウル
 
【マインドセット5】
【マインドセット5】【マインドセット5】
【マインドセット5】
 
実践Sass 前編
実践Sass 前編実践Sass 前編
実践Sass 前編
 
(プロ向け資料)ホールボディーカウンター 理想と現実
(プロ向け資料)ホールボディーカウンター 理想と現実(プロ向け資料)ホールボディーカウンター 理想と現実
(プロ向け資料)ホールボディーカウンター 理想と現実
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
Aircel Cloud BAAS (Backup As A Service)
Aircel Cloud BAAS (Backup As A Service)Aircel Cloud BAAS (Backup As A Service)
Aircel Cloud BAAS (Backup As A Service)
 
第2回気持ちと向き合う Opening
第2回気持ちと向き合う Opening第2回気持ちと向き合う Opening
第2回気持ちと向き合う Opening
 
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...
Analytics in Financial Services: Keynote Presentation for TDWI and NY Tech Co...
 
IoT×Emotion
IoT×EmotionIoT×Emotion
IoT×Emotion
 

Similar to レスポンシブ・ウェブデザイン -Responsive web design-

レスポンシブデザインってなに?
レスポンシブデザインってなに?レスポンシブデザインってなに?
レスポンシブデザインってなに?Yoshinori Kamaishi
 
レスポンシブデザイン
レスポンシブデザインレスポンシブデザイン
レスポンシブデザインKentarou Nakaoka
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれAkiko Kurono
 
ワンソースマルチユース
ワンソースマルチユースワンソースマルチユース
ワンソースマルチユースMultiDeviceLab
 
QualityとDeliveryを両立させるために僕らがやったこと
QualityとDeliveryを両立させるために僕らがやったことQualityとDeliveryを両立させるために僕らがやったこと
QualityとDeliveryを両立させるために僕らがやったことTakeshi Sekiguchi
 
開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?Junji Imaoka
 
お店のディスプレイ広告効果をインスタグラムで効果測定する-
お店のディスプレイ広告効果をインスタグラムで効果測定する-お店のディスプレイ広告効果をインスタグラムで効果測定する-
お店のディスプレイ広告効果をインスタグラムで効果測定する-tomomi kawakami
 
サービス開発における工程
サービス開発における工程サービス開発における工程
サービス開発における工程Hidetoshi Mori
 
メンバーズグループ アジャイル開発への取り組み
メンバーズグループ アジャイル開発への取り組みメンバーズグループ アジャイル開発への取り組み
メンバーズグループ アジャイル開発への取り組みHiroshi Tsukamoto
 
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考えるレスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考えるAkinori Kawamitsu
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化亮 門屋
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]Daisuke Yamazaki
 
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOpsJAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps智治 長沢
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」uenoyuuki
 
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~KojiKono1
 

Similar to レスポンシブ・ウェブデザイン -Responsive web design- (20)

レスポンシブデザインってなに?
レスポンシブデザインってなに?レスポンシブデザインってなに?
レスポンシブデザインってなに?
 
レスポンシブデザイン
レスポンシブデザインレスポンシブデザイン
レスポンシブデザイン
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
ワンソースマルチユース
ワンソースマルチユースワンソースマルチユース
ワンソースマルチユース
 
QualityとDeliveryを両立させるために僕らがやったこと
QualityとDeliveryを両立させるために僕らがやったことQualityとDeliveryを両立させるために僕らがやったこと
QualityとDeliveryを両立させるために僕らがやったこと
 
開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?
 
お店のディスプレイ広告効果をインスタグラムで効果測定する-
お店のディスプレイ広告効果をインスタグラムで効果測定する-お店のディスプレイ広告効果をインスタグラムで効果測定する-
お店のディスプレイ広告効果をインスタグラムで効果測定する-
 
サービス開発における工程
サービス開発における工程サービス開発における工程
サービス開発における工程
 
メンバーズグループ アジャイル開発への取り組み
メンバーズグループ アジャイル開発への取り組みメンバーズグループ アジャイル開発への取り組み
メンバーズグループ アジャイル開発への取り組み
 
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考えるレスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考える
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
Web
WebWeb
Web
 
Enterprise DevOps
Enterprise DevOpsEnterprise DevOps
Enterprise DevOps
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
 
Responsive design
Responsive designResponsive design
Responsive design
 
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOpsJAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps
JAWS FESTA Kansai 2013 | ビジネスに貢献する戦略的なITのためのDevOps
 
Synquery ja
Synquery jaSynquery ja
Synquery ja
 
User Centered Agile
User Centered AgileUser Centered Agile
User Centered Agile
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
 
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~
開発サイクルを爆速にする!~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~
 

More from CREATIVE SURVEY

Cs recruting material-210827
Cs recruting material-210827Cs recruting material-210827
Cs recruting material-210827CREATIVE SURVEY
 
Creative survey for salesforce【ver1.5】新機能のご紹介
Creative survey for salesforce【ver1.5】新機能のご紹介Creative survey for salesforce【ver1.5】新機能のご紹介
Creative survey for salesforce【ver1.5】新機能のご紹介CREATIVE SURVEY
 
20170328 CREATIVE SURVEY ENTERPRISE
20170328 CREATIVE SURVEY ENTERPRISE20170328 CREATIVE SURVEY ENTERPRISE
20170328 CREATIVE SURVEY ENTERPRISECREATIVE SURVEY
 
iPad の プロモーションコード利用方法
iPad の プロモーションコード利用方法iPad の プロモーションコード利用方法
iPad の プロモーションコード利用方法CREATIVE SURVEY
 
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-CREATIVE SURVEY
 
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -CREATIVE SURVEY
 
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -CREATIVE SURVEY
 
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-CREATIVE SURVEY
 
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -CREATIVE SURVEY
 
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -CREATIVE SURVEY
 

More from CREATIVE SURVEY (10)

Cs recruting material-210827
Cs recruting material-210827Cs recruting material-210827
Cs recruting material-210827
 
Creative survey for salesforce【ver1.5】新機能のご紹介
Creative survey for salesforce【ver1.5】新機能のご紹介Creative survey for salesforce【ver1.5】新機能のご紹介
Creative survey for salesforce【ver1.5】新機能のご紹介
 
20170328 CREATIVE SURVEY ENTERPRISE
20170328 CREATIVE SURVEY ENTERPRISE20170328 CREATIVE SURVEY ENTERPRISE
20170328 CREATIVE SURVEY ENTERPRISE
 
iPad の プロモーションコード利用方法
iPad の プロモーションコード利用方法iPad の プロモーションコード利用方法
iPad の プロモーションコード利用方法
 
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-
女性はグリー、男性はモバゲーのアプリデザインを支持!! -iphoneアプリデザイン調査-
 
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -
ユーザーの滞在時間が大幅増!! – 転職支援サービスサイトにおけるユーザーニーズの調査 -
 
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -
「キーワードは開放感!?」 - ブライダルフェア集客に適した画像に関する調査 -
 
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-
『女性が憧れる』理想の結婚式のイメージを伝えるウェブデザイン -横浜のホテルウェディング式場に関する調査事例-
 
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -
「キーワードは省エネ?明るさ?」- LED電球のパッケージデザイン調査 -
 
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -
「あなたはどんな部屋に泊まってみたい?」- 消費者に響くホテルの写真選び -
 

Recently uploaded

Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 

Recently uploaded (7)

Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 

レスポンシブ・ウェブデザイン -Responsive web design-

  • 1. Responsive Web Design について
  • 2. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 3. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 5. Responsive Design とは?
  • 6. Responsive Design とは? http://www.creativesurvey.jp http://adaptive-images.com/
  • 7. Responsive Design とは? スクリーン幅に応じて、レイアウトを変える手法
  • 8. Responsive Design とは? スクリーン幅に応じて、レイアウトを変える手法 レイアウトの話
  • 9. Responsive Design とは? なぜ注目されているのか?
  • 10. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる
  • 11. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる • 発行されるURLが一つである
  • 12. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる • 発行されるURLが一つである • 最新の技術を使用している
  • 13. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる 特徴なので • 発行されるURLが一つである 後述します • 最新の技術を使用している
  • 14. Responsive Design とは? なぜ注目されているのか? • 様々なデバイスに適応できる 特徴なので • 発行されるURLが一つである 後述します • 最新の技術を使用している • 新しい考え方への転換
  • 15. Responsive 新しい Design とは? 考え方 Progressive Enhancement
  • 16. Responsive 新しい Design とは? 考え方 Progressive Enhancement 最新のUA(User Agent)で、 最高のUX(User Experience)を。
  • 17. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser
  • 18. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える
  • 19. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える UAに応じたUXを提供する
  • 20. Responsive Progressive Design Enhancement とは? Responsive Design ≠ Cross Browser 伝える情報をきちんと伝える UAに応じたUXを提供する ビジュアルエレメントが先行しない
  • 21. Responsive Progressive Design Enhancement とは? STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  • 22. Responsive Progressive Design Enhancement とは? Cross Browser / Regressive Enhancement の一般的なタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  • 23. Responsive Progressive Design Enhancement とは? Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  • 24. Responsive Progressive Design Enhancement とは? 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 視覚構造と情報構造のミスマッチがおきる
  • 25. Responsive Progressive Design Enhancement とは? 一つの幹が複数の枝を持つ HTML 「分木構造」 表層構造 = 情報構造 HEAD BODY HEADER ARTICLE FOOTER
  • 26. Responsive Progressive Design Enhancement とは? 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 視覚構造と情報構造のミスマッチがおきる
  • 27. Responsive Design とは? Responsive ≠ Liquid / Fluid Layout 混同しやすいイメージ
  • 28. Responsive 混同しやすい Design とは? イメージ Webデザインのレイアウト手法 1. Fixed Layout ・固定幅中央 え 2. Liquid / Fluid Layout ・可変幅 横幅目一杯 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  • 29. Responsive 混同しやすい Design とは? イメージ Liquid / Fluid Layout http://andreagandino.com/ Responsive Web Design http://www.creativesurvey.jp/ http://adaptive-images.com/
  • 30. Responsive 混同しやすい Design とは? イメージ Liquid / Fluid Layout http://andreagandino.com/ Responsive Web Design http://www.creativesurvey.jp/ Liquid の時もある http://adaptive-images.com/ Fixed の時もある
  • 31. Responsive 混同しやすい Design とは? イメージ レスポンシブデザインのレイアウトは? CSS3を使って、 Fixed / Liquid Layout を使い分ける
  • 32. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS3は古いブラウザでは動かないのでは?
  • 33. Responsive 混同しやすい Layout Design 使い分け とは? イメージ IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o IE7 4%前後 IE8 20%前後 1/4に対応できない?
  • 34. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ
  • 35. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ 1. 使い分け前の状態を通常のサイトとする
  • 36. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS は 「使い分け」のスイッチ 1. 使い分け前の状態を通常のサイトとする 2. 「使い分け」を別の方法で実現する
  • 37. Responsive 混同しやすい Layout Design 使い分け とは? イメージ CSS3は古いブラウザでは動かないのでは? Responsive CSSによる使い分けを使わない状態も一つの適応例
  • 41. スクリーン幅に応じて、レイアウトを変える手法 Progressive Layout Enhancement 使い分け
  • 42. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 43. Responsive Web Design メリット・デメリット
  • 44. メリット デメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  • 45. メリット デメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  • 46. メリット 様々な デメリット デバイス
  • 47. メリット 様々な デメリット デバイス SmartTV?
  • 48. メリット 様々な デメリット デバイス SmartGadgets? SmartTV?
  • 49. メリット 様々な デメリット デバイス SmartGadgets? SmartTV? 特定のデバイスをターゲットとせずに、広く情報を発信できる 「シームレスにレイアウトを適応させる」
  • 50. メリット 様々な デメリット デバイス SmartGadgets? SmartTV? 特定のデバイスをターゲットとせずに、広く情報を発信できる 「シームレスにレイアウトを適応させる」 Progressive Enhancement
  • 51. メリット 様々な デメリット デバイス
  • 52. メリット 様々な デメリット デバイス UAに応じて+αのUXを余白だった部分に展開できる
  • 53. メリット 様々な デメリット デバイス UAに応じて+αのUXを余白だった部分に展開できる Progressive Enhancement
  • 54. メリット デメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  • 55. メリット URLが デメリット ひとつ 複数の最適化ページの場合
  • 56. メリット URLが デメリット ひとつ 複数の最適化ページの場合 Responsive Web Designの場合
  • 57. メリット URLが デメリット ひとつ 修正 / 更新作業
  • 58. メリット URLが デメリット ひとつ 修正 / 更新作業
  • 59. メリット URLが デメリット ひとつ ただし、 HTML CSS JavaScript データソース データ修飾 UAに応じた処理 データ / ヴィジュアルが分離していれば データのみの変更ですべてに適応できる
  • 60. メリット URLが デメリット ひとつ SEO
  • 61. メリット URLが デメリット ひとつ SEO Googlebotくん Googlebotくん http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.co.jp/ja/jp/intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf
  • 62. メリット URLが デメリット ひとつ サーバーアプリケーション
  • 63. メリット URLが デメリット ひとつ サーバーアプリケーション フルスクラッチ
  • 64. メリット URLが デメリット ひとつ サーバーアプリケーション デバイス振り分けロジック デバイス分のテンプレート検証 フルスクラッチ
  • 65. メリット URLが デメリット ひとつ サーバーアプリケーション デバイス振り分けロジック デバイス分のテンプレート検証 フルスクラッチ デバイス振り分けロジック デバイス分のテンプレート検証 をHTMLに依存させる
  • 66. メリット URLが デメリット ひとつ サーバーアプリケーション デバイス振り分けロジック デバイス分のテンプレート検証 フルスクラッチ デバイス振り分けロジック デバイス分のテンプレート検証 をHTMLに依存させる バックエンドとフロントエンドの分離
  • 67. メリット デメリット Responsive Web Design : メリット 様々なデバイスに 発行されるURLが CSSシフト 適応できる 一つである
  • 68. メリット CSSシフト デメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。
  • 69. メリット CSSシフト デメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル 分離
  • 70. メリット CSSシフト デメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル パフォーマンス 分離
  • 71. メリット CSSシフト デメリット JavaScriptや画像の扱いを工夫する必要があった。 その副作用としていくつかのメリットがあった。 ロジック/ヴィジュアル レイアウト変更に パフォーマンス 分離 関わる画像変更
  • 72. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。
  • 73. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した
  • 74. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML データソース
  • 75. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML CSS データソース データ修飾
  • 76. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  • 77. ロジック メリット CSSシフト ビジュアル デメリット 分離 ヴィジュアルにタッチする部分をCSSに限定した。 さりげないJavaScriptの実現に貢献した 低機能UA:補助 高機能UA:追加  HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  • 78. メリット CSSシフト パフォーマンス デメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。
  • 79. メリット CSSシフト パフォーマンス デメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。 それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる
  • 80. メリット CSSシフト パフォーマンス デメリット Progressive Enhancementの考えに実現したかった。 IEでアニメーションをやめた。 それ以外のブラウザはCSS3が十分に動くので、CSS3によるアニメーションで実装できる さらなる ロジック/ヴィジュアル パフォーマンス改善 分離
  • 81. メリット CSSシフト 画像置換 デメリット 画像テキストの使いどころが難しい
  • 82. メリット CSSシフト 画像置換 デメリット 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック
  • 83. メリット CSSシフト 画像置換 デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した
  • 84. メリット CSSシフト 画像置換 デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト
  • 85. メリット CSSシフト 画像置換 デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト ファイル転送量縮小
  • 86. メリット CSSシフト 画像置換 デメリット 画像テキストの使いどころが難しい テキスト画像は画像置換 + デバイステキスト化、画像は背景画像化した 柔軟なレイアウト ファイル転送量縮小 Retina対応簡略化
  • 87. メリット デメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  • 88. メリット デメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  • 89. メリット 開発コスト デメリット 開発コストが高いという印象を持たれている
  • 90. メリット 開発コスト デメリット 開発コストが高いという印象を持たれている それほど難しいと感じなかった
  • 91. メリット 開発コスト デメリット 開発コストが高いという印象を持たれている なぜ? それほど難しいと感じなかった
  • 92. メリット 開発コスト デメリット 1. 制作者の習熟度に依存する部分が大きい 2. 設計:実装が密に連携する場面がある可能性が強い
  • 93. メリット デメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  • 94. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か?
  • 95. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ
  • 96. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト
  • 97. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  • 98. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  • 99. メリット モバイル コンテンツ デメリット 最適化 レイアウト (実装的な)無理が生じない分にはResponsiveで対応可能 モバイルでしかできないことはモバイルでやるべき 条件分岐の処理分のパフォーマンスは落ちる
  • 100. メリット モバイル デメリット 最適化 モバイル向けの最適化とは何か? モバイルに適したコンテンツ モバイルに適したレイアウト ファイル転送量の削減
  • 101. メリット モバイル 不必要な デメリット 最適化 画像 不必要な画像の読み込みが発生する?
  • 102. メリット モバイル デメリット 最適化 不必要な画像の読み込みが発生する? imgタグ 背景画像
  • 103. メリット モバイル デメリット 最適化 imgタグと背景画像の2パターンで実験 ウィンドウサイズ
  • 104. メリット モバイル デメリット 最適化 imgタグ:ページ読み込み時のリソース
  • 105. メリット モバイル デメリット 最適化 背景画像:ページ読み込み時のリソース
  • 106. メリット モバイル デメリット 最適化 非表示の背景画像は読み込まれません
  • 107. メリット モバイル デメリット 最適化 非表示の背景画像は読み込まれません データソースとしての HTML
  • 108. メリット モバイル デメリット 最適化 非表示の背景画像は読み込まれません データソースとしての 表示装飾としての HTML CSS
  • 109. メリット モバイル デメリット 最適化 非表示の背景画像は読み込まれません データソースとしての 表示装飾としての HTML CSS 表示すべき=読み込むべき
  • 110. メリット モバイル デメリット 最適化 不必要な画像の読み込みが発生する? imgタグ 背景画像 CSSシフト
  • 111. メリット モバイル デメリット 最適化 ブラウザのハック 背景画像 実装の手間 CSSシフト imgである必要がある
  • 112. メリット モバイル デメリット 最適化 ブラウザのハック 背景画像 実装の手間 CSSシフト imgである必要がある 不必要な画像の読み込みは発生します
  • 113. メリット デメリット Responsive Web Design : デメリット 開発コストが モバイル向けの プラグイン・広告 割高である? ”最適化”ではない に注意
  • 114. メリット プラグイン デメリット 広告 可変サイズに対応できるか 見えないときに動作するか
  • 116. メリット デメリット CSSシフト 開発コスト 様々なデバイスに 発行されるURLが モバイル最適化 プラグイン 適応できる 一つである
  • 117. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 118. Responsive Web Design プロセス
  • 120. ブラウザ プロセス 挙動 CSS3 対応表 IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o
  • 121. ブラウザ プロセス 挙動 CSS3 対応表 IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) default default default ! responsive responsive responsive responsive
  • 122. ブラウザ プロセス 挙動 CSS3 対応表 IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) X X X ▲ o o o o 可変カラム不可!! IE10 Firefox IE6 IE7 IE8 IE9 Chrome Safari (12. 10/26) (3.5+) default default default ! responsive responsive responsive responsive
  • 123. ブラウザ プロセス 挙動 ヴィジュアルデザインを組む上での制約が決定 IE9 > IE8 モード, default: 1024px fixed
  • 125. ヴィジュアル プロセス デザイン レイアウト分岐数を決める 例えば5つ 0. 1200px + 1. 1024px 2. 768px 3. 480px 4. 320px
  • 126. ヴィジュアル プロセス デザイン レイアウト分岐数を決める 0. 1200px + ページ単位ではなく 例えば5つ ボックス単位。 1. 1024px レイアウトに変更が あれば作成する。 2. 768px 3. 480px 4. 320px
  • 127. ヴィジュアル プロセス デザイン レイアウトを決める 1. Fixed Layout ・固定幅中央 え 2. Liquid / Fluid Layout ・可変幅 横幅目一杯 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  • 128. ヴィジュアル プロセス デザイン レイアウトを決める 1. Fixed Layout 1024~768のように ・固定幅中央 え シームレスを 2. Liquid / Fluid Layout 前提として ・可変幅 横幅目一杯 レイアウトを決定。 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ・幅を文字数から決定する
  • 129. ヴィジュアル プロセス デザイン レイアウトを決める 1. Fixed Layout 1024~768のように ・固定幅中央 え シームレスを 2. Liquid / Fluid Layout 前提として ・可変幅 横幅目一杯 レイアウトを決定。 3. Flexible Layout ・可変幅 最大値 / 最小値を固定 4. Elastic Layout ワイヤーフレームで ・幅を文字数から決定する も同様に、 カラムになる場合は レイアウトを考える
  • 130. 実装
  • 131. プロセス 実装 シームレスかどうか
  • 132. プロセス 実装 シームレスかどうか 画像 画像 デバイステキストブロック
  • 133. プロセス 実装 シームレスかどうか 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック
  • 134. 実装 シームレスかどうか はみ出る 画像 画像 画像 画像 デバイステキストブロック デバイステキスト ブロック 折り返す
  • 135. プロセス 実装 文章構造と情報構造が一致しているか
  • 136. プロセス 実装 文章構造と情報構造が一致しているか メニュー1 文言変更 メニュー2 並び順
  • 137. プロセス 実装 文章構造と情報構造が一致しているか メニュー1 文言変更  メニュー2 並び順 ▲
  • 138. プロセス 実装 文章構造と情報構造が一致しているか メニュー1 文言変更  メニュー2 並び順 ▲ 隠しておく
  • 139. プロセス 実装 文章構造と情報構造が一致しているか HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  • 140. プロセス 実装 文章構造と情報構造が一致しているか ページ読み込みの段階から 変更を加える考え方はNG HTML CSS JavaScript データソース データ修飾 UAに応じた処理
  • 141. プロセス 実装 STRATEGY SCOPE STRUCTURE SKELTON SURFACE
  • 142. プロセス 実装 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 弊社内で完結したのでスムーズだったが、実際の案件単位では未知数
  • 145. まとめ レイアウト ビジュアル 挙動 デザイン
  • 146. まとめ レイアウト ビジュアル 実装協議 挙動 デザイン
  • 147. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 149. 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 表層構造と情報構造のミスマッチがおきる 表層構造 = 情報構造
  • 150. 情報を構造をふまえて表現する Responsive Designのタイムライン STRATEGY SCOPE STRUCTURE SKELTON SURFACE 様々なレイアウトを考慮すると、 表層構造と情報構造のミスマッチがおきる 表層構造 = 情報構造 重要!
  • 151. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON SURFACE 表層構造 = 情報構造
  • 152. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造
  • 153. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造
  • 154. どのぐらい重要? STRATEGY SCOPE STRUCTURE SKELTON ユーザーに負荷 SURFACE 実現不可能 非効率な処理 表層構造 = 情報構造 事故を前提にするようなもの コスト スケジュール クオリティ
  • 156. 今までのリニアなやり方なら、 表層構造はある程度無視できた STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 高度化
  • 157. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 今までと同様
  • 158. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 表層構造において あるべき姿を理解する HTML構造 HTMLタグの意味 実装コスト
  • 159. どのように高度化するのか。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 今まで以上に 両面から 考える必要性 表層構造において それって現実的? あるべき姿を理解する HTML構造 HTMLタグの意味 実装コスト
  • 161. 理想的な解決 ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  • 162. 理想的な解決 ? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  • 163. 理想的な解決 ? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ? ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ・情報設計の必要がないぐらい作るものがシンプル
  • 164. 理想的な解決 ? ・情報設計の担当がもともと知識が超豊富 HTMLや最新のJS/CSS事情にも詳しいレベル ? ・情報設計の担当がそのままデザインと実装を行う 自己完結すれば問題が顕在化しない。 ? ・情報設計の必要がないぐらい作るものがシンプル 今あるレスポンシブデザインはこういうものが多い
  • 165. 現実的な解決 1:専門知識は専門家に。 2:担当領域の分担と分離。
  • 166. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える
  • 167. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア
  • 168. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE WFは仕様書ではなくなる SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア 反復型チーム開発マネジメント
  • 169. 1:専門知識は専門家に。 STRATEGY SCOPE STRUCTURE WFは仕様書ではなくなる SKELTON 情報設計の不確実性を IA担当だけでなく SURFACE サポートする体制 みんなで考える デザイナー デベロッパー エンジニア 反復型チーム開発マネジメント
  • 170. 2:担当領域の分担と分離 STRATEGY SCOPE STRUCTURE SKELTON SURFACE 素材や分量や優先順位を 表層の専門領域を担保しながら 作り上げる。 料理を仕上げて行く
  • 171. 現実的な解決 1:専門知識は専門家に。 情報設計のレイヤーで表層領域の専門性を付加。 のちの変更を受け入れる意識的なマネジメント。 2:担当領域の分担と分離。 情報設計の工程を分担し、具体化を分離する。 その後の検証も含めて分担できる可能性。
  • 172. たとえば STRATEGY SCOPE STRUCTURE SKELTON SURFACE コンサル A社 4D B社
  • 173. たとえば STRATEGY SCOPE STRUCTURE SKELTON SURFACE A社 B社 このやり方だとリスクが大きくなる
  • 174. STRATEGY SCOPE STRUCTURE SKELTON SURFACE IA担当だけでなく みんなで考える デザイナー デベロッパー エンジニア 素材や分量や優先順位を 表層の専門領域を担保しながら 作り上げる。 料理を仕上げて行く
  • 175. たとえば STRATEGY SCOPE STRUCTURE まとめ SKELTON SURFACE コラボレーションが生まれる よりよい関係性が求められる A社 B社 このやり方だとリスクが大きくなる
  • 176. Responsive Web Design Responsive Web Design Responsive Web Design Responsive Web Design とは? メリット・デメリット プロセス 設計
  • 178. ® ターゲット消費者のインサイトが「見える」リサーチツール Get Insights for Better Design !! https://www.creativesurvey.jp/ ブログやソーシャルメディアで LAB. BLOG 最新情報を更新しています。 ブログ facebook Twitter