FEVDES BLOG

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

WEBデザイン コーディング

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

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

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

執筆者:


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

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

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

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

comment

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

関連記事

もう間に合わないとは言わない。新人に教えるスケジュールを守るコツ。

デザインやコーディング、プログラムができても、仕事ができないと評価される人がいます。

提案書やサイトの完成イメージに利用できる iPhone 6 / AndroidのモックアップPSD

iPhone 6 / Android Mockup Web業界の人や、サイト作りになれているクライアントなら、サイトやアプリのできあがりや、利用シーンは想像しやすいです。 しかし、年配の担当者やクリエ …

静岡市立-日本平動物園

手描き感のあるイラストがかわいいWEBデザイン

イラストをつかったサイトは手作り感がでて、親近感がわくので好きです。 そんなイラストを使ったサイトを参考のために、まとめてみました。 こんな素敵なサイトをつくってみたいです。 ちあーず歯科・小児歯科 …

レスポンシブWebデザインを制作して困ったことの解決方法

まだレスポンシブの案件が少なく、 知識もスキルもまだまだなのですが、 いくつか作ってみて、困ったことの解決方法です。 もくじ Javascriptを使った場合の端末ごとの処理 フォントによる見栄えの違 …

ワンランク上のコーディングを行うための6冊のオススメ本

HTML/CSSは、初心者でも簡単に使えますが、運用するとなると綿密な設計が必要です。 最近、自分の知識をアップデートするためにいろいろ調べたのですが、知識不足を実感し、あらためてHTML/CSSは奥 …

プロフィール

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