BA

大地を守る会スマートフォン対応

大地を守る会スマートフォン対応プロジェクトキャプチャ

大地を守る会は、社会的課題の解決のためにソーシャルビジネスを展開する、有機食材宅配事業のパイオニアです。弊社は大地を守る会のECサイト立ち上げ時より、バックエンドの設計から情報設計、フロントエンドのビジュアル/UIデザインおよび実装まで、幅広い領域でお手伝いさせていただいています。
本プロジェクトでは、より多様なシチュエーションで最適なユーザー体験を提供する施策の一環としてECサイトのスマートフォン対応を行いました。弊社はフロントエンドの設計・デザイン・実装を手がけています。

EC3サイト同時対応

大地を守る会は、以下の3つのECサイトを運営しています。

  • 関東圏を対象とした宅配会員向けの「会員専用サイト」
  • 全国のお客様向けの「ウェブストア」
  • Yahoo! BB会員向けの「BBマルシェ」

これら3つのPCサイトにおいて、共通の設計思想に基づいたコンポーネントシステムによる実装を行っていたため、3サイト分の計117テンプレートの同時対応がスムーズに実施できました。

効率的なワークフロー

1ヶ月強の制作期間の中で、効率的且つスピード感をもってプロジェクトを進行すべく、テンプレートごとの特性・重要度に応じていくつかの対応レベルを設定しています。

  • A.スマートフォンの特性により適したかたちにフルスクラッチで対応
  • B.フロント(CSS/Javascript)でのスタイリング、レイアウトの最適化を行う対応
  • C.PC版をそのまま利活用する対応

ユーザーがページを行き来するための主なナビゲーション部分や、購入のために重要なカート以降のフローなど、ECサイトにおいて特に注力すべき部分についてはAの対応を行い、それら以外のカテゴリや商品の一覧等はBの対応で閲覧性を高めるというように、重要な場面での効果を最大化しながら無駄を省く、適材適所のソリューションを提供することができました。

ソリューション

既存のPCサイトのデザインシステムをベースにしながら、ECサイトで鍵となる商品閲覧・購入のためのプロセスに関わるUIを中心に、ビジュアルトーンおよびスタイルを再開発し、スマートフォンに最適な情報の強弱・操作性を実現しています。

利用スタイルに即した動線デザイン

大地を守る会のユーザーには、PCとスマートフォンを併用しながら買い物をする傾向が想定されました。そこで開発したのが、左右からパネルをいつでも引き出すことができる「オーガニックスライダー」です。

オーガニックスライダーは、限られた画面幅においても「左から探す」「真ん中で見る」「右から購入する」という3つの主要なプロセスの起点を、PCサイトと同様に提供可能にします。これにより、デバイスの違いによる学習コストを最小限に抑え、今見えているものに注力可能なナビゲーションスキームを実現しています。
また、大地を守る会のECサイトで扱う商品の特性上、カテゴリの横断遷移が頻繁であり、多くの種類の食品・雑貨などを少しずつ購入する利用スタイルが主です。オーガニックスライダーの起動ボタンを常に画面の左右上隅に提供することで、ユーザーがカテゴリ遷移したりカート操作することがいつでも容易になります。

通信環境への配慮

スマートフォンでは通信速度に制限があることを考慮し、大量の商品画像を読み込んでもストレスなく閲覧が可能なように、画面に表示されている部分からデータを読み込み、遅延ローディングの技術も採用しています。
また、右スライダーから展開するカート内の情報は、スライダーを展開した際に初めてデータを読み込む処理も同様に行っています。

アクセス解析からみるスマートフォン対応の効果

アクセス解析にて、リリース後とリリース前を比べると、スマートフォンでの訪問数増加、離脱率・直帰率の改善に成功しています。

関連リンク