60分でわかるレスポンシブWebデザイン［セミナー資料］
47
60 60 分分分分分 分分分分分 分分分分分分 分分分分分分 Web Web 分分分分 分分分分 分 分分分分分分 分
-
Upload
daisuke-yamazaki -
Category
Education
-
view
898 -
download
0
description
2014/03/19にデジタルハリウッド［ オンラインセミナー］としておこなわれた資料です。
Transcript of 60分でわかるレスポンシブWebデザイン［セミナー資料］
6060 分でわかる分でわかるレスポンシブレスポンシブ WebWeb デザインデザイン
〜 セミナー資料〜
自己紹介
・デジタルハリウッド大学院 非常勤講師・デジタルハリウッド 講師： PHP講座 、スマートフォン＆レスポンシブWeb講座など多数・ Venezia-Works（ 代表 ）・ INOP ・ U-SYS・ htm l5j HTML5ビギナーズ
自己紹介
自己紹介
マイクロソフト MVP（ BingMapsDevelopment）
MicrosoftMVP って？マイクロソフトが個人の活動を評価する、特別な賞。MVP (Most Valuable Professional) アワード プログラムは、マイクロソフトの製品やテクノロジーに関する豊富な知識と経験を持ち、オンラインまたはオフラインのコミュニティや、メディアなどを通して、その優れた能力を幅広いユーザーと共有している個人を表彰するものです。 MVP アワードの表彰は全世界で行われており、現在は、世界 90 か国以上、 4,000 名を超える方々が MVP として精力的な活動を続けています。
4
＠ IT「 HTML5アプリ作ろうぜ！」記事連載、日経ソフトウエア、日経BP、 SoftwareDesign、 ITPro…などWeb業界誌での情報発信からWeb技術者の人材育成 など多方面で活動。
自己紹介
代表的な著書：レスポンシブWebデザイン 「超」実践デザイン集中講義
5
韓国でも
スマートフォンスマートフォン
＆＆レスポンシブレスポンシブ
Naze??
従来求められてるWebサイト
0情報を正しく表示するサイト0目的の情報を探しやすいサイト 0集客を上げられるサイトSEO、広告、ソーシャルメディアとの連携
0バリアフリーなサイト視覚障害者（画面を見れない）、身体障害者（マウス使えない）、高齢者
今これから求められるWebサイト
「マルチデバイス対応」
0「さまざまなデバイスで正しく表示・ 利用できるサイトを制作 」
先ほどのスライドをに追加して ．．．
PC タブレット スマートフォン
そうなの？
今これから求められるWebサイト
0情報を正しく表示するサイト0目的の情報を探しやすいサイト 0集客を上げられるサイト0バリアフリーなサイト0マルチデバイス対応PC、携帯電話＋スマートフォン、タブレットなど
やること増えたね
モバイル端末からの閲覧増
前年比 19.6%
現在のWebでは不十分なのか？モバイル向けサイトの必要性
今はパソコンは持っていなくても・・・
スマートフォン （携帯電話フィーチャーフォンも） タブレット （ iPad, Nexus, Kindle…）
を持ってる人の比率は日々増加してます。
オレも持ってるよ！
現在のWebでは不十分である理由モバイル向けサイトの必要性
パソコンではなく、
スマートフォン・タブレット
をWeb閲覧のメインデバイスとして使う時代に来ています。
スマートデバイスを優先でサイトを構築する時代なのかも知れません。
実際に企業で採用実際に企業で採用されてるのか？されてるのか？
まだでしょ？
トヨタhttp://www.toyota.co.jp/
確認方法：Chrome Developerツール
<head><link rel="stylesheet" href="/jpn/components/styles/common.css">http://www.toyota.co.jp/jpn/components/styles/navigation_main.csshttp://www.toyota.co.jp/jpn/components/styles/top.css
SONYhttp://www.sony.co.jp/
SONYhttp://www.sony.co.jp/
使われてるんだ！
レスポンシブレスポンシブ以前の対応方法？以前の対応方法？前までどうやったの？
従来のマルチデバイス対応方法
サイト A（ PC向け）www.domainname.com/A/
www.domainname.com/B/
www.domainname.com/C/
サイト C（スマートフォン）
サイト B（タブレット向け）
URL ：
デバイス毎にディレクトリを分ける
http://www. /…●●●
http://www. /…●●●http://www. /…●●●
広告例）
従来のマルチデバイス対応方法サーバサイド、クライアントスクリプトにて切り分け
<?php /* UserAgent Switch */$ua=$_SERVER['HTTP_USER_AGENT'];if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’Android’)!==false)) {
header(“Location:/sp/index.php”);exit();
}?>
<?php /* UserAgent Switch */$ua=$_SERVER['HTTP_USER_AGENT'];if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’Android’)!==false)) {
header(“Location:/sp/index.php”);exit();
}?>
ユーザーエージェント( 自動振り分けの注意点 )
・新たなデバイスが発売された場合 ( デバイスのユーザーエージェントを調査し振り分け処理を確認・追加する作業が必要 )
・必要なスクリプトなどの技術を習得している人材が必要
ワンソースでマルチデバイス対応（レスポンシブ Web デザイン）
・ Javascript のようなプログラミング （スクリプト）知識は必要ない・ CSS の知識で作成できる・ ワンソース （ HTML と CSS ）で作成可能
デザイナーの方には是非覚えてほしい手法です
ブラウザのスクリーンサイズ（解像度）を基準にレイアウトを調整することができるのでマルチスクリーンに対応したWeb サイトを制作できるのが特徴です。
こっから DEMO 見して！
DEMODEMOサンプル
DEMODEMOフォーム
DEMODEMOサイトページのイメージ
今日はここまでで・・・
レスポンシブWebデザイン
誰が？いつ頃から？レスポンシブWebデザイン提唱者： ETHAN MARCOTTE氏（イーサン・マルコット氏）2010年 5月 25日 に ブログで紹介したマルチデバイス対応のWebサイト制作の手法 「 RWD」です。
レスポンシブWebデザイン
どんなことができるの？レスポンシブWebデザイン提唱者： ETHAN MARCOTTE氏（イーサン・マルコット氏）
記事内容： Media Query を使ってレイアウトし、例えば１カラムを２カラムに流動的に変形させる事を指し、閲覧されたそのデバイスの解像度によって柔軟に、シンプルに最適化（フルードグリッド、フルードイメージ）させる。
• 画面を各デバイスに合わせてソースを複数作る必要がない、作業工数の軽減に繋がる
• ワンソースで管理するのでメンテナンスがしやすくなる
• １つの URLのみにアクセスを集中できる（各デバイスごとに TOPページを分けた場合、ページヘのアクセスが分散化される）
• １つの URLだけなので、告知・宣伝等がやりやすくなる
• HTML/CSSなどのクライアント技術のみで実装できるためWebデザイナーが実装できる
レスポンシブWebデザインメリット・デメリット
メリット
• 芸術的な見せ方、拘りのあるビジュアルなサイトにはデメリットの可能性あり
• ワンソースで各デバイスに対応するため、設計 /デザインの調整に時間がかかる
• ワンソースで対応するため、より高度で複雑な設計となる可能性がある
• 全デバイスに必要なソースコードも読み込みます、必要のない要素も一緒に読み込まれてしまい、ページの読み込み時間やレンダリング速度に影響する可能性も考慮する必要があります。
レスポンシブWebデザインメリット・デメリット
デメリット
テクニカル解説テクニカル解説MediaQuery、ブレイクポイント
今日は少なめに！実際の授業ではこってり！
Media Queryとは？
スクリーンサイズ（デバイスサイズ）により CSSスタイルを複数指定することを可能にします。この CSSを複数指定することを可能したのが CSS3の「MediaQueries」です。
特徴：デバイスごとの細かい配慮／工夫は向いていません。特定のデバイスにだけ特別な工夫をしようと思った場合に、他のデバイス（ CSSスタイル）への影響も出る可能性が考えられます。
何を基準にして設計・構築する？
まずスマートフォンを基準に考えることの方が、作る上で簡単なはずです。各デバイスの画面表示をスマートフォン用のスタイルを最初に定義し、タブレット、パソコン用の順番でスタイルを決めた方が設計・構築はスムーズかと思います。（例：スマートフォン 480px → タブレット 768px → パソコン 980px）
スマートフォンサイトから考える
ブレイクポイントとは
メディアクエリを使用した方法で画面サイズ別に CSSスタイリングする場合
（例：スマートフォン 320px → タブレット 788px → パソコン880px）
と画面サイズの境目を先に決め手しまします。この決めた画面サイズに合わせて CSSスタイルを切り替える事ができ、この決めた画面サイズによる切り替えのポイントを、「ブレークポイント」と呼びます。
ブレークポイントを決めておく
Media Query 書き方１@media ひとつの CSS ファイル内で振り分け
@media screen and (min-width: 481px) {
body {...}
}
@media screen and (min-width: 768px) {
body {...}
}
Link 複数 CSS ファイルを link要素で読み込む <link href=”sp.css"><link media="screen and (min-width: 481px)" href="tablet.css"><link media="screen and (min-width: 768px)" href="desktop.css">
@import 複数 CSS ファイルを import要素で読み込む @import url(”sp.css");@import url("tablet.css") only screen and (min-width: 481px); @import url("desktop.css") only screen and (min-width: 768px);
@media が使いやすい
Media Query 書き方２
<link… @import…複数 CSSファイルに分けてブレイクポイント（スマホ、タブレット、パソコン）を管理するとスタイル管理しやすくなりそうですが、
@mediaの方法で単一 CSSファイルにした方が、
「 HTTPリクエスト数を節約できる 」 特典があります。 スマートデバイスの３G 回線にもよい。
CSS
CSS 作成の考え方
CSSを作成する際、スマートフォンの一番小さい方に合わせて記述する方法で解説してます。
注意ポイント
デスクトップ上でのブラウザ実行は ☓ です。
http://….https://….
のように実際に Web サーバ上に上げて確認する必要が有ります。
※XMAPP など PC に Web サーバを作るのは OK ！
参考サイト参考サイト本当に参考になるの？！
参考本
なんでもそうですが、最初が難しいのです。ある程度の基礎理解が進めば、自身で習得が可能です。
参考サイト■http://getbootstrap.com/ ）
参考サイト
■Media Queries （ http://mediaqueri.es/ ）
参考サイト
■Microsoft （ http://www.microsoft.com/en-us/default.aspx ）
参考サイト
■Nathan Sawaya（ http://brickartist.com/）
キービジュアルの画像がスライド（フェードイン・フェードアウトで切り替わる）エフェクト
参考サイト
■COOP（ http://coworkchicago.com/）
右側からパソコン、タブレット、スマートフォンサイズの表示なりますが、スマートフォンのサイズ（左側）が大きくデザインが変わります。
Adobe社 「 Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応」http://adobe-html5.jp/アドビシステムの HTML5特設サイトもレスポンシブWebデザインで作成されてます。ブレイクポイントは 0〜 520pxの場合は 1 カラムレイアウト、520px〜 920pxの間は 2 カラムレイアウト、 920px〜より大きい場合は 3カラムレイアウトの表示となります。 ブレイクポイント： 520px, 920px
参考サイト
![デザイン学セミナー Seminar Introduction to Design … · · 2015-07-09図学演習Descriptive Geometry (Lec & Lab) [Instructor] Hiroko Imaizumi ... 10. Mechanical drawing](https://static.fdocument.pub/doc/165x107/5af6f1747f8b9a190c906719/-seminar-introduction-to-design-descriptive.jpg)
![デザイン学セミナー Seminar Introduction to Design …デザイン論 I Theory of design I [Instructor] UEDA Akira Ueda, Fumio Terauchi, Takayuki Higuchi [Credits] 2 [Semester]](https://static.fdocument.pub/doc/165x107/5f2857a6552674634b42092f/fffff-seminar-introduction-to-design-ffe-i-theory.jpg)
