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
230
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
110
Dify触ってみた。
niftycorp
PRO
1
220
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
240
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
77
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
75
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
82
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
71
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.8k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
450
Lazy application authentication with Tailscale
bluehatbrit
0
170
PO初心者が考えた ”POらしさ”
nb_rady
0
190
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.6k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.7k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Bash Introduction
62gerente
614
210k
Making Projects Easy
brettharned
116
6.3k
Practical Orchestrator
shlominoach
188
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Language of Interfaces
destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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.