レスポンシブデザインでWebサイト制作する時に役立つ15サイト

レスポンシブデザインという言葉を聞いたことはありますか？
普段皆さんはどのようにWebサイトを閲覧しているでしょうか。PCやスマートフォン、ipadなどのタブレットを使う方も増えていますよね。

移動中や、ちょっとした空き時間などであれば圧倒的にスマートフォンやタブレットを利用することが多いかと思います。そんなときにサイトの読み込みに時間がかかりすぎたり、画像の表示が上下でガタガタ…こんなサイトだとどんなに有益な情報が掲載されていても「見てみよう」という気持ちが急降下してしまいます。

レスポンシブデザインとは結局のところ、「何を使って見ても美しいデザインが保てる」ということなのです。

では一体どんなデザインがレスポンシブデザインとよばれるものなのでしょうか、まずは良質なお手本を見ていきましょう。

• レスポンシブデザイン=美しい
• レスポンシブデザインを知りましょう
• 実はかんたんに作れる⁉レスポンシブサイト-テクニック編
• レスポンシブデザイン　実践編
• Googleのマテリアルデザインを知る

レスポンシブデザイン=美しい

1.RESPONSIVE DESIGN JP

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

2.WEB DESIGN GALLERY for WEB DESIGNERS

※対応デバイスを【レスポンシブWebデザイン】で絞り込むと約120件が表示されます。

3.MUUUUU.ORG

※【CATEGORY】→【レスポンシブWebデザイン】で絞り込むと約1200件が表示されます。

おまけ

素敵なデザインに出会えるギャラリーサイトまとめ

もっと色々なデザインを知りたい！という方はコチラのサイトで探してみるのもおススメです。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

レスポンシブデザインを知りましょう

レスポンシブデザイン＝美しいと書きましたが、レスポンシブデザインの定義は”ウィンドウの幅に合わせて「responsive(良く反応)」して勝手に表示が切り替わるデザイン”です。

既にhtmlやcssを学んでいる皆さんにとっては「当たり前」かもしれませんが、サイトの装飾や表示についてを一手に引き受けてくれているstylesheet（css）。

このおかげでレスポンシブデザイン（レスポンシブWebデザイン）が実現できているのです。

4.レスポンシブデザインとは？特徴やメリット・デメリットを紹介

レスポンシブデザインの定義から、仕組み、メリット、デメリットまでわかりやすく解説してくれています。

5.必読！5分でわかるレスポンシブWebデザインまとめ

4で紹介したサイト同様、図がたっぷりと使われていることと、より表示について踏み込んだ解説がされているサイトです。

実はかんたんに作れる⁉レスポンシブサイト-テクニック編

今の時代にWeb サイトを作ろうと思ったら、レスポンシブデザインがほとんど必須項目だということがお分かりいただけたでしょうか。

「PCでコーディングするだけでも大変なのに、スマホやタブレットのことまで考えないといけないなんて…」と絶望的な気持ちになる必要はありません。

6.【CSS】レスポンシブ対応の方法や作り方を徹底解説【メリット＆デメリット】

レスポンシブ化の手続き という見出し以降の部分が大変わかりやすい上に、ここに書かれている通りにCSSを書いていけばレスポンシブ化できるという神サイトです。

丸パクリは気が引けますか？このサイトに書かれている通りにコーディングしてもデザインを考えるのはあなたです。それに「学ぶの語源は真似る」といいますよね。

7.Webサイトのスマホ対応の方法3つ！レスポンシブデザインも解説

こちらも図解たっぷりのため、1つ1つの行程がわかりやすくなっています。

まだfloat使ってるの？flexを使ってコーディング！

レイアウトを整える際にfloatを使用することってありませんか？

一番最初にfloatを使って画像が思い通りの位置にハマったときの嬉しさがまだ忘れられません。しかし、floatでレスポンシブデザインを実現しようとすると工程が多くなってしまったり、CSSが効かなかったり、と割と曲者なのです。

8.CSSレイアウトにfloatは古い!初心者でも始められるFlexbox入門

「なぜ今flexなのか」をわかりやすい画像付きで解説してくており、floatを使った場合との比較もしてくれています。

floatユーザーさんも騙されたと思って一度flexを使ってみたらもうfloatには戻れなくなるかもしれません。

pxじゃダメなの…？レスポンシブルに使うべき単位

フォントサイズの単位にpx（ピクセル）以外があるなんて…と驚かれた方もいるのではないでしょうか。

9.【CSS】結局レスポンシブでのフォントサイズはどう書くべき？

フォントサイズの解説からレスポンシブデザインにおいて最も有用なフォントサイズ選手権を開催してくれています。

ただ初心者の中でもhtmlとcssを本当によく勉強している方向け…という印象なので上記のサイトを見て「なるほど、わかったのかわかってないのか、わからん。」となった方はコチラも参考にしてみてください。

