to topto bottom

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

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

x-Club(解説)

解説

会員制サイトのデモです。

x-club QRコード

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

スマホサイトはこちらから

トップページ

x-clubトップページ縦画面

Layouter

レイアウターで段組みしています。

RotateCarousel

カルーセル+自動回転で特集ページのサムネイルを表示しています。

Tab,Layouter

サイトのサービス内容をタブで表示しています。レイアウターを組み合わせることでタブの中身を段組みにしています。

Accordion

各コンテンツをアコーディオンで表示しています。折りたたむことでコンテンツが縦長になるのを防止しています。

RotateCarousel

関連商品のサムネイルをカルーセルで表示しています。

Justify

x-shoppingのフッターメニューを流用しています。x-fitタグでUIを作成しておくとタグのコピペだけで移植できるため開発効率が向上します。

会員登録ページ

x-club登録縦画面

画像変換機能

背景画像をx-fitの画像変換機能を使って端末の幅に合わせています。

機種グループによる出し分け機能

機種グループによる出し分け機能を使っています。

  • アニメーションを表現できる端末はHTML5のアニメーションを表示する
  • アニメーションを表現できない端末は固定の画像を表示する。

Switch

二者択一の項目はスイッチを利用しています。

CheckImage

チェックイメージを利用してアプリ風のリッチな選択ボタンを表示しています。

Check

チェックを利用してタッチできる範囲を広げています。

Radio

ラジオを利用してタッチできる範囲を広げています。チェックとは違い複数選択はできません。

お問い合せ

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