NIFTY Tech Talk #09 ニフティのLPができるまで

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
   ニフティのLP（ランディングページ）
   ができるまで
   新田 万智
   サービス統括部 事業開発グループ
   

   View Slide

2. Copyright © NIFTY Corporation All Rights Reserved.
   ニフティのWEB制作の特徴
   02
   2
   LP制作の流れ
   01
   目次
   改善活動の紹介
   03
   ディレクターとして意識していること
   04
   

   View Slide

3. Copyright © NIFTY Corporation All Rights Reserved. 3
   制作チームでの仕事
   企画
   営業
   人事
   カスタ
   マーサ
   ポート
   エンジ
   ニア
   コーポレ
   ート
   ディレクター
   8名
   デザイナー
   3名
   コーダー
   2名
   社内のデザイン制作系は
   制作チームで対応
   関係者がたくさん！
   依頼部署 制作チーム（私）
   WEBだけでなく、
   動画制作、撮影業務、チラシ、
   アプリ制作、ノベルティなど
   制作物も幅広い
   ノジマ
   店舗
   ITX
   

   View Slide

4. Copyright © NIFTY Corporation All Rights Reserved. 4
   リリースまでのフロー
   新規作成時
   1～2週間程度
   ページの見せ方検討・ラフ調整＆企画との認識合わせ
   デザイン・コーディング
   それぞれ3~4日程度
   コンプラチェック
   3日程度
   公開
   公開まで
   1カ月程度
   

   View Slide

5. Copyright © NIFTY Corporation All Rights Reserved. 5
   ニフティのWEB制作の特徴
   特徴
   取り扱っているサービスが自社サービス
   新しいことにチャレンジしやすい
   やりたいと手を上げたら、実現しやすい環境にある
   ノジマ店舗・コールセンターなど各所から上がってくる課題・自分で見つけた課題の改善活動を
   自主的に行うことができる
   新規サービスリリースの経験ができる
   WEBサイトを作る以外の制作経験を得ることができる（動画、ロゴ、ノベルティ、チラシなど）
   実際に自社のサービスを使ったうえで改善提案を行う環境にある
   

   View Slide

6. Copyright © NIFTY Corporation All Rights Reserved.
   実際改善活動ってどんなことやっている？
   6
   

   View Slide

7. Copyright © NIFTY Corporation All Rights Reserved. 7
   改善活動の一例をご紹介
   Do
   Check
   Action
   Plan →
   →
   →
   →
   課題を見つけて、仮説立て
   仮説立てを踏まえて
   企画提案
   リリース後の効果検証
   次につなげる
   

   View Slide

8. Copyright © NIFTY Corporation All Rights Reserved. 8
   リリースまでのフロー
   修正時
   1週間程度
   ページの見せ方検討・ラフ調整＆企画との認識合わせ
   デザイン・コーディング
   それぞれ1~2日程度
   コンプラチェック
   1~2日程度
   公開
   公開まで
   1～２週間程度
   

   View Slide

9. Copyright © NIFTY Corporation All Rights Reserved. 9
   改善活動の一例をご紹介
   どちらのLPの方が良いと思いますか？
   

   View Slide

10. Copyright © NIFTY Corporation All Rights Reserved. 10
    改善活動の一例をご紹介
    どちらのLPの方が良いと思いますか？
    改善後
    初回リリース時
    

    View Slide

11. Copyright © NIFTY Corporation All Rights Reserved. 11
    改善活動の一例をご紹介
    Plan→Do
    課題点を見つけて、仮説立て→企画提案
    ヒートマップで実際のユーザーの挙動やよく
    見られている部分を確認する
    ↓ヒートマップのイメージ
    数値の裏付けをする
    -申し込み数
    -ページビュー数
    -ページの離脱率
    -訪問者数 …など
    他社分析・今時UIの調査
    

    View Slide

12. Copyright © NIFTY Corporation All Rights Reserved. 12
    改善活動の一例をご紹介
    @nifty会員向けアプリ用LP
    ストアバッチがかえってわかりにくくさ
    せていた。「無料ダウンロード」に変更
    小洒落たデザイン「使ってみる」から、
    「無料ダウンロード」と直接的な表現に変更
    Before
    Before
    スマホよりPCの割合の方が多い 40～50代が多い
    

    View Slide

13. Copyright © NIFTY Corporation All Rights Reserved. 13
    改善活動の一例をご紹介
    実際のヒートマップ
    

    View Slide

14. Copyright © NIFTY Corporation All Rights Reserved. 14
    改善活動の一例をご紹介
    Check→Action
    次のアクションに繋げるために、数値の変化を確認する
    LPの目的が叶えられているかを振り返る
    （申し込みがあったか？など）
    リリース後の効果を確認する→次にどうするか考える
    ？
    結果を経てベストだったか？
    視点を変えてみる
    

    View Slide

15. Copyright © NIFTY Corporation All Rights Reserved. 15
    例えば…
    ノジマ
    店舗
    アプリ
    ストア
    画面
    LP
    チラシ
    バナー
    インストール
    ポイント：全体像を把握した上で次のアクションを考える
    ・すべて社内制作なので、全体的に数値がどうなっているか？を意識しながらサイクルを回す
    ・一部分だけではなく、LPに来る前が悪いのか？その後が悪いのか？など意識する
    アプリをインストールしてもらうという目標
    

    View Slide

16. Copyright © NIFTY Corporation All Rights Reserved. 16
    ご紹介
    

    View Slide

17. Copyright © NIFTY Corporation All Rights Reserved.
    最後に
    17
    

    View Slide

18. Copyright © NIFTY Corporation All Rights Reserved. 18
    ディレクターとして意識していること
    真の目的はなにかを常に意識する
    わかりやすいUI・UXを心がける
    改善提案が上がってきたときに、言われたとおりにページを直すのではなく、
    最善の解を模索し、提案・実行していく
    目的を理解した上で、何を一番強調させたいか、何をしてほしいかを明確に
    本やWEB・普段生活している中で色々な媒体が転がっているので、
    これはどんな意図があるのか？など意識的に見て、知見を深め、提案の幅を広げる
    とにかく知見を貯める
    部分最適ではなく全体最適を意識する。
    

    View Slide

19. Copyright © NIFTY Corporation All Rights Reserved.
    

    View Slide