WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

ほちの

2020/06/02

国内の秀逸レスポンシブWebデザインを集めたギャラリーサイト【Responsive Web Design JP】

投稿者: ほちの
カテゴリー: デザイン >デザイン参考

はじめまして!
私は大学4年間で建築・インテリアデザインを学び、その後2年間Webの専門学校に通っていたという少し変わった経歴があります。

なぜ全く違う業種を選んだかといいますと、大学4年生の時に就職活動でWebの世界を知り、Webデザイナーになりたいと思ったからです。

4月から新社会人となり、Webデザイナーになるためのスタートラインに立ったばかりですが、そんな私が便利だなと思ったツールやサービスなどを紹介していきたいと思います。

今回紹介するのは、日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト【Responsive Web Design JP】です!

今やレスポンシブ対応が当たり前!?

今やスマホでサイトを見ることが多くなり、レスポンシブに対応していることが主流になっているのではないでしょうか。

デザイン模写を行う時、自分でレスポンシブWebデザインの勉強や参考にする時も、参考サイトのサイズを変えてWebサイトを見比べてみることが多いと思います。

そんな時にどんなレスポンシブサイトを参考にしようか、参考サイトがあってもChromeだとF12キーを押して、スマホサイズにして…でもどのコンテンツがどう変わったのかを並べて見比べたい…と思うことがでてきました。

そんな時には【Responsive Web Design JP】

【Responsive Web Design JP】について


Responsive Web Design JP

このサイトはご覧の通り、PCサイズ、タブレットサイズ、スマホサイズの見た目が並べてあり、見比べることができます。

TOPのMOREボタンを押すと詳細が見ることができ、そのサイトの詳細、色やどんな技術が使われているか見ることができます。

さらにスクロールすると類似サイトも一緒に見ることができます。

こんな調べ方もできます!

横のサイドメニューからはカテゴリー別に検索することもできます。

例えば、COLORボタンをクリックすると色別に検索できます。

TECHNIQUEボタンをクリックするとサイトに使われている技術ごとに検索することもできます。

どんな技術が使われているか気になった時や同じ技術でもどうやって使われているかを参考にできるのではないでしょうか。

他にもカテゴリー別に検索出来たり、

タイプ別にも検索することができるので、自分が参考にしたいサイトのカテゴリーをピンポイントで探すことができます。

まとめ

いかがでしょうか。
デザインを見比べることができ、参考になるサイトもたくさんあるので、勉強する時やデザインの参考にしたい時などにぜひ使ってみてください!

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

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

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