【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方

公開日： 2013/12/25 : 最終更新日：2015/09/18 WEB製作 bootstrap, レスポンシブWEBデザイン

「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。

当社で制作した化粧品ブランド　リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。

いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。

僕も最初はそう思っていました。

一回触ってしまえば、「なんだ、かんたんなことじゃん」という話なのですが、最初に使ってみる時の敷居が高く感じてなかなかbootstrapの導入に踏み込めないWEB製作者さんがおおいと思いますので、今回は、bootstrapを使いつつ、bootstrapっぽくない(bootstrap臭のしない)ウェブデザインの作り方について、説明します。

bootstrap臭はどこから発生するのか？

bootstrapを見たことがあるけど、作ったことがない人は「bootstrap使うと、似たようなサイトになっちゃうんでしょ？」というイメージが強いと思います。

bootstrap臭の強いサイトっていうのは、こういうデザインをイメージされると思います。

黒のナビゲーションバーがヘッダーに配置されていたり、グレーのJumbotronなど、このあたりがbootstrap臭の原因でしょう。

最近のアップデートでbootstrap3になってから、bootstrapもフラットデザインを取り入れていますので、このイメージよりはだいぶbootstrap臭さはなくなっているのですが、未だにこのイメージをお持ちの方が多いと思います。

bootstrapの機能を使わなければいいんです

これらは、bootstrapのコンポーネントを使用すると、デフォルトでスタイルが設定されているので、bootstrapっぽくなってしまう、というのが原因です。

だったら、bootstrapのgrid機能などだけをつかい、デザイン的なコンポーネントはbootstrapを使わずに、自前でゴリゴリと書いてしまえばオールオッケーなのです。

さっきの例でbootstrap っぽかったのはnavbar やJumbotronの部分ですので、これらを使わず、デザインに関わる部分は自分でCSSを書いてしまえばいいのです。

bootstrapを使えばデザインしなくていいという幻想

デザインの苦手なエンジニアでもbootstrapの作法にしたがってコーディングすれば簡単にそれっぽいデザインに仕上げてくれる、というのはbootstrapの基本思想ですが、だからといってCSSを書かなくてもいい、というわけではありません。

むしろ、用意されているデザインを使用せずに自前でCSSを書くことで、オリジナリティのあるサイトを作ることができます。CSSを書かないからbootstrapっぽくなってしまう、ただそれだけのことです。

ただ、グリッドシステムだけは自前で用意すると面倒なので、bootstrapに頼って、デザインに関する部分だけは自前でCSSを書けばいいのです。

こんなに単純な話なのですが、やっぱり一度触ってみるまでは、
なかなかわかりづらいと思いますので、グリッドの使い方の基本から、オリジナルのデザインを組み込むところまでを詳しく解説していきます。

bootstrapのグリッドの基本構造

まずは、bootstrapの基本となる、グリッドの使い方を説明します。

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

1	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />

このようにbootstrapを読み込みます。

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

レスポンシブWEBデザインにするために、スマートフォン用のviewportを設定します。
今回の場合は、width=device-widthとして、端末の仮想viewportをそのまま横幅として設定します。iPhoneの場合は320pxとなります）

グリッドを組むときは親要素のclass=”row”の中に、カラムをclass=”col-xs-6″と作ります。

<div class="row">
    <div class="col-xs-6">
    aa
    </div>
    <div class="col-xs-6">
    bb
    </div>
</div>

</div>

</div>

bootsrapは全体を12カラムに分割したレイアウトを組むのですが、
col-xs-12とすると、横幅が6カラム（半分の幅）のdivができます。

次に、コンテンツをセンターに寄せたいので、div.rowをdiv.containerで囲見ます。

<div class="container">
    <div class="row">
        <div class="col-xs-6">
        aa
        </div>
        <div class="col-xs-6">
        bb
        </div>
    </div>
</div>

</div>

</div>

demo:demo1.html

bootstrapのデフォルトのCSSにより、
スマートフォンの場合は、

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

横幅が768px〜991px（タブレットを想定）の場合は

@media (min-width: 768px)
.container {
width: 750px;
}

@media (min-width: 768px)

.container {

width: 750px;

}

992px〜1199pxの場合は

@media (min-width: 992px)
.container {
width: 970px;
}

@media (min-width: 992px)

.container {

width: 970px;

}

1200px以上の横幅場合は

@media (min-width: 1200px)
.container {
width: 1170px;
}

@media (min-width: 1200px)

