Bootstrap(ブートストラップ)を使ってレスポンシブ対応のお洒落なトップページを簡単に作る!

今回は実際に僕が使っている、Bootstrap(ブートストラップ)と呼ばれる手法をご紹介します。

CSSフレームワークの代表作となるBootstrap(ブートストラップ)を使って、トップページの制作作業や更新業務に加え、イベント会場や特集会場の制作も請け負っています!

今更かもしれませんが、実はこれが驚くほど短い時間で成果を出すことができています。

長年に渡りECサイトの運営や制作業を行ってきましたが、ここ最近の中では「クオリティー」&「制作時間」の両方で1番高い成果を出せたかなって思うほど、今1番注目して頂きたい内容になりますので是非参考になさってみて下さい。

こんな方にオススメです!!是非参考にして下さい
経営者・店舗運営責任者の方
HTMLやCSSなど、WEB関連の専門知識はそこまでない。ただ、制作してくれる社員やスタッフに「新しい提案」をしたい。そして、自店舗のトップページやイベントページのクオリティーに満足していない。
店長さんや制作・編集のスタッフさん
日々の更新作業に追われている。更新作業の時間を少なくしたいが、上手くいかない。特集会場やイベントページを新規で立ち上げる際に、[PC用]と[スマホ用]の2ページ作っている。見た目やデザイン性のクオリティーをアップさせたいが、コードを丁寧に書いている時間がない。


トップページの更新時間を飛躍的に向上させる


まず、ECサイトを運営する時に一番時間がかかる作業はなにか。
実際に僕も「運営責任者」「店長」「制作」「お客様対応」など、一通りの業務を経験してきました。ですので、どのポジションでも日々の仕事は忙しいし大変なことは理解しています。

約20年間ECサイトの運営に携わっていますが、これは未だに解明出来ないことですね。日々変化する業務内容なので、一律を求めるのは結構難しいです。受注処理やお客様のクレーム対応。商品ページ作ってカテゴリページの更新をして。そしてメルマガの原稿を作ったり。

さらにはモールが行ってくる検索結果のアップデートや情報更新の対応、登録情報追加などなどなど。やること本当に多岐にわたりますよね。

では、逆にECサイトの運営で一番時間をかけなくてはいけないのはどれか?
お客様サポートをするカスタマー関連か。ご注文頂いた商品の出荷梱包業務か。メルマガの配信予約や、TwitterやFacebookなどのSNS更新作業か。

正直、どれもこれも大事な作業です(笑)
優先順はあるにせよ、どの仕事も作業も1番と言って良いくらい大事です。ただ、作業にかける時間を短縮しクオリティーを一気にアップできる作業があります。

「っは?そんなのあるのかい?」って思うかもしれませんが、実際にあります。
それがCSSフレームワークのBootstrap(ブートストラップ)を使ったトップページの更新作業です。以前書いた記事でもお伝えしましたが、ECサイトの価値は全て売上で決まるのでトップページの価値ってそこまで重要度は高くないです。ただ、しっかりとやっらなくてはいけません。どっちだよって感じですが(笑)

なのであまり時間をかけずに圧倒的なクオリティーを発揮してくれる手法をお伝えします。もちろん導入費用も不要です。htmlやcssもそこまで強くなくても大丈夫です。これからお伝えする手法で、僕は6~8サイトの更新作業を約1時間で完了させてます。もちろん、PCもスマホもタブレットも全て対応してますの是非ご検討下さい。


トップページのクオリティーを簡単に向上させる


更新作業の種類も色々あります。
モールのポイントやクーポン情報。新規で発売をした時の新着情報や、再入荷商品のお知らせなどなど。
日々の更新作業を簡単にしてくれて、同時に見た目のクオリティーをアップできる手法は【bootstrap ブートストラップ】と呼ばれるCSSのフレームワークを導入します。
このブートストラップは元々がSNSで有名なTwitterが社内のサイト更新に使っていたフレームワークです。これを一般の人でも使えるようにと、オープンソースにして無料公開してくれてます。
htmlやcssのベースメイクが全て記述されているので、難しいコーディングは不要です。
やっぱりネットの社会って本当にすごいです。このブートストラップのパッケージを無料でダウンロードし、ファイル毎FTPにアップするだけです。
っあ!今更ですが、この手法にはFTPサーバーの利用が必須となりますので、あらかじめ契約内容はご確認下さい。

そして、ここからがポイントです。実はブートストラップだけ入れても意味我ありません。
ここから豊富にある無料テンプレートを選んでいきます。このお洒落な無料テンプレートを使うことによって、知識や大幅制作時間がカットされます。
ブートストラップと無料テンプレートを使いまくれば、トップページだけじゃなく、企画ページやランディングページ、ブログ風の記事簡単作れます。

そして、最大の利点は「レスポンシブ」に対応しているということです。
レスポンシブってのは簡単に言うと、1個のhtmlファイルで、パソコンもスマホもタブレットも、自動的に最適な表示してくれます。なので僕が更新するトップページは、index.htmlだけです。他の店舗さんで多いのがpc用とスマホ用のindexファイルをわけています。
やり方もありますが、要するに更新する時に2個のファイルをいじるわけです。2店舗なら4ファイル。3店舗なら6ファイルです。僕は8店舗分の更新をする時は8ファイルで済みます。
更新する店舗数が多すぎですが(笑)

そして、PCとスマホトップページをレスポンシブ対応にして、1個にまとめた方がGoogleのSEO的にも非常に大きな利点をがあります。ちなみに僕はトップページだけでなく、色々なページをブートストラップで作り上げています。その結果、Googleからの検索流入数が爆発的にあがりました。

もちろんSEOのテクニックは不可欠です。正直言って楽天市場Yahoo!ショッピングのSEOテクニックとは一味違います(笑)まぁこの辺り次の機会にお披露目したいと思います。

そして、bootstrap対応の数あるテンプレートからECサイト最適なテンプレートを3つに厳選してみました。あんまり多すぎても困りますからね。テンプレート選ぶさいの注意点は「ブートストラップの対応バージョン」です。
現在のブートストラップは「bootstrap5」が最新版です。このバージョンが一致していないと少し表示や挙動にバグが発生率することがあるので、注意して下さい。

いかがでしたでしょうか。今回はページ更新の時短とクオリティーUPの活用方法をご案内させて頂きました。ちょっとご紹介しながら思ったのですが、やっぱり少しも、決して手抜きはしません。クオリティーだけはブートストラップを使って圧倒的に上げていきます。但し、かける時間は極力短縮します。ですが、アップするファイルはブートストラップ使ってページを作り、日々の更新作業されている方が結構いいと思います。