みなさんは、サイトをスクラッチで作る時にどうされていますか？
HTMLやCSSをイチから作り込んでいくのは大変ですよね。
フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。
最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。
特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。
しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。
Twitter Bootstrapを使うと、なぜここまで似てしまうのか？
それは、
パーツが完璧に揃いすぎている！
のが原因です。
Twitter Bootstrapがバージョン2になったことで、さらに使えるパーツが増えて、ほとんどといっていいぐらいユーザーインターフェースの要素はカバーされています。
これはこれでうれしいことなのですが、UIを工夫したりデザインを考えることから離れてしまい、あるものを組み合わせるだけで満足してしまいがちです。
やはり、サイトを作るベースとなる部分は、必要最低限のパーツが揃っていて、あとは自分たちで追加したり工夫できる余地があるものを使うのがベストです。
そこで、筆者がおすすめしたいのが「HTML KickStart」です。
既にご存知の方も多いと思いますが、「HTML KickStart」はHTML5とCSS、jQueryをベースにしたテンプレートセットです。
少し前までの「HTML KickStart」は、パーツも不十分で少し使いにくい部分があったのですが、最新のバージョン0.92になってからは理想のテンプレートに近づいたと思います。
Twitter Bootstrapのようにフルセットではありませんが、ベースとなる基本パーツは十分揃っています。
それでは、「HTML KickStart」の最新バージョン0.92でサポートしているパーツを見ていきましょう。
基本スタイル
基本スタイルはシンプルです。
リスト
標準のUL・OL要素のスタイル以外にチェックマークやよく使う三角マークをつけたリストが用意されています。
メニュー
縦と横のどちらでも設置できるメニューです。 階層メニューも簡単に作れます。メニューにアイコンを表示することも可能です。
テーブル
テーブルの見せ方も4種類用意されています。 ソートができるテーブルも作れます。
ツールチップ
title属性に設定されたテキストをマウスオーバーでツールチップを表示できます。
別の要素をツールチップに表示させることも可能です。
罫線
罫線のスタイルは3種類用意されています。
アイコン
標準アイコンが95個用意されています。サイズは5種類、色は8色から選べます。
ソーシャルアイコンが54個用意されています。
これだけ、揃っていればアイコンには困りませんねw
コード
ソースコードも見やすく表示できます。
ボタン
ボタンは、サイズや色、形が豊富に用意されています。 ボタンバーも設置可能です。
タブ
タブの配置を切り替えることが可能です。
ぱんくずリスト
2種類のぱんくずリストが用意されています。
グリッドレイアウト
これがないとレイアウトが大変ですよねw
イメージ
画像の枠やキャプションの表示スタイルが用意されています。
スライドショー
スライドショーも設置できます。（自動再生可能）
メディア
動画、地図、カレンダーが埋め込めます。
フォーム
入力ボックスのスタイルも見やすくなっています。 メッセージやエラーの際のスタイルも提供されています。
セレクトボックスは、検索可能なものや、タグ複数ができるインターフェースも用意されています。
インラインで表示しても大丈夫なように調整されています。
入力ボックスのサイズもclassで簡単に指定可能です。
その他
アンカーのスムーススクロールや、LightBox、first/lastクラスの追加などの気の利いた機能もあります。
まとめ
「HTML KickStart」を使えば、ベースとなる要素が整備されているので、スクラッチでサイトを素早く作ることができます。
必要最低限のパーツだけが提供されているので、それ以外を自分で作り込んでいくことになります。
その過程で、サイトに合わせたユーザーインターフェースを考えることにより、オリジナリティーのあるサイトが作れるはずです。
完璧よりも少し足りないぐらいが丁度いいんです！
もちろんIEにも対応していますよw
実際の動きは、「HTML KickStartのデモ」で確認してみてください。
筆者は、「HTML KickStart」を使ってスクラッチでサイトを作っているので、完成したらご紹介したいと思います。
【HTML5製プレゼンテーションツール】 jQueryベースで使いやすいプレゼンテーションライブラリーを見つけました！こちらもあわせてチェックしてみてください。 いろんな用途で使える！柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」
【マウスで銀はがしを体験できるプラグイン】 こちらはユニークはjQueryプラインです。用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうですよw スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」
【おすすめのオンライン画像加工アプリ】 HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。 HTML5で作られた驚異のフォトエディターまとめ
【HTML5ベースのWYSIWYGエディタ】 HTML5の技術とプログレッシブエンハンスメントのアプローチに基づいたオープンソースのリッチテキストエディタを見つけました。こちらもあわせてチェックしてみてください。 HTML5のWYSIWYGエディタ「wysihtml5」がシンプルで扱いやすい！jQuery不要
【Bootstrap版 Dreamweaver】 Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。Bootstrapをうまく融合した最速でウェブのユーザーインターフェースを構築するツールですので是非チェックしてみてください。 BootstrapのUIがドラッグアンドドロップだけで組めるエディタ「Jetstrap」
【なかなか仕事が思うどおりに進まない方へ】 やるべきタスクが消化できずに溜まっていく一方で困っている方に、それを解消する方法とツールを紹介しています。このツールを使うことで、重要な仕事にフォーカスできるので、仕事が空回りせずに、地に足の着いた進め方ができるようになりますよ。こちらも合わせてチェックしてみてください。 一日のやるべき事に集中できる！クールなタスク管理ダッシュボード「Momentum」
それでは、また！