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

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

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

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

モバイルファーストでOnsenUI風のECサイトレイアウトを作ってみる

モバイルファーストでOnsenUI風のECサイトレイアウトを作ってみる

今回は「OnsenUI」というフレームワークで用いられているデザインを、レスポンシブECサイト風に再現させてみました。

OnsenUIとは?

OnsenUIとは、HTML5を利用したモバイルアプリ向けのUIフレームワークです。

HTML5モバイルアプリをもっと速く、もっと美しく | Onsen UI
HTML5モバイルアプリをもっと速く、もっと美しく | Onsen UI

Angular.js/jQueryを採用したWEBコンポーネント型のフレームワークで、日本語のドキュメントもとても豊富です。

今回はOnsen CSS Componentsから、「Grid Menu」というサンプルをベースに作ってみました。

Onsen UI - Grid Menu
Onsen UI – Grid Menu

3デバイス分のワイヤーフレームを作る

先ほどのサンプルをモバイルで実装させますので、続けてタブレット・PCのレイアウトを作成します。

ワイヤーフレーム

フッターメニューがPC幅ではヘッダーメニューに移動するという形式にしてみました。

ヘッダーメニュー位置

PCから見た際に、固定メニューはヘッダーの方が自然ではないかと感じたので、このようなレイアウトにしています。

アイコンフォントを使ってコーディング

おおよそのワイヤーフレームが出来ましたので、早速コーディングしていきます。

メニューに使用するアイコンは、外部CDNが利用できる「Font Awesome」を使いました。

Font Awesome
http://fortawesome.github.io/Font-Awesome/

アイコンフォントを利用することで、「カラーの変更」「サイズの変更」などのスタイル調整がかなり簡単に行えるようになります。

完成したサンプルとコードなど(CodePen)

そして出来上がったものがこちらです。

See the Pen EC Site Layout similar to Onsen UI by hidetakaokamoto (@hideokamoto) on CodePen.

CodePenで見ると、ブラウザ幅を変更した際の動きなども確認できます。

サンプルを作ることが目的でしたので、コードがかなり汚いのはご了承下さい。

サイト表示を見る(スマートフォン)

スマートフォンでの表示(アプリ風レイアウト)
ヘッダーとナビゲーションを固定表示させた「アプリ風レイアウト」で作りました。

ナビゲーションの「Menu」をタップすると、OnsenUI風のメニューが表示されるようになっています。
メニューレイアウト

今回は実装していませんが、「Favorite」「MyPage」でも商品リストやログイン画面が表示されるようになるとより便利になるかなと思います。

また「TEL」ボタンにクリック数測定の解析タグを仕込んでおくと、WEBからの問い合わせ数がよりわかりやすくなりそうです。

サイト表示を見る(タブレット)

タブレットでの表示
タブレットからはメニューが左カラムに表示されます。

floatで位置指定をしていますので、左右を入れ替えたバージョンも簡単に作れます。
メニューを右側に配置
右サイドバーですと、こんな感じですね。

ファブレットのような500~600pxサイズの小型タブレットを考慮すると、3列表示は少し厳しそうです。

PCでは3列になる関係上、6・12・18と6の倍数でメニューを作る必要があります。

サイト表示を見る(PC)

PCでの表示

最後にPCでの表示です。ページ下に固定表示されていたナビゲーションがヘッダーに移動しています。PC向けのCSSを削除することでページ下固定のままにすることの可能です。

その他サイトタイトル部分を検索フォームに変えるなど、やりようによってはかなり拡張させることができそうです。

まとめ:レイアウトはモバイルファーストで考えよう

モバイルファーストで考える

ここまで、ECサイトではあまり見かけないタイプのナビゲーション・レイアウトのサンプルを紹介しました。

実際に作った感想として、「モバイルから考えたほうがやりやすい」という点が挙げられるかなと思います。

今回のサンプルではOnsenUIのサンプルをベースに、モバイル→タブレット→PCという順にワイヤーフレームを作成しています。

「PC向けのパーツをいかにモバイルに詰め込むか?」よりも「モバイルのパーツをPCでどう見せるか?」の方がレイアウトの自由度が高くなる分非常にやりやすく、なおかつ無駄なソースコードが出なくなるというメリットも存在します。

「今までのやり方」からすると違和感は強いと思いますが、レスポンシブサイトを作られる際はぜひモバイルからワイヤーフレームを作ってみてください。

岡本

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