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
1.1k
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 ニフティ株式会社
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
210
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
94
Dify触ってみた。
niftycorp
PRO
1
210
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
230
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
73
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
72
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
78
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
68
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
570
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
360
OpenHands🤲にContributeしてみた
kotauchisunsun
1
480
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
250
A2Aのクライアントを自作する
rynsuke
1
220
フィンテック養成勉強会#54
finengine
0
180
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
140
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Thoughts on Productivity
jonyablonski
69
4.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Done Done
chrislema
184
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Reviewing Like a Champion
maltzj
524
40k
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.