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

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

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

Shoko Oyamada

June 24, 2020
Tweet

More Decks by Shoko Oyamada

Other Decks in Design

Transcript

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

    1


    View Slide

  2. 1

    カラーミーショップ

    CREチーム

    シニアデザイナー

    小山田 翔子


    View Slide

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

    ペパボのサービスの中では最も

    「これで生計を立てている」人が多い


    ユーザーは商いのプロ

    toBのサービスとして、

    ユーザー理解が重要

    6


    View Slide

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

    ショップ運営を通じて夢を叶える

    6


    View Slide

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

    叶えて欲しい夢

    6


    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

  9. カラーミーのデザインについて:PRチーム

    4

    ① サービスの認知拡大 ② お申込みを増やす

    View Slide

  10. カラーミーのデザインについて:PRチーム


    4

    サイト SNS
    イベント
    取次店
    制作会社
    オウンド
    メディア
    広告
    タッチポイント
    ユーザーとの
    接点

    View Slide

  11. カラーミーのデザインについて:PRチーム


    4

    https://shop-pro.jp/yomyom-colorme/

    View Slide

  12. カラーミーのデザインについて:PRチーム


    4

    https://award.shop-pro.jp/
    カラーミーショップ大賞

    View Slide

  13. カラーミーのデザインについて:PRチーム


    4

    サイト制作 チラシ パンフレット

    View Slide

  14. カラーミーのデザインについて:PRチーム


    4

    ABテスト フォームの最適化
    ユーザーからの声

    View Slide

  15. カラーミーのデザインについて:PRチーム


    4

    ユーザー理解
    ●どんなユーザーがいる?
    ●悩みや課題は?
    ●なにをやりたい?
    ページ設計
    ●共感
    ●欲しい情報をみつけやすい
    ●お申込みへのアクション

    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

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

    ショップ運営を通じて夢を叶える

    6


    View Slide

  18. カラーミーのデザインについて:CREチーム

    6


    View Slide

  19. カラーミーのデザインについて:CREチーム

    6


    View Slide

  20. カラーミーのデザインについて:CREチーム

    6


    View Slide

  21. カラーミーのデザインについて:CREチーム
    - ユーザーアンケート

    - ユーザーインタビュー

    - ユーザーテスト

    - お問い合わせ宛のご要望

    6

    ユーザー

    の声

    ビジネス

    システム

    改善

    計画


    View Slide

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


    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

  24. カラーミーのデザインについて:新カゴチーム


    4

    ショッピングカート


    View Slide

  25. カラーミーのデザインについて:新カゴチーム


    4

    ショッピングカートの利用状況

    決済件数

    約550,000件

    決済金額

    約7,100,000,000円

    (2020年3月版)


    View Slide

  26. カラーミーのデザインについて:新カゴチーム


    4

    プロトタイプ

    作成

    ユーザビリティ

    テスト

    数値分析

    オーナー様の

    フィードバックを

    もとに改善

    デザイナーの役割


    View Slide

  27. カラーミーのデザインについて:新カゴチーム


    4

    実際のお店に例えると

    「このお店で買うのはやめよう...」

    「次は他のお店で買うことにしよう...」

    長蛇の列に並ぶレジ 
 対応の遅いレジ
 現金払いのみのレジ 


    View Slide

  28. カラーミーのデザインについて:新カゴチーム


    4

    使い心地のよい購入画面

    どのデバイスでも

    決済できること

    決済の選択肢が

    多いこと

    ・最小限の入力フォーム

    ・入力ミスによる離脱防止

    ・スマホの小さな画面からも

     購入しやすく

    ・LINE Pay、Amazon Pay、

     楽天Payなど

    入力しやすいこと


    View Slide

  29. カラーミーのデザインについて:新カゴチーム


    4

    「最高のショッピングカート」

    カラーミーショップのショッピングカートは「買いやすい」。

    「買いやすい」から、「売れる」。

    こう言ってもらえるよう改善と検証を繰り返しています。



    View Slide

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

    6

    ユーザーをトータルに支える


    View Slide

  31. 1

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


    View Slide

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


    課題1 

    ショップオーナーが「アプリとは何か」を知らない


    View Slide

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


    
 課題2
    ショップオーナーにもデベロッパーにも伝わる用語を使わないといけない

    View Slide

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




    この課題を解決するために行ったこと


    View Slide

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




    View Slide

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




    View Slide

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


    View Slide

  38. カラーミーのデザインについて:アプリ開発チーム

    6

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

    View Slide

  39. ユーザーを知る
    9


    View Slide

  40. カラーミーのデザインについて:アプリ開発チーム

    6

    ニーズの事前把握 気づかないポイントに気づく
    インタビュー
 ユーザーテスト


    View Slide

  41. カラーミーのデザインについて:アプリ開発チーム

    6

    FAXでの受注時、入力をお願いする
    項目は何ですか?
    商品名・数量・住所・希望納品日
    (食べ
    物・冷凍冷蔵のため)…etc
    電話・FAX受注で時間がかかっている
    運用を教えて下さい。
    例) 一般と業者で割引率が異なり、作
    業に時間かかってしまう…etc
    …

    インタビュー

    ● 自分達で決めた要件は

    満たされている?

    ● 現場の状況で困ってる

    ポイントはある?

    ニーズの事前把握

    View Slide

  42. カラーミーのデザインについて:アプリ開発チーム

    6

    ユーザーテスト

    ● ドメイン知識に気づく

    ● 現場の状況に気づく

    ● 思惑の違いに気づく

    気づかなかったポイントに気づく

    View Slide

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


    View Slide

  44. 1


    View Slide

  45. ここから素材だよ〜〜〜

    ゆまゆありがと!

    1


    View Slide

  46. お役立ちリンク

    p14~15 デザインの簡単なガイド・TIPS

    p16-18 表・装飾用素材

    p19~22 イラスト・ロゴ

    ・


    View Slide

  47. 目次

    ● はじめに

    ● hogehogehoge

    ● hogehogehoge

    ● hogehogehoge



    2


    View Slide

  48. メインスライド1

    本文はこちら

    3


    View Slide

  49. メインスライド3 (例)

    本文はこちら本文はこちら本文はこちら本文はこちら本文はこちら

    ● こんな使い方もできます

    ● こんな使い方も

    よって本文はこちらよよって本文はこちらって本文はこちら。


    リード文の追加

    スライドの結論やポイントを最終行に入れるとわかりやすくなります。

    6


    View Slide

  50. メインスライド1

    本文はこちら

    4


    View Slide

  51. メインスライド2

    本文はこちら

    本文はこちら

    5


    View Slide

  52. ブランクスライド
    7


    View Slide

  53. 8


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide

  57. 素材集

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

    12


    View Slide

  58. 配色、フォントサイズについて
    ● 30px リード文など

    ● 20px スライドタイトルなど

    ● 18px 本文

    13


    View Slide

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


    View Slide

  60. 表・装飾用素材
    ほげ
 ふが
 ぴよ
 ほげ
 ふが

    ほげ 123 1 2 3 56
    ふが
    ぴよ
    ほげ
    ポイント
 重要

    重要

    ポイント

    15


    View Slide

  61. 表・装飾用素材
    売れる仕組み

    ・ホゲホゲほげ

    ・ホゲホゲホゲホゲほげ

    ・ホゲホゲほげ


    売れる仕組み

    ・ホゲホゲほげ

    ・ホゲホゲホゲホゲほげ

    ・ホゲホゲほげ


    売れる仕組み

    ・ホゲホゲほげ

    ・ホゲホゲホゲホゲほげ

    ・ホゲホゲほげ


    売れる仕組み

    ・ホゲホゲほげ

    ・ホゲホゲホゲホゲほげ

    ・ホゲホゲほげ


    16


    View Slide

  62. 表・装飾用素材2
    17

    施策A
 施策B
 施策C
 施策D


    View Slide

  63. イラスト集
    18


    View Slide

  64. イラスト集
    18


    View Slide

  65. イラスト集
    18


    View Slide

  66. イラスト集
    18


    View Slide

  67. イラスト集
    18


    View Slide

  68. イラスト集
    18


    View Slide

  69. イラスト集
    18


    View Slide

  70. ロゴ集
    19


    View Slide

  71. PRエリア

    ホワイトペーパーなどの最後にお使いください

    12


    View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. EC事業部のスライド【WIP】

    ここにサブタイトルを入れます

    1


    View Slide

  77. 目次

    ● はじめに

    ● hogehogehoge

    ● hogehogehoge

    ● hogehogehoge

    2


    View Slide

  78. メインスライド1

    本文はこちら

    3


    View Slide

  79. メインスライド3 (例)

    本文はこちら本文はこちら本文はこちら本文はこちら本文はこちら

    ● こんな使い方もできます

    ● こんな使い方も

    よって本文はこちらよよって本文はこちらって本文はこちら。


    リード文の追加

    スライドの結論やポイントを最終行に入れるとわかりやすくなります。

    6


    View Slide

  80. メインスライド1

    本文はこちら

    4


    View Slide

  81. メインスライド2

    本文はこちら

    本文はこちら

    5


    View Slide

  82. ブランクスライド
    7


    View Slide

  83. 8


    View Slide

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


    View Slide

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


    View Slide

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


    View Slide