SlideShare a Scribd company logo
サイトパフォーマンスからUXを追求する
2
目次
1, 自己紹介/ 会社紹介
2, サイトパフォーマンスとUX
3, 弊社での取り組み
3
自己紹介
株式会社ウエディングパーク
メディア開発本部
インフラ・パフォーマンスエンジニア
Wedding Park AI Lab / Labマネジャー
西脇 靖紘
書籍:「パフォーマンス向上のためのデザイン
設計(オライリージャパン)」の監訳・監修
4
会社紹介
株式会社ウエディングパーク
ビジョン
21世紀を代表するブライダル会社を創る
-----------------------------------------------------------------------------------
経営理念
結婚を、もっと幸せにしよう。
結婚に関わるすべての人が最高に幸せを感じる瞬間を創るために
新しい価値を提供する。
5
会社紹介
エンジニア・デザイナー向け制度、どんどん作っています!
6
会社紹介
海外カンファレンス派遣も推奨しています!
2016年はVelocityに
Google本社にて社長と。
肖像権上、
こちらの写真は
削除しています。
7
会社紹介
UXの追求の一環として、
AIによる チャットボットサービス もリリース!
・「ウエディングパーク 結婚準備ガイド」 で検索♪
http://www.weddingpark.net/guide/brides/
8
サービス紹介
http://www.weddingpark.net/
http://foreign.weddingpark.net/
https://www.photorait.net/
https://ringraph.weddingpark.net/
サイトパフォーマンスとUX
10
UX
IA
UI アクセシ
ビリティ
サイトパ
フォーマ
ンス
サイトパフォーマンスとUX
11
サイトパフォーマンスとUX
サイトパフォーマンスの
領域
エンジニア担当領域
・ハード、OS、MW
・アプリケーションコード
・フロントエンド実装
デザイナー担当領域
・各種コンポーネント
・デザインFW
・デザインそのもの
・UI
ディレクター担当領域
・IA
・サイト設計
→ 担当領域をまたがるのが通常
サービスに関わるすべての
スタッフがサイトパフォーマンスを
チェックすべし。
サイトパフォーマンスアップ
が
良いUXを生み出す!
12
サイトパフォーマンスとUX
「サイトパフォーマンス」がなぜ良いUXを生み出すのか?
1, サイトが遅延すると、ブランドへマイナスな影響を及ぼします。
- 75%のユーザが表示遅延を我慢せず、競合他社のサイトに行ってしまう。
2, サイトパフォーマンスが、コンバージョンに良い影響を及ぼします。
- Google Doubleclickではクライアント側のリダイレクトを1つ取り除いたことで、クリックスルー率が
12%アップした。
13
サイトパフォーマンスとUX
「サイトパフォーマンス」がなぜ良いUXを生み出すのか?
3, サイトパフォーマンスが、ユーザの再訪問頻度をアップさせます。
- サイトが高速であるほどユーザの再訪問が増加(Google調査より)
4, Google検索結果の表示順をアップさせます。
- Googleは高速サイトを検索結果順位の判断基準に使っていることを明言&推奨。
→ パフォーマンスが良いほど、ユーザは利用しやすくなる。
14
サイトパフォーマンスとUX
- YouTube フェザープロジェクトの事例 -
目的:YouTubeの再生に必要なクライアントサイド(ブラウザ側)のコードを
軽量化(100KB以下に)する 当時:250MB
経過1:
・機能を5つに限定に設計。
(「動画再生」「表示する関連ムービーは5つだ
け」「シェア機能」「フラグ機能」「コメント10件の
み」)
・ページ全体はAjaxで提供。
⬇️
250KB でもまだ重い。
経過2:
・CSSやJavaScriptなどのコード
の不要部分を削除。
・Flash Playerから自作のHTML
5 video playerに変更。
⬇️️
98KB
リクエスト数も1/10に激減
結果:リリースして1週間計測したところ、 なんと、、変更前より遅延。
15
サイトパフォーマンスとUX
- YouTube フェザープロジェクトの事例 -
Q: なぜ、パフォーマンスアップしたのに、
遅延するというねじれ現象が起きたのか?
A: 知らずに新規ユーザを獲得していたから。
・東南アジア・南米・アフリカ・シベリアの辺境地域で特にPV増。
・それら地域では、これまで遅すぎで使えなかったが(ロードで2分も)が、軽量化され
たことで、視聴が利用可能となり、人気を博し、アクセスを増大させた。
パフォーマンスアップによりサイトに付加価値が追加。
参考:http://gigazine.net/news/20151020-project-feather/
16
UX
IA
UI
アクセシビ
リティ
サイトパ
フォーマン
ス
サイトパフォーマンスとUX
17
IA
UI アクセシ
ビリティ
UX
サイトパ
フォーマ
ンス
サイトパフォーマンスとUX
18
サイトパフォーマンスとUX
では、現場でどうやって
サイトパフォーマンスに注力するのか?
19
ポイント1 : 他とのバランスを見つけて進める
1-1, 「デザイン」と「パフォーマンス」のどちらをとるかを考察する。
ex, TOPページにカルーセルを置くかどうか。
デザイン:様々なコンテンツを連続表示。
パフォ:ページ容量は最小に止めるべき(特にあと読みの画像)
1-2, どの場面で何を取るかを決定する。
(目的やチームの状況に合わせて対応を決める。)
ex, TOPページにカルーセルを置くかどうか。
今回は導入はしない。追加のリクエストや容量を課してまで、ユーザに利点をもたらさない。
1-3, 運用コストを下げるため、ワークフローに組み込む。
ex, 画像の自動圧縮や、デザインパターンのスタイルガイド化
20
ポイント2 : 個人でなく組織で取り組む
2-1, UXの追求(パフォーマンスの追求)= 組織で取り組むことが大切。
・ユーザ課題や、組織のビジネスKPIの達成のために、
パフォーマンス改善が必要であることを同僚や経営層に訴える。動く。
※ でも決して押し付けない。
2-2, メンバー同士の連携と教育、そして情報共有。
・デザイナー、エンジニア、ディレクターの全員が連携して初めて意味のある意思決定ができる。
・情報共有は、各メンバーが自発的に意見を出せるようにするための環境設備でもある。
サイトパフォーマンスを
日常的に意識できる組織であることが大切。
弊社での取り組み
22
弊社での取り組み
サイトパフォーマンスを考える文化
・常設プロジェクト
パフォチュー・プロジェクトを立ち上げて担当を立てる。
担当中心に組織への訴求を図る。
遅延やボトルネックを解決しサイト価値向上を目指す。
・盛り上げ文化
徹底的に褒めあう文化。
良い情報共有した、良いもの発見した、
改修した、気づきを得た。チームを成長させた。など
人がやったことを言葉に出して褒めあおう♪
・ビジネスへのインパクトを常に組織で共有
メンバー全員が、サイト遅延の場合のビジネス指標へのインパクトを口にして、
その解決策を考えられる状態であること。
23
弊社での取り組み
パフォーマンスの定期計測
↑ ツールによる各種パフォーマンス計測
→ 「ユーザ(人)」による定期計測
24
弊社での取り組み事例
パフォ合宿や、パフォハッカソンの開催
クリエイティブを競うC1選手権!
目標KPIを達成したら
社長と豪華会食でお祝い
25
ウエディングパークでは
UI・UX担当者を絶賛募集中です!
どれか一つにでも当てはまれば、ぜひ懇談会でお話しましょう!
・UI・UXが大好きなひと
・サイトパフォーマンスも見たいひと
・デザイン領域にとどまらず、エンジニアや経営層とまでビジネスについて語りたいひと
・活躍できる環境で挑戦したいひと
・ウエディングの業界に興味があるひと

