レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる

2014/12/19
CSS
Webサイト制作

現在WordPressで実案件を想定としたWordPress構築術を紹介しています。レスポンシブWEBデザインで作っているのですがあまり詳しく解説していなかったので今回改めてまとめていきたいと思います。

今回目標としているサイトは小規模のフィットネスクラブです。サンプルサイトをご用意していますのでスマホやPCで確認してみてください。

今回のサンプル： Sample Fitness Club

まずはサイトのデザインを考える

最初はどのようにサイトを組み立ててて行くか考えていきます。

完成形のデザインと変わっている場合もありますが、まずはいつも通りにPhotoshopなどでデザインをしていきます。画像にはありませんがスマートフォン用のデザインやタブレット用のデザインも用意しましょう。

極端にサイトの表示、デザインが変わってしまうような場合はレスポンシブWEBデザインにする意味が無いので注意しながらデザインしていきましょう。

またブレイクポイントを意識しながら作成していきましょう。どのくらいの幅で表示を切り替えつかも重要なポイントです。ただし時代が進歩するに連れて様々なデバイスが登場して、これが正解のものはないので自身で調査して納得がいくように制作していきましょう。

レスポンシブWEBデザインのテンプレートを用意

では早速サイトを構築していきます。まずはサイト制作にあたって最低限のテンプレートを用意します。

index.htmlやcssディレクトリ（スタイルシートを格納するフォルダ）やjsディレクトリ（Javascriptを格納するフォルダ）を用意します。

最初にディレクトリを用意する理由としてはHTML5 Reset Stylesheet、html5shiv.js、css3-mediaqueries.jsを最低限入れるために用意します。

面倒くさがりの自分は、最初から上記のファイルを読み込めるように最低限用意しています。そしてindex.htmlには下記のような記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>サイト名</title>
<link rel="icon" href="ファビコン" />
<link rel="shortcut icon" href="ファビコン" />

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css" />

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="css3-mediaqueries.js"></script>
<![endif]-->

<!-- ここからOGP -->
ここにOGPの設定を入れる
<!-- ここまでOGP -->

</head>

<body>

<!-- header -->

<!-- nav -->

<!-- main -->

<!-- contents -->

<!-- sidebar -->

<!-- footer -->

</body>
</html>

毎回書くであろうことをまとめておいた方が作業効率が上がります。親切心というか最近ではファビコンの設定やOGP設定なども組み込むようにしました。
最初に作っておくと後々が楽ですからね……

レスポンシブWEBデザイン用のCSSを準備

先ほどのソースコードの中に下記の記述をしていたのですが、こちらのCSSもテンプレート化したレスポンシブWEBデザイン用のソースコードを残しています。

<link rel="stylesheet" type="text/css" href="style.css" />

WordPressで構築する場合style.cssがスタイルシートを読み込むファイルなのでよほどの事がない限りファイル名は変えません。

@charset "utf-8";
/*
Theme Name: サイト名
Theme URI: URL
*/

/* body */

/*===== header =====*/

/*===== nav =====*/

/*===== main =====*/

/*===== contents =====*/

/*===== sidebar =====*/

/*===== footer =====*/

/* メディアクエリ設定（タブレット用） */
@media only screen and (min-width: サイズ指定) {
}

/* メディアクエリ設定（PC用） */
@media only screen and (min-width: サイズ指定) {
}

上記のようにテンプレートを用意します。メディアクエリの設定部分にはどのサイズになったら切り替えるかを指定していきます。それぞれ幅があるのでその都度書いていきます。

2行～5行にかけての記述はWordPressに持って行く時の仕様になるのでとりあえず最低限入れておきたい内容を書いておきます。

あとはひたすら書いていく

画像の切り出しとか終了したら後はひたすらHTML5で大枠から記述していき、CSS3でレイアウトの調整をしていきます。

そのCSS3で調整していく時に気をつけていくのはモバイルファーストを意識して書いていきます。直訳通りモバイル端末から記述していくようにします。

大半の方はPCで作業しているかと思います。9行～19行に書いてある所にモバイルでの表示させるCSSを記述していきます。その後メディアクエリ設定（タブレット用）にタブレット端末での表示方法を記述していき、最後のメディアクエリ設定（PC用）にパソコンでの表示方法を記述していきます。

