Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ECサイトで実現したい『体験』のあり方を考える

isaikaori
October 05, 2019

 ECサイトで実現したい『体験』のあり方を考える

isaikaori

October 05, 2019
Tweet

More Decks by isaikaori

Other Decks in Design

Transcript

  1. ECサイトで実現したい
    『体験』のあり方を考える
    WCAN 2019 Autumn
    有限会社アップルップル 井斉花織

    View Slide

  2. 有限会社アップルップル デザイナー
    井斉花織 (いおり)
    自己紹介

    View Slide

  3. Adobe XD User Group Nagoya

    View Slide

  4. ECサイトの制作
    theme

    View Slide

  5. ECサイトの特徴
    多機能
    多重なフロー
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  6. 体験

    View Slide

  7. ECサイトにおいて
    心地いい体験とは?
    1

    View Slide

  8. 実店舗 ネットショップ

    View Slide

  9. 店員から購入者に直接
    働きかけることができる
    購入者は迷ったら店員に
    相談することができる


    = 安心感
    実店舗の場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  10. 店員から購入者に直接
    働きかけることができる
    購入者は迷ったら店員に
    相談することができる


    = 安心感
    実店舗の場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  11. 店員から購入者に直接
    働きかけることができる
    購入者は迷ったら店員に
    相談することができる


    サプライズ・特別感
    = 安心感
    実店舗の場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  12. 購入者は
    自分で決断して進む
    迷いはストレスに繋がる


    = 不安定
    ネットショップの場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  13. 購入者は
    自分で決断して進む
    迷いはストレスに繋がる


    = 不安定
    ネットショップの場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  14. 購入者は
    自分で決断して進む
    迷いはストレスに繋がる


    着実に次のステップへ進む
    仕組みが好まれる?
    = 不安定
    ネットショップの場合
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録

    View Slide

  15. ECサイトの心地よさ
    型破りの
    サプライズ
    ステレオタイプの
    安心感

    View Slide

  16. 安心感につながる
    デザインとは?
    2

    View Slide

  17. 「もし」を繰り返して不安要素を洗い出す
    もし非会員が見たら
    表示項目はどう変化する?
    もし検索結果が0件の時は
    何を表示する?
    登録したら何の機能が追加されて
    総合的にどんなメリットがあるの?
    もしカートの中のもの一つだけ
    購入したい場合はどうする?
    スペシャル会員と一般会員で
    購入条件はどう変化する?
    一覧からショートカットできたら?
    もしログイン前にカートに追加しようとしたら?
    もしSOLD OUTだったら
    表示はどう変わる?
    検索する
    カートに入れる
    決済入力
    見つける
    カラーを選ぶ
    会員登録
    お気に入り登録
    もし複数条件で検索
    できたらどうなる?
    お気に入りから購入したら?
    もし数量を
    変えたいときは?
    選択したものを一気に
    カートに入れるには?
    登録したらどんな
    メリットがあるの?
    宅配便を選んだ時に
    必要な情報は?
    クレジット払いの場合の遷移は?

    View Slide

  18. ビジュアライズされた安心要素
    3
    種類

    View Slide

  19. 自覚を
    うながすもの
    1
    会話で
    反応するもの
    2
    行動を
    フォローするもの
    3

    View Slide

  20. ①自覚をうながすもの

    View Slide

  21. ①自覚をうながすもの
    ホーム / パソコン・周辺機器 / ディスプレイ / 19~20インチ
    1
    決済情報の入力
    2
    配送方法の選択
    3
    入力内容の確認
    4
    注文完了
    1 2 3 … 8
    苗字 名前
    ゴールド会員
    さん

    View Slide

  22. ②会話で導くもの

    View Slide

  23. ②会話で導くもの
    お気に入り お気に入り
    カートに追加しました
    1
    この商品を削除しますか?
    キャンセル 削除

    View Slide

  24. ③行動をフォローするもの

    View Slide

  25. ③行動をフォローするもの
    氏名
    山田 太郎
    姓 名
    氏名(アルファベット)
    YAMADA TARO
    姓 名
    2019
    1月 2月 3月 4月
    5月 6月 7月 8月
    9月 10月 11月 12月

    View Slide

  26. 目的ベースの考え方 = 独自システムでも役立つ
    ①自覚目的 ②会話目的 ③フォロー目的
    ホーム / パソコン・周辺機器 / ディスプレイ /
    1
    情報の入力
    2
    入力内容の確認
    3
    注文完了
    1 2 3 … 8
    苗字 名前
    ゴールド会員
    さん
    お気に入り お気に入り
    カートに追加しました
    1
    この商品を削除しますか?
    キャンセル 削除
    氏名
    山田 太郎
    姓 名
    氏名(アルファベット)
    YAMADA TARO
    姓 名
    2019
    1月 2月 3月 4月
    5月 6月 7月 8月
    9月 10月 11月 12月

    View Slide

  27. ECサイトで実現したい
    体験のあり方を
    考えるにあたって
    conclusion

    View Slide

  28. ECサイトならではの留意点
    型破りの
    サプライズ
    ステレオタイプの
    安心感

    View Slide

  29. 目に見える形で落とし込む方法
    ①自覚目的 ②会話目的 ③フォロー目的
    ホーム / パソコン・周辺機器 / ディスプレイ /
    1
    情報の入力
    2
    入力内容の確認
    3
    注文完了
    1 2 3 … 8
    苗字 名前
    ゴールド会員
    さん
    お気に入り お気に入り
    カートに追加しました
    1
    この商品を削除しますか?
    キャンセル 削除
    氏名
    山田 太郎
    姓 名
    氏名(アルファベット)
    YAMADA TARO
    姓 名
    2019
    1月 2月 3月 4月
    5月 6月 7月 8月
    9月 10月 11月 12月

    View Slide

  30. View Slide

  31. Twitter: @isaikaori
    Facebook: isaikaori
    Blog: https://isaikaori.com
    ご静聴ありがとうございました

    View Slide