アークウェブのブログ

2013年1月22日

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

投稿者 小森

• Tweet
• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タグ：

« 前の記事：覚え書き：Amazon Web Services（アマゾンウェブサービス）でAuto Scaling環境のCMSを構築する
» 次の記事：視覚障害者は日本語の電子書籍を読むことができるか（2013年6月版）