Download - レスポンシブサイト制作に効く デザインTipsあれこれ
![Page 1: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/1.jpg)
レスポンシブサイト制作に効くデザインTipsあれこれ
20151111 / Best of MAXcrema design 黒野明子
![Page 2: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/2.jpg)
黒野明子
crema design くれまでざいん
くろのあきこ
![Page 3: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/3.jpg)
書籍 連載
![Page 4: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/4.jpg)
本日の流れ● レスポンシブウェブデザインとは?● Photoshop でのレイアウトデモ ● アートボードの利用 ● 12 グリッドベースのレイアウト ● 横に伸び縮みするコンポーネント ● モバイル対応のメニュー設計 ● iPhone で即確認 ● タッチデバイスにやさしいリンク設計
![Page 5: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/5.jpg)
RWDレスポンシブウェブデザイン
![Page 6: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/6.jpg)
ところで、レスポンシブサイトの制作経験はありますか?
YESNO
![Page 7: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/7.jpg)
1ソースで様々な画面サイズのデバイスに対応
![Page 8: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/8.jpg)
https://en.wikipedia.org/wiki/Responsive_web_design#/media/File:Content-is-like-water-1980.jpg
Content is like water
![Page 9: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/9.jpg)
CSSフレキシブルなグリッド フレキシブルな画像 メディアクエリの使用
Ethan Marcotteさんの定義によると
![Page 10: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/10.jpg)
RWDにおける一般的なメディアクエリ利用
/* デフォルトの記述 */
div.box { background-color: #660099 }
@media screen and (max-width: 479px) {
/* 479px以下用(スマホ用)の記述 */
div.box { background-color: #ff9900 }
}
デバイスのウィンドウ幅に応じて読み込ませる CSS の内容をフィルタリング
![Page 11: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/11.jpg)
メディアクエリひとくちメモ
● デバイスの特性に基づいて適用するスタイルを切り替える
● 印刷用のスタイルシートなども(@media print)
● 現在策定中のメディアクエリレベル 4 では、 端末の置かれている環境光によってスタイルの適用を 変更できるようになるかもしれない(light-level)
![Page 12: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/12.jpg)
RWDのメリットとデメリット
更新の手間が 1 度になる
同一 URLで PC とモバイル両方に対応
SEO への対応がラク
CSS の記述ミスによってはレイアウト崩れが生じる
モバイル閲覧時にも余分なデータを読み込んで遅くなるかも
![Page 13: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/13.jpg)
RWDにおけるデザイン手法
![Page 14: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/14.jpg)
ブレイクポイントに応じたレイアウトバリエーションの作成
480px 768px 992px 1200px
![Page 15: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/15.jpg)
Photoshopのアートボード機能を利用
![Page 16: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/16.jpg)
本日のデモ
![Page 17: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/17.jpg)
12 グリッドベース
Photoshop CC Preview CC
メニュー設計 リンクデザイン
登録する
![Page 18: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/18.jpg)
本日の作例PC 向け モバイル向け(480px 未満)
![Page 19: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/19.jpg)
12 グリッドをベースにしたデザイン
12
6
4
3 3 3 3
4 4
6
102
3
4
5 7
8
9
![Page 20: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/20.jpg)
Bootstrap も 12 グリッドが基本
![Page 21: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/21.jpg)
Photoshop でレイアウト
![Page 22: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/22.jpg)
アートボードの作成
![Page 23: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/23.jpg)
新規ガイドレイアウトの作成1200
1300
1170
30(15+15)
1 2 3 4 5 6 7 8 9 10 11 12
15
50
15
50
![Page 24: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/24.jpg)
コンポーネント=部品
![Page 25: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/25.jpg)
1 カラムでも成立するコンポーネント
12
6+6
4+4+4
![Page 26: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/26.jpg)
レスポンシブ対応のメニュー設計
● ドロップダウンメニュー
● スライドメニュー/ドロワーメニュー
● ヘッダメニュー
![Page 27: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/27.jpg)
Preview CC で確認
![Page 28: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/28.jpg)
● タッチデバイスでは hover を使えない active と focus のデザインに気を配る
タッチデバイス向けリンクデザイン
● ボタンサイズ 44px 文字 14px 上下の余白 15px ずつ
![Page 29: レスポンシブサイト制作に効く デザインTipsあれこれ](https://reader030.vdocuments.net/reader030/viewer/2022020213/5871109c1a28abac6d8b5a8b/html5/thumbnails/29.jpg)
Thanks a lot :-)@crema