Leeway's Life Log

札幌でWebデザイナーしてます。Mac、ガジェット情報など好きなこと書いていきます。

Webデザイン

レスポンシブなWebサイトを作成したので参考にしたサイトと勉強方法を紹介

投稿日:2014年2月22日 更新日:

レスポンシブモックアップ

 

先日はじめて、レスポンシブWEBデザインでサイトを作りました。 そこで、私が参考にしたサイトと勉強方法をさらっとご紹介致します。 まずは勉強方法から。

レスポンシブWebデザインとは

まずはレスポンシブWebデザインとはなにか?から勉強しました。

レスポンシブの他にも、フレキシブルとかもあるので、そもそもレスポンシブって?という所が私のスタートラインでした。

レスポンシブWebデザインの基礎

レスポンシブウェブデザインとは

レスポンシブWebデザインの基礎

全101ページありますが、さらっと見ることできます。読むというよりかは、画像が中心なため10分〜15分くらいで見ることが出来ます。

全ページを見ると 「あ〜!レスポンシブってこんな感じね!」と思うはずです。 これで「レスポンシブWebデザインとは」の理解は出来たのではないでしょうか。

レスポンシブWebデザインの勉強方法

動画で勉強

レスポンシブなウェブサイトをつくろう

レスポンシブなウェブサイトを作ろう

みなさんご存知「ドットインストール」。

動画を見てコードを書きながら勉強しました。全11レッスンで簡単なレスポンシブのサイトを作ることができます。

ここで私が意識したのは、「もし、1回で理解出来なければ2回見る。2回で理解できなければ3回見る」ということでした。ここで簡単なレスポンシブなWebサイトを作り理解を深めることが出来ます。

文章で勉強

ゼロから始めるレスポンシブWebデザイン入門 ゼロから始めるレスポンシブWebデザイン入門

第1回〜第7回まであり、非常にわかりやすい内容となっております。

また、ドットインストールでさらっと勉強したこともあり、これを見ればほとんど、レスポンシブWebサイト作り方は理解出来るようになっていると思います。

レスポンシブでサイトを作ろう

まずは、デザインについて考えました。

デザイン・レイアウトについて

デザインについては、スマホサイトのデザインから考える人が多いようでした。

幅は古いスマホは320px、iPhone5からは480pxとなっています。スマホサイトのデザインから作る理由としては、コンテンツに収まる幅に制限があるからで、PCビューから作ってしまうと、スマートフォンビューにしたときに、入りきらないなどがあるからです。

慣れてる人やスマホサイトのことも考えてデザインをすることが出来る方は、PCビューからデザインを考えても問題はないでしょう。

実際にレスポンシブのサイトを見る

レスポンシブウェブデザイン集

RWDJP

名前の通りレスポンシブで作られたサイトがたくさん貼ってあります。こちらのサイトを利用して下記を確認します。

  • どのようなデザインが見やすいのか?
  • スマホサイトの機能は?(ナビやトップへ戻る)
  • フォントやボタンの大きさはどのくらいか?
  • レスポンシブでどこまで出来るのか?
  • 画像をどれくらい使っているか?(読み込み速度を考慮)

私が気にしたのは、このくらいでしょうか。サイトの数は全部で30サイトくらいは見たと思います。サイトを参考にしながらPhotoshopでワイヤーフレームを作りました。

コーティング

レスポンシブコーディング

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ!

コーディングをしていくときは、こちらの記事が大変参考になるかと思います。

スマホ縦 320px〜479px
スマホ横、タブレット 480px〜767px
タブレット 768px〜1023px
PC 1024px〜

※表は引用です。

このような情報も載せてありますので、助かりました。

 

既にあるPCサイトをレスポンシブにする場合はこちらが参考になります。

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

 

レスポンシブWEBデザインでサイトを作る上で見ておいて損はない記事

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

レスポンシブWebデザインのメリット、デメリット比較まとめ

レスポンシブWebデザインのメリット・デメリットをわかりやすく!解説

こちらの3つは読んでおいた方がいいかもしれません。レスポンシブのデメリットと言われてい部分もありますので、その辺を理解することが出来ます。

 

まとめ

以上、レスポンシブでサイト作ったときに参考にしたサイトまとめでした。

実際に作ったときは、もっと多くのサイトやブログ記事を見たのですが、実際にはこの辺りを見ると理解は出来るのではないでしょうか。ありすぎても困ると思うので、さらっとまとめました。

スポンサーリンク

-Webデザイン
-

執筆者:


comment

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

*

関連記事

プログラマーに多い!ITドナドナの意味について体験談を元に解説

ITドナドナという言葉を最近になって知ったのですが、言葉を知らないだけで意味を聞いたらすぐにわかりました。 会社にいたあの人達はITドナドナだったのか!そう思いました。 私自身IT関連の中小企業に7年 …

札幌で未経験からWebデザイナーになるため覚えた方が良いスキル3つ+α

  未経験からWebデザイナーになるために私がやった方法という記事に引き続き、Web業界未経験からWebデザイナーになる方法を紹介していきます。今回は身につけた方が良いスキルです。 タイトル …

未経験からWebデザイナーになるために私がやった方法

ブログなどのWEBサービスが流行しているこの頃。WEBデザイナーになりたい!っていう方は少なくないと思います。 しかし、WEBデザイナーの求人募集要項には、実務経験有りの方という募集が多くないですか? …

やっぱりプログラミングって楽しいですね。

こんにちは。 とある理由で、7年間プログラマーとして勤めていた会社を退職した私ですが、最近やっぱりプログラムを書くのは楽しいなと沸々と感じております! 辞めた経緯を詳しく知りたい方はこちらをどうぞ。 …

@LEEWAY

@leeway

はじめまして。当ブログ管理人のLeewayと申します。
20台後半の元サラリーマンです。現在はフリーで活動中。 書きたいことを自由に書いております。
更新情報などつぶやきますので、よかったらフォローお願いします。


follow us in feedly