.container {

width: 1170px;

}

と、レスポンシブにcontainerの横幅が自動で設定されています。
これで、レスポンシブに伸び縮みするグリッドレイアウトが出来ました。

レスポンシブにカラムサイズを変更する

先ほど、カラムの指定で、col-xs-6と書きましたが、画面サイズに合わせて、カラム数を変更したい場合があります。

スマートフォンの場合は、横幅いっぱい（12カラム）に、タブレットでは横に2等分（6カラム）、PCの場合は3等分（4カラム）という具合にしたいときは、以下の様に書きます。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
        aa
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
        bb
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
        cc
        </div>
    </div>
</div>

</div>

</div>

</div>

demo:demo2.html

bootstrapのマニュアルのGrid optionsの項目に書いて有るとおり、boostrap3では、各ブレイクポイント毎に、カラム数を変更することが出来ます。

ブレイクポイント	class prefix
>768px	.col-xs-
≥768px	.col-sm-
≥992px	.col-md-
≥1200px	.col-lg-

タブレットを想定したブレイクポイントは、≥768pxなので、タブレットで2分割にしたい場合は.col-sm-6とします。
PCの場合は、992px以上になると思いますので、.col-md-4として3分割のカラムにします。

このように、bootstrapはモバイルファーストで設計されていますので、まずは.col-xs-12と一番小さい画面サイズの場合の記述をして、大きいサイズのブレイクポイントでは変更したい場合はcol-sm-6やcol-md-4と、各ブレイクポイント毎のクラスを付与していきます。

※Nexus7は横幅が600pxとなっており、このままではスマートフォン向けのデザインで表示されてしまいますので、本当はタブレット向けのブレイクポイントを≥600pxにしておきたいところなのですが、bootstrapのデフォルトがこうなっていますので、このまま話を進めていきます。各ブレイクポイントの数値を変更したい場合は、lessファイルの変数を変えることで、簡単に変更することができますので、調べてみて下さい。

画像をレスポンシブにする方法

次に、先ほど作った3つのカラムに画像を挿入してみます。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt=""/>
            aa
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt=""/>
            bb
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt=""/>
            cc
        </div>
    </div>
</div>

</div>

</div>

</div>

demo:demo3.html

画像がカラムからはみ出しちゃいました。
カラムサイズに合わせて画像をレスポンシブに横幅100%表示する場合は、.img-responsiveというクラスを画像に追加します。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive"/>
            aa
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive"/>
            bb
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive"/>
            cc
        </div>
    </div>
</div>

</div>

</div>

</div>

demo:demo4.html

これで、カラムの横幅にフィットするサイズに自動で縮小されます。
スマホでも、タブレットでも、PCでも、デザインが崩れなくなりました。

カラムの横幅よりも画像が大きい場合はこれでフィットしますが、カラムよりも画像が小さい場合は、小さいままになってしまいます。これは.img-responsiveではmax-width:100%と最大のサイズを設定しているからで、style=”width:100%”としておくと、常に横幅いっぱいに画像が表示されます。ケースによって使い分けて下さい。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
            aa
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
            bb
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
            cc
        </div>
    </div>
</div>

</div>

</div>

</div>

demo:demo5.html

ここから先は、自分でCSSを書いてゴリゴリ好きなデザインを作っていくだけ

bootstrapの機能で使うのはここまででOKです。これまで見てきたグリッド関係のクラスを適宜使いつつ、あとは自分の好きなデザインになるようにゴリゴリとCSSを書いていけばOKです。

たとえば、先ほどのサンプルを発展させたデザインはこんな感じに出来ます。

demo:index.html

まずは、ヘッダーを作ります。

<!--header-->
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a herf="#">
                    <img src="./img/logo.png" alt="logo" class="logo"/>
                </a>
            </div>
        </div>
    </div>
</div>
<!--//header-->

</a>

</div>

.header{
    border-top:3px solid #000;
}
.logo{
    margin:0.5em auto;
    display:block;
}

.header{

border-top:3px solid #000;

}

.logo{

margin:0.5em auto;

display:block;

}

ヘッダーナビゲーションを作成します。
カラムの設定で、768pxより小さい場合は横2列、それ以上では横4列になるように、.col-xs-6 .col-sm-3と設定します。

