短期間で質の高いサイトを作るならBootstrap!

この記事は約4分で読めます。

橋本ゼミ10期生の福島健五です!!

この記事では、特設サイトを制作する際に利用したBootstrapというWebフレームワークについて紹介していきます!!Bootstrapは時間がない中で質の高いサイトを作る方、グループ単位でサイトを作る方の強い味方になってくれます。実際、私たちも約1か月という短い期間で質の高いサイトを作ることができました。

※今回の記事は、大学生(イベントや文化祭のサイトを作る方)を対象としており、すでにBootstrapを知っているという方は対象外の内容となっています。

Bootstrapとは

HTML/CSS/JavaScriptから構成されるwebフレームワークのことで一部デザインを除き無料で利用することが可能となっています。

Bootstrapのメリット 

Bootstrapを利用してサイト制作を行うメリットは大きく4つあります。

1つ目は、デザイン性が確保されている点です。BootstrapではあらかじめCSSファイルが用意されているためデザインを考えなくても見栄えのあるデザインのwebサイト制作が可能となっています。

2つ目は、様々な媒体に対応することができる点です。Bootstrap誕生前はwebサイトを制作する際にスマートフォン向けとPC向けの2つのページを作成する必要がありました。しかし、Bootstrapでは1つのページだけでスマートフォンにもPCにも対応したサイト制作が可能となっています。(グリッドシステム)

3つ目は、サイト制作にかかる時間を削減できる点です。Bootstrapは1つのページでスマートフォンにもPCにも対応したサイト制作が可能となっており、Bootstrapを利用しない場合よりもサイト制作の時間が短く済みます。また、Bootstrapは予めテンプレートが用意されているためコードを1から書く必要がないため時間削減をすることが可能となっています。

4つ目は、修正がしやすい点です。この点は今回Bootstrapを利用して感じた最大のメリットです。

Bootstrapは予めテンプレートが用意されているので、仮にコードを消してしまったとしてもテンプレートからコードをコピーすればすぐにもとに戻すことができる。この機能は、短期間でサイトを作るうえでは非常に役立つ機能であると思います。実際、私もサイト制作中に誤ってコードを消してしまったことがありましたが、もとに戻すことができたので期間内にしっかりと自分のタスクをこなすことができました。

Bootstrapを使った作品紹介

私たちが1か月で作ったサイトのご紹介をしたいと思います。このサイトは、ゼミの研究発表を多くの方に知ってもらうことを目的にして作った特設サイトです。全員がプログラミング初心者ではありましたが、Bootstrapを利用したことで期間内に質の高い特設サイトを作ることができました。

<リンク>

バーチャル道灌祭り
当日の日程やイベントの紹介を行っています!!

使ってみた感想

私たちが作成期間約一か月で質の高いサイトを作成することができたのはBootstrapを利用したからであると思います。Bootstrapはフレームワークがすでに構築されているので、短期間でサイトを作成したいという方は是非とも使って頂きたいと思います。また、Bootstrapはグループ単位でサイトを作る方に向いているサービスであると思います。グループ単位でサイト作成をしていると、必ずミスは起きるものです。仮にメンバーが誤ってデータを消してしまったときにBootstrapを利用していないと戻すのにまた1からコードを書かなければなりません。そのため状態に戻すまでにかなりの時間を要することになります。しかし、Bootstrapを利用していればテンプレートが予め用意されているので消す前の状態に戻すのに時間がかかりません。

Bootstrapの導入方法

【用意するものは】

・Bootstrapのテンプレート
・テキストエディタ

【導入方法】

①Bootstrapのサイト内で使ってみたいテンプレートを決め、ダウンロードします。
②圧縮されたzipファイルがダウンロードされたらクリックして解凍します。
③テキストエディタ(私たちはvisual studio codeを使用。)でhtmlファイルを開きます。
④visual studio codeでhtmlファイルを開いたら導入は終了です。

※忘れずに保存してください!

まとめ

今回紹介したBootstrapは短期間で質の高いサイトを制作することが可能なwebフレームワークです。Bootstrapを利用するメリットは大きく4つあり、その中でも最大のメリットは修正がしやすい点です。この点は限られた時間の中においてのサイト制作において役立つものであると思います。

この記事を読んで少しでも多くの方がBootstrapを利用してみたいと思って頂けたら幸いです。

執筆:橋本ゼミ10期生 福島健五

member blog
シェア
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人
橋本ゼミ生

産業能率大学情報マネジメント学部橋本ゼミに所属するゼミ生です。

橋本ゼミ生をフォローする
産業能率大学 橋本ゼミ
タイトルとURLをコピーしました