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
1.2k
0
Share
NIFTY Tech Talk #09 ニフティのLPができるまで
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9
https://nifty.connpass.com/event/273568/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
CS教育のDX AIによる育成の効率化
niftycorp
PRO
0
170
AI 開発合宿を通して得た学び
niftycorp
PRO
0
180
なぜISPでオリジナルカードゲームを作ったのか?制作者と対談 - NIFTY Tech Talk #25
niftycorp
PRO
0
77
「なぜかネットが遅い」を“見える化”する 〜マイ ニフティが繋ぐサポートと暮らし〜 - NIKKEI Tech Talk #39
niftycorp
PRO
0
510
InnerSource Summit 2025 Three points that promoted innersource activities
niftycorp
PRO
0
260
Maker Faire Tokyo 2025 出展うらばなし - NIFTY Tech Talk #25
niftycorp
PRO
0
100
Private Status Pageの設定と活用 〜インシデントレスポンスへの活用とStatus Page運用をどうするか?〜
niftycorp
PRO
0
170
ニフティのPagerDuty活用状況
niftycorp
PRO
0
140
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.6k
Other Decks in Technology
See All in Technology
Databricks Appsで実現する社内向けAIアプリ開発の効率化
r_miura
0
160
AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた
yakumo
2
270
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
aws_shota
1
200
Oracle Cloud Infrastructure(OCI):Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
oracle4engineer
PRO
2
17k
Blue/Green Deployment を用いた PostgreSQL のメジャーバージョンアップ
kkato1
0
170
最大のアウトプット術は問題を作ること
ryoaccount
0
190
ハーネスエンジニアリング×AI適応開発
aictokamiya
1
900
脳が溶けた話 / Melted Brain
keisuke69
1
1.1k
AIエージェント時代に必要な オペレーションマネージャーのロールとは
kentarofujii
0
230
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
10
77k
Sansanの認証基盤を支えるアーキテクチャとその振り返り
sansantech
PRO
1
120
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
giginet
PRO
2
250
Featured
See All Featured
Mind Mapping
helmedeiros
PRO
1
140
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
130
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
300
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
100
YesSQL, Process and Tooling at Scale
rocio
174
15k
The agentic SEO stack - context over prompts
schlessera
0
720
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Bash Introduction
62gerente
615
210k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
160
Exploring anti-patterns in Rails
aemeredith
2
300
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.