レスポンシブWebデザイン

【参考にしたい】おしゃれなレスポンシブWebデザインのサイトをジャンル別にご紹介!

参考にしたい】おしゃれなレスポンシブWebデザインのサイトをジャンル別にご紹介!

こんにちは。
GOSHIMMERです。

今回は、参考にしたいおしゃれで秀逸なレスポンシブWebデザインだなと思うサイトをジャンル別にご紹介していきたいと思います!

この記事はこんな人におすすめ

レスポンシブデザインのサイトを作ってみたい!

レスポンシブWebデザインのサイトのデザインで行き詰った

レスポンシブサイトがまとまっているサイト(まとめサイト)を知りたい!

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

レスポンシブWebデザインは、デバイスサイズごとに最適化されたWebデザインのことを指します。
1つのHTMLに対して、デバイスサイズごとにCSSを準備し、見せ方を変える手法です。

【初心者必見!】5分読むだけで理解できるレスポンシブWebデザイン入門書
【初心者必見!】5分読むだけで理解できるレスポンシブWebデザイン入門書今回は、レスポンシブWebデザインとは何?どうやるの?といった疑問をこのブログを読むだけで理解できるように説明していきたいと思います。...

【ジャンル別】レスポンシブWebデザインのおしゃれなWebサイト

【飲料・食品】AMACO | 発酵甘麹から生まれた、からだに優しいパンとスイーツ。

レスポンシブWebデザイン・AMACO | 発酵甘麹から生まれた、からだに優しいパンとスイーツ。

画面いっぱいのファーストビューが特徴的で、「からだに優しい」というコンセプトがよくつたわるデザインだなと思いました。
PCでは画像の配置など遊び心があるデザインですが、スマホにしたときにその遊び心を残しつつ、整理整頓され見やすくまとまっていて、参考にしたいデザインです。

【学校・教育】MEJINAVI2021|目白大学がまるっとわかるメジナビ

レスポンシブWebデザイン・MEJINAVI2021|目白大学がまるっとわかるメジナビ

私自身が一目ぼれしたサイトでもあるのですが、アニメーションだったり、デザインだったり見ているだけでとてもワクワクしました。
比較的デザインの幅が狭いレスポンシブWebデザインですが、レスポンシブデザインでもここまでできるんだと思わせてくれたサイトの一つです。

【作品】omote

レスポンシブWebデザイン・omote

縦で分割するデザインはよくあると思うのですが、スマホにしたときにメニューを前面に持ってくるデザインは初めて出会いました。
ポートフォリオサイトとしての魅せ方が新しく、自分の中で幅が広がった気がして、感謝したいデザインです。

おすすめレスポンシブWebデザインまとめサイト

bookma!

レスポンシブWebデザイン・まとめサイト

PCでの表示とスマホでの表示が一覧で確認することができて、とても見やすいサイトです。
それぞれのページに関する情報は基本掲載されておらず、該当ページへ直接飛ぶのもとても便利で使いやすいなと感じます。

Responsive Web Design JP

レスポンシブWebデザイン・まとめサイト

レスポンシブWebデザインのサイトのみをまとめたサイトです。
カテゴリー別や色別、技術別に検索出来てとても参考になります。

muuuuu.org(ムーオルグ)

レスポンシブWebデザイン・まとめサイト

クオリティが高い縦に長いサイトを厳選して集められたサイトです。
カテゴリーが細分化されていて、より絞り込んだ検索をすることができるので、求めているものにたどり着きやすくなっています。

まとめ

レスポンシブWebデザインは今や必須になってきています。
様々なデザインに触れ、自分の幅を広げることも大事だと思いますので、ぜひ参考にして制作してみてください!

Twitterをやっておりますので、何か質問や相談等あればお気軽にご相談ください^^

【初心者必見!】5分読むだけで理解できるレスポンシブWebデザイン入門書
【初心者必見!】5分読むだけで理解できるレスポンシブWebデザイン入門書今回は、レスポンシブWebデザインとは何?どうやるの?といった疑問をこのブログを読むだけで理解できるように説明していきたいと思います。...

GOSHIMMER

Creater - Web,Graphic,Video
Mayu Goto
インハウスWeb制作の仕事をする24歳。
人のために何かをすること、考えることが好きです。