<!--headerNav-->
<div class="headerNav">
    <div class="container">
        <div class="row headerNavBox">
            <a href="#">
                <div class="col-xs-6 col-sm-3 headerNavBtn">
                    トップページ
                </div>
            </a>
            <a href="#">
                <div class="col-xs-6 col-sm-3 headerNavBtn">
                    メニュー1
                </div>
            </a>
            <a href="#">
                <div class="col-xs-6 col-sm-3 headerNavBtn">
                    メニュー2
                </div>
            </a>
            <a href="#">
                <div class="col-xs-6 col-sm-3 headerNavBtn">
                    メニュー3
                </div>
            </a>
        </div>
    </div>
</div>
<!--//headerNav-->

トップページ

</div>

</a>

メニュー1

</div>

</a>

メニュー2

</div>

</a>

メニュー3

</div>

</a>

</div>

.headerNavBtn{
    text-align:center;
    height:3em;
    line-height:3em;
    color:#5F5F5F;
    font-size:16px;
}

.headerNavBtn{

text-align:center;

height:3em;

line-height:3em;

color:#5F5F5F;

font-size:16px;

}

メニューをマウスオーバーしたときに背景色を#EEEにします。

.headerNavBtn:hover{
    background:#EEE;
}

.headerNavBtn:hover{

background:#EEE;

}

ヘッダーメニューの下には、mainVisualと4分割のカラムの2つのセクションを作り、それぞれの背景にグラデーションを適用します。

<!--mainVisual-->
<div class="mainVisual_wrapper section">
    <div class="container">
        <img src="./img/mainVisual.jpg" alt="" class="img-responsive mainVisual"/>
    </div>
</div>
<!--//mainVisual-->
 
<!--section-->
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="col_box clearfix">
                    <div class="col-xs-6 col-sm-12">
                        <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        写真と説明文のレイアウトが、ブレイクポイントによって変わります。
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="col_box clearfix">
                    <div class="col-xs-6 col-sm-12">
                        <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        写真と説明文のレイアウトが、ブレイクポイントによって変わります。
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="col_box clearfix">
                    <div class="col-xs-6 col-sm-12">
                        <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        写真と説明文のレイアウトが、ブレイクポイントによって変わります。
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="col_box clearfix">
                    <div class="col-xs-6 col-sm-12">
                        <img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
                    </div>
                    <div class="col-xs-6 col-sm-12">
                        写真と説明文のレイアウトが、ブレイクポイントによって変わります。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--//section-->

</div>

</div>

写真と説明文のレイアウトが、ブレイクポイントによって変わります。

</div>

</div>

写真と説明文のレイアウトが、ブレイクポイントによって変わります。

</div>

</div>

写真と説明文のレイアウトが、ブレイクポイントによって変わります。

</div>

</div>

写真と説明文のレイアウトが、ブレイクポイントによって変わります。

</div>