ちょっと厄介なのが最終的にパソコンでの調整をしていくためブラウザ確認する時にウインドウの幅を調整しながら確認しなければなりません。最近はどのブラウザでもユーザーエージェントの切り替えができるようになっているので実機を持っていない場合は最低限ブラウザでユーザーエージェントの切り替えをして確認をするようにしてください。

ユーザーエージェントの切替方法

Windows環境での各ブラウザのユーザーエージェント切替方法を説明していきます。

Chromeの場合（ver：30.0）

Ctrl+Shift+i
横か下からニョキっとソースコードが記述された別フレームが登場する。
右下の歯車のアイコンをクリック
SettingsやOverridesと書かれたページに移る。
UserAgentチェックボックス
チェックボックスにチェックを入れ表示させたい端末などを選択する。
リロード
設定完了したらCtrl+rでサイトをリロードする。

この方法でChromeのユーザーエージェントの切り替えが完了になります。いろいろと調整がしやすいのがChromeの特徴ですね。一番使ってる。

Firefoxの場合（ver：24.0）

メニュー
メニューからツールを選びWeb開発のレスポンシブデザインビュー
ショートカットキー
Ctrl+Shift+m

いくどとなくバージョンアップされ気づいたら自宅のFirefoxのバージョンが24に！しかも簡単に切り替えることができるようになっています。

最新ブラウザにすると制作者側としては様々なメリットがあります。なるべくではなく積極的に最新ブラウザを使っていこうと活動していきたいものですね……

サンプルソースコード

あくまでもサンプルですので中途半端なところが多々ありますし未完成品を載せています。あくまでも動作確認としてご利用ください。サポートなどもいたしませんのでご了承ください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>完全プライベートフィットネスクラブ Sample Fitness Club【レスポンシブデザイン】</title>

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="js/bxslider/jquery.bxslider.min.js"></script>
<link href="js/bxslider/jquery.bxslider.css" rel="stylesheet" />

<script>

jQuery(function(){

var window_size = $(window).width();
  if(window_size >= 768){
    $('nav#gNav').css({'display':'block'});
  }
  else if(window_size < 768){
    $('nav#gNav').css({'display':'none'});
  }

$('.toggleBtn').click(function(){
    $('nav#gNav').stop(false,false).slideToggle();
});
$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});

});

</script>

<body>

<!--ヘッダー-->
<header class="cf">
<div class="wrapper cf">

<h1><a href="#"><img src="images/logo.png" alt="完全プライベートフィットネスクラブ Sample Fitness Club【レスポンシブデザイン】" /></a></h1>

<div id="headerMenu" class="cf">
<ul>
<li class="reservationBtn"><a href="#"><img src="images/reservationBtn.png" alt="" width="54" height="54" /></a></li>
<li class="toggleBtn"><a href="#"><img src="images/gNavBtn.png" alt="" width="54" height="54" /></a></li>
</ul>
</div>

</div></header><!--ヘッダー-->

<!--グローバルメニュー-->
<nav id="gNav" class="cf">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">初めての方へ</a></li>
<li><a href="#">店舗について</a></li>
<li><a href="#">ご入会について</a></li>
<li><a href="#">スタッフブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav><!--グローバルメニュー-->

<!--コンテンツ-->
<div id="content" class="cf">

<!--メイン-->
<section id="main" class="cf">

<div id="slidsBox" class="cf">

<ul class="bxslider">
<li><img src="images/slide/01.jpg" alt="" width="640" height="280" /></li>
<li><img src="images/slide/02.jpg" alt="" width="640" height="280" /></li>
<li><img src="images/slide/03.jpg" alt="" width="640" height="280" /></li>
<li><img src="images/slide/04.jpg" alt="" width="640" height="280" /></li>
<li><img src="images/slide/05.jpg" alt="" width="640" height="280" /></li>
</ul>

<div id="bx-pager">
<ul>
<li><a data-slide-index="0" href=""><img src="images/slide/thum-01.jpg" alt="" width="120" height="53" /></a></li>
<li><a data-slide-index="1" href=""><img src="images/slide/thum-02.jpg" alt="" width="120" height="53" /></a></li>
<li><a data-slide-index="2" href=""><img src="images/slide/thum-03.jpg" alt="" width="120" height="53" /></a></li>
<li><a data-slide-index="3" href=""><img src="images/slide/thum-04.jpg" alt="" width="120" height="53" /></a></li>
<li><a data-slide-index="4" href=""><img src="images/slide/thum-05.jpg" alt="" width="120" height="53" /></a></li>
</ul>
</div>

