2013年1月22日
事例:現代ギター様ECサイトにスマートフォン版サイトを追加しました
こんにちは。デザイナーの小森です。
現代ギター インターネットショップ
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で高機能・セキュアなECサイトを構築しませんか?
- Movable Type/MTOSを企業CMSとして活用しませんか?
- Ajaxで軽快なRIA(リッチ・インターネットアプリケーション)を
- Zen Cart公式:PHPMailerの脆弱性パッチ(5.2.21)適用について
- Zen-Cart.com お知らせ:PayPalスタンダード決済で「,」が使えなくなる
- Zen Cart 1.6 開発の最新状況(Zen-Cart公式サイトから)
- プレスリリース:アークウェブ、Movable Type/MTクラウド用の人気プラグイン「A-Form(フォーム作成)」、「A-Member(会員制サイト構築)」、「A-Reserve(予約制サイト構築)」を機能強化した
- Movable Type用プラグイン最新版 A-Form / A-Member / A-Reserve 3.8.6をリリースしました!
« 前の記事:覚え書き:Amazon Web Services(アマゾンウェブサービス)でAuto Scaling環境のCMSを構築する
» 次の記事:視覚障害者は日本語の電子書籍を読むことができるか(2013年6月版)
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- NGO・NPO向け情報
- スマートフォン
- だれもが使えるウェブコンクール
- mixiアプリ
- OpenSocial (システム開発)
- アークウェブのCSR
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ruby on Rails(システム開発)
- necoったー
- Miqqle
- WebSig24/7
- ecoったー
- ビッグイシュー(The Big Issue)
- CSR(企業の社会的責任)
- マッシュアップ
- RIA (システム開発)
- セキュリティ(システム開発)
- 唐松(アクセス解析)
- Ajax (システム開発)
- テスト(システム開発)
- データベース
- PukiWiki
- Web 2.0
- SEO・サーチエンジン最適化
- XP・アジャイル(システム開発)
- Web・ITニュースクリップ
- Webアクセシビリティ
- Webデザイン
- SEM・サーチエンジン広告
- Webユーザビリティ
- CMS・MovableType
- Zen Cart(オンラインショップ構築)
- Snippy(SNS・ソーシャルブックマーク)
- アークウェブ
- オープンソース
- CMS(コンテンツマネジメント・システム)
- Webマーケティング
- AMP
- SNS