ホーム » ビジネスブログ »

スマートフォン

2013年1月22日

事例:現代ギター様ECサイトにスマートフォン版サイトを追加しました

Zen Cart(オンラインショップ構築)  アークウェブ  スマートフォン 

投稿者 小森

こんにちは。デザイナーの小森です。

現代ギター インターネットショップ
http://www.gendaiguitar.com/

のスマートフォン版開発のお手伝いをいたしました。

現代ギターECサイト スマートフォン版

現代ギター様は、輸入楽譜やCDを販売するオンラインショップを5年以上運営している実績あるショップです。
今回はZen-Cartで構築された既存PC用サイトはそのままに、zen_smartphoneというモジュールを追加することで、デバイス判定をして新規に作成したスマートフォン用テンプレートを表示するしくみを採用しました。

スマートフォン版の画面設計で注意したこと

今回のスマートフォン版開発では、

  • PC版にある機能や情報は極力活かし、リピーターの方にも違和感なく使っていただけること
  • スマートフォンでもストレスの少ない閲覧ができること

を方向性として、以下のような点を配慮して画面を構成しました。

  • 使用頻度が高い検索ボックスは、目立つ位置(ヘッダー直下)に配置
  • 「What's New」や「今月の月刊現代ギター」など手入力更新するコンテンツは、運用の手間を考えてなるべくPCとスマホで共通利用
  • そのうえで、1行ティッカー風スライドの採用や、カルーセルUIの表示件数減など、JavaScriptによる工夫で表示領域を節約
  • ログインや会員登録はページ下部に移動し、まずは商品を見てもらう流れに
  • ボタンは押しまちがいのないように、大きく
  • PC版では「弦」カテゴリーのみマトリックス表を使用した特殊な注文ページがありましたが、スマートフォンでは表示領域が狭いため、一覧+絞り込み主体のUIを新たに作成

PC版とは異なる制約や、ユーザーの閲覧意向を考慮して、画面をカスタマイズしたかたちになります。

英語版への対応もZen Cartならかんたんに

現代ギター様は英語サイトも運営しており、今回のスマートフォン版公開でももちろん英語版に対応いたしました。

Zen-Cartは、言語定義とデザインテンプレートが分かれているので、管理を複雑にせずに開発することができました。このような多テンプレート×多言語対応がしやすいのもZen-Cartの大きなメリットといえるでしょう。

投稿者 小森 : 08:15

その他の記事


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Open Source4.1