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

OnsenUIとは？

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

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

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

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

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

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

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

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

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

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

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

完成したサンプルとコードなど（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でどう見せるか？」の方がレイアウトの自由度が高くなる分非常にやりやすく、なおかつ無駄なソースコードが出なくなるというメリットも存在します。

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

岡本