Webサービスシェアこんにちわ。アートディレクター兼2児のパパ、長岡です。毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています(笑)屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ(表現が古い?)にしているそうです。将来がちょっと心配です・・・。Bootstrap(※ver2.3.1)」のお話。※この記事を書いている最中にver3.0がリリースされました!(汗)後でゆっくり触ってみたいと思います。ver2.3.1Web制作者なら、一度は触れたことがあることと思います。そのまま使ってみたり、カスタマイズして使ってみたり・・・。Bootstrapである必要があったのか考えてしまうケースも多々あります。Bootstrapを導入するかどうか悩んでいる方に一度は読んでもらいたい。今回はそんな記事を書きたいと思います。Bootstrapとは、HTML5・CSS3・jQueryを使用したフロントエンドツールです。名前の通りTwitterが開発しています。Bootstrap」は、12カラムのグリッドシステムを採用していて、レスポンシブデザイン、可変グリッドデザインにも対応しています。ブレイクポイントは、以下の4つ。細かくブレイクポイントを置きたい場合はカスタマイズが必要です。1200px980px768px480px多彩な機能を備えたパッケージCSS3での表現だけではなく、jQueryを使用したカルーセルやモーダル、タブやツールチップなど、様々な機能が盛り込まれています。イメージとしては、便利な道具の入った工具箱のような感じ。足りない機能があっても大丈夫!足りない機能があったとしても、多彩な機能を備えたUIパーツを配布しているサイトがたくさんあります。Helpersフォームにあると便利な機能がたくさん追加されているサイトです。HelpersBootsnippこちらは様々なUIパーツを集めたサイトです。Picker日付や日時をカレンダーから選択できる便利なツールです。Bootstrapのボタンに変換してくれる便利なサイトです。BootstrapもちろんWordPressようにもBootstrapはあります。Bootstrap」をカスタマイズし、無料でダウンロード出来るサイトも数多くあります。それなりにデザインに凝っているものや多機能のものは、かなりカスタマイズされているので有料がほとんどですが、一から作るのもそれなりに時間とコストが掛かるので、バランスをみて購入する価値はあると思います。下記に代表的なテンプレートサイトの一部をご紹介します。Bootstrapのテンプレートです。Bootstrapをベースに作られているフラットなUIデザインのダウンロードサイトです。UIBootswatch無料のテンプレートがダウンロード出来ます。見た目などカスタマイズされています。BootswatchWrapBootstrap有料ですが、レベルの高いデザインのテンプレートがダウンロード出来ます。ThemeForestこちらも有料ですが、レベルの高いデザインのテンプレートがダウンロード出来ます。Bootstrap」には、豊富な機能が備わっています。そのツールを生かすも殺すもあなたの使い方次第です。本当に使うべきかどうか、よく考えないと、宝の持ち腐れになることになります。導入する前に、下記のポイントを確認してみましょう!ポイント1:デザインは、12カラムのグリッドシステム上記でも触れていますが、デザインがもし12カラムのグリッドシステムではない場合は、使わない方がよいでしょう。使わない機能が多すぎてももったいないですし、場合によってはスクラッチでコーディングした方が、早いケースもあります。エンジニアのために作られたツールなだけに、管理画面などの制作には適していると思います。使える機能が豊富に備わっています。ポイント3:マルチデバイス対応スマホやタブレットなど、PC以外のデバイスの対応が必要かどうか?必要な場合は、デザインを見て問題ないか確認すると良いでしょう。エンハンスメントの考え方なので、IE8で一部表示が異なる場合があります。レイアウトで大きな崩れなどはありませんが、IE8にも対応が必須な場合、特にレスポンシブデザインの対応が必要なケースはやめた方が良いでしょう。カスタマイズに多くの時間を割かれるケースも考えられ、近道を通ろうと思ったら、「あれ??遠回り?」なんてケースもあるので、十分に考えて決断する必要があります。ポイント5:運用やメンテナンスにも有用!拡張性も高い!ありあまる機能は、運用やメンテナンスでも活きてきます!制作後に、運用やメンテナンスが必要な場合や、作業自体をノンデザイナーの方が行う場合にもとても有用な機能が搭載されています。し、元のBootstrapから生半可にカスタマイズすると、それが逆に運用時にメンテナンスしにくいものになってしまうこともあります。中途半端にカスタマイズするよりも、時間をかけてでもフルカスタマイズした方が後々良いですし、もしそうじゃなくとも、メンテナンスのことをよく考え、元のCSSは変更せずに、別のファイルで制作するなど工夫することにより、メンテナンス性はアップすると思います。実際に制作する時には、事前にその当たりの事もよく考えておくと良いでしょう。拡張性も高く、元にない機能も柔軟に追加できます。frameworkやはり時代はモバイルファーストですね。フラットデザインに対応したみたいですし、画像アイコンがなくなっているなど若干の変更点があるようです。今度ゆっくりと触ってみて、また記事にしようと思います。今後の進展が楽しみです。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。