</div>

<section class="contentBox cf">
<div class="ttl"><h1>フィットネスクラブに通う</h1></div>

<div>

<article class="stepBox cf">
<h2><a href="#">まずは調査から</a></h2>
<p>まずはお気軽にご見学ください。レスポンシブデザインですので、お持ちのスマートフォンからでも快適にご覧になれます。</p>
</article>

<article class="stepBox cf">
<h2><a href="#">継続的な実践</a></h2>
<p>フィットネスもサイト制作も継続的な努力が必要です。落ち込む時もあるかと思いますが頑張りましょう。その姿とても素敵です。</p>
</article>

<article class="stepBox cf">
<h2><a href="#">困ったら相談</a></h2>
<p>なんだかうまくダイエットできない時なども一人で考えこまずに誰かに相談、検索して解決策を探しましょう。</p>
</article>

<article class="stepBox cf">
<h2><a href="#">目標を定める</a></h2>
<p>あれもやりたいこれもやりたいは禁物。遠回りになってしまうかもしれないけど自分の目標はしっかり立てよう！</p>
</article>

<article class="stepBox cf">
<h2><a href="#">ゴールまで頑張る</a></h2>
<p>フィットネスに限らずゴールはあります。それに向かってひたすらお互い頑張りましょう。たまに疲れちゃうのも仕方ない……</p>
</article>

</div>

</section>

<section class="contentBox cf">
<div class="ttl"><h1>店舗情報</h1></div>

<article class="shopBox cf">
<div class="shopPic"><a href="#"><img src="images/shop/nakano/shopThum.jpg" width="150" height="100" alt="中野店" /></a></div>
<div class="shopAdd">
<h2><a href="#">Sample Fitness Club 中野店</a></h2>
<ul>
<li class="add">東京都中野区○○ 1-2-3</li>
<li class="tel">03-1234-5678</li>
<li class="hours">毎週月曜日</li>
</ul>
</div>
</article>

<article class="shopBox cf">
<div class="shopPic"><a href="#"><img src="images/shop/kouenji/shopThum.jpg" width="150" height="100" alt="高円寺店" /></a></div>
<div class="shopAdd">
<h2><a href="#">Sample Fitness Club 高円寺店</a></h2>
<ul>
<li class="add">東京都杉並区○○ 1-2-3</li>
<li class="tel">03-9876-5432</li>
<li class="hours">毎週火曜日</li>
</ul>
</div>
</article>

</section>

</section><!--メイン-->

<!--サイドバー-->
<section id="sidebar" class="cf">

<aside class="cpBox cf">
<div class="cpBg">
<h2>1日無料体験キャンペーン</h2>
<p>施設が気になったらまずは体験を！今なら入会金50％off、事務手数料無料！</p>
</div>
<p class="more"><a href="#">詳しくはこちらから</a></p>
</aside>

<aside class="cpBox cf">
<div class="cpBg">
<h2>Sample Fitness Clubについて</h2>
<p>心地の良いプライベート空間でフィットネス！WordPressとレスポンシブで制作しました。</p>
</div>
<p class="more"><a href="#">詳しくはこちらから</a></p>
</aside>

<aside id="contactBox" class="cf">
<ul>
<li class="contact"><a href="#">お問い合わせ</a></li>
<li class="reservation"><a href="#">予約フォーム</a></li>
</ul>
</aside>

<aside id="stBlog">
<div class="ttl"><h1>スタッフブログ</h1></div>
<dl>
<dt>2013/00/00</dt>
<dd><a href="#">ここにスタッフブログタイトル</a></dd>
<dt>2013/00/00</dt>
<dd><a href="#">ここにスタッフブログタイトル</a></dd>
<dt>2013/00/00</dt>
<dd><a href="#">ここにスタッフブログタイトル</a></dd>
<dt>2013/00/00</dt>
<dd><a href="#">ここにスタッフブログタイトル</a></dd>
<dt>2013/00/00</dt>
<dd><a href="#">ここにスタッフブログタイトル</a></dd>
</dl>
</aside>

</section><!--サイドバー-->

</div><!--コンテンツ-->

<!--フッター-->
<footer id="footer" class="cf">

