SlideShare a Scribd company logo
小川 裕之
レスポンシブWebデザインの基礎
13年10月8日火曜日
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。
「レスポンシブWebデザイン入門」執筆
小川 裕之
barchin  hiro.ogw
13年10月8日火曜日
レスポンシブWebデザインとは
13年10月8日火曜日
13年10月8日火曜日
Photo by Jeremy Keith
スマートデバイスの増加
13年10月8日火曜日
1日の平均インターネット接続時間
博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より
72,8分
50.6分
13年10月8日火曜日
マルチデバイス対応の手法
•レスポンシブWebデザイン
•デバイス専用サイト
•プログラム変換
13年10月8日火曜日
RWDの特徴
•URLがひとつ
•ワンソース
•更新が比較的簡単
•新しいデバイスにも対応しやすい
13年10月8日火曜日
ワンソースで各デバイスの画面サイズに
対応したレイアウトを実現
HTML
CSSCSS CSS
幅768px
以下
幅480px
以下
幅769px
以上
13年10月8日火曜日
URLがひとつ
13年10月8日火曜日
ワンソース
13年10月8日火曜日
HTML
CSSCSS CSS
更新の手間が少ない
更新
! !
!
13年10月8日火曜日
新しいデバイスにも対応しやすい
? ?
?
?
?
13年10月8日火曜日
それぞれのメリット・デメリット
手法 メリット デメリット
レスポンシブWebデザイン
更新がラク
URLがひとつ
無数のデバイスに適応できる
構成の制限
設計が難しい
テストの工数が増える
デバイス専用サイト
デバイスの特性にあった最適化ができる
デザインの自由度が高い
開発コストがかかる
更新の手間がかかる
新しいデバイスを判定する必要がある
プログラム変換
更新が比較的ラク
URLが共通
デザインの自由度が高い
開発コストがかかる
新しいデバイスを判定する必要がある
13年10月8日火曜日
レスポンシブWebデザインの実装
13年10月8日火曜日
A LIST APART
13年10月8日火曜日
RWDを実現する要素
•Fluid Grid
•Fluid Image
•Media Queries
13年10月8日火曜日
Fluid Grid
13年10月8日火曜日
規則性をもったライン(Grid)にそって
コンテンツを配置
Grid Design
13年10月8日火曜日
グリッドの幅を相対値で指定
Fluid Grid
%
13年10月8日火曜日
求める要素の幅 親要素の幅 100%
相対値の求め方
620px 300px
960px
60px 20px
13年10月8日火曜日
=64.58333%
300÷960×100
960px
相対値の求め方
620÷960×100
=31.25%
求める要素の幅 親要素の幅 100%
13年10月8日火曜日
Fluid Grid Systemが便利
pxからいちいち計算するのは手間
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
3カラム= (60px×3+20×2) ÷960px×100%=22.91667%
4カラム= (60px×4+20×3) ÷960px×100%=31.25%
5カラム= (60px×5+20×4) ÷960px×100%=39.5833%
13年10月8日火曜日
8カラム 4カラム
100%
=31.25%=64.58333%
13年10月8日火曜日
px %
幅を相対値にする
13年10月8日火曜日
Fluid Image
13年10月8日火曜日
画像が親要素より
はみ出してしまう
画像を可変にする
13年10月8日火曜日
<img src="photo.jpg" alt="photo">
img{
max-width: 100%;
height: auto;
}
HTML
CSS
画像を可変にする
親要素内に
収まる
13年10月8日火曜日
Media Queries
13年10月8日火曜日
メディアタイプと特性に関する条件を調べ
その結果に応じて処理を行う
13年10月8日火曜日
@media screen and (min-width: 640px){
body{
background-color: red;
}
}
メディアがスクリーンで表示領域幅が
640px以上の場合背景色を赤にする
メディアタイプ メディア特性
13年10月8日火曜日
メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表示領域の向き ☓
resolution 解像度 ○
13年10月8日火曜日
@import url ("pc.css") screen and (min-
width:600px);
<link rel="stylesheet" href="pc.css"
media="screen and (min-width:600px)">
@media screen and (min-width:600px){
/*style*/
}
CSS
CSS
HTML
13年10月8日火曜日
body{
backgorund-color:red;
}
モバイルファースト
1025px768px
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
モバイルファースト
1025px768px
幅768px
以上に適用
全サイズ
に適用
13年10月8日火曜日
幅1025px
以上に適用
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
@media screen and (min-width:1025px){
body{
background-color:yellow;
}
}
モバイルファースト
1025px768px
幅768px
以上に適用
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
767px1024px
デスクトップファースト
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
767px1024px
デスクトップファースト
幅1024px
以下に適用
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
@media screen and (max-width:767px){
body{
background-color:yellow;
}
}
767px1024px
デスクトップファースト
幅767px
以下に適用
幅1024px
以下に適用
全サイズ
に適用
13年10月8日火曜日
モバイルファーストのメリット
•スタイルが少なくなる
#main{
float:left;
width:80%;
}
@media screen and (max-width:
639px){
#main{
float: none;
width: auto;
}
}
デスクトップファースト
@media screen and (min-width:
640px){
#main{
float: left;
width: 80%;
}
}
モバイルファースト
13年10月8日火曜日
デスクトップファーストのメリット
•Media Queriesに非対応のブラウザ対応が簡単
デスクトップファーストモバイルファースト
13年10月8日火曜日
ブレイクポイント
13年10月8日火曜日
@media screen and (min-width: 480px){
/*style*/
}
@media screen and (min-width: 940px){
/*style*/
}
940px480px
ブレイクポイント
13年10月8日火曜日
Sorce:Design Spice
サイトによって様々
13年10月8日火曜日
ブレイクポイントを決めるヒント
•主要となるデバイスの幅から
•コンテンツの最適なレイアウトから
13年10月8日火曜日
デバイスの幅から
主要となるデバイス、シェアの多いデバイスなど
を元に決める
13年10月8日火曜日
コンテンツから
動かしてみて調整が必要な部分に適時ブレイク
ポイントを追加する
13年10月8日火曜日
@media screen and (min-width: 768px){
body{
background-color: red;
}
}
幅をemで指定
768px=48em1em=16px
13年10月8日火曜日
メディアがスクリーンで表示領域幅が
48文字以上の場合、背景色を赤にする
幅をemで指定
768px=48em1em=16px
@media screen and (min-width: 48em){
body{
background-color: red;
}
}
13年10月8日火曜日
Viewport
13年10月8日火曜日
Viewportに指定されたサイズで
ページを描画する
980pxのウインドウサイズで
アクセスしたときと同じ表示
13年10月8日火曜日
<meta name="viewport" content="width=device-width,
initial-scale=1">
そのデバイスの幅で
サイトが表示される
13年10月8日火曜日
RWDでよくある問題点
13年10月8日火曜日
RWDでよくある問題点
•古いブラウザ対応の考え方
•どのようなワークフローで進めるのか
•カンプをどのようにつくるか
13年10月8日火曜日
古いブラウザ対応の考え方
Photo by rosefirerising
13年10月8日火曜日
最近のブラウザ
古いブラウザ
装飾は劣るが最低限の機能は提供
グレイスフルデグラデーション
基準
グレイスフル
デグラデーション
13年10月8日火曜日
どのようなワークフローで進めるのか
Photo by the pale side of insomnia
13年10月8日火曜日
•特定のデバイス対応
•コンテンツの幅は固定
•どの表示領域幅でもレイアウトは変わらない
ワークフローを見直す
今までの
サイト
•マルチデバイス対応
•コンテンツの幅は可変
•表示領域幅でレイアウトが変わる
RWD
13年10月8日火曜日
作ってみないとわからない
13年10月8日火曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
ワークフロー例
13年10月8日火曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
早めにプロトタイプを作成して
テストをしながら完成へと近づける
13年10月8日火曜日
カンプをどのようにつくるか
13年10月8日火曜日
=
従来のサイト制作におけるカンプ
13年10月8日火曜日
=    
   
