LoginSignup
9

More than 5 years have passed since last update.

【Webデザイン】HTML5テンプレートの比較

Last updated at Posted at 2017-01-20

はじめに

しばらく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で表示しているので、上部にメニューがあるのがうれしい。
他に良いテンプレートあったら教えてください。

参考ソース

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9