<nav id="footerNav">
<ul class="cf">
<li><a href="000">ホーム</a></li>
<li><a href="000">初めての方へ</a></li>
<li><a href="000">店舗について</a></li>
<li><a href="000">ご入会について</a></li>
<li><a href="000">スタッフブログ</a></li>
<li><a href="000">お問い合わせ</a></li>
</ul>
</nav>

<p>Copyright &copy; 2013 Sample Fitness Club. All Rights Reserved.</p>

<p>Server by : <a href="http://ad2.trafficgate.net/t/r/18/2071/75187_75187/" target="_blank">heteml</a> / Design by : <a href="http://www.sichoru.net/" target="_blank">sichoru</a></p>

</footer><!--フッター-->

</body>
</html>

@charset "utf-8";

/*
Theme Name: Sample Fitness Club
Author URI: http://www.sichoru.net/pageview/samplefitness/
*/

/* body */
body {
  width: 100%;
  background:#fff url(images/bg.jpg);
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#333;
}

a {
	color: #369;
}

a:hover {
	filter: alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
	text-decoration: none;
}

/* ヘッダーのスタイル */
header {
}
header .wrapper {
	margin: 5px;
}
header h1 {
	float: left;
}
header h1 img {
	width: 100%;
	max-width: 365px;
	height: auto;
}

header div#headerMenu {
	float: right;
}

header div#headerMenu ul {
}

header div#headerMenu ul li {
	list-style: none;
	float: left;
}


/* グローバルナビゲーションのスタイル */
nav#gNav {
	padding-top: 5px;
	background: #0f2c4c repeat-x url(images/gNavBg.gif) bottom;
}
nav#gNav a {
	padding: 10px;
	color: #fff;
	display: block;
	text-decoration: none;
}
nav#gNav ul {
	padding-bottom: 5px;
}
nav#gNav ul li {
	border-bottom: 1px solid #17426c;
}
nav#gNav ul li:last-child {
	border: none;
}


/* コンテンツエリア全体 */

div#bx-pager {
	display: none;
}

/* コンテンツエリア -> main */
div#slidsBox {
	width: 100%;
}

section.contentBox {
}

section.contentBox div.ttl {
	background: #0f2c4c;
}

section.contentBox div.ttl h1 {
	padding: 15px;
	color: #fff;
	border-left: 10px solid #1d5081;
}

section.contentBox article.shopBox {
	width: 100%;
	background: #fff;
}

section.contentBox article.shopBox .shopPic img {
	width: 100%;
}

section.contentBox article.shopBox .shopAdd {
	padding: 5px 10px 10px;
}

section.contentBox article.shopBox h2 {
	margin-bottom: 5px;
}

section.contentBox article.shopBox ul li {
	list-style: none;
	line-height: 150%;
}

/* コンテンツエリア -> sidebar */

aside.cpBox {
	margin-bottom: 10px;
	background: url(images/cpBg.gif);
}

aside.cpBox .cpBg {
	margin: 5px 5px 0;
	padding: 5px;
	background: #fff;
}

aside.cpBox .cpBg h2 {
	color: #0f2c4c;
	margin-bottom: 5px;
}

aside.cpBox .cpBg p {
	font-size: 12px;
	line-height: 150%;
}

aside.cpBox p.more {
	margin: 0 5px 5px;
	padding: 5px;
	background: #0f2c4c;
	font-size: 12px;
	text-align: right;
}

aside.cpBox p.more a {
	color: #fff;
}

aside#contactBox {
	margin-bottom: 10px;
}

aside#contactBox ul {
}

aside#contactBox ul li {
	width: 50%;
	list-style: none;
	float: left;
	text-align: center;
}

aside#contactBox ul li a {
	padding: 15px 0;
	color: #fff;
	text-decoration: none;
	display: block;
}

aside#contactBox ul li.contact {
	background: #77c82f;
}

aside#contactBox ul li.reservation {
	background: #d60f0f;
}

aside#stBlog {
}

aside#stBlog div.ttl {
	background: #0f2c4c;
}

aside#stBlog div.ttl h1 {
	padding: 15px;
	color: #fff;
	border-left: 10px solid #1d5081;
}

aside#stBlog dl {
	margin-top: 10px;
}

aside#stBlog dl dt {
	padding: 5px 10px 0;
	font-size: 12px;
}

