FoundationがBootstrapよりもECサイトに向いている理由
スポンサーリンク
今やサイト作りに欠かせなくなったフレームワーク。その代表格はやはりBootstrap。続いてFoundationです。
BootstrapもFoundationも、それぞれ得意なウェブサイトの分野があると思いますが、昨今の複雑なウェブサイト、特にECサイト作りには、断然Foundationでしょう。
BootstrapでWebサイトを作ったこともありますが、Foundationにしかない機能が結構あり、最近はすっかり欠かせない存在です。
もくじ
1. Block Gridがある
地味ながら、非常に強力かつ便利なのがFoundationのBlock Gridです。拙作Welcart対応テーマでも、商品一覧のアーカイブページで使っています。
<ul class="medium-block-grid-4 small-block-grid-2"> <li><a><img src="image1.jpg"></a></li> <li><a><img src="image2.jpg"></a></li> </ul>
通常ののGridでは、１つのrow（行）にいくつカラムを配置するか、予め決めておく必要があります。これはBootstrapでも同じです。
一方、FoundationにしかないBlock Gridは、１行あたりに表示するカラム数を画面幅によって自在に設定出来るので、アイテム数がいくつになるか想定出来ない商品などを一覧で並べるのにとても便利。
しかも、ボックスの高さも合わせてくれます。アイテムを羅列したいECではかなり重要。
もちろんですが、何もしなくても画像サイズはレスポンシブで伸縮。
残念ながら、BootstrapにはこのBlock Gridがありません。これだけでも、特にECサイトにはFoundationを使う意義がある！と私は断言したい。
2. 多くのjQueryプラグインが標準装備
Foundationには、外部のjQueryプラグインはいらないんじゃないか？と思われるほどのjQueryが搭載済みです。
以下の機能は、Bootstrapでも同様のものがあります。
- Tabs：タブ
- Accordion：アコーディオン
- Orbit Slider：画像がくるくる変わるスライダーFoundationでは非推奨になりました。残念・・・。
そしてFoundationなら、更に以下のプラグインも標準装備。ECサイトで使いたいものばかりです。
- Clearing Lightbox：画像のLightBox効果
- Offcanvas：スマホなどでメニューボタンを押すと画面が横にスライドしてメニューを表示
- Abide Validation：フォームバリデーション
- Joyride：手順をナビゲートするツールチップ的なもの
フォームバリデーションは、Welcartの場合は少々セッティングが手間になりますが（でも、外部jQueryプラグインを使ったとしても、手間は同じかと）、あとはそう難しくはないでしょう。
挙動や機能は、それを専門とするjQueryプラグインには多少劣りますが、必要十分な機能は備えています。
jQueryくらいなら、外部プラグインを取り入れてもそう大差ありませんが、標準で装備されているものを使えば、ファイルの読み込み回数も少なくて済むのが魅力です（※）。
※機能によっては、別途jsファイルを読み込む場合もあり。
3. Pricing Tableがある
使えるサイトを選ぶかもしれませんが、価格とスペックなどを表示するのに便利なPricing Tableがあるのも、Foundationの特徴。
マークアップも、普通のリストタグにclassをつけるだけという簡単さです。
<ul class="pricing-table"> <li class="title">Standard</li> <li class="price">$99.99</li> <li class="description">An awesome description</li> <li class="bullet-item">1 Database</li> <li class="bullet-item">5GB Storage</li> <li class="bullet-item">20 Users</li> <li class="cta-button"><a class="button" href="#">Buy Now</a></li> </ul>
4. 番外：Foundationにはない、Bootstrapのいいところ
Foundationの機能ばかり誉めてもアレなので、Bootstrapで私が気に入っている機能も取り上げてみます。
WordPress公式テーマ・ディレクトリに登録したテーマ用に作ったWebサイト（こちら）が、Bootstrapです。殆ど手を加えていない、オリジナルのBootstrapによるサイトの雰囲気がわかると思います。
1. アイコンフォントや多くのパーツが標準装備
いちいちデザインをしなくても、classを付与していくだけで、見栄えもそれなりに作れてしまうのがBootstrapの特徴。デザインは不得手のエンジニアさんなどが、簡単にWebサイトが作れます。
アイコンフォント：Glyphicon
標準で装備されているのは、GlyphiconのHalflingsバージョン。約200のアイコンフォントが標準で使えます。
通常、Halflingsは有料プランですが、Bootstrapユーザーには特別に無料で提供されているそうです（そのため、リンクバック推奨となっています）。
アイコンフォントはFontAwesomeのほうが種類が多いです。ブログやECにはFontAwesomeのほうが使い勝手がいいのは確かですが、それこそちょっとしたサイトであれば、このGlyphiconでも十分。
何にせよ、新たなスタイルシートの読み込みなくアイコンフォントを使えるのはストレスが一つ減ります。
リストグループやパネル
Bootstrapで強力なツールの一つがList Groupです。リストを簡単にパネル風に見せることが出来ます。
色づけ・リンクなども自由自在です。サイドバーなどのメニューなどに便利。そのままスマホサイトに流用できちゃいますからね。
Panelsも、Foundationよりもずっと強力です。パネルのヘッダーやフッターも自在につけられるので、これもサイドバーや表作りなどで結構使えます。
FontAwesomeの用例でも利用されている
先ほども少し触れましたが、アイコンフォントにはFontAwesomeを使用しているユーザーさんも多いと思います。
FontAwesomeの使い方用例では、Bootstrapのコーディングが使われているので、Bootstrapと共に取り込みやすいのが有難いです。
BootstrapのList groupと合わせた例。
2. コミュニティーが大きい
とにかくシェアNo.1（注：筆者イメージ）、圧倒的多数のユーザーが存在する為、テンプレートやパーツなど、多くのコードが公開されています。
無料でおしゃれなテンプレート
BootstrapでオシャレなWebサイトを作りたい場合は、無数に存在する無料テンプレートを導入してしまえば、一発で完成です。
その他、Bootswatchというサイトでも、いくつかオシャレなテンプレートも用意されています。
ダウンロードしたらbootstrap.min.cssを入れ替えるだけで新しいスタイルで表示OK。まさに「着せ替え」が楽しめます。
Foundationにも着せ替えテンプレートはないことはないですが、Bootstrapに比べたらまだまだ少なく、基本的にデザインはユーザーが行うタイプのフレームワークです。
コンタクトフォームなどのパーツも多数
例えば、先述のWelcart対応テーマ専用のサイトでは、コンタクトフォームにGitHabに公開されているBootstrap用フォームのコード（要PHP）を利用しました。
UI Components / contact form – GitHab
このような便利なコードが多く公開されているのは、やはりBootstrapの人気ならではでしょう。
5. まとめ
FoundationとBootstrapでは、その特徴とするところが異なるためターゲットも異なりますが、ずばりECサイトを作るなら迷いなくFoundation。もしまたWordPress.orgにWelcart用テーマを申請する機会があれば、今度はFoundationだけで作ってみたいくらいです。
逆に、高機能なjQueryやBlock Gridが不要であるサイトや、突貫工事でさくっと作りたい場合には、私は普通にBootstrapも使います。
WordPressに適用させるとなると、スタイルを当てるためのclass属性の付与が難しかったりする場合もありますが、グリッドシステムやjQueryなどは、問題なく使えます。
「フレームワークとは何ぞや？」という方は、とりあえずエビスコム本の「これからの「標準」を身につける HTML+CSSデザインレシピ」をやってみるとよいでしょう。便利すぎて、一回使ったらハマりますよ。
[…] FoundationがBootstrapよりもECサイトに向いている理由 – Welcart カスタマイズ 今やサイト作りに欠かせなくなったフレームワーク。その代表格はやはりBootstrap。続いてFoundationです。 Boots […]