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
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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 ニフティ株式会社
microCMS移行をいまならAIでどう進めるか - microCMS Meetup 2026
niftycorp
PRO
0
340
Embedded SREと共に達成した会員管理システムのAWS移行 - SRE NEXT 2026 ランチスポンサーセッション
niftycorp
PRO
1
3.6k
ニフティ株式会社 エンジニア向け Company Deck 2026年版
niftycorp
PRO
0
650
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
niftycorp
PRO
0
290
CS教育のDX AIによる育成の効率化
niftycorp
PRO
0
370
AI 開発合宿を通して得た学び
niftycorp
PRO
0
380
なぜISPでオリジナルカードゲームを作ったのか?制作者と対談 - NIFTY Tech Talk #25
niftycorp
PRO
0
120
「なぜかネットが遅い」を“見える化”する 〜マイ ニフティが繋ぐサポートと暮らし〜 - NIKKEI Tech Talk #39
niftycorp
PRO
0
650
InnerSource Summit 2025 Three points that promoted innersource activities
niftycorp
PRO
0
330
Other Decks in Technology
See All in Technology
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
250
AWS ネットワーク構築でハマった(ハマりかけた) 5選とそこから得た教訓
nagisa53
4
220
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
sms_tech
1
270
Goでデータパイプラインを作ろう
sansantech
PRO
1
460
モバイルアプリ開発概論2026
recruitengineers
PRO
5
600
PLATEAU で バーチャル花火大会
tatsuya1970
0
160
カートの信頼性を担保するWireMockを使ったe2eテスト
ykagano
0
300
Model Studio CLI × Token Plan
maigo999
0
180
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
kuroneko13
0
120
クラウドセキュリティ入門 ~安全なクラウド利用のための基礎知識~
lhazy
13
13k
モノリス Rails でも日中に rails db:migrate を走らせたい! / Daytime rails db:migrate on Monolithic Rails!
euglena1215
4
580
まちスペース®とデジタルツインと「まちづくり」
hiro_ogi
0
120
Featured
See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
620
How STYLIGHT went responsive
nonsquared
100
6.2k
Designing for Timeless Needs
cassininazir
1
440
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.7k
Designing Powerful Visuals for Engaging Learning
tmiket
1
490
The Limits of Empathy - UXLibs8
cassininazir
1
600
Abbi's Birthday
coloredviolet
3
9.3k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
490
Visualization
eitanlees
152
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.6k
Become a Pro
speakerdeck
PRO
31
6.2k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
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.