レスポンシブサイト制作に効くデザイン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