.section{
    background: #232829;
    background: -moz-linear-gradient(50% 0% -90deg, #000 0%, #232829 100%);
    background: -o-linear-gradient(-90deg, #000 0%, #232829 100%);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #000), color-stop(1, #232829));
    background: -webkit-linear-gradient(-90deg, #000 0%, #232829 100%);
    background: linear-gradient(180deg, #000 0%, #232829 100%);
    padding: 2em 0 3em;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0);
}
.mainVisual_wrapper .container{
    padding:0;
}
.mainVisual_wrapper.section{
    padding:0;
}
.col_box{
    background:#FFF;
    border-radius:3px;
    padding:15px 0 15px;
    margin-bottom:1em;
}

.section{

background: #232829;

background: -moz-linear-gradient(50% 0% -90deg, #000 0%, #232829 100%);

background: -o-linear-gradient(-90deg, #000 0%, #232829 100%);

background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #000), color-stop(1, #232829));

background: -webkit-linear-gradient(-90deg, #000 0%, #232829 100%);

background: linear-gradient(180deg, #000 0%, #232829 100%);

padding: 2em 0 3em;

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0)";

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#ff232829,GradientType=0);

}

.mainVisual_wrapper .container{

padding:0;

}

.mainVisual_wrapper.section{

padding:0;

}

.col_box{

background:#FFF;

border-radius:3px;

padding:15px 0 15px;

margin-bottom:1em;

}

最後にfooteerを作って完成です。

<!--footer-->
<div class="footer">
    <div class="container">
        <span class="copyright">
            &copy; Copyright <a href="http://megane84.com/blog/" target="_blank">久米さんの憂鬱</a> All Rights Reserved.
        </span>
    </div>
</div>
<!--//footer-->

</span>

</div>

.copyright{
    text-align:center;
    margin:0.5em auto;
    display:block;
}

.copyright{

text-align:center;

margin:0.5em auto;

display:block;

}

さて、どうでしょう、bootstrapを使用しているのに、bootstrapっぽくないデザインのサイトが完成しました。

bootstrapがデザインにしゃしゃり出てくるのが嫌、という方は

bootstrapでは、ダウンロードする際に、含めるコンポーネントを選んだり、デフォルトの色設定やサイズ設定をカスタマイズすることが出来ます。

Customizeページで　好きな設定にしてダウンロード出来るので、慣れてきて使わないコンポーネントや、好みの設定が出てきたら、ここで自分用にカスタマイズして使うと無駄が無くて良いと思います。

【まとめ】デザインが出来る人はbootstrapを使ってもちゃんとデザインできます

bootstrapで用意されているスタイルを使用すれば当然bootstrapっぽいサイトになってしまいますが、それを使わない、という選択肢をとることで、自由にデザインが出来るので、bootstrapっぽくはなりません。

もちろん、自前で作る分、bootstrapですでに用意されているスタイルを使用するよりは時間は掛かるでしょう。でも、わざわざbootstrapのスタイルをカスタマイズしていく事に時間をかけるよりは、すっぱり「使わない」という選択肢をとった方が作業効率アップにつながります。

ぜひご参考下さい。

マルチデバイス時代のWebデザインガイドブック

posted with amazlet at 14.01.30

鍋坂理恵大月茂樹
ソシム
売り上げランキング: 103,706

Amazon.co.jpで詳細を見る

レスポンシブ・ウェブデザイン標準ガイド　あらゆるデバイスに対応するウェブデザインの手法

posted with amazlet at 14.01.30

エムディエヌコーポレーション（MdN） (2013-04-23)
売り上げランキング: 21,854

Amazon.co.jpで詳細を見る

レスポンシブWebデザイン「超」実践デザイン集中講義

posted with amazlet at 14.01.30

山崎大助
ソフトバンククリエイティブ
売り上げランキング: 12,121

Amazon.co.jpで詳細を見る

Comment

先週(2013/12/23〜27)のオススメ記事「好印象を持たれるための８つのコツ」他 | Select * より:

2013年12月30日 12:32

[…] […]

返信 More from author
Bootstrap 学習用サイト | ITLAB51.COM より:

2014年5月26日 08:25

[…] デザインの作り方 WEBデザイナーの憂鬱 http://megane84.com/blog/2013/12/25/post-2682/ […]

返信 More from author
kuro より:

2015年2月15日 11:11

SyntaxHilighterというスクリプトが適用されていて、コードの改行がおかしくなってとてつもなく見辛くなっています。

返信

Message コメントをキャンセル

Additional comments powered byBackType

PREV: たまごカートの広告媒体管理のトラッキングパラメーターをad_codeから変更する方法
NEXT: 話題のハコビジョンをゲットしたけど、やっぱりちょっと微妙な件

【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方

bootstrap臭はどこから発生するのか？

bootstrapの機能を使わなければいいんです

bootstrapを使えばデザインしなくていいという幻想

bootstrapのグリッドの基本構造

レスポンシブにカラムサイズを変更する

画像をレスポンシブにする方法

ここから先は、自分でCSSを書いてゴリゴリ好きなデザインを作っていくだけ

bootstrapがデザインにしゃしゃり出てくるのが嫌、という方は

【まとめ】デザインが出来る人はbootstrapを使ってもちゃんとデザインできます

関連記事

2.ConoHaVPSにSFTPでとりあえずログインする方法

XAMPPインストール時にapacheが起動しないときは・・・

素人でも【本当に】簡単に更新できるオープンソースCMS concrete5をインストールしてみた。

ConoHaVPSを借りてみたけど、SSHでのログインに手こずった件

ロリポップサーバーでCGIなどが動かなくなった場合の対処法

jqueryでtableに一行飛ばしで背景色を付ける方法

ファーストサーバーにwordpressの新規に手動でインストールしてみた

EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法

たまごカートの広告媒体管理のトラッキングパラメーターをad_codeから変更する方法

バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ

Comment

Message コメントをキャンセル

NEW ENTRY

オススメテーマ

リンク

お名前.com & CPI

よく使われるタグ

カレンダー

【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方

名古屋のWEBデザイナーが、WEB制作、デザイン、コーディングからデジタルガジェットに関して自由に語るブログ

月	火	水	木	金	土	日
« 11月				1月 »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31