先日はじめて、レスポンシブWEBデザインでサイトを作りました。 そこで、私が参考にしたサイトと勉強方法をさらっとご紹介致します。 まずは勉強方法から。
index
レスポンシブWebデザインとは
まずはレスポンシブWebデザインとはなにか？から勉強しました。
レスポンシブの他にも、フレキシブルとかもあるので、そもそもレスポンシブって？という所が私のスタートラインでした。
レスポンシブWebデザインの基礎
全101ページありますが、さらっと見ることできます。読むというよりかは、画像が中心なため10分〜15分くらいで見ることが出来ます。
全ページを見ると 「あ〜！レスポンシブってこんな感じね！」と思うはずです。 これで「レスポンシブWebデザインとは」の理解は出来たのではないでしょうか。
レスポンシブWebデザインの勉強方法
動画で勉強
みなさんご存知「ドットインストール」。
動画を見てコードを書きながら勉強しました。全11レッスンで簡単なレスポンシブのサイトを作ることができます。
ここで私が意識したのは、「もし、１回で理解出来なければ２回見る。２回で理解できなければ３回見る」ということでした。ここで簡単なレスポンシブなWebサイトを作り理解を深めることが出来ます。
文章で勉強
第１回〜第７回まであり、非常にわかりやすい内容となっております。
また、ドットインストールでさらっと勉強したこともあり、これを見ればほとんど、レスポンシブWebサイト作り方は理解出来るようになっていると思います。
レスポンシブでサイトを作ろう
まずは、デザインについて考えました。
デザイン・レイアウトについて
デザインについては、スマホサイトのデザインから考える人が多いようでした。
幅は古いスマホは320px、iPhone5からは480pxとなっています。スマホサイトのデザインから作る理由としては、コンテンツに収まる幅に制限があるからで、PCビューから作ってしまうと、スマートフォンビューにしたときに、入りきらないなどがあるからです。
慣れてる人やスマホサイトのことも考えてデザインをすることが出来る方は、PCビューからデザインを考えても問題はないでしょう。
実際にレスポンシブのサイトを見る
名前の通りレスポンシブで作られたサイトがたくさん貼ってあります。こちらのサイトを利用して下記を確認します。
- どのようなデザインが見やすいのか？
- スマホサイトの機能は？（ナビやトップへ戻る）
- フォントやボタンの大きさはどのくらいか？
- レスポンシブでどこまで出来るのか？
- 画像をどれくらい使っているか？（読み込み速度を考慮）
私が気にしたのは、このくらいでしょうか。サイトの数は全部で30サイトくらいは見たと思います。サイトを参考にしながらPhotoshopでワイヤーフレームを作りました。
コーティング
レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！
コーディングをしていくときは、こちらの記事が大変参考になるかと思います。
スマホ縦 320px〜479px スマホ横、タブレット 480px〜767px タブレット 768px〜1023px PC 1024px〜
※表は引用です。
このような情報も載せてありますので、助かりました。
既にあるPCサイトをレスポンシブにする場合はこちらが参考になります。
CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう
レスポンシブWEBデザインでサイトを作る上で見ておいて損はない記事
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
レスポンシブWebデザインのメリット・デメリットをわかりやすく！解説
こちらの３つは読んでおいた方がいいかもしれません。レスポンシブのデメリットと言われてい部分もありますので、その辺を理解することが出来ます。
まとめ
以上、レスポンシブでサイト作ったときに参考にしたサイトまとめでした。
実際に作ったときは、もっと多くのサイトやブログ記事を見たのですが、実際にはこの辺りを見ると理解は出来るのではないでしょうか。ありすぎても困ると思うので、さらっとまとめました。
