Blog スタッフブログ

こんにちは、Webデザイナーのそいです。インテリアやファッション、車、服飾雑貨などのデザインにおいてカスタマイズをしてグレードの高い商品やオリジナルの商品を購入できるなど商品の購入において幅広い選択肢が増えるようになりました。

今回は、そんな商品に関してシミュレーションができるWEBサービスサイトの“スゴイところ”を調査してみました。

ニトリ-お部屋 de コーディネート

ニトリのお部屋deコーディネートは、リビング・ベッドルーム・ダイニングの3種類のお部屋からニトリ製品を選んでインテリアをシミュレーションでデザイン＆実際に商品を購入することができます。

TOPページはシミュレーションのフロー、部屋の種類のみが表示されたシンプルな構成ですが迷わない設計になっていてサイトを使い慣れていない方でも簡単に操作できることがわかりますね。

部屋を選択するとシミュレーション画面に遷移します。どう選んだら良いかわからない、といったユーザーに向け、希望する雰囲気から予め商品が組み合わされたプランも用意されています。「おすすめ商品」～「落ち着いた雰囲気」のピンクのボタンを押すことで切り替わります。

自分でカスタマイズしたい場合は、個別で選択することができます。壁や床、テーブルやソファはその人の住まいのインテリア・内装にあわせて選びます。カーテンやラグ、クッションカバーの商品が実際に販売されている商品ですので、好みの色や柄を選んで商品を購入することができる、といった仕組みです。

「選択した商品一覧」をクリックすると、その商品の一覧リストが表示されます。

そのままネットショップで購入できたり、リストをダウンロードして実店舗でも購入できます。実際に商品を手に取って選ぶより今の部屋にあわせて選べることでイメージが湧きやすく購買意欲がそそられますね。また、画面レイアウトのシンプルな構成や色分けもすばらしくとても使いやすいサイトでした。

ニトリ | お部屋 de コーディネート

NIKE – Nike By You カスタムシューズ

次に靴ブランド、ナイキの会員限定カスタマイズサービスのサイトです。ナイキシリーズから靴のカラーバリエーションや素材などを選んで、オリジナルの靴が作れるサービスです。

TOPページの商品一覧からベースとなる商品を選ぶと、ECサイトの商品詳細ページのような画面に遷移します

「インスピレーション」は実際に購入も可能なデザインイメージが複数並んでいます。

商品画像の「カスタマイズ」ボタンを押すと、シミュレーション画面に遷移します。

シミュレーション画面では、カスタマイズができるパーツごとに色などを選択できる導線・設計になっています。

どの部分のカスタマイズができるのか、その箇所が少し光ってアニメーションされるのでとてもわかりやすいです。

また、3Dモデリングで製品が表示されているので正面や横、上からや下からなど回転して商品が見られるようになっており、じっくり検討してオリジナルの靴が作れることがおすすめポイントです。

完了ボタンを押すと「あなたのデザイン」に格納されます。再編集も可能で、デザインをストックできるので見比べることもできます。情報量も少なく作られており、サクサクカスタマイズができる印象でとても使い勝手の良いサイトでした。

Nike By You カスタムシューズ

まとめ

いかがでしょうか。今回は実際の商品が購入できる、シミュレーション機能が導入されたWEBサービスサイトを紹介しました。

シミュレーション機能は、ユーザーが商品を選ぶ「体験」→「購入」に重きを置くからこそ、余計な情報や無駄な導線は一切省き、シンプルに迷わず選べる設計であることが特に重要です。まるでショールームや店舗にいるような、選ぶワクワクやWEBならではの気軽さ、といった体験重視のサイトを作る場合の参考にしてみてはいかがでしょうか。

今回もご一読いただきありがとうございました。