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

公開日: : 最終更新日:2015/09/18 WEB製作 ,

Pocket

index

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臭の強いサイトっていうのは、こういうデザインをイメージされると思います。

bootstrap1

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

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

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

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

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

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

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

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

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

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

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

bootstrapのグリッドの基本構造

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

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

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

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

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

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

demo1

demo:demo1.html

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

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

992px〜1199pxの場合は

1200px以上の横幅場合は

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

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

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

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

demo2

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つのカラムに画像を挿入してみます。

demo3

demo:demo3.html

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

demo4

demo:demo4.html

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

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

demo:demo5.html

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

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

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

index

demo:index.html

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

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

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

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

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

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

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

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

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

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

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

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

ぜひご参考下さい。

マルチデバイス時代のWebデザインガイドブック
鍋坂 理恵 大月 茂樹
ソシム
売り上げランキング: 103,706
レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
エムディエヌコーポレーション(MdN) (2013-04-23)
売り上げランキング: 21,854
レスポンシブWebデザイン「超」実践デザイン集中講義
山崎 大助
ソフトバンククリエイティブ
売り上げランキング: 12,121

関連記事

xampp

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

PHP & MySQLをローカルでテストするときによく使うXAMPPですが、apacheを起

記事を読む

size

【絶対に知っておかなきゃいけない】紙媒体とWEBデザインにおけるデザイン作法の違いについて #デザイン#web

最近、紙媒体のデザインとWEBのデザインでは、結構作法が違うところが多いなぁ、と思うことが増えてきた

記事を読む

no image

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

今回のロリポップのwordpressへの大規模ハッキングをうけて、ロリポップ側でいろいろ対応が始まっ

記事を読む

image

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

  最近はちょっとandroidからは離れてhtml,PHP ,Javascript関

記事を読む

conoha2-thumb

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

前回に引き続き、今回はConoHaにSFTPで接続する方法です。 前回の設定でSSH接

記事を読む

EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法

EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法

EC-CUBEのカスタマイズや構築をしているとき、いきなり本番環境をいじることが出来ない場合

記事を読む

viralmedia

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

ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします。 twitterでお世

記事を読む

1

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

OSS簡単インストール機能という簡単インストール機能は一応ファーストサーバーのコンフィグレータにはあ

記事を読む

screenshot 2013-09-30 17.49.57

レスポンシブWEBデザインに対応するニュースティッカーをjQueryとbootstrap3を使って作ってみた。

ニュースティッカーをレスポンシブWEBサイトで実装することになりましたので、作ってみたのです

記事を読む

スクリーンショット 2011-08-18 23.17.09.png

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

concrete5とは、ウェブサーバー上で、誰でも簡単で、しかも直感的にホームページの運営管理が出

記事を読む

Comment

  1. kuro より:

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

WP-SpamFree by Pole Position Marketing

Additional comments powered byBackType

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

ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします

conoha3-thumb
3.ConoHaVPSで複数ドメインを割り当てるためにVirtual Hostsを設定する

次に、ConoHa VPSに複数のドメインを割り当てる際のVi

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

前回に引き続き、今回はConoHaにSFTPで接続する方法です

surface-thumb
今更Surface Pro 3ファーストインプレッション #surfaceJP #SurfacePro3

サブ用に使用していたMBAを手放したので、メインのMBP 15

highdpi-chrome
Surface Pro 3のChromeで文字がボケる問題の最新解消法 #surfaceJP

Surface Pro 3をゲットしてきました。 Core i7

→もっと見る

  • WEBデザイナーの為のWEBデザインギャラリー
  • 2013年12月
    « 11月   1月 »
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
PAGE TOP ↑