navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボモバイルファーストでOnsenUI風のECサイトレイアウトを作ってみる2014.09.192017.02.24レスポンシブWebデザインHOME技術モバイルファーストでOnsenUI風のECサイトレイアウトを作ってみる今回は「OnsenUI」というフレームワークで用いられているデザインを、レスポンシブECサイト風に再現させてみました。まとめ:レイアウトはモバイルファーストで考えようOnsenUIとは?OnsenUIとは、HTML5を利用したモバイルアプリ向けのUIフレームワークです。UIAngular.js/jQueryを採用したWEBコンポーネント型のフレームワークで、日本語のドキュメントもとても豊富です。Menu」というサンプルをベースに作ってみました。Menu3デバイス分のワイヤーフレームを作る先ほどのサンプルをモバイルで実装させますので、続けてタブレット・PCのレイアウトを作成します。フッターメニューがPC幅ではヘッダーメニューに移動するという形式にしてみました。PCから見た際に、固定メニューはヘッダーの方が自然ではないかと感じたので、このようなレイアウトにしています。アイコンフォントを使ってコーディングおおよそのワイヤーフレームが出来ましたので、早速コーディングしていきます。Awesome」を使いました。http://fortawesome.github.io/Font-Awesome/アイコンフォントを利用することで、「カラーの変更」「サイズの変更」などのスタイル調整がかなり簡単に行えるようになります。完成したサンプルとコードなど(CodePen)そして出来上がったものがこちらです。CodePen.CodePenで見ると、ブラウザ幅を変更した際の動きなども確認できます。サンプルを作ることが目的でしたので、コードがかなり汚いのはご了承下さい。サイト表示を見る(スマートフォン)ヘッダーとナビゲーションを固定表示させた「アプリ風レイアウト」で作りました。ナビゲーションの「Menu」をタップすると、OnsenUI風のメニューが表示されるようになっています。今回は実装していませんが、「Favorite」「MyPage」でも商品リストやログイン画面が表示されるようになるとより便利になるかなと思います。「TEL」ボタンにクリック数測定の解析タグを仕込んでおくと、WEBからの問い合わせ数がよりわかりやすくなりそうです。サイト表示を見る(タブレット)タブレットからはメニューが左カラムに表示されます。floatで位置指定をしていますので、左右を入れ替えたバージョンも簡単に作れます。右サイドバーですと、こんな感じですね。ファブレットのような500~600pxサイズの小型タブレットを考慮すると、3列表示は少し厳しそうです。PCでは3列になる関係上、6・12・18と6の倍数でメニューを作る必要があります。サイト表示を見る(PC)最後にPCでの表示です。ページ下に固定表示されていたナビゲーションがヘッダーに移動しています。PC向けのCSSを削除することでページ下固定のままにすることの可能です。その他サイトタイトル部分を検索フォームに変えるなど、やりようによってはかなり拡張させることができそうです。まとめ:レイアウトはモバイルファーストで考えようここまで、ECサイトではあまり見かけないタイプのナビゲーション・レイアウトのサンプルを紹介しました。実際に作った感想として、「モバイルから考えたほうがやりやすい」という点が挙げられるかなと思います。今回のサンプルではOnsenUIのサンプルをベースに、モバイル→タブレット→PCという順にワイヤーフレームを作成しています。「PC向けのパーツをいかにモバイルに詰め込むか?」よりも「モバイルのパーツをPCでどう見せるか?」の方がレイアウトの自由度が高くなる分非常にやりやすく、なおかつ無駄なソースコードが出なくなるというメリットも存在します。「今までのやり方」からすると違和感は強いと思いますが、レスポンシブサイトを作られる際はぜひモバイルからワイヤーフレームを作ってみてください。岡本”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。2017.03.03ECサイトの課題として常に挙げられている、サイト離脱。2012.08.17前回はスマートフォンECサイトで転換率(CVR)を10倍にするためにすべき5つのことを紹介させていただきました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。