Webデザインを考えるのが面倒なのでBootstrapを1時間くらいで導入してみた話

Webサイト作るのは楽しい。

初めてWeb技術を触った2010年くらいの時は、面白すぎてHTML, CSS, Javascriptをフルスクラッチで実装してた。

Done is better than perfect

テンプレとかもあったけど、私はブラックボックスが嫌いだったので、

試行錯誤して、完璧なものを目指して膨大な時間をかけてしまった。

勉強にはなった。

一方で提供した価値は掛けた時間の割に小さかった。

デザインはゴミ、操作性もゴミ。

Webの世界は巨人の背中に乗ってサクッとものを作ってしまうことが大事で、

車輪の再発明をするようなエンジニアに付加価値は無いわけだと最近つくづく思います。

このとき、マーク・ザッカーバーグのいう「Done is better than perfect」に納得しました。

余談ですが組み込み系の世界ではまたそれが違って、

仕様の徹底理解と入念なテストが必要になってきます。

# デバイスに書き込まれるファームウェアとかは容易に書き換えられないので。

超速でとにかく実装完了を目指す

時間をかけずに、それなりのサイトを超速で作ることに主眼を置くと見えてくる世界が変わります。

実装する側の視点に立ってみる。

にたてば、「どんなテンプレ使おうか」、「どんなライブラリ採用しようか」といった思考を巡らせるかと思います。

ざっくりググッて見ると革新的なウェブデザインとかたどり着くんですが、

広告やら芸術系のサイトならそれは価値があります。

一方で、自分が作ろうとしているものはなにか？と自己問答してみると、

デザイン面は提供する価値ではないと判断しました。

視点を変えてみる、ユーザーの気持ちに。

ユーザーからすると革新的なデザインよりもよく使っているデザインがいいんじゃないか。

デザインに独自性はないものの、ストレス無く使ってもらえるウェブサイトが作れるんじゃないか。

そんな仮説から、頻繁にアクセスされるSNSを見てみた。

最近、スマホアプリの殆どがFacebookアプリライクなデザインになっていくのを感じるし、

有名サイトの殆どが似たデザインになっている。

やはりこの仮説の妥当性はほぼ検証できたので、

それぞれのサイトで「右クリック+ソースを表示」してみた。

なんか殆どBootstrap.jsっての使ってるぞ。

超速でBootstrap.jsを導入してみる

以下のステップで超速で試す。

1. BootstrapのGetting startedでコードをダウンロードして展開。distディレクトリ以下にcss, fonts, jsが入ってるのを確認

　

2.  Exampleのコードを適当にダウンロードして拝借。拝借したコードを適当にindex.htmlとかいう名前にして、おもむろにdist以下に配置。いざ表示！してみるとこんな感じで全然ダメ。CSSとjavascriptが当たってないので。

3. CSSとjavascriptのパスを書き換える。具体的には、　「　../../dist/　」を消すだけ。

4. あとはそれっぽいところを書き換えてくだけ。Bootstrap.jsについては、dotinstallにこんな講座があったりするので素早くキャッチアップできます。早くマスターしたい人はこんなところにいないでさっさとdotinstallに飛んでって下さい、さようなら！


例えばだけど、今回のHello worldでは下が3カラムだけど2カラムにしたいなーって人は、
「　col-md-4　」を「　col-md-6　」に変更して、残ったもう一つのdiv要素を削除すればこんな感じになります！

dotinstallでは、「col-md-X」のX部分の総和が12になるように書くべしとのことです。
つまり、3カラムのときは 「　col-md-4　」が3つあるから4×3=12。
2カラムの時は「　col-md-6　」が2つあるから6×2=12っていうことです。