【無料プレゼント】まだホームページは作らないで!このガイドブックを読み終えるまでは。いうテーマで、「ホームページを作る前に読んでおくと得する本」を書きました。無料で読む注:今回の記事は初心者向け、Web制作を効率的にスピードアップしてくれる「便利なHTML/CSSフレームワーク」の紹介です。カレー?その理由は、「フレームワークって何?」を理解すれば自ずと導きだされるはずです。フレームワークって何?フレームワークは、言い方を変えれば「カレーのルー」と例えられます。ある女は言った女は続ける。カレールーのおかげで、あの小難しいスパイス選びや調合、それにそのあとの面倒な調理工程のほとんどが要らなくなるんだから」カレー作りのベースを塊(かたまり)にしたカレールー。利用することによって、極端な話、沸かしたお湯に溶くだけでOK。素人でもマトモなカレーを作れます。フレームワークも同じWebサイト制作の「ベース」を塊で用意してくれてます。塊ごとに例をあげると、グリッドあらかじめ、いくつかレイアウトのパターンを用意してくれてるので、好みに合わせて選べます。最近、Webサイトのモバイル対応は必須ですよね。PCとモバイル、画面幅に合わせて適切なレイアウトを実現する「レスポンシブWebデザイン」も取り入れられます。ボタン「お問い合わせ」や「続きはこちら」のような目立たせたいリンクに使えるボタンもたくさん。ナビゲーションマジメに実装しようとすると、なかなか難しいナビゲーション。選択肢があるので嬉しい。プラグイン写真のスライドショーやコンテンツのタブ表示など、普通なら難しいプログラミングスキルが求められますが、これも使い勝手の良いものをあらかじめ用意してくれてます。このように、Webサイトを形にして行く過程で使える部品を先に準備してくれてるのが「フレームワーク」です。カレールーがカレーの素(もと)なら、フレームワークは「Webサイトの素」。カレールーのように「ズブの素人でも」使いこなせるとは言えないけれど、うまく利用すれば、Web制作を効率的に進められ、技術が不足してても、それなりのデザインと機能を備えたWebサイトを制作できます。デメリットもあらかじめ用意された部品を使うので、できあがるWebサイトがなんとな〜く似た感じに。(ここもカレールーと同じですね。同じカレールーを使えば、似た感じの味に仕上がってしまいます)また、利用しない部品が余り、サイト全体のデータ量をムダに増やしてしまうこともあります。オリジナリティを追求したい場合や、できるだけムダを排除したスリムなWebサイトが欲しいときは、フレームワークに「頼らない」を選んだ方が、逆にうまく開発を進められることも。System」のような、ある一つの機能だけに特化したフレームワークもあるので、それをうまく利用するという選択肢もあります。仕上がりのデザインや機能をイメージして、うまくフレームワークと付き合いたいですね。いうことで、ボクが最近頼る「おすすめのフレームワーク」を紹介します。ZURB先に「グリッド」や「ボタン」など、部品の例で出したのは、この「Foundation」。スキルや開発環境に合わせて、導入方法を選択できるところがニクイです。ここが導入の一番の難所になるかもですね〜。DocsFoundationをベースに敷いた「WordPress用のテーマ」もあります。Zurb.Photoshop用のデザインキットも。デザイナーが別にいる場合でも連携しやすいです。framework.もはや定番です。利用者が多いフレームワークなのかな。利用者が多いおかげで、日本語での解説をたくさん見つけられます。Foundation」は、お初でフレームワークに取り組むにはハードルが少し高めなので、初心者さんは、まずBootstarpから始めてみるのがいいかも。ドットインストールの動画を見れば初心者さんでも、こなせるはず。このブログでもグリッドシステムに限って特集してます。Fundamentalsドキュメントが充実してます。Google提供のフレームワークなので、ドキュメントを傍にじっくり取り組んでいく過程で、Google推しの開発方法を学べます。Fundamentals日本語では下記のブログが分かりやすかったです。提供してるフレームワーク。コンパクトなフレームワークで、始め方もシンプル。下記の「始めてみよう!」に目を通せばイケるはず。SassSass好きには、たまらないフレームワークです。ついていけてない機能もあるので、じっくり取り組める時間を見つけて、いじくり倒したいと思ってます。System今までと毛色が違って、レイアウト機能だけに焦点を当てたフレームワークです。レスポンシブWebデザインを採用したいだけで、余計な部品は不要、というプロジェクトに最適です。BOILERPLATEまさしく「ひな形」と呼ぶに相応しいフレームワークで、行き過ぎた装飾や機能は用意されてませんが、最低限必要なファイルをしっかり一式まとめてくれてます。他のフレームワークやテンプレートとも相性がよく、他所で配布されてるHTMLテンプレートやWordPressテーマのベースによく利用されてますね。グリーンカレーペーストカレーに始まり、カレーに終わる。Elephant」はタイに実存する有名タイ料理店です。そのお店がリリースしてるカレーペーストです。適当な具材とココナッツミルクを混ぜてやれば、本場さながらの味になります。フレームワークもマイ定番を一つくらい持っておくとハッピー。ブランクテーマ4つフレームワークよりも、もっと簡単に早くホームページを作成したければ、こちらを。制作会社を頼らず無料のホームページ作成ツール14個ついに再開!ウェブさえのHP作成サービスはこちら@websae2012さんをフォローシェアしてくれると嬉しいです!(コメントも喜ぶよ)Tweetあなたにはこんな記事もおすすめ!無料のホームページ作成ツールを14個も!もう制作会社を頼らない。HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ今年こそホームページ作成に独学で挑戦したい初心者にはHTMLテンプレートがおすすめホームページをWeb制作会社へ依頼する前のチェックリスト27項グサリっ!ホームページのリニューアルを成功させる急所Googleアナリティクスのすごい使い方!バブルチャートで検索経由の売上を増やそうトップページに戻るん?最新情報を見逃さない方法!?わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。株式会社ウェブさえの代表者です。フリーランスまで様々な職種業界の方が居て、挙げだすと切りがありません。皆様に本当に感謝しております。詳しい自己紹介はこちらへ。お問い合わせやご質問・ご相談はこちらへ。初心者に優しいシングルページばかりを集めましたグサリっ!ホームページのリニューアルを成功させる急所Web系フリーランスをモンスタークライアントから守る契約書ホームページ作成ツールを無料もありで19個も!もう制作会社を頼らない。最近更新した記事ホームページ作成ツールを無料もありで19個も!もう制作会社を頼らない。WordPressのスキルアップに最適。