文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【フラット】tree-tipsのデザインを変更しました【bootstrap3】

今までtree-tipsはtwitter bootstrap2を使っていたわけですが、
世間のフラットデザインへの移行もあり、bootstrapもバージョン3になったので、
bootstrap3を使ってデザイン変更してみました。
メニュー部分は思いっきりgoogleを真似しています。


f:id:treeapps:20130929050333j:plain

主な変更点

トップページの表示項目

トップページから全ページに遷移できるように、
タブ形式で全ページへのリンクを用意していましたが、やめました。
新着記事のみを表示するようにして軽量化しました。

左サイドナビ・右サイドナビ

左サイドナビと右サイドナビの役割をはっきり分けました。
左サイドナビはメインメニューとサブメニューとadsenseです。
右サイドナビは主にメインコンテンツと関係ないものを配置しています。

ランキングページを新設

記事の表示回数を元にしたアクセスランキングページと、
はてなブックマーク数の多い順のアクセスランキングのページを新設しました。

bootstrap3への移行時の問題点

いろいろ苦労しました。

classの書き方がかなり変わった

かなり書き方が変わりました。
bootstrap2から3でどう変更されたかはオフィシャルサイトに記載されています。
Redirecting…

マージン・パディングがまた変わった

bootstrap1から2の時と同様、またスペースの定義が変わっています。

nav-tabs、nav-pillsの挙動が怪しい?

前述でトップページからタブを除外したと書きましたが、
実はこの件が関係しています。
どうもnav-tabs・nav-pillsの挙動がおかしいのです。
具体的には、タブが多段になっている状態でスクロールすると、
classのactiveが勝手に初期タブから別タブに写ってしまい、
結果、スクロールするとタブのホバーが勢い良く動いてチラチラするのです。
この問題を解決するのが面倒なので、すっぱり使うのをやめました。

フラットデザインは難しい

元も子もない問題なのですが・・・

そもそもフラットデザイン必要なの?

と思いました。
フラットデザインは要素にボーダーが設定されていないので、要素と要素の境目がかなり見づらいです。
うまくデザインしないと、1990年代のcssを全く使わないクソサイトみたいになりがちです。
実際自分でデザインしてみると解りますが、

フラットデザイン難しすぎ!

本当に糞デザインになりやすいです。
更に今年2013年のトレンドカラーは「エメラルド」「タービュランス」「アサイ」「ミコノスブルー」
等ですが、これがまた使いにくい・・・
自分は目に優しい色が好きなのですが、これらのトレンドカラーはどぎつい色です。
試しにエメラルドにしてみたのですが、とにかく目に悪い。フォントを白にするので見難い。

総評

こんな感じでブーブー言いながらbootstrap3のフラットに移行してみました。
全体的に要素を調整して描画に負担がかからないよう高速化しています。
目線の移動にも少し気をつけてレイアウト変更したので、今後ともよろしくお願いします!!

Twitter Bootstrap Web Development How-To

Twitter Bootstrap Web Development How-To

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

  • 作者: 野田一輝,加藤俊司,藤田拓人,清水豊,細川富代,野田真穂,川下城誉,根岸良樹,岩堀真吾,大竹孔明
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2013/07/02
  • メディア: 単行本
  • この商品を含むブログを見る
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)