Bootstrapを学べばオリジナルアプリのデザインコストを削減できるよ

《すぐわかるプログラミングスクールおすすめランキング》

当サイトから登録の多いプログラミングスクール

【1位】侍エンジニア塾(解説はここ) 《時給3000円のエンジニアを目指す》

【2位】TECH::CAMP(解説はここ) 《長期間教室に通える》

【3位】テックアカデミー(解説はここ) 《地方の人もオンラインで受講》

学生エンジニアのしば(@akahire2014)です

ある程度プログラミングを学習した後に、自分でWebアプリやWebサイトを作ってみたいと誰もが思いますよね?でも

しば
デザインってどうしたらいいんだろ?
でも勉強するほど興味はないな〜

かつての僕はこんなことを考えていました。

自分でアプリを作って、「就職や転職のアピールの材料にしたい」と考えました。
そんな時、プログラミングの部分だけじゃなくてサイトのデザインもちゃんと考えないとブサイクなサイトが出来上がってしまいます。
でもプログラミングには興味あるけど、ぶっちゃけデザインってそんなに興味湧きませんよね?
僕も経験しましたが、一からデザイン考えて全部HTML/CSS書くのってかなり時間かかります。

この記事では、

初心者
自分のアプリを作りたいけどデザインにかける時間や労力を最小限にしたい

って人のためにBootstrapというものを使うメリットを解説しています。
「アプリのフロント(画面)部分にかける労力を減らして、内部の機能に力を入れたアプリを作って就職・転職のためのアピールポイントを作りたい!」って人はぜひ読んでみてください

Bootstrapって何?どんなことができるの?

bootstrap

こんなおしゃれなページを簡単に作ることができます。
ちなみに、上のページは3時間くらいで作ることができました
全部自分で作っていたら、20時間くらいはかかったんじゃないかと思います。

Bootstrapの特徴について簡単に解説します。

クラス名をつけるだけでCSSが当てられる

普通だったら、HTMLにCSSを当てようと思ったら

  1. HTMLタグにクラス名をつける
  2. そのクラスに対してCSSをかく

という手順です。

Bootstrapでは

  1. クラス名をつける

だけでCSSが当たります。
例えば、文字を中央寄せにしたかったらtext-centerというクラス名をつけるだけです。

簡単にレスポンシブにすることができる

レスポンシブとは、画面の幅が変わってもデザインが崩れないことです。

上のgif画像をみていただくと、画面のサイズが変わってもデザインは綺麗なままですよね?
これを全部自分の手でやろうとすると、手間がかかりますが、Bootstrapだと専用のクラス名をつけるだけでレスポンシブになります。

完成されたテンプレートをダウンロードすることもできる

他の人が、Bootstrapで書いたデザインを丸ごとダウンロードすることもできます。
無料のものと有料のものがありますが、無料のものでもかなりの完成度の高さですよ。

Bootstrap 対応!2017年最新の無料HTMLテンプレート上半期まとめ

検索すればいくらでも出てくるので、自分が気に入ったものが必ず見つかるでしょう。

Bootstrapを学ぶメリットは?

初心者
便利でおしゃれなのはわかったけど、どれくらいメリットがあるの?

フロント(見た目)の開発時間を大幅に短縮できる

最初に見せたgifでも言った通り、僕の場合だとフロントの開発時間を20分の1にまで削減することができました。
作りたいアプリがあっても、見た目の部分に時間をあまり使いたくない人にはかなり嬉しいですよね。

浮いた時間を使って、もっと難しい機能をつけたりできます。

デザインの知識がなくてもおしゃれにできる

自分でデザインを一からかんえて、アプリを作るとわかるんですが

なんかダサない?

ってなるのがエンジニアの運命。
なぜだかわかりませんが、頑張って作ったのになんかダサくなるんです。

その点Bootstrapなら最低限見やすくデザインが出来上がるので、僕みたいなセンスのない人にはかなりおすすめ。

Bootstrapのおすすめの勉強法

Bootstrap自体は全然難しいものではないので、独学でも絶対に習得できます。
それでも僕は効率良くてわかりやすい教材で学びたかったので、Udemyの講座を買いました。
値段はたったの1400円くらいだったので、全然いい。

今回僕が買った講座はこちらの講座です。
英語ですが、字幕もついてるので余裕でした。

Udemy | Bootstrap講座

講座の中では

  • Bootstrapの導入方法
  • 基本的なクラス名の使い方
  • 実際にサイトを作る(5つ)

という内容が学べました。

わかりやすくて、自分で全部勉強するよりかは、かなりの時間短縮になりましたよ。

Bootstrapでオリジナルアプリをたくさん作ろう!

Bootstrapを学んでおけば、デザインの部分に無駄に時間を取られることなく自分が実装したい機能を持ったアプリを作ることが可能です。

時間は限られているので自分が集中したい機能に時間をかた制作物を作って、就職や転職の時のアピールポイントにしてはいかがでしょうか?

Udemyの動画は無料で15分くらい閲覧することができるので、興味のある人はのぞいて見てください。