alumania STOREでは、商品をより探しやすく、選びやすく、安心してご注文いただけるように、ストア内の表示や操作性を見直し、基本デザインと機能面での大改造を行いました。
新しいアルマニアストアは既に更新されていますので、今後は新しいリニューアル後のアルマニアストアでお買い物ができるようになっております。
今回の改善では、特にスマートフォンでの使いやすさを重視しています。
各所を構成する配置や順序、画像等は差し替えておりませんので、変更後も違和感を感じず、今まで通りにご注文まで迷わない流れは維持しています。商品を探す、気になる商品を確認する、カートへ進むといった基本操作を、できるだけ簡単に、初めての方でも迷わず行えるように調整しました。
実にテストバージョンだけでも100を超えており、細かな表示調整も含めると本当に大量の変更がありました。今回の改修はストアの基本仕様変更になります。
そのため、カテゴリー分類などは今後進めていくものです。一旦切り替えてしばらくは微調整作業も進め、安定した後に順次変更していきます。
ここからはお客様にとって分かりやすい主な改善点を簡潔にご紹介して参ります。
スマホで使いやすい下部ナビを追加
スマートフォン表示では、画面下部に固定ナビを追加しました。
これにより、ページの途中を見ている状態でも、商品検索・お気に入り・お支払い方法・配送方法・マイページ・カートへすぐに移動できます。
カート・お気に入り・商品検索へすぐアクセス
これまでスマートフォンでは、ページをスクロールしながら目的のメニューを探す必要がありました。新しい下部ナビでは、よく使う機能を常に画面下にまとめています。
商品を見ている途中でも、気になる商品を確認したり、カートへ進んだりしやすくなりました。
スクロール中でも迷わず操作できる導線に
商品ページや一覧ページを見ていると、現在どこにいるのか分かりにくくなることがあります。下部ナビを設置することで、ストア内での移動先が常に分かりやすくなりました。
商品を探しやすい構成へ整理
ストア内の商品検索、カテゴリー、グループ表示の位置や見せ方を整理しました。
目的の商品が決まっている場合も、カテゴリーから探したい場合も、以前よりスムーズに商品へたどり着けるようにしています。
カテゴリー・グループから探しやすく改善
カテゴリーやグループの画像表示を見直し、スマートフォンでも選びやすい表示に調整しました。
商品ジャンルや対応機種から探す場合に、視覚的に分かりやすくなるようにしています。
キーワード検索の位置を分かりやすく整理
商品名や型番で探したい場合に使うキーワード検索も、ストア内で見つけやすい位置へ整理しました。
下部ナビの「探す」からも検索エリアへ移動できるようにしています。
共通メニューの表示順を見直し
お買い物ガイド、検索、カテゴリー、グループなど、共通で表示されるメニューの並びも整理しました。ページごとに探し方が大きく変わらないよう、ストア全体で統一感を持たせています。
商品一覧を見やすいカード表示へ改善
商品一覧やお気に入り一覧など、商品が並ぶページの表示を見直しました。
特にスマートフォンでは、画像・商品名・価格の見え方が重要になるため、商品カードとして読みやすく整理しています。
商品画像・商品名・価格を見やすく整理
商品一覧では、画像と商品情報の配置を調整し、商品ごとの区切りが分かりやすくなるようにしました。
商品名や価格も、画面サイズに合わせて読みやすく表示されるように調整しています。
お気に入り商品一覧も商品カード形式に変更
お気に入りに追加した商品一覧も、通常の商品一覧に近いカード形式へ変更しました。
気になる商品をまとめて見返しやすくなり、比較や再確認がしやすくなっています。
最近チェックした商品の表示バランスを調整
最近チェックした商品やおすすめ商品など、共通で表示される商品ブロックの余白や表示バランスも見直しました。
ページ下部の関連商品も、以前より見やすく整理されています。
商品ページの選択・確認を分かりやすく
商品ページでは、購入前に確認する情報や、オプション選択まわりを重点的に改善しました。
特にカラーやタイプを選ぶ商品では、選択状態や売り切れ状態が分かりやすくなるようにしています。
オプション選択をボタン形式に変更
従来のプルダウン選択に加えて、カラーやタイプをボタン形式で選べるようにしました。
選択肢が一覧で見えるため、どの仕様を選べるのか分かりやすくなっています。選択した内容は、従来通りプルダウンにも反映されます。
売り切れ状態を分かりやすく表示
在庫がない選択肢は、選択できない状態として表示されます。
購入前に在庫状況を確認しやすくすることで、選択ミスや注文時の分かりにくさを減らしています。
商品画像一覧の開閉表示を改善
商品説明内の画像一覧は、スマートフォンでも開閉しやすい表示に調整しました。
必要なときに画像一覧を開き、画像をタップして拡大表示できるようにしています。
そのほかの改善内容
今回のリニューアルでは、上記以外にも細かな改善を行っています。
お支払い・配送など購入前情報を読みやすく整理
お支払い方法、配送方法、送料、特定商取引法などのページも、スマートフォンで読みやすい構成へ調整しました。
購入前に確認したい情報へアクセスしやすくしています。
ストア内の共通メニューとフッターまわりを整理
ページごとに重複していた表示や、分かりにくかった共通メニューを整理しました。
ストア全体で同じ感覚で操作できるようにしています。
スマホ表示時の余白や表示バランスを調整
各ブロックの余白、ボタン位置、画像サイズなども見直しました。
小さな画面でも窮屈に見えにくく、操作しやすい表示を目指しています。
CSS・テンプレート構造を整理
表示だけでなく、内部のテンプレートやCSSも整理しました。
今後の商品追加や表示改善を行いやすくするため、共通パーツの構造も見直しています。
今後もより使いやすいストアデザインで
今回のリニューアルは、見た目を大きく変えることよりも、基本機能の見直しによって、商品を探しやすく、選びやすく、安心してご注文いただけることを重視しております。
昨今ではスマホからのご注文（ストア利用）がパソコンよりも多い状況です。スマホファーストというよりは、パソコン画面をスマホファースト化を突き詰めたといった方が強いわけですが、パソコン画面でも機能的な変更は反映されております。そのため、パソコン画面からでも使いやすさはアップしています。
alumania STOREでは、今後も商品ページや各種案内ページを見直しながら、より使いやすいストアづくりを続けてまいります。
現時点で新しいリニューアルしたアルマニアストアでご覧いただけますが、本番サイトでの不具合が見つかれば、一時的に旧表示になる場合もありますので、予めご了承ください。
（その際はデザイン違いだけでご注文までは正常に可能です）
ちなみに変更内容をまとめて記載すると、すべての項目はこれほどあります。
- 商品一覧ページの表示を見直し、商品画像・商品名・補足説明・価格が読みやすいカード型レイアウトに統一
- スマホ表示での商品一覧を、縦長でも見やすくタップしやすい構成に調整
- 商品詳細ページのレイアウト幅を整理し、商品画像・注文欄・説明・関連商品などの左右幅を統一
- 商品オプション選択をボタン型UIに変更し、カラーや仕様を選びやすく改善
- 売り切れオプションを視覚的に分かりやすく表示
- 商品詳細ページの「お気に入り」ボタン表示を整理し、他の商品カード内ボタンとの干渉を解消
- トップページの各ブロック構造を整理し、見出し・余白・表示幅の統一感を改善
- 「すべて見る」ボタンの表示条件と開閉動作を見直し、スマホ時の操作感を改善
- お買い物ガイド、カテゴリー、グループ、検索導線の並びを整理
- 下部固定ナビを6項目化し、スマホでも主要機能へすぐ移動できる導線に改善
- カートに商品が入っている状態が分かるよう、下部ナビのカート表示を調整
- 送料無料までの案内表示を見直し、カート確認への導線を分かりやすく改善
- 特定商取引法・プライバシーポリシーなどの案内ページを、スマホでも読みやすいカード型構成に改善
- お気に入り一覧ページを商品一覧に近い見せ方へ整理
- 検索結果ページとカテゴリー・グループ一覧ページの見出しデザインを統一
- 共通フッター・ストア内サブフッター周辺の表示整理
- 不要になったストアメニューや重複表示を削除
- 共通CSSとページ別CSSの役割を整理し、重複・上書き指定を削減
- スマホ・タブレット・PCのレスポンシブ表示を再調整
- スクロールや開閉UIに影響していたクラスの見直し、開閉機能と干渉しにくい構成に改善
- 画像一覧、関連商品、最近チェックした商品、お気に入り商品などの共通表示ブロックを整理
- PCとスマホで表示数やボタン位置を分け、画面サイズに応じた見せ方へ調整
- 既存情報は削除せず、購入前に必要な情報を探しやすく再構成
- 購入導線・商品比較・再訪問時の商品探しをしやすいストア表示へ改善
