• LIGの広告成功事例
WEB

レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ

レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ

どうも〜こんにちはぁ! 最近レスポンシブなサイトを作ることが多いライターの、のび太です。

モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。

レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね!」って感じた基本的なことを7つご紹介させていただきたいと思います。

レスポンシブデザインを制作するときに意識しておきたい基本項目7つ

1. 画像の代わりになるべくCSSで表現すべし

レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。

そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。

立体ボタンや矢印だけでなく、ロゴマークなどまで、CSS3で表現できることはいっぱいありますよ〜。

【参考】

「CSS3でできること」を知るために見ておきたい42のサイト

CSS3で何ができるの?という時にみておきたいサイト集

立体的に動く!カッコイイ3D表現のCSS3サンプル5選
http://liginc.co.jp/web/html-css/css/50868

※IEではバージョンによってCSS3が使えませんので、ぜひ注意してください。

2. アイコンはWebフォントを使うべし

アイコンWebフォントとは、図形フォントです。ページ中の文字の表示に利用するフォントデータをWeb上からもってきて表現します。

特徴は何と言っても、ベクターファイルゆえにどのデバイスでもキレイに表示される(Retinaでもボケない)ってことです。

これはレスポンシブデザインにはもってこいですよね! また、画像で表示するよりも軽く、フォントとして使うので、CSSで色、大きさなどの装飾をつけることができるというメリットもあります。

【参考】

Retinaでもボケない「シンボルアイコン」を使いこなそう!
http://liginc.co.jp/designer/archives/10334

画像の代わりに使えるアイコンタイプのWebフォントのまとめ
http://weboook.blog22.fc2.com/blog-entry-332.html

Sassを使って時間短縮!アイコンフォントを手軽に使える方法
http://liginc.co.jp/web/html-css/other-html-css/61830

3. 画像ファイルサイズを極力減らすべし

いくら「なるべく画像は使いたくない!」といっても、どうしても使わなきゃいけない時ってありますよね、当然。

なので、モバイル端末の回線でも少しでも早く表示されるよう画像ファイルは出来る限り減らしましょう。

まぁ画像ファイルサイズを極力減らすのは、レスポンシブサイトやスマホサイトに限らず普通のPCサイトでもやっていきたいことですよね。

【参考】

見た目はそのままで、JPEG画像のファイルサイズを1/5に軽量化するオンラインサービス -JPEGmini
http://coliss.com/articles/web-services/online-jpegmini.html

簡単&綺麗に圧縮できる!「TinyPNG」でPNG画像を大幅ダイエット!
http://liginc.co.jp/designer/archives/8822

画質を落とさずに最大90%画像のファイルサイズを圧縮できるツール『Caesium』
http://www.lifehacker.jp/2011/09/110918caesium.html

4. CSSスプライトを使うべし

CSSスプライトは、複数の画像を1つにして、それぞれのポジションを指定して表示するCSSテクニックです。画像の数だけ増えるHTTPリクエストを減らすことができるので、サイトの高速化につながります。

ちなみにスプライト画像はSassとCompassを利用して作る方法がかなりおすすめっす!

この方法だと後から追加した画像が加わるたびにスプライト画像が再生成されるので、修正・追加があったときにめっちゃ楽になります。

【参考】

CSSスプライトについてあれこれ。
http://lopan.jp/css-sprites/

Sprite画像でもう悩まない?!SassとCompassで速攻Sprite画像を作る方法に感動!
http://webya.opdsgn.com/webtech/sassandcompassforspriteimage/

5. Retina対応すべし

Retinaディスプレイでは通常のディスプレイに比べて解像度が倍以上あるため、通常画像をそのまま使うとぼやけてしまいます。

iPhone4から採用されたRetinaディスプレイですが、最近ではMacbook Proなどでも採用されましたよね〜。そのためサイズが2倍の画像を用意するなどの対策が必要になります。

【参考】

Webサイト&WebアプリのRetina対応方法まとめ
http://kray.jp/blog/retina-web/

WebページをRetina対応させるテクニック
http://www.atmarkit.co.jp/ait/articles/1308/29/news004.html

6. 表示サイズによる画像切り替えを行うべし

レスポンシブデザイン制作時では、PCサイズの時とモバイルサイズのときで、違うサイズの画像を表示させたいって時がしょっちゅうあります。その時に、メディアクエリでモバイルサイズ時は”display: none”にするという方法があります。

でもこれはただ単に非表示にしているだけで、結局は画像を読み込んでしまっています。なので、サイト表示速度が遅くなる原因になってしまいます。

そこで、ブレークポイントによって読み込む画像を切り替える手法がおすすめです。下記のサイトなどを参考にぜひ試してみてください。

【参考】

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html

breakpoints.jsを使用したレスポンシブでの画像切り替え
http://www.webopixel.net/javascript/804.html

7. テーブルを工夫すべし

レスポンシブデザインでテーブルをどうするかに悩んでしまう方は多いのではないでしょうか? 「画面サイズが狭くて、ど〜うしてもはみ出してしまう…」なんて時はないですか?

そこで、例えばtableのdisplayプロパティを変更したり、jQueryを使ったりなどの工夫が必要です。

【参考】

【必見】レスポンシブデザインの表組みはこんな方法で実現できる!
http://matome.naver.jp/odai/2135605473334772801

レスポンシブWebデザインでテーブルを使う時の小技
http://design-spice.com/2012/11/01/responsive-table/

さいごに

レスポンシブデザインで知っておくべきことは他にもたくさんあると思いますが、今回は自分自身が制作時に「これは特に意識しとかなきゃなぁ〜」って感じていたことを中心に書かせていただきました。

みなさんの参考になれば幸いです!

この記事を書いた人

のび太
のび太 外部ライター 千葉
メディアやブログ制作&運用を得意とする株式会社NOBITAの社長をやっております、のび太と申しまーす!よろしくお願いしまーす!(個人ブログ:がんばれ!のび太!

こちらもおすすめ

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2015/11/09 17:08時点)
  • 出版日2015/10/24
  • 商品ランキング16,422位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