参考になるレスポンシブデザインのサンプル集

更新日: 2020年07月30日

CMS・サイト制作

マイページにお気に入り

Web制作の環境は大きく変化しています。
スマホ、タブレットなど様々なデバイスにホームページをを最適化しなければいけないため、各デバイスに対応できる支流のレスポンシブデザインのニーズが高まっています。

レスポンシブデザインをできるだけ効率的に作成するためのサンプルをストックしている方も多いのではないでしょうか。

今回はWeb制作時に役立つレスポンシブデザインのサンプル集をご紹介します。

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

Web制作をスタートする時、デザインからワイヤー構成を考えますが、どの端末向けのサイトにするか、ということです。
PC用、スマホ用、とデバイスごとにファイル管理をしていたら更新の時間もかかり管理も大変です。

そこで単一のファイルで管理ができ、各デバイスに応じた表示をさせることが可能なのがレスポンシブデザインです。

全てのデバイスに対応したサイトを考える時、デザインをマルチメディアでうまく表示させなければいけないため、CSSをどう組み込んでいくかとても重要な点になります。
各種利用しやすいCSSフレームワークを見つけ効率よく制作をしていきましょう。

レスポンシブデザインのサンプル集

1.html5up.net

http://html5up.net/txt
HTML5で作られたサンプルテンプレートを紹介しているhtml5up.netはフルスクリーンで作られており、スタイリッシュなデザインで構築されています。
上部タブから右サイドバー、左サイドバー、と設定がわかれており、フルスクリーン用のページも閲覧できます。

すべてのページからPC用・タブレット用・スマホ用と各デバイスを分けて確認できることも大きな特徴です。

2.BLACKTIE

http://blacktie.co/2014/02/shield-one-page-theme/
シンプルなデザインが揃うBLACKTIEは、シングルページでの制作になるので、テキスト数も少なく画像メインで表現したい時に最適です。
レスポンシブデザインのサンプルは多数あるので、もし選びきれなければまずはシンプルなサンプルを使用し、慣れてきたら他のサンプルに挑戦してみるのも良いかもしれません。