【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Bootstrapはもう古い!?Gumbyフレームワークが便利

Bootstrapはもう古い!?Gumbyフレームワークが便利

Gumby Framework

Gumby – A Flexible, Responsive CSS Framework – Powered by Sass

こんにちは。ECプロデュース部の岡本です。

みなさまはレスポンシブサイトを作る時、どのようなフレームワークを使用されていますでしょうか?

有名ドコロであれば「Twitter Bootstrap」や「Foundation」などがよく利用されているのではないかと思います。

特にBoostrapはナビゲーションなどの「コンポーネント」が非常に豊富で、モックアップなどを作成する際には非常に重宝されている様です。

しかし一方でカスタマイズするには束縛されるポイントも多く、実際のコーディングに使うには少し工夫が必要となります。

今回はBootstrap並にコンポーネントが多いのに、カスタマイズ性が非常に高いフレームワーク「Gumby」をご紹介いたします。

特徴1:柔軟なグリッドシステム

グリッドシステムを利用する際、慣れていないと手こずるのが「グリッド設定」です。

Gumbyでは右寄せや中央寄せに加えて「タイル表示」という機能も利用できます。

tileとgrid

スマートフォンサイズでも全画面表示にしたくないコンテンツなどに使える、便利な機能です。

特徴2:フラット・非フラット両用可能

Gumbyはフラット・非フラットなボタンとナビゲーションをどちらも使用することができます。

2type Button

Bootstrapではバージョンを切り替える必要がありましたが、どちらでも利用できるというのが便利です。

特徴3:カスタマイズ性が高い

GumbyのコンポーネントはBootstarpなどと比較して「シンプル過ぎるデザイン」となっています。

simple-design

これはユーザーがカスタマイズして使用することを前提として設計されているためで、他のフレームワークよりも上書きや書き換え回数を少なくすることができます。

もちろんそのままでも「ミニマルデザイン」のサイトには充分に利用できる仕様です。

まとめ

いかがでしたでしょうか。

以前紹介したResponsive Grid Systemも非常に便利なのですが、コンポーネントがもう少し欲しい時などはGumby検討してみてはいかがかと思います。

もちろん全デバイス対応のレスポンシブフレームワークです。

Gumby – A Flexible, Responsive CSS Framework – Powered by Sass

追記:誤字修正しました。はてぶにてご指摘頂きありがとうございました。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+