ラクするWeb制作「フレームワークなにソレ?」な初心者へおすすめの7選

2016年2月29日
カテゴリー ホームページ作成 人気の記事ベスト10

Web制作をスピードアップ「フレームワークなにソレ?」な人へおすすめの7選

注:今回の記事は初心者向け、Web制作を効率的にスピードアップしてくれる「便利なHTML/CSSフレームワーク」の紹介です。

なぜ、カレー?

その理由は、「フレームワークって何?」を理解すれば自ずと導きだされるはずです。

フレームワークって何?

カレーのルーだ

フレームワークは、言い方を変えれば「カレーのルー」と例えられます。

ある女は言った

日本のカレールーはすごいわ

女は続ける。

「本当に便利ね。カレールーのおかげで、あの小難しいスパイス選びや調合、それにそのあとの面倒な調理工程のほとんどが要らなくなるんだから」

確かに

カレー作りのベースを塊(かたまり)にしたカレールー。利用することによって、極端な話、沸かしたお湯に溶くだけでOK。素人でもマトモなカレーを作れます。

フレームワークも同じ

フレームワーク

Webサイト制作の「ベース」を塊で用意してくれてます。

塊ごとに例をあげると、

グリッド

グリッド

あらかじめ、いくつかレイアウトのパターンを用意してくれてるので、好みに合わせて選べます。

最近、Webサイトのモバイル対応は必須ですよね。PCとモバイル、画面幅に合わせて適切なレイアウトを実現する「レスポンシブWebデザイン」も取り入れられます。

ボタン

ボタン

「お問い合わせ」や「続きはこちら」のような目立たせたいリンクに使えるボタンもたくさん。

ナビゲーション

ナビゲーション

マジメに実装しようとすると、なかなか難しいナビゲーション。いろいろ選択肢があるので嬉しい。

プラグイン

プラグイン

写真のスライドショーやコンテンツのタブ表示など、普通なら難しいプログラミングスキルが求められますが、これも使い勝手の良いものをあらかじめ用意してくれてます。

このように、Webサイトを形にして行く過程で使える部品を先に準備してくれてるのが「フレームワーク」です。

カレールーがカレーの素(もと)なら、フレームワークは「Webサイトの素」。

さすがにカレールーのように「ズブの素人でも」使いこなせるとは言えないけれど、うまく利用すれば、Web制作を効率的に進められ、技術が不足してても、それなりのデザインと機能を備えたWebサイトを制作できます。

でも、デメリットも

いいことばかりじゃない

あらかじめ用意された部品を使うので、できあがるWebサイトがなんとな〜く似た感じに。(ここもカレールーと同じですね。やっぱり同じカレールーを使えば、似た感じの味に仕上がってしまいます)

また、利用しない部品が余り、サイト全体のデータ量をムダに増やしてしまうこともあります。

オリジナリティを追求したい場合や、できるだけムダを排除したスリムなWebサイトが欲しいときは、フレームワークに「頼らない」を選んだ方が、逆にうまく開発を進められることも。

あるいは、利用する部品だけに再まとめできるフレームワークや、後述する「6. Responsive Grid System」のような、ある一つの機能だけに特化したフレームワークもあるので、それをうまく利用するという選択肢もあります。

仕上がりのデザインや機能をイメージして、うまくフレームワークと付き合いたいですね。

ということで、ボクが最近頼る「おすすめのフレームワーク」を紹介します。7つありますよー。

1. Foundation

Th foundation 20141116

先に「グリッド」や「ボタン」など、部品の例で出したのは、この「Foundation」。スキルや開発環境に合わせて、導入方法を選択できるところがニクイです。

CSSでいじくりたいなら、

Sassがイケる人は、

導入方法をマニュアル化してくれてるフレームワークは多いですが、その中でもFoundationのドキュメントはかなり詳しい! でも、英語なんですよね。ここが導入の一番の難所になるかもですね〜。

Foundationをベースに敷いた「WordPress用のテーマ」もあります。

Photoshop用のデザインキットも。デザイナーが別にいる場合でも連携しやすいです。

2.Bootstrap

bootstrap

もはや定番です。もっとも利用者が多いフレームワークなのかな。利用者が多いおかげで、日本語での解説をたくさん見つけられます。

「1. Foundation」は、お初でフレームワークに取り組むにはハードルが少し高めなので、初心者さんは、まずBootstarpから始めてみるのがいいかも。

ドットインストールの動画を見れば初心者さんでも、こなせるはず。このブログでもグリッドシステムに限って特集してます。

3. Web Starter Kit

Th web starter kit

ドキュメントが充実してます。Google提供のフレームワークなので、ドキュメントを傍にじっくり取り組んでいく過程で、Google推しの開発方法を学べます。

日本語では下記のブログが分かりやすかったです。おすすめ!

4. Pure

pure

Googleに対して、Yahoo! も提供してるフレームワーク。コンパクトなフレームワークで、始め方もシンプル。下記の「始めてみよう!」に目を通せばイケるはず。

5. Gumby

gumby

Sass好きには、たまらないフレームワークです。

まだついていけてない機能もあるので、じっくり取り組める時間を見つけて、いじくり倒したいと思ってます。

6. Responsive Grid System

responsive grid system

今までと毛色が違って、レイアウト機能だけに焦点を当てたフレームワークです。

レスポンシブWebデザインを採用したいだけで、余計な部品は不要、というプロジェクトに最適です。

公式サイトに解説がほとんどないのが残念だなあと思っていたところ、完璧なマニュアルを発見しました!

7. HTML5 BOILERPLATE

Th html5 boilerplate

まさしく「ひな形」と呼ぶに相応しいフレームワークで、行き過ぎた装飾や機能は用意されてませんが、最低限必要なファイルをしっかり一式まとめてくれてます。

他のフレームワークやテンプレートとも相性がよく、他所で配布されてるHTMLテンプレートやWordPressテーマのベースによく利用されてますね。

番外. Blue Elephant グリーンカレーペースト

Blue Elephant

カレーに始まり、カレーに終わる。

「Blue Elephant」はタイに実存する有名タイ料理店です。そのお店がリリースしてるカレーペーストです。適当な具材とココナッツミルクを混ぜてやれば、本場さながらの味になります。

うまい!

完成

日本でも売ってるみたいなので、見つけたらぜひお試しを!

最後にひとこと

フレームワークよりも、もっと簡単に早くホームページを作成したければ、こちらを。

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top