ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました
Category : HTML5でサイトをつくろう |
スマートフォンサイトとPCサイトの振り分けを考える上で、
ひとつの選択肢となる「レスポンシブWebデザイン」。
スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。
しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えないとデバイスによって整理されていないレイアウトになってしまう恐れがあります。
スマートフォンサイトの最適化もレスポンシブWebデザインも、どちらもメリット・デメリットがあり、制作するサイトの目的やシステム・バックエンドの兼ね合い次第で、どちらが良いとも言えませんが、スマートフォンに対応したサイト、最適化したサイトを企画・提案する上で、まずはどちらの制作の流れも知っておくことが重要です。
そこで今回はゼロからはじめるレスポンシブサイトを作るために勉強できるサイトをまとめました。
自分でもチュートリアルをつくってみたいと思うので、その下準備として集めた参考になるサイトを紹介したいと思います。
まずはここから、初心者向け(基礎知識や設置方法について）
スマホ対応の新潮流「レスポンシブWebデザイン」とは？
http://ascii.jp/elem/000/000/613/613028/
レスポンシブWebデザインとはといった説明から導入する際のメリットや場面、デバイスの振り分けの考え方や制作の基礎について紹介されています。
また、スマートフォンサイトの最適化とともに検討する際に、まずレスポンシブWebサイトがどのようなものか知りたいという人におすすめです。
レスポンシブwebデザインで制作する時のポイント
http://design-spice.com/2011/09/22/responsive-web-desig/
スマートフォンサイト制作の選択肢やレイアウト設計といった基礎から実践まで非常にわかりやすくまとめられています。
まずはここで紹介されているようなデバイスのサイズから考えることからはじめましょう。
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
http://coliss.com/articles/digress/device-diagram-responsive-design-planning-by-metaltoad.html
レスポンシブwebサイトで振り分けをする際に重要となるデバイスごとのサイズ設計をわかりやすく提案しています。
iPhone iPad向けサイトを制作するためのいろいろ
iPhoneとiPasのウインドウサイズの指定やデバイスでの振り分けのサイズ指定について書かれています。
スマートフォン比較表
発売中のAndroid端末のウインドウサイズが一覧で見ることができます。
こういった表をもとに、対応機種に合ったデバイスごとのサイズの振り分けを考える参考になります。
実践編！レスポンシブウェブサイトの制作ガイド
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
実際にメディアクエリを使用してサイトをレスポンシブ化する際の細かい注意を知ることができます。
一通りの制作の流れと制作の際に気をつけることがよくわかります。
【CSS】スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
実際にメディアクエリをつかったコーディングのHTMLとCSSの細かいソースとデモを見ることができ、実践のチュートリアルとして参考になります。
便利なライブラリやテンプレート
respond.js
https://github.com/scottjehl/Respond
CSS3に対応していないIE6～8といったブラウザでもメディアクエリを実装できるようにするjsプラグインです。
<head>内にrespond.jsを読み込むだけのシンプルな実装です。（※IE8以下でのみ読み込む指定をすると良いと思われます）
css3-mediaqueries-js
http://code.google.com/p/css3-mediaqueries-js/
Googleコードで公開されているCSS3に対応していないIE6～8といったブラウザでメディアクエリを実装できるようにするjsプラグインです。
こちらもrespond.js同様に
内に読み込むシンプルな実装です。iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
http://photoshopvip.net/archives/29255
WordPressのレスポンシブWebデザインの無料テンプレートがまとめられています。
レスポンシブWebデザインに対応したjQueryスライドショープラグインまとめ7つ
メイングラフィックなどに使えるレスポンシブWebデザインに対応した可変するjQueryスライドショーのプラグインがまとめられています。
レスポンシブデザインに使えるjQueryプラグイン集
http://blog.creamu.com/mt/2012/03/jquery_46.html
ウインドウの可変に対応した便利なjQueryプラグインがまとめられています。
CSS3だけでなくレスポンシブWebサイトでプラスアルファの表現をしたい際に参考になります。
便利なツール
Responsive Design Test Bookmarklet
http://responsive.victorcoulon.fr/
レスポンシブWebデザインを確認できる便利なブックマークレットです。
お気に入りのブックマークバーに追加してサイト閲覧時にクリックするとデバイスのサイズごとに検証ができ、非常に便利です。
responsivepx
URLを入れてバーを動かしてサイズを変更するとレスポンシブWebデザインの検証ができます。
日本語版はこちらです。
Yet Another Window Resizer（Add-ons for Firefox）
https://addons.mozilla.org/en-US/firefox/addon/yet-another-window-resizer/
FireFoxのアドオンですが、ウインドウサイズをリサイズするアドオンです。
SafariやChromeと違いスマートフォンブラウザの検証には不向きかもしれませんが、Firebugを見ながら確認したい際などに便利かもしれません。
デザインギャラリー
Media Queries
海外のメディアクエリを使用したレスポンシブウェブサイトをまとめたギャラリーサイトです。
たくさんのサイトが紹介されているでレイアウトやデザインの参考になります。
またWEBデザインクリップの記事でも日本国内のレスポンシブサイトをまとめましたのでこちらもご覧ください。
PCサイトとスマートフォンサイトをどのように扱うか？
国内のレスポンシブウェブサイトをまとめました
他にもここがよいよーっていうのがありましたら是非教えてください！