aside#stBlog dl dd {
	padding: 5px 10px;
	line-height: 150%;
	border-bottom: 1px dashed #ccc;
}


/* ページナビ */



/* ページトップへボタンのスタイル */



/* フッターのスタイル */
footer {
}
footer nav#footerNav a {
	padding: 10px;
	color: #fff;
	display: block;
	text-decoration: none;
}
footer nav#footerNav {
	padding-top: 5px;
	background: #0f2c4c repeat-x url(images/gNavBg.gif) top;
}
footer nav#footerNav ul {
	padding-bottom: 5px;
}
footer nav#footerNav ul li {
	width: 50%;
	float: left;
}
footer p {
	padding: 5px 0;
	color: #666;
	font-size: 80%;
	text-align: center;
	line-height: 150%;
}



/* タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width: 769px) {


nav#gNav .toggleBtn {
	display: none;
}

}

/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 1001px) {

header {
	width: 960px;
	margin: 0 auto;
}
header .wrapper {
}
header .toggleBtn {
	display: none;
}

div#slidsBox {
	margin-bottom: 30px;
}

div#bx-pager {
	width: 640px;
	display: inline;
}

div#bx-pager ul li {
	list-style: none;
	float: left;
	text-align: center;
}

nav#gNav {
	padding-bottom: 5px;
}
nav#gNav ul {
	width: 960px;
	margin: 0 auto;
	background: none;
}
nav#gNav ul li {
	border: none;
	width: 160px;
	float: left;
	text-align: center;
}

div#content {
	width: 960px;
	margin: 30px auto;
}

section#main {
	width: 640px;
	float: left;
}

section.contentBox article.shopBox {
	margin: 10px 5px 0;
	width: 48.125%;
	float: left;
	border: 1px solid #ccc;
}

section#sidebar {
	width: 300px;
	float: right;
}

footer nav#footerNav {
	padding-top: 5px;
	background: #0f2c4c repeat-x url(images/gNavBg.gif) top;
}
footer nav#footerNav ul {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 5px;
}
footer nav#footerNav ul li {
	width: 160px;
	float: left;
	text-align: center;
}

}

こんなかんじに手抜き要素満載なソースコードを載せています……まずはレスポンシブWEBデザインってどういうものか感じて、実際に自分のソースで組み立ててみてください。

IE対策はどう考えるか

自分の制作活動の場合、最新のブラウザでの対応しか行っていません。クライアント先がまだXPを利用しているからと言われればこちらで確認できるデバイスを用意して確認をしてもらいます。基本iPhoneやiPad、MacBookを持参し確認してもらうようにしています。要望があればタブレットの種類も増やしますし。

古いブラウザにむやみに対応してぐだぐだとソースを追加するのもスマートではないと感じますし、Microsoftさんもやっと切り離す覚悟もしてくれたことですし。

最後に自分がレスポンシブWEBデザインに興味を持たせてもらい参考にさせてもらった書籍を紹介して今回のレスポンシブWEBデザインでフィットネスクラブのサイトを作ってみるを終了します。

長々と読んで頂きありがとうございました。

HTML5にそろそろシフトしなければならなくなってきました。これからはよりスマートなWEB制作が必要になってきます。なので少しでもきれいなコードを書いていかなければなりませんね。Webデザイナーだからって関係ないのは通じなくなってきました……勉強しましょ！！

変わるところも多く感じますが、反面とても便利になったのがCSS3ですね。従来は画像で対応していたものもCSS3で表現できるようになったのでますます重要性が高まってきましたね。

基本を知っておかなければつらい目に合うのもレスポンシブWEBデザインの特徴。要素を理解して素敵なサイト構築を目指そう！！

レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる

まずはサイトのデザインを考える

レスポンシブWEBデザインのテンプレートを用意

レスポンシブWEBデザイン用のCSSを準備

あとはひたすら書いていく

ユーザーエージェントの切替方法

サンプルソースコード

IE対策はどう考えるか

関連する記事

レスポンシブWEBデザインでフィットネスクラブの問い合わせフォームを作ってみる

レスポンシブWEBデザインでフィットネスクラブの下層ページを作ってみる

フィットネスクラブのWEBサイトを制作【テーマインストール～固定ページ制作編】

レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる

レスポンシブデザインの勉強！メディアクエリ・フルードグリッドの勉強

週間ランキング

今回の記事の情報

参考書レビュー