WEBデザイン コーディング

今からでも間に合う！レスポンシブWebデザイン作り方のまとめ

レスポンシブWEBデザイン作り方のまとめ
photo by Scolirk

地方でもマルチデバイス対応を求められることが多くなってきました。
徐々に対応しているところが増えてきたためだと思います。

私も昨年からレスポンシブWEBデザインについて、
対応する必要がありましたので、調べたものをまとめてみました。

もくじ

レスポンシブWebデザインとは？

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

2年程前から流行し始めたレスポンシブWebデザイン。
基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。

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

Googleの考え

メリット・デメリット

ギャラリーサイト

Responsive Web Design JP

レスポンシブにするにはデザインにもコツがあります。
いろいろなサイトをみて研究することからはじめるのが効率がいいです。

レスポンシブWebデザインの作り方

実際に作ってみると意外とハマりどころが多いです。
スマホの制作関連の情報も同時に仕入れておくと楽でした。

作り方

作り方

表示確認

画面サイズ

ブレイクポイント

メディアクエリ

画像の切り替え・軽量化

画像の切り替え・軽量化

テキストだけでは対処が難しい場合があるので、画像の扱いをどうするかは悩みどころです。
デバイスにより切り替え、そして軽量化の知識が必須でした。

画像の切り替え

画像の軽量化

レスポンシブWebデザイン対応のフレームワーク

レスポンシブ対応のフレームワーク

制作を効率的に行う上でフレームワークを使うのもひとつの手段だと思います。
Bootstrapは事例が多くて安心感があります。

Bootstrap

Responsive Grid System

Foundation 4

レスポンシブWebデザイン対応のライブラリ

レスポンシブWebデザイン対応のライブラリ

レスポンシブWEBデザインは慣れるまで時間がかかりました。
ライブラリを使うことで時間の短縮を図りました。

ナビゲーション

スライドショー

その他

サイトの高速化

直接RWDに関係する記事ではありませんが、特にスマホは表示速度が遅くなる可能性があるので軽量化の知識は重要です。

おすすめの本

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

「レスポンシブWebデザインって何って何？」という人から、
実際に作ってみようという人まで、役立つ情報が満載です。

基本的なことがしっかりかかれており、
モバイルファーストの考え方が理解しやすい内容となっています。

サンプル通りに作っていけば、ベーシックなレスポンシブWebデザインを作ることができます。

-WEBデザイン, コーディング