「Webの制作をお願いします。あ、もちろんレスポンシブデザインで！」
最近のWeb制作において、発注側が必ずといっていい程に口を揃えてこう言います。
スマートフォンが普及する前は、PCから閲覧することだけに焦点を置いて、どんなブラウザからアクセスしても、ちゃんと表示されるWebページづくりを目指してきました。
しかし、ここ数年でタブレット端末をはじめとした様々なデバイスが続々とリリースされたことにより、今度はPCブラウザだけでなく、どんなデバイスからでも最適に閲覧できる“レスポンシブWebデザイン”というものが、Web制作においては主流になってきつつあります。
今は片手に携帯電話さえあれば、どこにいても手軽に情報収集ができるため、PCよりもスマートフォンからWebページを閲覧する割合の方が、圧倒的に多いという現状です。
「PC用とは別に、スマートフォン用のサイトを制作しなければならないの…？(震え声)」という声が聞こえてきそうですが、今はそんな必要はありません。
まずは基本となるHTMLに加えて、CSS(スタイルシート)の知識があれば、レスポンシブWebデザイン制作は可能です。
ただ！今のご時世、情報の更新に比例して、制作のスピードも重視されています。
サクサクとWebページが制作できるに越したことはありません。
そこで今回は、『Bootstrap』という、画期的なフレームワークをご紹介します！
■ Bootstrapとは？
WebサイトやWebアプリケーションを作成する際に、必要となってくるフォームやボタン、ナビゲーションなど、Webサイトを構築するためのCSSフレームワークです。
Bootstrapはオープンソースで開発されているので、誰でも無償で使えます。
もともとはTwitterの社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」のみの表記になりました。
※記事公開時現在の最新バージョンは、モバイル対応を強く意識して作られています。
■ Bootstrapのメリットその1：レスポンシブに対応している
今はPC以外にも、スマートフォンやタブレットなどといった様々な端末が存在します。
ゼロベースから構築する場合、多大な時間に加えてコーディングの知識もある程度必要になってきますが、Bootstrapを使用することにより、その手間が解消します。
これまでは、各デバイスのサイトの縦横幅で悩まされてきましたが、BootstrapではCSS3のメディアクエリを使用しているため、適切に計算されたグリッドレイアウトが実装されることにより、各デバイスのサイズに展開する“モバイルファースト”の仕様になっています。
■ Bootstrapのメリットその2：対応ブラウザが多く表示崩れが少ない
Web制作で一番苦労するのが、様々なブラウザ上で正しく表示されるかどうかの検証作業です。Bootstrapでは、各ブラウザの差異をあらかじめ修正していて、様々なOSやブラウザにも対応しているため、表示が極端に崩れる心配がありません。
※記事公開現在で、Bootstrapに対応しているブラウザは以下になります。
・Chrome (Macintosh, Windows, iOS, Android)
・Safari (Macintosh, iOS)
・Firefox (Macintosh, Windows, Android) ※3.6はサポート外
・Opera (Macintosh, Windows, Android)
・Internet Explorer 9以降
※8に対応する場合はBootstrap3を使用し、メディアクエリを有効にするための “Respond.js”を用いる必要があります。
■ Bootstrapのメリットその3：デザインの変更が簡単
Webページが完成したのも束の間、発注側から「やっぱり色を変更したい」「この項目を追加したい」といった追加修正を受けると、顔が一瞬こわばってしまいそうですよね。
でも、Bootstrapでフロントエンドを作ってしまえば、すばやい修正対応が可能です。
Webページ制作に必要なボタンをはじめ、タブ式ナビゲーションやドロップダウンメニューなど、その他にも豊富なパーツが揃っているため、新規ページ制作から追加修正まで作業時間を一気に短縮することができます。
■ まとめ
Bootstrapと聞くと、何だか小難しそうという思いが先立ってしまうかもしれませんが、毎回コーディングをする必要がないため、むしろページ制作が苦手な方にこそオススメです。
Bootstrapには、Webページ制作に必要なパーツが一通り揃っていて、足りないようであれば様々な機能を備えたパーツも豊富に配布されています。特にフラットデザインにも対応しているところが魅力です。
新しい技術は日進月歩で次々とリリースされますが、使いやすいかどうかは自分次第です。ひとつの技術を習得することによって、他の物と比較することができます。
物は試しで、まだ使われたことが無い方は一度、Bootstrapに触れてみてはいかがでしょうか。
