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

公開日: : 最終更新日:2014/05/18 Webデザイン

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

 

先日はじめて、レスポンシブ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つは読んでおいた方がいいかもしれません。レスポンシブのデメリットと言われてい部分もありますので、その辺を理解することが出来ます。

 

まとめ

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

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

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事

札幌未経験からWebデザイナー

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

ブログなどのWEBサービスが流行しているこの頃。WEBデザイナーになりたい!っていう方は少な

記事を読む

プログラミング

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

こんにちは。 とある理由で、7年間プログラマーとして勤めていた会社を退職した私ですが、最近やっぱ

記事を読む

札幌未経験Webデザイナー

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

  未経験からWebデザイナーになるために私がやった方法という記事に引き続き

記事を読む

プログラマー2

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

ITドナドナという言葉を最近になって知ったのですが、言葉を知らないだけで意味を聞いたらすぐにわか

記事を読む

スポンサードリンク

Message

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


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

スポンサードリンク

写真 2016-05-29 12 23 33
超簡単!MacでBluetoothスピーカーに接続する方法

MacにBluetoothポータブルワイヤレススピーカーに接続

写真 2016-05-29 13 10 57
MacBookと相性抜群!BluetoothスピーカーのオススメはSONY「SRS-X55」で決まり!

SONY「SRS-X55」   どうもこ

wraplus for Macbook Air
ノートPCにオススメ!おしゃれなMacBookAir&Proケース10選

MacBook AirやProは、シルバーカラーのスタイリッシュな

MacBookステッカー
MacBookAirと一緒に買うと良いオススメアイテム5つ紹介!

こんにちは!メインPCをWindowsからMacに変えてからも

退職したい
退職したい人の背中を押すための記事

  ある検索キーワードで私のブログを訪れる方た

→もっと見る

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


    follow us in feedly
PAGE TOP ↑