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

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

関連記事

美しいモノトーンベースのWEBデザインまとめ

モノトーンはシンプルなだけに、写真などの素材のよさが際立ちます。 CHANCE MAKER CHANCE MAKER ハロルド official web site ハロルド official web …

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

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

WEBデザインが短期間で上達した方法

この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。 WEBデザイナーとして10年ちょっと経過。 未だにデザイナーとして足りないものは多いですが、 どうにかクライアント …

2015年の「FEVDES BLOG」アクセス数トップ10

2015年のアクセス数トップ10です。 アクセスをみると全体的に検索エンジンからの流入が多かったです。 定番の記事のアクセスが多く、長い間アクセスがあるは励みになります。 1位 「よく使うPhotos …

AltのチェックにはAlt属性値が表示できる「Web Developer」が便利

サイトを制作していて、Altに何が入っているのかチェックするのは結構大変ですが、私はずっとFirefoxのプラグインのWeb Developerを使っています。 Web Developer 使い方 い …

プロフィール

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