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