More Related Content

Viewers also liked

制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
Tomoyuki Arasuna
 
Recommend scala
Recommend scalaRecommend scala
Recommend scala
Yuto Suzuki
 
みんなでUXデザインをするために
みんなでUXデザインをするためにみんなでUXデザインをするために
みんなでUXデザインをするために
Ai Ito
 
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティスアプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
Yuichi Kato
 
Chrome Extensionで効率アップ
Chrome Extensionで効率アップChrome Extensionで効率アップ
Chrome Extensionで効率アップ
weddingpark
 
UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17
Keiichi Takayama
 
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
Hiroko Harada
 
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
Syoko Matsumura
 
カスタマージャーニーにおけるUXとモバイル設計のポイント
カスタマージャーニーにおけるUXとモバイル設計のポイントカスタマージャーニーにおけるUXとモバイル設計のポイント
カスタマージャーニーにおけるUXとモバイル設計のポイント
Takashi Sakamoto
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
Naoyuki Matsumoto
 
The Art of Persuasive Design: Building Apps that Stick
The Art of Persuasive Design: Building Apps that StickThe Art of Persuasive Design: Building Apps that Stick
The Art of Persuasive Design: Building Apps that Stick
Dolce Design
 
オープンイノベーションセミナー資料
オープンイノベーションセミナー資料オープンイノベーションセミナー資料
オープンイノベーションセミナー資料
Filament Inc
 
