GMOペパボ ECテックカンファレンスデザイナー登壇資料

by Shoko Oyamada

Slide 1

Slide 1 text

カラーミーのデザインについて  1 

Slide 2

Slide 2 text

1  カラーミーショップ  CREチーム  シニアデザイナー  小山田翔子 

Slide 3

Slide 3 text

カラーミーのデザインについて  ペパボのサービスの中では最も  「これで生計を立てている」人が多い    ユーザーは商いのプロ  toBのサービスとして、  ユーザー理解が重要  6 

Slide 4

Slide 4 text

カラーミーのデザインについて  ショップ運営を通じて夢を叶える  6 

Slide 5

Slide 5 text

カラーミーのデザインについて  叶えて欲しい夢  6 

Slide 6

Slide 6 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 7

Slide 7 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 8

Slide 8 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 9

Slide 9 text

カラーミーのデザインについて：PRチーム  4  ① サービスの認知拡大 ② お申込みを増やす

Slide 10

Slide 10 text

カラーミーのデザインについて：PRチーム    4  サイト SNS イベント取次店制作会社オウンドメディア広告タッチポイントユーザーとの接点

Slide 11

Slide 11 text

カラーミーのデザインについて：PRチーム    4  https://shop-pro.jp/yomyom-colorme/

Slide 12

Slide 12 text

カラーミーのデザインについて：PRチーム    4  https://award.shop-pro.jp/ カラーミーショップ大賞

Slide 13

Slide 13 text

カラーミーのデザインについて：PRチーム    4  サイト制作チラシパンフレット

Slide 14

Slide 14 text

カラーミーのデザインについて：PRチーム    4  ABテストフォームの最適化ユーザーからの声

Slide 15

Slide 15 text

カラーミーのデザインについて：PRチーム    4  ユーザー理解 ●どんなユーザーがいる？ ●悩みや課題は？ ●なにをやりたい？ページ設計 ●共感 ●欲しい情報をみつけやすい ●お申込みへのアクション

Slide 16

Slide 16 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 17

Slide 17 text

カラーミーのデザインについて  ショップ運営を通じて夢を叶える  6 

Slide 18

Slide 18 text

カラーミーのデザインについて：CREチーム  6 

Slide 19

Slide 19 text

カラーミーのデザインについて：CREチーム  6 

Slide 20

Slide 20 text

カラーミーのデザインについて：CREチーム  6 

Slide 21

Slide 21 text

カラーミーのデザインについて：CREチーム - ユーザーアンケート  - ユーザーインタビュー  - ユーザーテスト  - お問い合わせ宛のご要望  6  ユーザー  の声  ビジネス  システム  改善  計画 

Slide 22

Slide 22 text

カラーミーのデザインについて：CREチーム 6 

Slide 23

Slide 23 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 24

Slide 24 text

カラーミーのデザインについて：新カゴチーム    4  ショッピングカート 

Slide 25

Slide 25 text

カラーミーのデザインについて：新カゴチーム    4  ショッピングカートの利用状況  決済件数  約550,000件  決済金額  約7,100,000,000円  （2020年3月版） 

Slide 26

Slide 26 text

カラーミーのデザインについて：新カゴチーム    4  プロトタイプ  作成  ユーザビリティ  テスト  数値分析  オーナー様の  フィードバックを  もとに改善  デザイナーの役割 

Slide 27

Slide 27 text

カラーミーのデザインについて：新カゴチーム    4  実際のお店に例えると  「このお店で買うのはやめよう...」   「次は他のお店で買うことにしよう...」   長蛇の列に並ぶレジ   対応の遅いレジ  現金払いのみのレジ  

Slide 28

Slide 28 text

カラーミーのデザインについて：新カゴチーム    4  使い心地のよい購入画面  どのデバイスでも  決済できること  決済の選択肢が  多いこと  ・最小限の入力フォーム  ・入力ミスによる離脱防止  ・スマホの小さな画面からも  　購入しやすく  ・LINE Pay、Amazon Pay、  　楽天Payなど  入力しやすいこと 

Slide 29

Slide 29 text

カラーミーのデザインについて：新カゴチーム    4  「最高のショッピングカート」  カラーミーショップのショッピングカートは「買いやすい」。  「買いやすい」から、「売れる」。  こう言ってもらえるよう改善と検証を繰り返しています。     

Slide 30

Slide 30 text

カラーミーのデザインについて  6  ユーザーをトータルに支える 

Slide 31

Slide 31 text

1  カラーミーのデザインについて：グロースチーム 

Slide 32

Slide 32 text

カラーミーのデザインについて：グロースチーム    課題１   ショップオーナーが「アプリとは何か」を知らない 

Slide 33

Slide 33 text

カラーミーのデザインについて：グロースチーム      課題２ショップオーナーにもデベロッパーにも伝わる用語を使わないといけない

Slide 34

Slide 34 text

カラーミーのデザインについて：グロースチーム        この課題を解決するために行ったこと   

Slide 35

Slide 35 text

カラーミーのデザインについて：グロースチーム       

Slide 36

Slide 36 text

カラーミーのデザインについて：グロースチーム       

