H&Mアプリ ファストファッションならではの画像中心のUI

Pocket

H&Mは都内を中心に展開するカジュアルファッションブランドで、ファストファッションの代表格として有名だ。

レディース、メンズ、キッズ、インテリア雑貨まで幅広く扱い、早いサイクルで商品を展開しているので、リアル店舗には常に数多くの商品が並んでいる。
そしてどの店舗もビルの複数階に渡って構えるなど店舗面積も比較的広いため、いざリアル店舗で買い物をしようとすると結構疲れるひとも多いのではないだろうか?

そんな方に朗報だったのが、今年の4月にH&Mは公式ショッピングサイトをオープン。膨大な商品をネットで楽々お買い物できるようになった。
今回はそんな膨大な商品点数をもつファストファッションブランドH&MのアプリのUIを見ていきたいと思う。

商品一覧ページ

H&Mアプリの商品一覧ページの特徴は、端的にいうと商品を大きく見せているということだ。
当たり前のことだが、他社と比較すると違いがよくわかる。下図を見ていただきたい。

img1

大手ECの商品一覧に比べ明らかに商品画像大きく扱っていることがわかると思う。
また楽天やamazonでは、商品名と金額以外の情報も多く載せているが、H&Mでは一覧ページにはそれらの情報は一切載せていない。

さらに特徴的なのが、ほぼすべての商品画像にモデル着用と非着用の2パターンの画像を用意していて、画面上で表示が切り替えられるようにしてることだ。

img2

 

商品詳細ページ

商品詳細ページも商品画像を軸に設計されていることがよくわかるUIになっている。

img3

一般的なECサイトやアプリでは、商品詳細ページは縦長に構成されていることが多いが、H&Mは縦スクロールすることなく、1画面で収まるよう画面下部に、情報・色・サイズとメニューを配しそこで各情報に切り替えられるようなっている。

しかも、どのメニューでも商品写真を背景にしており、常に商品写真が大きく、目に入っている状態を作っている。

ユーザーの動作として、縦スクロールが良いか、タップがいいのかは、議論が分かれるところだと思うが、全く不便なく直感的に操作できるということは画像を見ても感じていただけると思う。

また、レコメンドにも工夫がある。
商品画像の枚数を示すドットの一番最後の形がひし形で、なんだろう?と思ったら、商品写真をフリックする流れで、一番最後がなんとレコメンドになっているのだ。

img4

商品写真は多くの人がフリックして閲覧するエリアだけに、レコメンドをこの部分に配置すれば回遊率の向上は期待できる。他社ではなかなか見かけない素晴らしい発想の施策だ。

まとめ

全体的な印象として、デザインがモノトーンであり、TOPページ以外ではほとんど白黒の濃淡でデザインされている。
これも前述しているように、商品写真中心の設計の一環で、商品写真を際立たせるため、あえて商品写真以外に色を使っていないのでないかと推測する。

このように、H&Mのアプリでは、商品写真見せることを非常に重視した設計になっていることがわかる。

 

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*