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

ferret編集部

2016年2月12日

ニュース

37,669

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
　　
>> 著者詳細はこちら

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

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

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

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

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

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

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

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

1.html5up.net

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

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

2.shapebootstrap.net

https://shapebootstrap.net/item/1524968-fornax-corporate-site-template
多数のテンプレートをスライドショーで閲覧しながら選べるサンプル集です。
ミニマルなデザインを得意とし、コンテンツ重視のページ作りに適しています。

全商品カテゴリからユーザーのお気に入りを表すボタン設定やライブデモもあるので選びやすい構造になっています。

3.BLACKTIE

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