Vibramの日本総代理店として、FiveFingersを中心にアスリート向けのシューズやグッズを販売する、Barefootinc社のHPをリニューアルしました。
商品一覧ページでは、とにかくモデル・カラーを選びやすいデザインにしました。サイドバーには、モデル別・目的別・割引率別などの項目を並べて、目的ごとにモデルを探しやすくしています。
またパンくずを実装しているので、商品一覧ページにも戻りやすくなっています。アコーディオンやタブも活用し、同じページ内で目的の情報を見やすいよう工夫しています。
商品詳細ページでは、カスタムフィールドを活用しています。例えば各モデルのスペック情報は、CSVのインポートで一括管理が可能です。同じモデルの別カラーも同じページに掲載することで、離脱を防ぎ、コンバージョンに貢献するデザインにしました。
リニューアルするまでは、PCもスマホも同じレイアウトで表示されていました。当然、今回のリニューアルでは、スマホ最適化の処理を施しています。デザインからボタン間の距離に至るまで、ユーザが操作を誤らないよう気をつけてレイアウトを考えました。
We have renewed the website of Barefootinc, which sells shoes and goods for athletes mainly with FiveFingers as a general agent of Vibram in Japan.
On the product list page, we designed easy-to-understand and easy-to-select as the most important indicators. In the sidebar, items by model, purpose, discount rate, etc. are arranged to make it easy to find a model for each purpose.
Also, since breadcrumbs are mounted, it is easy to return to the product list page. Accordions and tabs are also used to make it easy to see the desired information on the same page.
The item details page utilizes custom fields.For example, specification information of each model can be managed collectively by importing CSV. By putting different colors of the same model on the same page, we designed to prevent withdrawal and contribute to conversion.
Before renewal, both PC and smartphone were displayed in the same layout. Naturally, in this renewal, we carry out the process of smartphone optimization.