to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

x-fitを通して作成したデモサイトです。
タッチインターフェイスに最適化された立地なUIの動作をお試しください。

化粧品サイト(解説)

解説

ショッピングサイトのデモです。

x-cosme QRコード

直接スマホでご覧になりたい方は下記リンクをご利用ください。

スマホ・タブレットサイトはこちらから

タブレットとスマホそれぞれの表示比較

トップページ

タブレット表示
タブレット・トップ画面
スマホ表示
スマホ・トップ画面

商品情報ページ

タブレット表示
タブレット・商品情報画面
スマホ表示
スマホ・商品情報画面

タブレット・トップページの部品について

タブレット・トップ画面

BlockLink

ナビゲーションボタンに利用しています。画像・文字を横並びにしています。

RotateCarousel, Layouter

右側のエリアは横幅をタブレットには約70%、スマホには約100%でレイアウトを切り替えています。

BlockLink

画像と文字をひとまとめにしてリンクにしています。

タブレット・商品情報ページの部品について

タブレット・商品情報画面

Layouter

タブレットとスマホでレイアウトを切り替えています。

BlockLink

左ペーンのバナーボタンは画像と文字をひとまとめにしてリンクにしています。

CheckImage

画像を使ったチェックボタンです。

スマホ・トップページの部品について

スマホ・トップ画面

RotateCarousel, Layouter

タブレットとスマホでレイアウトを切り替えています。

BlockLink

ナビゲーションボタンに利用しています。画像・文字を横並びにしています。

BlockLink

画像と文字をひとまとめにしてリンクにしています。

スマホ・商品情報ページの部品について

スマホ・商品情報画面

Layouter

タブレットとスマホでレイアウトを切り替えています。

RotateCarousel

スマホの場合のみカルーセルにしています。

CheckImage

画像を使ったチェックボタンです。

BlockLink

画像と文字をひとまとめにしてリンクにしています。

お問い合せ

『x-fit』(クロスフィット)に関するご質問や、[評価版]のお申込み、[資料請求]等は以下よりお問い合せください。