プログラミング、フリーダイビング、ブロックチェーンのブログ

プログラミング道場

実際の現場ではBootstrapを使うのでしょうか?

更新日:

記事の内容


デザインを勉強し始めた人で、Bootstrapというcssフレームワークを勉強する人も多いはずです。
でも、「現場ではBootstrapは使われていない」という意見を聞いて、ガッカリしている人もいるみたいです。
この記事では、その辺りの話をまとめて説明したいと思います。
結論から言うと、多くの現場で使われているけど、デザインに本気の人達の間では不人気です(笑)

Bootstrapとは何か?

Bootstrapとは、CSSのフレームワークです。
もう少し噛み砕いて言えば、「Webデザインを簡単に書くための仕組み」で、主にエンジニアから重宝されています。
ここで言うエンジニアとは、サーバーサイドのエンジニアのことで、PHP、Ruby、Javaといったプログラミング言語を書く人達のことです。
エンジニアはデザインをすることができなくて困っていたのですが、Bootstrapが2011年にリリースからは、最低限のデザインをすることができるようになり、みんな大喜びしました(笑)

さらに、最近は「Bulma」のような他のCSSフレームワークもあります。
Bootstrapは、JavaScriptのフレームワークであるjQueryとセットで便利なのですが、最近はjQuery自体が避けられ始めています。
そのため、 CSS単体のフレームワークである「Bulma」の人気が上がり始めています。

これらのCSSフレームワークを効率よく学びたい人には、下記の動画をオススメしています。

Bootstrapの学び方

増補改訂版『Bootstrap4入門』

Bootstrapの基礎を学んだ後で、実際に制作物を作っていきます。
もちろん、レスポンシブWebデザインについても学べます^^

今すぐ詳細を見てみる

Bootstrap 4 From Scratch With 5 Projects

英語でも大丈夫な人には、こちらの動画がオススメです。
Bootstrapを使って、実際に5つの成果物を作成します。
Modalを始めとした、UXに関しても説明があります。
星が4.6の人気動画です。

今すぐ詳細を見てみる

Code a Small Business Website using popular web frameworks

英語の動画です。
Bootstrap、Bulma、その他にも人気のCSSフレームワークについて学ぶことができます。

今すぐ詳細を見てみる

デザイナーが必要とされる4つのケース

現在、人気のCSSフレームワークは10個以上あり、需要が高いことは間違いありません。
さらに言えば、Bootstrapはテンプレートも多くの場所で配布されていたり、販売もされています。
以下にあげたものは、ほんの一例です。
他にも多くのテンプレートが存在しています。

ですから、Bootstrapが使われていないということは決してありません。

では、なぜ、「BootstrapのようなCSSフレームワークが使われていない」という意見が出てくるのでしょうか?
それを知るためには、デザインが使われる主な4つの場所を知る必要があります。

デザインが必要な箇所

  • ランディングページ(LP)
  • 企業のホームページ
  • Yahooサイトの管理画面
  • Yahooサイトのデザイン

ランディングページ

ランディングページとは、一枚のHTMLです。
一般的には、こういうページのことです。
見てわかるように、このページの構成はシンプルです。
その場合は、Bootstrapを使っても何の問題もありません。

クラウドソーシングサービスのランサーズでは、このような依頼がありました。

企業のホームページ

次に企業のホームページです。
一般的に、企業のホームページを凝った内容にする必要はありません。
上にタブがあって、機能重視でわかりやすいホームページがほとんどです。
この場合も、Bootstrapで問題はありません。

クラウドソーシングサービスのランサーズでは、このような依頼がありました。

管理画面

管理画面は機能重視なので、デザインはシンプルであることがほとんどです。
そのため、Bootstrapで問題はありません。

サービスのデザイン

最後に、有名なサイトのデザインを見てみます。
今までのサイトに比べて、かなり複雑であることがわかります。
この場合には、Bootstrapではカバーしきれないので、イチからCSSを組むことが一般的です。

まとめ

この記事では、Bootstrapを使う場所と、使わない場所について説明しました。
一般的には、以下のようになります。

Bootstrapが使われやすい場所

  • ランディングページ
  • 企業のホームページ
  • 管理画面

ただし、会社によって、ポリシーは異なります。
また、デザイナーによっては、「Bootstrapはダサいから使わない」という人もいます。

そのようなポリシーやこだわりについては、面接で質問して確認しましょう。
ランディングページや企業のホームページでも、Bootstrapを使わない会社も普通にあると思います。
ただ、これからデザインやWeb制作を目指す人は、CSSフレームワークとスクラッチからのCSSの両方ができることがベストだと思います^^

Good luck for your engineer life!

この記事の復習をしたい人は、この動画を観て下さい。

Webデザインの本を探している人は、この記事を見て下さい。

Webデザインの学習でおすすめの本【2020年最新】

Webデザイナーになるかプログラマになるか迷っている人は、この記事を見て下さい。

Webデザイナーとプログラマのどちらを目指すべきか?

WebエンジニアとWeb制作エンジニアの違いを知りたい人は、この記事を見て下さい。

WebエンジニアとWeb制作エンジニアは似て非なるものです

子供向けのプログラミングに関する本を知りたい人は、この記事を読んで下さい

子供向けにおすすめのプログラミングの本と動画【2020年最新】

入門編 ルビィのぼうけん こんにちは!プログラミング 世界の20か国以上で翻訳されたベストセラー本です。 フィンランドの女性プログラマであるリンダさんが、自分の子供のために作った絵本です。 そのせいか、非常に愛情がこもった本に見えます^^ ...

続きを見る


各都道府県にあるプログラミングスクールを知りたい人は、この記事を読んで下さい

都道府県別のプログラミングスクール紹介【2020年最新】

プログラミング言語 北海道 東北 関東 中部 近畿 中国 四国 九州 沖縄 まとめ この記事では、都道府県別にプログラミングスクールを紹介しました。 近くに行ってみたいスクールがあれば、是非、連絡をしてみて下さい^^ Good luck f ...

続きを見る

関連コンテンツ

-IT業界, 初心者向け

Copyright© プログラミング道場 , 2020 All Rights Reserved Powered by AFFINGER4.