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

水落絵理香

2016年2月12日

30,012

ferret　副編集長/ライター
前職はCMS制作会社でWebコンサルティングに従事。ferretでは記事作成、SNS運用を担当。「読めば誰でもWebマーケターになれるようなメディアを目指します！＾＾」
　　
・Facebook ：水落絵理香
・Twitter ：＠saturunus

執筆記事一覧はこちら

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は、シングルページでの制作になるので、テキスト数も少なく画像メインで表現したい時に最適です。
レスポンシブデザインのサンプルは多数あるので、もし選びきれなければまずはシンプルなサンプルを使用し、慣れてきたら他のサンプルに挑戦してみるのも良いかもしれません。