FEVDES BLOG

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

WEBデザイン コーディング

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

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

レスポンシブ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デザインを作ることができます。

PR

PR

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

執筆者:


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

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

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

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

comment

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

関連記事

簡単にできるPhotoshopの手書き風の記事10選

優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。 Photoshopで簡単にできる手書き風の記事を集めました。

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

WEBデザイナーとして10年ちょっと経過。 未だにデザイナーとして足りないものは多いですが、 どうにかクライアントにも満足してもらえる デザインが提供できるようになったと思います。 これは、自分が新米 …

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

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

私が新人の頃やっていたWebデザインの要望・修正指示の対応方法

新人デザイナーのころ、出勤したら、デザインの修正記事が机に置いてあると、そのまま帰りたくなっていました。 新人デザイナーにとって、デザインの修正指示は、寿命が縮む思いです。 新人デザイナー向けに、私が …

海外サイトで紹介された日本のグラフィックデザインが勉強になる

Graphic Design From Around the World: Japanese Design 海外のサイトを見ていると、英語だとカッコいいなーとか、羨望の眼差しでつい見てしまうのですが、 …

PR




人気の記事

プロフィール

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