ラクするWeb制作「フレームワークなにソレ？」な人へおすすめの7選
注：今回の記事は、Web制作を効率的にスピードアップしてくれる「便利なHTML／CSSフレームワーク」の紹介です。
なぜ、カレー？
その理由は、「フレームワークって何？」を理解すれば自ずと導きだされるはずです。
フレームワークって何？
フレームワークは、言い方を変えれば「カレーのルー」と例えられます。
ある女は言った
女は続ける。
「本当に便利ね。カレールーのおかげで、あの小難しいスパイス選びや調合、それにそのあとの面倒な調理工程のほとんどが要らなくなるんだから」
カレー作りのベースを塊（かたまり）にしたカレールー。利用することによって、極端な話、沸かしたお湯に溶くだけでOK。素人でもマトモなカレーを作れます。
フレームワークも同じ
Webサイト制作の「ベース」を塊で用意してくれてます。
塊ごとに例をあげると、
グリッド
あらかじめ、いくつかレイアウトのパターンを用意してくれてるので、好みに合わせて選べます。
最近、Webサイトのモバイル対応は必須ですよね。PCとモバイル、画面幅に合わせて適切なレイアウトを実現する「レスポンシブWebデザイン」も取り入れられます。
ボタン
「お問い合わせ」や「続きはこちら」のような目立たせたいリンクに使えるボタンもたくさん。
ナビゲーション
マジメに実装しようとすると、なかなか難しいナビゲーション。いろいろ選択肢があるので嬉しい。
プラグイン
写真のスライドショーやコンテンツのタブ表示など、普通なら難しいプログラミングスキルが求められますが、これも使い勝手の良いものをあらかじめ用意してくれてます。
このように、Webサイトを形にして行く過程で使える部品を先に準備してくれてるのが「フレームワーク」です。
カレールーがカレーの素（もと）なら、フレームワークは「Webサイトの素」。
さすがにカレールーのように「ズブの素人でも」使いこなせるとは言えないけれど、うまく利用すれば、Web制作を効率的に進められ、技術が不足してても、それなりのデザインと機能を備えたWebサイトを制作できます。
でも、デメリットも
あらかじめ用意された部品を使うので、できあがるWebサイトがなんとな〜く似た感じに。（ここもカレールーと同じですね。やっぱり同じカレールーを使えば、似た感じの味に仕上がってしまいます）
また、利用しない部品が余り、サイト全体のデータ量をムダに増やしてしまうこともあります。
オリジナリティを追求したい場合や、できるだけムダを排除したスリムなWebサイトが欲しいときは、フレームワークに「頼らない」を選んだ方が、逆にうまく開発を進められることも。
あるいは、利用する部品だけに再まとめできるフレームワークや、後述する「6. Responsive Grid System」のような、ある一つの機能だけに特化したフレームワークもあるので、それをうまく利用するという選択肢もあります。
仕上がりのデザインや機能をイメージして、うまくフレームワークと付き合いたいですね。
ということで、ボクが最近頼る「おすすめのフレームワーク」を紹介します。7つありますよー。
1. Foundation
先に「グリッド」や「ボタン」など、部品の例で出したのは、この「Foundation」。スキルや開発環境に合わせて、導入方法を選択できるところがニクイです。
CSSでいじくりたいなら、
Sassがイケる人は、
導入方法をマニュアル化してくれてるフレームワークは多いですが、その中でもFoundationのドキュメントはかなり詳しい！ でも、英語なんですよね。ここが導入の一番の難所になるかもですね〜。
Foundationをベースに敷いた「WordPress用のテーマ」もあります。
Photoshop用のデザインキットも。デザイナーが別にいる場合でも連携しやすいです。
2.Bootstrap
もはや定番です。もっとも利用者が多いフレームワークなのかな。利用者が多いおかげで、日本語での解説をたくさん見つけられます。
「1. Foundation」は、お初でフレームワークに取り組むにはハードルが少し高めなので、まずはBootstarpから始めるのがいいかも。
ドットインストールの動画を見れば、初心者さんでも導入できるはずです。
3. Web Starter Kit
ドキュメントが充実してます。Google提供のフレームワークなので、ドキュメントを傍にじっくり取り組んでいく過程で、Google推しの開発方法を学べます。
日本語では下記のブログが分かりやすかったです。おすすめ！
4. Pure
Googleに対して、Yahoo! も提供してるフレームワーク。コンパクトなフレームワークで、始め方もシンプル。下記の「始めてみよう！」に目を通せばイケるはず。
5. Gumby
Sass好きには、たまらないフレームワークです。
まだついていけてない機能もあるので、じっくり取り組める時間を見つけて、いじくり倒したいと思ってます。
6. Responsive Grid System
今までと毛色が違って、レイアウト機能だけに焦点を当てたフレームワークです。
レスポンシブWebデザインを採用したいだけで、余計な部品は不要、というプロジェクトに最適です。
公式サイトに解説がほとんどないのが残念だなあと思っていたところ、完璧なマニュアルを発見しました！
7. HTML5 BOILERPLATE
まさしく「ひな形」と呼ぶに相応しいフレームワークで、行き過ぎた装飾や機能は用意されてませんが、最低限必要なファイルをしっかり一式まとめてくれてます。
他のフレームワークやテンプレートとも相性がよく、他所で配布されてるHTMLテンプレートやWordPressテーマのベースによく利用されてますね。
番外. Blue Elephant グリーンカレーペースト
カレーに始まり、カレーに終わる。
「Blue Elephant」はタイに実存する有名タイ料理店です。そのお店がリリースしてるカレーペーストです。適当な具材とココナッツミルクを混ぜてやれば、本場さながらの味になります。
うまい！
日本でも売ってるみたいなので、見つけたらぜひお試しを！
最後にひとこと
（カレー好きなキミへ）WordPressブランクテーマもそうだけど、
フレームワークもマイ定番を一つくらい持っておくとハッピー。 http://t.co/deT78COuKy
— ウェブさえ (@websae2012) 2014, 11月 19
シェアしてくれると嬉しいです！（コメントも喜ぶよ）
- あなたにはこんな記事もおすすめ！
- ん？最新情報を見逃さない方法！？
- わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね！」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね！