ねほり.com

何もないから何かみつかる

Bootswatchによる2rowデザイン&軽量化の検討

      2015/07/27

この2ヶ月間で「ランキング出力のOAuth 2.0対応」「Yahooコメントランキングのユーザ要求対応」「モバイルサイト対応」「税金・年収のシミュレータ」など3年間ぐらい更新したかった内容を更新することができた。

そして大詰めを迎え「Bootswatchを使った2rowデザイン」と「サイトの軽量化」に手をつけた。

新デザイン対応&軽量化検討

私が学生時代から作成しているサイトは未だに、テキストパットを利用してデザイン・構成を自作している。

サイトを作成開始したのは1999年。

2009_05_14_1

今は2015年。スマートフォンでサイトを見ることがパソコンのシェアを超え、レスポンシブデザインやマテリアルデザインが流行し始めました。

  • モバイルファースト
  • レスポンシブデザインの進化
  • フラットデザインの継続
  • マテリアル・デザインの増加

こうなってくると、自作でデザインを作成し続けるのは大変すぎる。

そして、いつの間にか色々なデザインが流行し「CSSフレームワーク」などを利用してサイト作成するのが当たり前になっている。

Twitter社は、数年前に「Twitter Bootstrap」をリリースしており、現在は3.1。

Google社も今月、マテリアルデザイン仕様のWebサイトを構築するためのツールキット「Material Design Lite」を公開したとのこと。

先月より「Bootstrap」を使ってのマテリアルデザイン/レスポンシブデザインの検討中に「Material Design Lite」が出てきたのは想定外だが、まずは今年は「Bootstrap」を使ってのサイト最適化を検討することに決めました。

Bootswatch

「Bootstrap」を使えば、次の機能をまとめて導入できる。

  • HTML5
  • CSS3
  • 12カラムグリッドシステム
  • フラットデザイン
  • タッチパネル操作への配慮
  • カルーセルスライダー等
  • UIパーツライブラリー
  • jQuery
  • LESS
  • JavaScriptライブラリ
  • 便利なLESSのMixinライブラリ
  • clearfixなど

デザイナー目線では既に色々と揃ってるものをカスタマイズするだけで,サイトが1つできあがるのがメリット。

でも、ここ最近は「Bootstrap臭」という言葉とともに「似たようなサイトになる」など disりが増えている。

bootstrap

なので「Bootswatch」を利用することで出来る限り、それを回避する。

「Bootswatch」はbootstrapのテンプレートのギャラリーのサービス。そして、それを使って「2row画面」を作成した。

Zepto

「Bootswatch」「Bootstrap」を使うと、阿呆みたいにロードファイルのサイズが増えてしまう。

そこに加えて「jQuery」をロードすることになり、サイトの表示速度が恐ろしく遅くなってしまった・・・。

なので「jQuery」より軽いJSライブラリを探したところ「jQuery」と互換性がある「zepto」を見つけた。

  • 「jquery-1.10.2.min.js」のファイルサイズは「32.4 kB」
  • 「zepto.min.js」のファイルサイズは「9.6 kB」

ただし、bootstrap.jsはjQueryありきで書かれている箇所があるので、次のようにグローバルのjQueryをZeptoで上書きする。

if(!window.jQuery) {
Zepto.browser = {webkit: true};
window.jQuery = Zepto;
}

その他

Google のウェブ パフォーマンス ツール「PageSpeed Insights」を使えば、スクロールせずに見えるコンテンツのレンダリングを優先して設計することができる。

PageSpeed_Insights

Gzip圧縮を有効化したり、CCS/JSの読み込みタイミングを変更したり、動的な読み込みを静的に変更したりして、スコア「74/100」。

パソコンで見た場合のスコアは「82/100」。

キャッシュを有効にすれば、さらに上位は目指せるけどJS/CSSを頻繁に変更中なので、これで十分。

Pingdom Website Speed Test」のサイトの結果は次のとおり。

pingdom

他の人が呟いたtwitter表示も静的なものに変換した。これで少し軽くなった。

でも回線が遅いと、まだ広告表示が遅すぎる・・・。

「bootstrap.min.css」が19.5Kあるし、CSSの最適化(不要な部分の削除)が必要かもしれないなぁ・・・。

 - 2015年(社会人11年), Web技術, テクノロジー

  関連記事

Windows2000をインストールしたらマウスから変な音が聞こえる

Windows2000へとうとう変更するときが来た。  なぜしないとい …

社内アイデアソンって参加するだけアイデア損

アイデアソンに参加したり、社内の文化祭的イベントで色々なプロト実装をしています。 …

NAVERまとめに記事を盗まれた場合の対処方法

男の子「ねーねーお父さん。赤ちゃんはどこからくるの?」 父「赤ちゃんはね。コウノ …

動画配信サービスのビジネスモデル(アメリカ編)

現在 日本のライブストリーミングでは、 ニコニコ生放送(ニコ生) Twit Ca …

リアルプレイヤーをMP3に変換する方法について

もしも 童話世界に 2ch を作ったら2 ‥‥? ■掲示板に戻る■ 全部 1- …

トレース画にハマり、色々とトレースしてみる、ナマ・ビール・タモ・シモ

2006年08月30日(水) ナマ・ビール・タモ・シモ ビアだ!ガーデンだ!今週 …

Yahooニュースでリンクが貼られ、25万PV/日以上を記録

2007年10月16日(火) 今月の副収入に感謝! 周りに迷惑をかけてまで幸せに …

テレビを捨てた放送局、テレビを捨てた家電メーカー

「テレビの視聴者離れが進み、ネットコンテンツが充実し、テレビはオワコン」 と、よ …

スターリング、オーパスワン@ナパ (Sterling Vineyards、Opus One)

ワインの産地といえば「フランス」「イタリア」「スペイン」「ドイツ」などヨーロッパ …

WikiPediaをダウンロードしてローカル環境で利用する

2010年07月19日(月) WikiPediaをローカル上で利用 VAIO P …