2013年1月22日
事例:現代ギター様ECサイトにスマートフォン版サイトを追加しました
Zen Cart(オンラインショップ構築) アークウェブ スマートフォン
こんにちは。デザイナーの小森です。
現代ギター インターネットショップ
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によるオンラインショップ構築・運用テクニック―オープンソース徹底活用
内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ajax (システム開発)
- CMS(コンテンツマネジメント・システム)
- CMS・MovableType
- CSR(企業の社会的責任)
- Miqqle
- OpenSocial (システム開発)
- PukiWiki
- RIA (システム開発)
- Ruby on Rails(システム開発)
- SEM・サーチエンジン広告
- SEO・サーチエンジン最適化
- Snippy(SNS・ソーシャルブックマーク)
- Web 2.0
- WebSig24/7
- Webアクセシビリティ
- Webデザイン
- Webマーケティング
- Webユーザビリティ
- Web・ITニュースクリップ
- XP・アジャイル(システム開発)
- Zen Cart(オンラインショップ構築)
- ecoったー
- mixiアプリ
- necoったー
- だれもが使えるウェブコンクール
- アークウェブ
- アークウェブのCSR
- オープンソース
- スマートフォン
- セキュリティ(システム開発)
- テスト(システム開発)
- データベース
- ビッグイシュー(The Big Issue)
- マッシュアップ
- 唐松(アクセス解析)