Art of persuasive design
Art of persuasive designArt of persuasive design
Art of persuasive design
PebbleRoad
 
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
Kunihiro Okamura
 
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
uenoyuuki
 
Webディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレートWebディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレート
toksato Tokunaga
 

Viewers also liked (18)

制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
 
Recommend scala
Recommend scalaRecommend scala
Recommend scala
 
みんなでUXデザインをするために
みんなでUXデザインをするためにみんなでUXデザインをするために
みんなでUXデザインをするために
 
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティスアプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
 
Chrome Extensionで効率アップ
Chrome Extensionで効率アップChrome Extensionで効率アップ
Chrome Extensionで効率アップ
 
UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17UXデザインの接しかた // UX Sketch #17
UXデザインの接しかた // UX Sketch #17
 
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
ラクガキのススメ~絵を描くことで養われる創造/構造化トレーニング~
 
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
人見知りでもイベントを楽しめる!!〜リアルとネットをつなぐ〜 #mlkcca
 
カスタマージャーニーにおけるUXとモバイル設計のポイント
カスタマージャーニーにおけるUXとモバイル設計のポイントカスタマージャーニーにおけるUXとモバイル設計のポイント
カスタマージャーニーにおけるUXとモバイル設計のポイント
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
 
Persuasion design
Persuasion designPersuasion design
Persuasion design
 
Persuasive design
Persuasive designPersuasive design
Persuasive design
 
The Art of Persuasive Design: Building Apps that Stick
The Art of Persuasive Design: Building Apps that StickThe Art of Persuasive Design: Building Apps that Stick
The Art of Persuasive Design: Building Apps that Stick
 
オープンイノベーションセミナー資料
オープンイノベーションセミナー資料オープンイノベーションセミナー資料
オープンイノベーションセミナー資料
 
Art of persuasive design
Art of persuasive designArt of persuasive design
Art of persuasive design
 
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -UXデザインのフレームワーク(´ω`) - スタートアップ向け -
UXデザインのフレームワーク(´ω`) - スタートアップ向け -
 
UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -UXグラフとUXグラフツールのススメ - UX評価について -
UXグラフとUXグラフツールのススメ - UX評価について -
 
Webディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレートWebディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレート
 

Similar to サイトパフォーマンスからUXを追求する

新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用) 新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
ナイル株式会社
 
2023年版_株式会社オニオン_CORPORATE PROFILE
2023年版_株式会社オニオン_CORPORATE PROFILE2023年版_株式会社オニオン_CORPORATE PROFILE
2023年版_株式会社オニオン_CORPORATE PROFILE
Shingo Higano
 
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 -  IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウSORACOM UG Explorer 2018 -  IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
紘之 大田黒
 
Capa
CapaCapa
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座 (後編)
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座(後編)全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座(後編)
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座 (後編)
ナイル株式会社
 
エヴァンジェリストのドミナント(風)戦略
エヴァンジェリストのドミナント(風)戦略エヴァンジェリストのドミナント(風)戦略
エヴァンジェリストのドミナント(風)戦略
知記 渡部
 
株式会社WebEdgeとは... 2012年最終版
株式会社WebEdgeとは... 2012年最終版株式会社WebEdgeとは... 2012年最終版
株式会社WebEdgeとは... 2012年最終版
Youhei Sakaidani
 
Visual
VisualVisual
Visual
ssuserd59b5c
 
Seagull, Inc
Seagull, IncSeagull, Inc
Seagull, Inc
Seagull, Inc
 
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
智治 長沢
 
