2016年01月08日

Webデザインメモ

Bootstrapをマスターしよう。簡単まとめ

新年明けましておめでとうございます。
2016年ですね。みなさんは、今年の目標は立てましたでしょうか?

私の目標は、「会社のマイデスクを綺麗に保つ」です。
昨年の仕事納めと席替えのタイミングで、ぐちゃっとしていたデスク周りをえいっ!とスッキリさせました。
デスクを整理してから退社するようにすることで、翌日気持ちよく朝を迎えています。

::::::::::

今、bootstrapをマスターしようと、勉強中です。
というわけで、本日はbootstrapを使うメリットと注意点を簡単にまとめてみました。

■bootstrapって?
ボタンやフォーム、ナビゲーションなどがhtml・cssベースのあらかじめ用意されている、フレームワーク(テンプレート)。
フラットデザインなどのスタイルが用意されているので、htmlの知識があれば、cssを使わなくても見栄えのいいサイトデザインができます。

[メリット]
・レスポンシブデザイン対応。web開発の時間短縮に。
グリッドレイアウトがあらかじめ実装されているので、スマホ、タブレット、pcそれぞれのレイアウトに沿ったデザインを作ることができます。

横幅が適切に計算されているので、
「えっとタブレットの場合のメインカラムの横幅は・・・(電卓を取り出す)」
の作業がなくなります。

グリッドレイアウトのためにbootstrapを使い、それを元にwebサイトを組んでいく、というのも手です。

[注意する点]
・他のサイトと似たり寄ったりのデザインになる
テンプレートにはあらかじめサイトの形をしたデザインがあるので、さくっと作るには便利です。
しかし、テンプレートをそのまま使用するだけだと、bootstrapっぽいサイト、つまりオリジナリティのないサイトになってしまうのです。

bootstrapで作られたサイトは結構あるので、テンプレートのまま使うと、「あれ、このデザインどっかで見たことある・・・」という既視感を与えてしまいます。
おおまかな形や、実機での確認にはbootstrapを活用しつつ、デザインの細かいところは工夫したり、しっかりと作りこんだ方がよいと思います。

レスポンシブデザイン対応のwebサイト制作が、これからますます増えていきそうです。

使い方をマスターして慣れていきたいなと思います。