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

プログラミング道場

実際の現場では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デザインの学習でオススメの本【2020年最新】

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

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

働きながらプログラミングを学習したい人は、この記事を読んで下さい

働きながら学べるオンラインプログラミングスクール【転職すれば無料もあります!】

プログラミングを始めたいのですが、仕事を辞めるつもりはありません。 私にはプログラミングの才能があるかわからないので、保険的な意味で仕事を辞めるべきではないと思うからです。 それでもプログラミングを始めてみたいのですが、働きながら通えるプロ ...

続きを見る


30代からプログラミングを始めようか迷っている人は、この記事を読んで下さい

30代からプログラミングを始めることは可能なのか?【頑張ればギリギリセーフ】

エンジニアは人気の職種だと聞いていますが、若い人達が多い印象です。 30代から始めても間にあいますか? 2019年12月の有効求人倍率 記事やニュースなどで知っている人もいるかと思いますが、今、エンジニアは世界的に不足しています。 まずは、 ...

続きを見る


プログラミングスクールに行くか迷っている人は、この記事を読んで下さい

なんとなく、エンジニアになりたい人が無料のプログラミングスクールに行くべき理由【2020年最新】

有料や無料のプログラミングスクールが多すぎて、どこにしようか迷っています。 無料のプログラミングスクールは、お得そうに見えますが、実際の所はどうですか? メリットやデメリットなどがあれば教えて下さい。 前提として この記事は、エンジニアにな ...

続きを見る


自分がやりたいことにプログラミングが必要かどうかを知りたい人は、この記事を読んで下さい

プログラミングを始める前に動機を確認しよう【プログラミング学習は本当に必要ですか?】

プログラマの仕事の今と昔 プログラマという職業に就く人達が増え始めたのは、2005年ぐらいからです。 2005年は、Webが流行り始めた頃だと言い換えてもいいかもしれません。 プログラミングを使った仕事の変遷を知るためにも、まずはその当時の ...

続きを見る


ゼロからWebエンジニアになりたい人は、この記事を読んで下さい

ゼロからWebエンジニアとして就職する方法【何もない自分に積み上げていく】

ちまたには、「エンジニアになるための情報」で溢れかえっています。 ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。 私が定義するWebエンジニア まず、最初に以下の図を見て下さい。 これが、Web業界で働く人達の大分類です ...

続きを見る


海外で働いてみたい人は、この記事を読んで下さい

海外で働きたいエンジニアが登録すべき求人サイト

海外で働いてみたいけど、何から始めたらいいの? どのサイトに登録したらいいんだろう? doda dodaのサイトで検索条件を「勤務地;海外」、「職種;技術職」として検索してみましょう。 そうするといくつかの案件がマッチします。 ここでは、そ ...

続きを見る

関連コンテンツ

-IT業界, IT業界の説明, 初心者向け

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