Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NIFTY Tech Talk #09 ニフティのLPができるまで
Search
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
Technology
0
970
NIFTY Tech Talk #09 ニフティのLPができるまで
ニフティ株式会社
PRO
March 08, 2023
Tweet
Share
Video
Resources
SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9
https://nifty.connpass.com/event/273568/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
Dify触ってみた。
niftycorp
PRO
0
79
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
0
70
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
32
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
20
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
17
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
22
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
13
AWSでもOracleしたい!DB移行指南:マネージドサービス活用して属人化も解消 - NIFTY Tech Day 2025
niftycorp
PRO
0
17
スクラムマスター入門者のための学習マップ 効果的な学びと実践 - NIFTY Tech Day 2025
niftycorp
PRO
0
25
Other Decks in Technology
See All in Technology
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
E2Eテスト自動化入門
devops_vtj
1
110
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
240
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.8k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
710
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
500
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
280
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
760
MIMEと文字コードの闇
hirachan
2
1.4k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
780
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Language of Interfaces
destraynor
156
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Building Applications with DynamoDB
mza
93
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Producing Creativity
orderedlist
PRO
344
40k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
A Philosophy of Restraint
colly
203
16k
Transcript
Copyright © NIFTY Corporation All Rights Reserved. ニフティのLP(ランディングページ) ができるまで 新田
万智 サービス統括部 事業開発グループ
Copyright © NIFTY Corporation All Rights Reserved. ニフティのWEB制作の特徴 02 2
LP制作の流れ 01 目次 改善活動の紹介 03 ディレクターとして意識していること 04
Copyright © NIFTY Corporation All Rights Reserved. 3 制作チームでの仕事 企画
営業 人事 カスタ マーサ ポート エンジ ニア コーポレ ート ディレクター 8名 デザイナー 3名 コーダー 2名 社内のデザイン制作系は 制作チームで対応 関係者がたくさん! 依頼部署 制作チーム(私) WEBだけでなく、 動画制作、撮影業務、チラシ、 アプリ制作、ノベルティなど 制作物も幅広い ノジマ 店舗 ITX
Copyright © NIFTY Corporation All Rights Reserved. 4 リリースまでのフロー 新規作成時
1~2週間程度 ページの見せ方検討・ラフ調整&企画との認識合わせ デザイン・コーディング それぞれ3~4日程度 コンプラチェック 3日程度 公開 公開まで 1カ月程度
Copyright © NIFTY Corporation All Rights Reserved. 5 ニフティのWEB制作の特徴 特徴
取り扱っているサービスが自社サービス 新しいことにチャレンジしやすい やりたいと手を上げたら、実現しやすい環境にある ノジマ店舗・コールセンターなど各所から上がってくる課題・自分で見つけた課題の改善活動を 自主的に行うことができる 新規サービスリリースの経験ができる WEBサイトを作る以外の制作経験を得ることができる(動画、ロゴ、ノベルティ、チラシなど) 実際に自社のサービスを使ったうえで改善提案を行う環境にある
Copyright © NIFTY Corporation All Rights Reserved. 実際改善活動ってどんなことやっている? 6
Copyright © NIFTY Corporation All Rights Reserved. 7 改善活動の一例をご紹介 Do
Check Action Plan → → → → 課題を見つけて、仮説立て 仮説立てを踏まえて 企画提案 リリース後の効果検証 次につなげる
Copyright © NIFTY Corporation All Rights Reserved. 8 リリースまでのフロー 修正時
1週間程度 ページの見せ方検討・ラフ調整&企画との認識合わせ デザイン・コーディング それぞれ1~2日程度 コンプラチェック 1~2日程度 公開 公開まで 1~2週間程度
Copyright © NIFTY Corporation All Rights Reserved. 9 改善活動の一例をご紹介 どちらのLPの方が良いと思いますか?
Copyright © NIFTY Corporation All Rights Reserved. 10 改善活動の一例をご紹介 どちらのLPの方が良いと思いますか?
改善後 初回リリース時
Copyright © NIFTY Corporation All Rights Reserved. 11 改善活動の一例をご紹介 Plan→Do
課題点を見つけて、仮説立て→企画提案 ヒートマップで実際のユーザーの挙動やよく 見られている部分を確認する ↓ヒートマップのイメージ 数値の裏付けをする -申し込み数 -ページビュー数 -ページの離脱率 -訪問者数 …など 他社分析・今時UIの調査
Copyright © NIFTY Corporation All Rights Reserved. 12 改善活動の一例をご紹介 @nifty会員向けアプリ用LP
ストアバッチがかえってわかりにくくさ せていた。「無料ダウンロード」に変更 小洒落たデザイン「使ってみる」から、 「無料ダウンロード」と直接的な表現に変更 Before Before スマホよりPCの割合の方が多い 40~50代が多い
Copyright © NIFTY Corporation All Rights Reserved. 13 改善活動の一例をご紹介 実際のヒートマップ
Copyright © NIFTY Corporation All Rights Reserved. 14 改善活動の一例をご紹介 Check→Action
次のアクションに繋げるために、数値の変化を確認する LPの目的が叶えられているかを振り返る (申し込みがあったか?など) リリース後の効果を確認する→次にどうするか考える ? 結果を経てベストだったか? 視点を変えてみる
Copyright © NIFTY Corporation All Rights Reserved. 15 例えば… ノジマ
店舗 アプリ ストア 画面 LP チラシ バナー インストール ポイント:全体像を把握した上で次のアクションを考える ・すべて社内制作なので、全体的に数値がどうなっているか?を意識しながらサイクルを回す ・一部分だけではなく、LPに来る前が悪いのか?その後が悪いのか?など意識する アプリをインストールしてもらうという目標
Copyright © NIFTY Corporation All Rights Reserved. 16 ご紹介
Copyright © NIFTY Corporation All Rights Reserved. 最後に 17
Copyright © NIFTY Corporation All Rights Reserved. 18 ディレクターとして意識していること 真の目的はなにかを常に意識する
わかりやすいUI・UXを心がける 改善提案が上がってきたときに、言われたとおりにページを直すのではなく、 最善の解を模索し、提案・実行していく 目的を理解した上で、何を一番強調させたいか、何をしてほしいかを明確に 本やWEB・普段生活している中で色々な媒体が転がっているので、 これはどんな意図があるのか?など意識的に見て、知見を深め、提案の幅を広げる とにかく知見を貯める 部分最適ではなく全体最適を意識する。
Copyright © NIFTY Corporation All Rights Reserved.