10.レスポンシブの単位には％よりもvw, vhが便利！フォントサイズの指定にも使える

The シンプルな解説です。「よくわからんかもしれんが、とにかくpxはやめとけ。」という熱い想いが伝わる内容です。

コチラを参考にしてみて、より深く知りたくなったら9のサイトに戻るという方法も良いかもしれません。

viewport・mediaquery・ブレイクポイント　3大わからんを理解する

レスポンシブデザインについてのサイトを眺めていると、やたらと【viewport・mediaquery・ブレイクポイント】の3つの単語を目にします。

この単語がでてきただけで、まずは「viewportとは」と検索しなければ先に進めないという人も多いのではないでしょうか。

ひとまずこの3つの単語の意味と関係性にザっと目をとおしてみましょう。

11.コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて

viewport→mediaquery→ブレイクポイントの順に、「何者なのか？」をさっくりと解説してくれています。

また図やお手本のコードもあり【viewport・mediaquery・ブレイクポイント】がまったくわからない方はまずコチラのサイトを参考にしてみると良いでしょう。

viewport

12.もう逃げない。HTMLのviewportをちゃんと理解する

某使途と戦う、某シンジ君のようなタイトルですが大変中身の濃いサイトです。このサイトの中身が完璧に理解できるのであればあなたはviewportマスターと言えるでしょう。

mediaquery

13. レスポンシブの基本、メディアクエリの書き方

mediaqueryとは何なのか→コードの書き方→使用可能な属性、と理解しやすい流れ平易な表現で解説されたサイトです。

また余談ですが、グレイとホワイトを基調にしたサイトのデザインそのものもオシャレですね。このサイトの製作者の方は無印良品の売り場みたいな家に住んでそうな印象を受けました。

ブレイクポイント（ブレークポイント）

14. レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト

ブレイクポイント（ブレークポイント）とは何か？を理解している前提にはなりますが、PC・スマートフォン・タブレットの各デバイスでのブレイクポイント（ブレークポイント）の決め方を図やアニメーションたっぷりに解説してくれています。

教えてGoogle先生！レスポンシブル・コーディング

GoogleやYahoo!などの検索エンジンに優良なサイトであると認識されることはあなたのサイトが多くの人の目に触れるチャンスを作るために大変重要です。

そこで一度Googleが提供しているレスポンシブル・コーディングのガイドも見ておきましょう。少し高度な内容の為、ここまでの要素をある程度理解できるようになってから確認すれば良いでしょう。

15. レスポンシブ ウェブデザインの基本

レスポンシブデザイン　実践編

ここまでで「レスポンシブデザイン」って何なのか？ということがなんとなく掴めたでしょうか。

では実際にレスポンシブデザインを実践してみましょう！

GoogleChromeでレスポンシブ開発

PCでは完璧なデザインと思って公開したサイトがいざスマートフォンやタブレットで表示するとバランスが崩れていたり、おかしな位置にメニューがあったり…という経験はないでしょうか。

しかしコーディング中に常に各デバイスでの表示を確認するのは面倒です。実はGoogleChromeにはデバイスに合わせた表示に変更できる機能があるのです。

Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法

モバイルフレンドリーか確かめる

モバイルフレンドリーとは、モバイルサイトがユーザーにとって使いやすいことを示す概念です。 スマートフォンなどのモバイル端末で来訪したユーザーがサイトを問題なく閲覧できるサイトを、Googleはモバイルフレンドリーと評価します。

https://www.seohacks.net/basic/terms/mobile-friendly/

モバイルフレンドリーとは

繰り返しにはなりますが、せっかく頑張って作ったWebサイト。ぜひGoogleに評価していただきたいところです。

モバイルフレンドリーかどうかを一発で判断できるツール（サイト）があるのでぜひ利用しましょう。

モバイルフレンドリーテスト

そうはいっても楽したい！Bootstrapなどでレスポンシブ

レスポンシブデザインが大切なのわかってる！できることならモバイルフレンドリーに対応させたい気持ちはある！

でも何よりも早くサイトを完成させたい！

そんな方にはBootstrapがおススメです。WordPressで人気のテーマにも実はBootstrapが使用されているものがたくさんあります。でもなぜBootstrapを使用すると良いのでしょうか。

いったんその仕組みを見ておきましょう。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

Googleのマテリアルデザインを知る

何度もくりかえしになってしまい申し訳ないのですが、やはりGoogleに「イイネ！」と思ってもらえるWebサイトの基準を知っておくことは必要です。

マテリアルデザインとは？特徴やガイドライン、フラットデザインとの違いを解説

デベロッパー キーノート　（Google I/O "18）

※日本語字幕付きです。

終わりに

レスポンシブデザインはこの先も重要視されていくことでしょう。

デバイスを選ばずに美しいWEbサイトを制作できるようになればあなたの魅力を発信する能力は足し算ではなく掛け算になるはずです。