『堀江貴文Special Program ホリスペ！』にWeb表示高速化ツール「LandingHub」責任者の井上が出演しました
株式会社TeNが提供するWebサイト高速化サービスLandingHub(ランディングハブ)責任者の井上が、2025年8月29日(金)放送のCROSS FM特別ラジオ番組『堀江貴文Special Program ホリスペ!』に出演し、堀江貴文氏との対談が実現いたしました。
IT業界の最前線で活躍し続ける堀江氏から、LandingHubの技術と事業価値について高い評価をいただいたことをご報告いたします。
出演動画はこちら
そちらの内容をまとめさせていただきます。
堀江貴文氏が語る「スピードこそマーケティングの本質」
番組内で堀江氏は、自身の過去の広告配信システム開発経験に触れながら、こう語りました。
「僕もWeb運用の仕事をしていたからわかる。スピードのことしか考えてなかった。」
「結構、意味のないことをみんなやってるんですよ。本当は100万PV見られるはずなのに、30万PVしか見られていないとしたら、もったいない。」
IT業界の第一線で数々のWebサービスを手がけてきた堀江氏だからこそ、表示速度がビジネス成果に直結する重要性を深く理解しています。
番組では、見た目や装飾に時間を割き、ユーザー体験の根幹である"速度"が軽視されがちな現状に一石を投じました。
なぜ今、Webサイトの表示速度が重要なのか
データが証明する「速度」の影響力
近年、Webサイトの表示速度は単なる"快適さ"の指標を超え、企業の売上・集客・ブランディングすべてに影響を及ぼす重要な経営指標として扱われるようになっています。
世界的企業の調査データ
- Google調査: モバイルページの表示に3秒以上かかると約53%のユーザーが離脱
- Amazon調査: 0.1秒速度改善すると売上1%増加
- 表示速度が1秒から3秒に遅延: 直帰率が30%増加
わずか数秒の違いが、ユーザーの信頼やコンバージョン率を左右する要因となっているのです。
制作環境とユーザー環境のギャップ
堀江氏との対談では、制作の現場とユーザーの閲覧環境の乖離についても深く議論されました。
「昔はシンプルな作りだったが、今は複雑でデータ量がすごい。」
見た目は良いが、それらは容量の多いページとなるため、それが遅くなる原因になるというお話もして頂きました。
多くのWeb制作者は、社内の安定したWi-Fi環境のもとで作業をしています。
そのため、制作時には重たいビジュアルや凝ったアニメーションを加えても問題なく動作します。
しかし、実際のユーザーは電車の中や外出先など、通信制限のある環境でアクセスしているケースが少なくありません。
インフラが整うほど、制作側の理想とユーザーの現実との間にギャップが広がり、「見たいものが見られない」「届けたいものが届かない」という不均衡が生まれてしまうのです。
気づかない損失「サイレントクレーム」
Webサイトの遅さがもたらす最も深刻な問題は、サイレントクレーム(静かなクレーム)です。
ページが重くて表示されない場合、ユーザーは企業にクレームを入れることなく、静かにそのサイトから離脱します。
つまり、企業側は損失が発生していることに気づかないまま、日々チャンスを逃し続けているのです。
多くの企業では、本来であれば閲覧や購入につながるはずのユーザーが、ページの遅さにより離脱してしまう──それは気づかれないまま繰り返される、最大のマーケティングロスです。
思っているよりも機会損失しているかもしれません
気づいていないだけで、思っているよりも機会損失しているかもしれません。
表示速度が遅いと、離脱率、コンバージョンにもかなりの影響が出ます。
本来であれば月間で100万PV見られるポテンシャルのあるサイトだったとしても、表示速度が遅いことで月間30万PVしか見られていないということもあるかもしれません。
気づいていないだけで、表示速度をあげられるだけで売上も思っている以上に伸ばせる可能性を秘めています。
サイトの表現と表示速度の両立を諦めていませんか？
マーケティングや制作の担当者の方も、こうやって作りたいけど表示速度が遅いことに目をつぶっていませんか？
「こうするしかないよね。って思っちゃってるんだけど、そんなことはない」
もしかしたら、まだまだ改善の余地があるかもしれません。
是非、LandingHubにご相談下さい。
LandingHubと合わせて実施したい表示速度改善対策
LandingHubの機能に加え下記の対策も同時に実施していただくことで、表示速度を最大限速くすることができます。
１：内部CSS化・最適化
レンダリングブロックを回避するためのCSSの最適化方法です。
ファーストビューに必要な要素を内部CSS化させます。
内部CSS化というのは、ファーストビューで必要なCSS部分をHTMLの<style>タグ内に直接記述する方法です。
そうすることでファーストビューで必要なCSSだけを先に読み込むことができ表示速度が早くなります。
下記が記述のソースとなります。
<head>
<style>
/* 生成されたクリティカルCSS */
body { font-family: sans-serif; }
.header { background-color: #f1f1f1; }
.main-content { padding: 20px; }
</style>
</head>また、ファーストビューに不要なCSSに関してはrel="preload"でHTMLの解析を停止せずに非同期で読み込みます。
読み込み完了時にonloadイベントでrel="stylesheet"に変更して適用します。
CSSやJavaScriptなどの外部ファイルは、上記のように非同期で読み込ませたり、不要な部分を後から読み込ませることでレンダリングブロックを防ぎ表示速度を改善させます。
２：JSの最適化（async属性/defer属性）
こちらは、JavaScriptによるレンダリングブロックを回避する目的での対策です。
JavaScript最適化のおすすめの方法として、1つ目はファーストビューで必要な分のJavaScriptをasync属性で読み込みます。
async属性は、JavaScriptを非同期で読み込み・実行する属性なので、HTMLの解析を停止せずにスクリプトを並行してダウンロードし、準備完了次第すぐに実行されます。
async属性の記述例としては下記のようになります。
<!-- async: 非同期で読み込み・実行 -->
<script src="script.js" async></script>2つ目はファーストビュー以外のJavaScriptをdefer属性で読み込みます。
defer属性は、JavaScriptの実行をHTML解析完了後まで延期する属性です。
スクリプトは非同期でダウンロードされますが、HTMLの解析が完了してからDOMContentLoaded前に、記述順通りに実行されるようになります。
jQueryなどのライブラリやDOM操作を行うスクリプト、依存関係があるコードに最適で、実行順序が保証されるためレンダリングブロックを回避しつつ安全にスクリプトを読み込めます。
defer属性の記述例としては下記のようになります。
<!-- defer: 並行ダウンロード、HTML解析完了後に実行 -->
<script src="script.js" defer></script>※async属性、defer属性は<head>内での記述を行います。
これでレンダリングブロックを回避してページ表示速度を改善できます。
JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。
３：レスポンシブ画像の実装と適切なサイズ設定（srcset属性）
srcset属性を使ったレスポンシブ画像の基本実装は、img要素に複数の画像選択肢を提供する方法です。
下記のソースの例に沿って説明をしていきます。
<img
src="hero-image-medium.jpg"
srcset="hero-image-small.jpg 320w,
hero-image-large.jpg 960w,
hero-image-xlarge.jpg 1280w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
(max-width: 960px) 860px,
1400px"
alt="ヒーロー画像">上記のようにHTMLでは、srcset属性に「画像ファイル名 実際の幅w」の形式で複数の画像を記述します。
この記述に合わせて、スマートフォン用、タブレット用、デスクトップ用など設定に応じてそれぞれのサイズで同じ画像を準備します。
例えばスマートフォン用は「hero-image-small.jpg 320w」の記述で幅320pxの画像ということになります。
sizes属性では、各画面サイズの条件と表示サイズを指定します。
例えば「(max-width: 320px) 280px」の記述では320px以下の画面の場合は、幅280pxで表示させる。という指定がされていることになります。
ブラウザは現在の画面サイズとデバイスピクセル比を自動判定し、srcset属性の中から最適な画像を選択してダウンロードします。
レスポンシブ画像については「レスポンシブ画像とは」の記事で詳しく解説しています。
４：サードパーティタグの整理・最適化
サードパーティー最適化は、外部サービス（Google Analytics、広告、SNSウィジェット等）による速度低下を防ぐ手法です。
不要なサードパーティースクリプトを削除し、必要なもののみ厳選して読み込みます。
特にGoogle Tag Managerで統合管理している場合は、その中にあるタグの読み込み順序を制御や削除をすることで、サードパーティーによるレンダリングブロックを回避し、コア機能の表示速度を維持できます。
JavaScriptの最適化と同様にasync/defer属性で非同期読み込みを実施し、遅延読み込みでユーザー操作後に動かすという方法がおすすめです。
５：不要なコードの除去
Webサイトの表示速度を向上させる最も効果的な方法の一つが、不要なコードの除去です。
HTML、CSS、JavaScriptから空白・改行・コメントを削除するMinification（圧縮）により、ファイルサイズを削減できます。
Chrome DevToolsのCoverageパネルやPurgeCSSなどのツールを活用することで、実際に使用されているコードだけを残し、不要な部分を自動的に削除できます。
これにより、ページの読み込み時間が短縮され、ユーザー体験の向上とSEO評価の改善につながります。
６：コード分割(Code Splitting)
コード分割(Code Splitting)は、JavaScriptを複数の小さなファイルに分割し、必要なタイミングで読み込む最適化手法です。
従来の一括読み込みでは、ユーザーが実際に使用しない機能のコードまで最初に読み込まれ、初期表示が遅くなる問題がありました。
コード分割により、初回表示に必要な最小限のコードだけを優先的に読み込み、その他の機能は必要になった時点で動的に読み込むことができます。
Webpack、Rollup、Viteなどのモジュールバンドラーを使用することで、ルート単位やコンポーネント単位での自動分割が可能です。
この手法により、初期ロード時間を大幅に短縮し、特にシングルページアプリケーション(SPA)では劇的なパフォーマンス向上が期待できます。
結果として、ユーザーはより速くコンテンツにアクセスでき、離脱率の低減にも貢献します。
LandingHubが解決する3つの課題
1. 面倒な開発・設定は一切不要
タグひとつ設置するだけで、導入初日から表示速度が改善されます。
限られたリソースでも即効性のある成果を得られる、非エンジニアでも扱える"最速の解決策"です。専門知識がなくても、誰でも簡単に導入できます。
2. 特許技術による画像・動画の読み込み制御
LandingHubは特許取得済みの独自技術を活用しています。
スマートフォンで見えている画面の範囲は、実はサイト全体のごく一部です。見えていない部分のデータを読み込むのは非効率です。
LandingHubは、ユーザーが見たいと思っている部分のデータだけに集中して読み込ませる制御を行います。
さらに、画像・動画を次世代の高圧縮フォーマットに自動変換することで、画質を保ちながらデータ量を大幅に削減します。
実績例
表示までに1分以上かかっていたページが、5秒以内に表示されるようになった事例も
3. 表現の幅を犠牲にしない
通信環境が悪い状況下でも動画を途切れずに再生できる技術により、高品質な映像やインタラクティブなコンテンツが展開可能です。
これにより表現の幅が飛躍的に広がり、ユーザー体験も向上します。"作り手のこだわり"と"ユーザーの利益"を両立させることができます。
LandingHubで安定稼働とコスト削減
LandingHubは、速度改善だけでなく、サーバーインフラの最適化も実現します。
- CDNによる最適配信と負荷分散
- 大容量データの自動圧縮
- 高速化・安定化・コスト最適化を同時に実現
導入企業500社突破の信頼と実績
LandingHubは2021年9月のリリース以降、累計導入企業数500社を突破しています。
大手企業を含む多くのクライアント様から、「なぜ御社のサイトはこんなに速いのか?」という質問を頻繁にいただいてきたノウハウを、誰でも使える形に汎用化したのが、このサービスの原点です。
株式会社TeNは、マーケティング支援業務を通じて培った豊富な実績と専門知識を基に、LandingHubを開発しました。
番組情報
番組名：堀江貴文Special Program ホリスペ！
放送日：2025年8月29日（金）13:00〜19:00
Navigator：堀江貴文・コウズマ ユウタ
CROSS FM MARK IS 福岡ももち グームホテルスタジオより生放送
ハッシュタグ：#ホリスペ787
記事を書いた人
