はじめに
しばらくWebフロント技術の勉強をしていなかったので、ホームページのSPA化とデザインを変更しました。
その中でも「デザイン変更」の部分で何個かHTML5テンプレートを試したのでその感想です。
①純正Bootstrap
②HTML5UP
③FreeHTML5.co
必要要件
- レスポンシブ対応(あたりまえですね)
- ドロップダウンメニューがある(いろいろメニュー追加したいので)
- お勉強のためなのでWordPressとかのCMSはNG
昔のホームページ
デモページ: http://v1.ishino.info/
今どき化石ですね...
レスポンシブでも無いですし、APIとかもない普通のリクエストベースのPHP
その① 純正Bootstrap
デモページ: http://v2.ishino.info/
色だけはちょっと変えたいので、下記でカスタマイズしました。
http://bootstrap-live-customizer.com/
(ロード重いです)
良い点:
・Bootstrapは王道なので、触っといて損は無いです。
・グリッドシステムわかりやすくて良いです。
・シンプルな作りなのでカスタマイズしやすいです。
悪い点:
・やっぱ見た目がちょっとショボい
内部で利用しているもの
・jQuery 1.11.3 (Bootstrap3系にはjQuery1系が必要)
その② HTML5UP
デモページ: http://v3.ishino.info/
テーマ「Editorial」を利用
良い点:
・タブレットVerもあるし見た目がやはり良い
悪い点:
・Bootstrapより軽量のレスポンシブルモジュールのSkelのサイトが無くなってる...
内部で利用しているもの
・html5shiv.js / Respond.js (IE8以前の対応用)
・Skel.js (レスポンシブ用)
・FontAwsome (アイコン)
その他:
・CCA3.0ライセンスなのでカスタマイズ自由ですが、サイトに明記しましょう
その③ FreeHTML5.co
デモページ: http://ishino.info/
テーマ「Shift」を利用
良い点:
・Bootstrap製
・エフェクトが効いててオシャレ
悪い点:
・エフェクト効かせてるのもあり、色々なモジュールがありカスタマイズが大変
内部で利用しているもの
・jQuery (npmからの最新モジュールに変更)
・jQuery Easing (npmからの最新モジュールに変更)
・jQuery Waypoint (npmのものは古すぎるので、ダウンロードしたものを利用)
・Modernizr (npmのものは古すぎるので、ダウンロードしたものを利用)
・Respond JS (IE8以前の対応用)
・Google Fonts (Font)
・Icomoon (アイコン)
・animate.css (エフェクト・アニメーション)
その他:
CCA3.0ライセンスなのでカスタマイズ自由ですが、サイトに明記しましょう
最後に
やはりBootstrapベースのFreeHTML5.coが良いと思ってます。
あと個人的にですが、ブログをiframeで表示しているので、上部にメニューがあるのがうれしい。
他に良いテンプレートあったら教えてください。
参考ソース