会社説明資料2024ver.
会社説明資料2024ver.会社説明資料2024ver.
会社説明資料2024ver.
Cybozu, Inc.
 
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウDevelopers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
紘之 大田黒
 
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナーサーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
SPIRAL Inc.
 
201004時点 広告業界の現状
201004時点 広告業界の現状201004時点 広告業界の現状
201004時点 広告業界の現状Takaki Onoda
 
Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境
VirtualTech Japan Inc.
 
using astah for openthology modeling
using astah for openthology modelingusing astah for openthology modeling
using astah for openthology modeling
Kenji Hiranabe
 
リコーUCSの開発をリーンスタートアップ的視点でふりかえる
リコーUCSの開発をリーンスタートアップ的視点でふりかえるリコーUCSの開発をリーンスタートアップ的視点でふりかえる
リコーUCSの開発をリーンスタートアップ的視点でふりかえる
Yohei Yamamoto
 
SAP Ruum ではじめるノーコードなワークフロー開発
SAP Ruum ではじめるノーコードなワークフロー開発SAP Ruum ではじめるノーコードなワークフロー開発
SAP Ruum ではじめるノーコードなワークフロー開発
Shunichiro Yamamoto
 
ウェブ社内報セミナー
ウェブ社内報セミナーウェブ社内報セミナー
ウェブ社内報セミナー
Shinya Kobayashi
 

Similar to サイトパフォーマンスからUXを追求する (20)

eTrend20070608
eTrend20070608eTrend20070608
eTrend20070608
 
新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用) 新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
新任Web担当者向け SEOの基本的な考えと取り組み方を学ぶセミナー(外部公開用)
 
2023年版_株式会社オニオン_CORPORATE PROFILE
2023年版_株式会社オニオン_CORPORATE PROFILE2023年版_株式会社オニオン_CORPORATE PROFILE
2023年版_株式会社オニオン_CORPORATE PROFILE
 
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 -  IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウSORACOM UG Explorer 2018 -  IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
 
Capa
CapaCapa
Capa
 
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座 (後編)
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座(後編)全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座(後編)
全てのWebディレクターに捧ぐ、これだけは抑えて欲しいSEO内部要件基礎講座 (後編)
 
エヴァンジェリストのドミナント(風)戦略
エヴァンジェリストのドミナント(風)戦略エヴァンジェリストのドミナント(風)戦略
エヴァンジェリストのドミナント(風)戦略
 
株式会社WebEdgeとは... 2012年最終版
株式会社WebEdgeとは... 2012年最終版株式会社WebEdgeとは... 2012年最終版
株式会社WebEdgeとは... 2012年最終版
 
Visual
VisualVisual
Visual
 
Seagull, Inc
Seagull, IncSeagull, Inc
Seagull, Inc
 
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
【MSC 2013】 開発者が知っておくべきこれからの開発現場 (DE-010)
 
会社説明資料2024ver.
会社説明資料2024ver.会社説明資料2024ver.
会社説明資料2024ver.
 
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウDevelopers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
Developers Summit Summer 2018 - 1日10TB以上の店舗映像を解析するサービスの仕組みとノウハウ
 
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナーサーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
 
201004時点 広告業界の現状
201004時点 広告業界の現状201004時点 広告業界の現状
201004時点 広告業界の現状
 
Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境Xen+Windowsで構築するサーバ仮想化環境
Xen+Windowsで構築するサーバ仮想化環境
 
using astah for openthology modeling
using astah for openthology modelingusing astah for openthology modeling
using astah for openthology modeling
 
リコーUCSの開発をリーンスタートアップ的視点でふりかえる
リコーUCSの開発をリーンスタートアップ的視点でふりかえるリコーUCSの開発をリーンスタートアップ的視点でふりかえる
リコーUCSの開発をリーンスタートアップ的視点でふりかえる
 
SAP Ruum ではじめるノーコードなワークフロー開発
SAP Ruum ではじめるノーコードなワークフロー開発SAP Ruum ではじめるノーコードなワークフロー開発
SAP Ruum ではじめるノーコードなワークフロー開発
 
ウェブ社内報セミナー
ウェブ社内報セミナーウェブ社内報セミナー
ウェブ社内報セミナー
 

サイトパフォーマンスからUXを追求する