Slide 37

Slide 37 text

ファーストパーティアプリ開発 9 

Slide 38

Slide 38 text

カラーミーのデザインについて：アプリ開発チーム  6  ショップページカートページ購入完了(配送) リピートカゴ落ち (一般に70%) ミスマッチ来訪数電話やFAXで注文したい… 商品の在庫切れてる … 卸値で買いたい…

Slide 39

Slide 39 text

ユーザーを知る 9 

Slide 40

Slide 40 text

カラーミーのデザインについて：アプリ開発チーム  6  ニーズの事前把握気づかないポイントに気づくインタビュー  ユーザーテスト 

Slide 41

Slide 41 text

カラーミーのデザインについて：アプリ開発チーム  6  FAXでの受注時、入力をお願いする項目は何ですか？商品名・数量・住所・希望納品日 (食べ物・冷凍冷蔵のため)…etc 電話・FAX受注で時間がかかっている運用を教えて下さい。例) 一般と業者で割引率が異なり、作業に時間かかってしまう…etc …  インタビュー  ● 自分達で決めた要件は  満たされている？  ● 現場の状況で困ってる  ポイントはある？  ニーズの事前把握

Slide 42

Slide 42 text

カラーミーのデザインについて：アプリ開発チーム  6  ユーザーテスト  ● ドメイン知識に気づく  ● 現場の状況に気づく  ● 思惑の違いに気づく  気づかなかったポイントに気づく

Slide 43

Slide 43 text

カラーミーのデザインについて 

Slide 44

Slide 44 text

Slide 45

Slide 45 text

ここから素材だよ〜〜〜  ゆまゆありがと！  1 

Slide 46

Slide 46 text

お役立ちリンク  p14~15 デザインの簡単なガイド・TIPS  p16-18 表・装飾用素材  p19~22 イラスト・ロゴ  ・ 

Slide 47

Slide 47 text

目次  ● はじめに  ● hogehogehoge  ● hogehogehoge  ● hogehogehoge      2 

Slide 48

Slide 48 text

メインスライド1  本文はこちら  3 

Slide 49

Slide 49 text

メインスライド3 (例)  本文はこちら本文はこちら本文はこちら本文はこちら本文はこちら  ● こんな使い方もできます  ● こんな使い方も  よって本文はこちらよよって本文はこちらって本文はこちら。    リード文の追加  スライドの結論やポイントを最終行に入れるとわかりやすくなります。  6 

Slide 50

Slide 50 text

メインスライド1  本文はこちら  4 

Slide 51

Slide 51 text

メインスライド2  本文はこちら  本文はこちら  5 

Slide 52

Slide 52 text

ブランクスライド 7 

Slide 53

Slide 53 text

Slide 54

Slide 54 text

章見出しタイトル大事なことを言う時も使えます 9 

Slide 55

Slide 55 text

章見出しタイトル大事なことを言う時も使えます 10 

Slide 56

Slide 56 text

章見出しタイトル大事なことを言う時も使えます 11 

Slide 57

Slide 57 text

素材集  スライド用の素材、デザインのコツなど  12 

Slide 58

Slide 58 text

配色、フォントサイズについて ● 30px　リード文など  ● 20px　スライドタイトルなど  ● 18px　本文  13 

Slide 59

Slide 59 text

デザインテクニックリンク集 ● レイアウトを整えたい ● グラフを綺麗に表示させたい ● 配色に迷う 14 

Slide 60

Slide 60 text

表・装飾用素材ほげ  ふが  ぴよ  ほげ  ふが  ほげ 123 1 2 3 56 ふがぴよほげポイント  重要  重要  ポイント  15 

Slide 61

Slide 61 text

表・装飾用素材売れる仕組み  ・ホゲホゲほげ  ・ホゲホゲホゲホゲほげ  ・ホゲホゲほげ    売れる仕組み  ・ホゲホゲほげ  ・ホゲホゲホゲホゲほげ  ・ホゲホゲほげ    売れる仕組み  ・ホゲホゲほげ  ・ホゲホゲホゲホゲほげ  ・ホゲホゲほげ    売れる仕組み  ・ホゲホゲほげ  ・ホゲホゲホゲホゲほげ  ・ホゲホゲほげ    16 

Slide 62

Slide 62 text

表・装飾用素材2 17  施策A  施策B  施策C  施策D 

Slide 63

Slide 63 text

イラスト集 18 

Slide 64

Slide 64 text

イラスト集 18 

Slide 65

Slide 65 text

イラスト集 18 

Slide 66

Slide 66 text

イラスト集 18 

Slide 67

Slide 67 text

イラスト集 18 

Slide 68

Slide 68 text

イラスト集 18 

Slide 69

Slide 69 text

イラスト集 18 

Slide 70

Slide 70 text

ロゴ集 19 

Slide 71

Slide 71 text

PRエリア  ホワイトペーパーなどの最後にお使いください  12 

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

EC事業部のスライド【WIP】  ここにサブタイトルを入れます  1 

Slide 77

Slide 77 text

目次  ● はじめに  ● hogehogehoge  ● hogehogehoge  ● hogehogehoge  2 