Bootstrapのススメ
Bootstrapとは
BootstrapはHTML、CSS、JavaScriptなどのWebサイトに使われる言語を総合したフレームワークです。超わかりやすく言うと、細かいコードを書かなくても素敵なデザインのWebサイトを作ることができる「CSSがすでに組んであるファイル」のことです。実は色んな種類があるのですが、いちばん有名なのはTwitter社が作った「Twitter Bootstrap」の最新版「Bootstrap5」ですね。
このBootstrapにWEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されています。また、デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済んでしまいます。さらにそれらのテンプレートは、WEBページを閲覧するユーザーの端末に応じて自動で表示が最適化されるように、jQuery（JavaScript）で制御されています。
Bootstrapはなぜ生まれたのか？
モバイルファースト
近年ではスマートフォンやタブレットなどの携帯端末の利用者が爆発的に増えました。それによって、WEBページも携帯端末から利用されることが多くなったので、PC向けのものより、先に携帯端末向けのものを開発するようになりました。また、WEBページの機能や表示、操作方法を設計する際にはスマートフォンやタブレットなどでの使いやすさが常に優先されるようになったのです。
高速開発
WEB技術が発展するにつれて、WEBサイトやWEBアプリの品質も著しく上がってきました。ユーザーが求める品質レベルも上がってきており、「使いやすさ」や「わかりやすさ」などが求められるようになりました。そうなると、開発を行う側は「いかにユーザーのために素早く改善していくか？」という部分に重点を置くようになります。実際にコードを書く作業はできるだけ短くして、「どのように改善していくか？」というクリエイティブな部分に時間を多く使う必要が出てきました。そのため現在のWEB制作、開発ではともにスピードが必要となり、その問題を解決するために生まれたのが「Bootstrap」なのです。
Bootstrapの特徴
Bootstrapにはたくさんの特徴があります。そのなかでも代表的なものでいうと、
などが挙げられます。これは私たちwebデザイナー達にとってはありがたい恩恵です。2011年にTwitter Bootstrapという名で公開され、今では世界で最も人気のあるフレームワークとなっています。その人気はGitHubにおけるスターの数がFreeCodeCampに次いで全てのリポジトリの中で二番目に多かったということからも裏付けることができます（2019年1月時点）。Bootstrapのホームページは勿論、MongoDBなどOSSのホームページでもよくBootstrapが採用されています。例えばAppleやNintendoも一部のサイトでBootstrapを使ったりもしているんですよ。Bootstrap５は公表されてまだ間もないですが、４は日本国内のサイトでもよく見かけます。
これだけの普及があるのでは、ホームページ（ウェブサイト）は企業･店舗においては必要不可欠な看板と同じですね。遠くに居ながら、様々な情報収集ができる時代。皆さんの会社やお店ではホームページをお持ちですか？このブログでは、ホームページの重要性や現在の主流の作成方法など、私個人の書き止めるメモのように使っています。あくまでも、私一個人としての情報収集や考察なのでご参考までに。
ただ、ちょっと注意点。このBootstrapなるもの、結構重いです。ですので、読み込みスピードを遅らせてしまいます。その場合は、ぜひgzipで圧縮してください。GoogleのPageSpeed Insightsでも推奨していますので、ぜひ試してみてください。弊社では、スピードチェックしていますのでhtaccessで遅延を回避するようにしています。