RWDにおけるカンプ
13年10月8日火曜日
体制や案件に応じて作り方を変える
•各ブレイクポイントで作成
•PCサイズのみ作成する
•主要な部分のみ作りこんで
他はざっくりと
•Designing in the browserで
13年10月8日火曜日
その都度都度で体制を柔軟に
変えられることが大事
13年10月8日火曜日
さらに最適化を
13年10月8日火曜日
Responsive Web Design
Performance
Responsive Web Design
Usability
Content Strategy User Interface
Readability
SEO
Accessibility
Information Architecture
User Experience
Visual Design
13年10月8日火曜日
Responsive Web Design
Usability
Performance
Content Strategy User Interface
Readability
SEO
Accessibility
Information Architecture
User Experience
Visual Design
13年10月8日火曜日
Good performance is good design
Brad Frost
13年10月8日火曜日
表示に時間が
かかる
光回線3G回線
13年10月8日火曜日
画像の最適化
•CSSを使う
•画像を圧縮する
•Webフォント
•画像を差し替える
13年10月8日火曜日
CSSを使う
#btn{
padding: 0.5em;
display: inline-block;
font-size: 40px;
color: #333;
font-weight: bold;
letter-spacing: 0.1em;
background: #83a603;
background: -webkit-linear-gradient(top, #83a603, #769300);
background: -moz-linear-gradient(top, #83a603, #769300);
background: -o-linear-gradient(top, #83a603, #769300);
background: linear-gradient(to bottom, #83a603, #769300);
border-radius: 10px;
box-shadow: 0px 5px 2px #274000,0px 0px 3px #96b618 inset;
text-shadow: -1px -1px 0px rgba(255,255,255,0.2);
border: 4px solid #558b00;
}
13年10月8日火曜日
画像を圧縮する
JPEGmini
13年10月8日火曜日
画像を圧縮する
•JPEGmini
•ImageOptim
•PunyPNG
13年10月8日火曜日
画像を圧縮する
915kb
1200px×800px
350kb
38%!!
13年10月8日火曜日
Webフォントを使う
Google Fonts
13年10月8日火曜日
Webフォントを使う
•Google Fonts
•Adobe Edge Web Fonts
•FONT PLUS
•Type Square
13年10月8日火曜日
Webアイコンフォントを使う
Ico Moon
13年10月8日火曜日
Webアイコンフォントを使う
Font Awesome
•Font Awesome
•IcoMoon
•Fontello
13年10月8日火曜日
<script src="matchmedia.js"></script>
<script src="picturefill.js"></script>
<span data-picture data-alt="pic">
<span data-src="img/smallImage.jpg"></span>
<span data-src="img/largeImage.jpg" media="(min-width: 600px)"></span>
<noscript><img src="img/smallImage.jpg" alt="pic"></noscript>
</span>
600px
smallImage.jpg
largeImage.jpg
画像を差し替える
13年10月8日火曜日
画像を差し替える
Font Awesome
•Picturefill
•Responsive Images
•Adaptive Images
13年10月8日火曜日
Responsive Images Chart
13年10月8日火曜日
RWDとこれからのWeb
13年10月8日火曜日
Android Fragmentation Visualized
多様化するデバイス
13年10月8日火曜日
Future of Screen Technology
Productivity Future Vision
13年10月8日火曜日
それぞれのデバイス専用にサイトを作るのは
現実的ではなくなってくる
少ない労力でより多くのデバイスに
対応できるのが理想
13年10月8日火曜日
Best practice?
Photo by Jeremy Keith
13年10月8日火曜日
RWDは発展途上
•Media Queries Level4
•Responsive Images
•flexbox ,Regions,Column,...
•vw,vh
13年10月8日火曜日
Photo by Barb Dybwad
考え方も変える
13年10月8日火曜日
完全を求めない
Photo by Peter Miller
13年10月8日火曜日
“The control which designers know in the print medium, and often desire
in the web medium, is simply a function of the limitation of the printed
page. We should embrace the fact that the web doesn’t have the same
constraints, and design for this flexibility. But first, we must 'accept the
ebb and flow of things.'”
John Allsopp, “A Dao of Web Design”
13年10月8日火曜日
   
   
13年10月8日火曜日
   
   
13年10月8日火曜日
What is king?
Photo by Kyle Johnston
13年10月8日火曜日
未来を想像し、変化に順応する
Photo by dalioPhoto
13年10月8日火曜日
まとめ
13年10月8日火曜日
本日のまとめ
•RWDはワンソースでマルチデバイスに対応する手法
•RWDを実装する要素
(Fluid Grid,Fluid Image,Media Queries)
•グレイスフルデグラデーションで進められるとよい
•早めにテストを行いリスクを減らし効率的に進める
•カンプをつくるつくらないは案件に応じて
•パフォーマンスを上げるため画像を最適化する
•変化は必ず訪れるので少しずつ順応していく
13年10月8日火曜日

More Related Content

What's hot

Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
 
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
 
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
 
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハモバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
 
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
Yasuhito Yabe
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
 
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 AutumnSketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
 

What's hot (18)

Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのための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デザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
 
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
 
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
 
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
 
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハモバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
 
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 AutumnSketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
 

Viewers also liked

Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
evol-ni
 
はじめての欧文書体
はじめての欧文書体はじめての欧文書体
はじめての欧文書体
Shohei Itoh
 
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
 
スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
Matsumoto Takamasa
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
典子 松本
 
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
swwwitch inc.
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 

Viewers also liked (12)

Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
はじめての欧文書体
はじめての欧文書体はじめての欧文書体
はじめての欧文書体
 
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
 
スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
 
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 

Similar to レスポンシブWebデザインの基礎

レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
 
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
aya.furusawa@gmail.com Sano
 
真のレシポンシブって何だろう
真のレシポンシブって何だろう真のレシポンシブって何だろう
真のレシポンシブって何だろう
Yumi uniq Ishizaki
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
 
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
Azumi Wada
 
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
 
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
Takuro Wada
 
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
Deep Learning Lab(ディープラーニング・ラボ)
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
Mari Kimura
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
いまいる現場への愛を叫びたい
いまいる現場への愛を叫びたいいまいる現場への愛を叫びたい
いまいる現場への愛を叫びたい
Takehiro Kameda
 
フロントエンドエンジニアがフルスタックエンジニアもどきになる話
フロントエンドエンジニアがフルスタックエンジニアもどきになる話フロントエンドエンジニアがフルスタックエンジニアもどきになる話
フロントエンドエンジニアがフルスタックエンジニアもどきになる話
Takahiro Maki
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
 

Similar to レスポンシブWebデザインの基礎 (20)

レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
 
Front night vol1
Front night vol1Front night vol1
Front night vol1
 
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議framewo...
 
真のレシポンシブって何だろう
真のレシポンシブって何だろう真のレシポンシブって何だろう
真のレシポンシブって何だろう
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
 
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
UXリサーチの冒険序盤。私が出会った3つの「UXリサーチの壁★モンスター」
 
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
 
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
 
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
[Track1-1] AIの売上予測を発注システムに組み込んだリンガーハットのデータ活用戦略
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Staticwp 20131013
Staticwp 20131013Staticwp 20131013
Staticwp 20131013
 
いまいる現場への愛を叫びたい
いまいる現場への愛を叫びたいいまいる現場への愛を叫びたい
いまいる現場への愛を叫びたい
 
フロントエンドエンジニアがフルスタックエンジニアもどきになる話
フロントエンドエンジニアがフルスタックエンジニアもどきになる話フロントエンドエンジニアがフルスタックエンジニアもどきになる話
フロントエンドエンジニアがフルスタックエンジニアもどきになる話
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 

Recently uploaded

能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
Tetsuya Nihonmatsu
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
TsuyoshiSaito7
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
Hironori Washizaki
 
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
TsuyoshiSaito7
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
shogotaguchi
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
Takuya Minagawa
 
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
Tatsuya Ishikawa
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
iPride Co., Ltd.
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 

Recently uploaded (11)

能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
能動的サイバー防御の時代へ - GPTsから垣間見えた私達と未来のAIについて
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
 
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
 
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 

レスポンシブWebデザインの基礎