スマートフォンユーザの
「ストレスフリーショッピング」を叶える
機能美を追求。
Launch : 2011/02/14
ECサイト
http://www.softbankselection.jp/sp/
※iPhone3G/3GS/4またはAndroidOSを搭載したスマートフォンに対応。パソコンでは閲覧できませんのでご注意ください。
【要件】
SoftBank製品のアクセサリー販売を行う公式オンラインショップのスマートフォン対応サイト新規構築。
iPhoneやSoftbankスマートフォンのアクセサリーを取り扱っていることから、PCサイトへのアクセスの約20%がiPhoneやAndroid端末経由のもの。日々拡大していくこれらのスマートフォンユーザーに対してのサービス向上、そしてスマートフォンユーザーからの売上拡大を目指し、スマートフォンの表示に最適化したサイトの構築を要望されていました。
また、PC・携帯・スマートフォンと、プラットフォームが異なる同一商品ラインナップを扱うECサイトが3サイトに広がり、「コスト・作業負荷増加を最小限に抑えての運用」が前提となりました。
【戦略・コンセプト】
サイトコンセプトは「ストレスフリーショッピング」。既存のPCサイトをそのまま焼き直すだけではなく、スマートフォン端末や所持ユーザの行動特性を考慮した設計やデザインを綿密に行うことが"ストレスフリー"なスマートフォンサイト構築につながる点を表現しています。操作のストレスをできる限りなくすことで、スムーズに購入させることを目指しています。
【設計】
PCとは異なるスマートフォンの特性（画面サイズ・操作方法・通信環境・利用シーンなど）を考慮したスマートフォン最適化設計をしています。
訪れたユーザーがストレスなく直感的に製品に辿り着き、検討・購入しやすくするため、サイト構造はできるだけシンプルな形とし、各ページに明確な役割を持たせました。
・欲しい製品を「探す」ことができるトップページ
・パッと「見つける」ことができる一覧ページ
・「検討する」為の製品詳細ページ
・簡単に「買う」ことができるカートページ
購入までのステップに合わせたサイト構造にすることで「探す」⇒「見つける」⇒「検討する」⇒「買う」ことができ、ストレスなくショッピングを楽しめる作りとなっています。
また、どのページにいてもショッピングに関するページへダイレクトに移動できるようにページ下部に共通ナビゲーションを設置しているのもポイントです。
【デザイン・表現】
タッチパネル採用のスマートフォンサイトの場合、平面的なデザインだけではなく、「小さい画面内でも必要な情報が見やすい」視認性、そして「タッチパネル上でもストレスなく使える」操作性に関しても考慮したデザインにする必要があります。
全体的なトーンはPCサイトを踏襲し、白と複数のグレーを組み合わせた信頼感と高級感を表す落ち着いたトーン。その中で、サイトコンセプトである「ストレスフリーショッピング」を実現するために、機能的なデザイン表現に注力しました。
デザイン制作時には、タッチ操作テストを繰り返し、誤動作が起きないようなボタンサイズ・行間・リンクとフリックエリアの調整をしました。また、表示速度も予め検討し、極力画像を使わない工夫もしています。
操作感はぜひスマートフォン（iPhoneまたはAndroid端末）で体験してください！
【システム】
既存のPCサイト・携帯サイトで導入・運用を行っている「Movable Type」を引き続き使用しています。
トップページ、カテゴリ、製品詳細情報、販売店情報など、3サイト共通の情報をCMSで利用できるように設計し、手作業に拠る更新をできるだけ抑制することで「コスト・作業負荷がかからない運用」を実現しています。
AP：吉田英生 ／ Pr：安威恒太郎 ／ CD：岩田玲 ／ Di・IA：大橋一輝 ／ IA：下村方人 ／ AD：中川裕基 ／ De：青山敦司 中里年宏 ／ HT：山田悠也 伊藤裕也 ／ PG：諏訪昌宏