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

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

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

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

レスポンシブWebデザインのCSS作成ツールが簡単で素敵すぎる!

レスポンシブWebデザインのCSS作成ツールが簡単で素敵すぎる!

Responsive Web Css

レスポンシブWebデザインでwebサイトを構築する際にポイントとなるのが、「どのデバイス幅で」「コンテンツをどの幅にするのか」ということだと思います。

webサイトをレスポンシブ化する際のツールでは、「TwitterBootStrap」や「Foundation」などのcssフレームワークが有名ですが、今回は『とにかく”簡単”・”時短”でレスポンシブ対応のHTML・CSSスケルトンが作りたい!』という時に使えるオンライン作成ツールResponsive Web Cssをご紹介します。

コンテンツをマウスドラッグで移動したり、デバイス毎のコンテンツ幅なども画面上で確認しながら簡単に設定出来るので、レスポンシブWebデザインをこれから取り入れてみたいという方にもオススメのオンラインツールとなっています。

Responsive Web Cssの使い方

使い方はとても簡単で、Responsive Web Cssのトップにある”Get Started”ボタンをクリックして、レイアウト作成ページに移動します。

CSS

ここで、デバイス毎のコンテンツ幅や表示の設定をしていきます。

左の赤枠の部分で今回レイアウトを適用させたいデバイスを選択し、右の青枠の部分でページやコンテンツの追加をしていきます。

Responsive Web Css

ページの追加やページ内のコンテンツの追加もクリック一つで出来るのでとても簡単です。また、ページ名やコンテンツ毎の名前も自分で設定できます。

コンテンツ毎の幅指定も数値を入力するだけで、視覚的にレイアウト調整出来るので、ちょっとした修正も楽ですね。

Responsive Web Css

デバイス毎にレイアウトを変更したい時は変更したいデバイスを選択すると、レイアウト変更画面に移動します。そこで、レイアウト幅の調整をしていきます。

Responsive Web Css

各デバイスのレイアウト調整が終了したら、画面下の”Export”ボタンをクリックするだけです。こんなに簡単にレイアウトを完成させていいの?!と思うくらいの時間で完成してしまいます。

このスケルトンを元にサイトコーディングやデザインをしていくということになります。

まとめ

webサイトをスマートデバイスに対応させると一言で言っても、やはりメディアクエリの設定が煩雑になったり、コンテンツ幅もデバイス毎に細かく設定したい場合はそれなりに手間がかかります。

Responsive Web Cssのように、オンラインで視覚的にスケルトンが作成できれば、デバイス毎の設定も格段に簡単になるので、レスポンシブWebデザインがより身近に感じられるのではないでしょうか。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+