FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

WEBデザイン コーディング

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

投稿日:2014年1月19日 更新日:

SPONSORED LINK

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

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

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

SPONSORED LINK

もくじ

レスポンシブ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デザイン, コーディング

執筆者:


  1. […] 今からでも間に合う!レスポンシブWebデザイン作り方のまとめ | FEVDES BLOG […]

  2. […] p; 12月の記事が、1位にランクイン。 FEVDES BLOGさんの記事、「今からでも間に合う!レスポンシブWebデザイン作り方のまとめ」に取り上げていただいたおかげで、この記事のアクセスが […]

  3. […] 今からでも間に合う!レスポンシブWebデザイン作り方のまとめ | FEVDES BLOG […]

  4. […] 今からでも間に合う!レスポンシブWebデザイン作り方のまとめ […]

レスポンシブWebデザインのメリット・デメリットまとめ | HTML5GOGO へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

デザイン力を鍛える!Webデザインのフロー別セオリーと知識まとめ

SPONSORED LINK 以前、「WEBデザインが短期間で上達した方法」では、 上達する近道として模写を紹介しましたが、 それ以外にも基本的なセオリーや知識を知っているだけで、 デザインをする力が …

できないと諦める前に知識をつける方法

SPONSORED LINK デザイナーやコーダーになって新人が最初にあたる壁が、「センスがない」「私には向いてないのではないか?」と思うことです。 大半の人は、「好き」や「やってみたい」と思ってはじ …

非常にわかりやすいタイポグラフィのスライド

SPONSORED LINK タイポグラフィって、本を読んでも難しかったりするし、一生勉強し続けなければならない分野です。 そんな中、米倉明男さんのスライドが非常にわかりやすかったのでご紹介。 Web …

新人デザイナーに教える時に心がけている8つのこと

SPONSORED LINK 4月から新人デザイナーの教育係になる人や、 すでになっている人もいるのではないかと思います。 私は、新人やインターンを何人も教えてきました。 技術的なことだけ教えて、でき …

イラレのグラデーションの色をスポイトツールで変更する方法

SPONSORED LINK まわりに聞いてみると意外と知らないようでした。 確かにわかりづらいようですので、まとめてみました。

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。