どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。
モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。
レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。
レスポンシブデザインを制作するときに意識しておきたい基本項目7つ
1. 画像の代わりになるべくCSSで表現すべし
レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。
そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。
立体ボタンや矢印だけでなく、ロゴマークなどまで、CSS3で表現できることはいっぱいありますよ〜。
【参考】
「CSS3でできること」を知るために見ておきたい42のサイト
http://weboook.blog22.fc2.com/blog-entry-289.html
CSS3で何ができるの？という時にみておきたいサイト集
http://coliss.com/articles/build-websites/operation/css/css3-showcase.html
立体的に動く！カッコイイ3D表現のCSS3サンプル5選
https://liginc.co.jp/web/html-css/css/50868
※IEではバージョンによってCSS3が使えませんので、ぜひ注意してください。
2. アイコンはWebフォントを使うべし
アイコンWebフォントとは、図形フォントです。ページ中の文字の表示に利用するフォントデータをWeb上からもってきて表現します。
特徴は何と言っても、ベクターファイルゆえにどのデバイスでもキレイに表示される（Retinaでもボケない）ってことです。
これはレスポンシブデザインにはもってこいですよね！ また、画像で表示するよりも軽く、フォントとして使うので、CSSで色、大きさなどの装飾をつけることができるというメリットもあります。
【参考】
Retinaでもボケない「シンボルアイコン」を使いこなそう！
https://liginc.co.jp/designer/archives/10334
画像の代わりに使えるアイコンタイプのWebフォントのまとめ
http://weboook.blog22.fc2.com/blog-entry-332.html
Sassを使って時間短縮！アイコンフォントを手軽に使える方法
https://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画像を大幅ダイエット！
https://liginc.co.jp/designer/archives/8822
画質を落とさずに最大90%画像のファイルサイズを圧縮できるツール『Caesium』
http://www.lifehacker.jp/2011/09/110918caesium.html
