ウェブサイトはデザインではありません：中小企業成長のための戦略的フレームワーク

Website Is Not Design: A Strategic Framework for SME Growth

```html

2023年から2024年にかけて、Glintecoは3つのウェブサイトを構築しましたが、その結果は大きく異なりました。ベトナム女性博物館は1万ドルを費やし、トラフィックが130%増加しました。DKGホスピタリティは美しいデザインに1万5千ドルを費やしましたが、予約数は40%減少しました。Paradisehome.vnは1,000室以上の部屋を管理していましたが、8.7秒で読み込まれ、モバイル訪問者の71%を失いました。このケーススタディは、ウェブサイトが貧弱なデザインからではなく、UX、パフォーマンス、コンバージョン、データ層全体にわたる体系的な思考の欠如から失敗する理由と、それを修正するために構築したフレームワークを明らかにします。

著者について

Vu Quang HoaはGlintecoのCEO兼創設者であり、オーストラリア、日本、ベトナム、米国の中小企業向けに8年間ウェブシステムを構築してきました。この記事は、2020年から2024年の間の3つのプロジェクト、ベトナム女性博物館の再設計、DKGホスピタリティのホテルプラットフォーム、Paradisehome.vnのプロパティシステムから引用しています。ここで議論する4層フレームワークは、これらのプロジェクト全体での失敗から直接発展しました。

Hoaのその他の記事 | LinkedInでつながる

パート1：成功が失敗を招くとき

2020年、私たちはベトナム女性博物館のウェブサイトを再設計しました。これは、文化的な遺物と遺産の物語のデジタルアーカイブです。インタラクティブなバーチャルツアー、オーディオの説明、モバイルに最適化されたギャラリーを備えたWordPressで、6か月で1万ドルかけて再構築しました。公開から3か月後、トラフィックは130%増加し、バウンス率は45%減少し、サイト滞在時間は60%増加しました。博物館のディレクターは、それを「完全な革命」だと語りました。

私たちは、文化的なウェブサイトをマスターしたと思っていました。それから2023年にDKGホスピタリティが私たちを雇いました。

DKGグループは、ベトナム全土で複数の高級ホテルを所有していました。彼らは、彼らの高級ブランドにふさわしいものを求めていました。私たちはまさにそれを実現しました。見事なプロパティ写真、スムーズなアニメーション、エレガントなタイポグラフィ、モバイル対応のデザインです。投資：Django、Django CMS、VueJSとRedisキャッシングを使用して、5か月で1万5千ドル。

公開後1週間、クライアントはそれを気に入りました。私たちは請求書を作成し、次のプロジェクトに移りました。4週間後、DKGのオペレーションディレクターからメールが届きました：「このサイトは美しいですが、予約は増えていません。実際、予約から問い合わせへの比率が18%から11%に低下しました。何が起きたのですか？」

同時に、私たちはParadisehome.vnを構築していました。これは、ハノイの15棟の建物全体で1,000室以上の部屋を管理する予約プラットフォームです。200室でテストしている間、すべてが2.1秒のページ読み込みでスムーズに機能しました。1,000室以上のすべての部屋を本番環境にロードすると、モバイル読み込み時間は8.7秒に達しました。人々が仕事後にアパートを検索する夕方のピーク時間帯には、システムが時々タイムアウトしました。アナリティクスは、モバイルトラフィックが63%、ページが読み込まれる前に71%がバウンス、そして3〜5%の業界標準に対して1.2%の問い合わせ率を示しました。

私たちは美しく、機能的なウェブサイトを構築しました。どちらもビジネスシステムとして失敗しました。

パート2：私たちが間違っていたこと

私たちの博物館の成功は、美しいUI、インタラクティブな機能、モバイルデザイン、簡単なコンテンツ管理から生まれました。これは、博物館の訪問者が取引に転換せず、コンテンツを消費していたためうまくいきました。エンゲージメントとアクセシビリティで十分でした。

同じ考え方をDKGに適用したとき、私たちは美しいデザイン、スムーズなインタラクション、モダンな美学に焦点を当てました。私たちは、DKGの指標が、ウェブトラフィックによって駆動される予約問い合わせ率、問い合わせから予約へのコンバージョン、訪問者あたりの収益、および稼働率であるべきだったことを見落としました。私たちが構築したのは、一般的な「お問い合わせ」CTA、3回のクリックで埋もれたフォーム、価値提案なし、A/Bテストなし、およびファネルドロップオフに関する分析がゼロのデジタルパンフレットでした。

Paradisehomeの場合、私たちは機能の完全性に焦点を当てました。部屋の検索、フィルター、空室状況カレンダー、予約フロー、CMSの更新、リアルタイム同期。私たちが優先しなかったのは、1,000室での実際の負荷下でのパフォーマンス、レスポンシブデザインを超えたモバイル最適化、データベースクエリの最適化、プロパティあたり15以上のフォトギャラリーの画像最適化、または同時ユーザーによる負荷テストでした。

DKGのディレクターが予約のドロップオフデータを示し、Paradisehomeのオーナーが検索の遅さについて不満を言った後、私たちはウェブサイトではなく、コンバージョンシステムを構築してきたことに気づきました。私たちは、UI/UX、フロントエンドエンジニアリング、コンテンツ管理、および機能の実装が得意でした。コンバージョン最適化、負荷下のパフォーマンスエンジニアリング、データに基づいた意思決定、およびシステム思考は苦手でした。

パート3：4層フレームワーク

私たちは、アプローチを「どのような外観にするべきか？」から、ウェブサイトがどのようなビジネス成果を促進する必要があるのか、どのようなユーザーの旅がそこにつながるのか、どのようなテクニカルシステムがその旅をスケールで可能にするのか、そしてどのようなデータがそれが機能しているかどうかを教えてくれるのか、という問いに再構築しました。これが、私たちの4層フレームワークになりました。

UX層は、インターフェースの美しさだけでなく、ユーザーの旅の最適化に焦点を当てています。博物館が成功したのは、ユーザーがコンテンツを探索したかったためです。ホームページから展示会、アーティファクト、バーチャルツアーへの移動が完璧に機能しました。DKGが失敗したのは、ユーザーが特定の日付の部屋を予約したかったのに、明確な道筋を提供しなかったためです。修正は、ホームページから「空室状況を確認」へ、プロパティを選択、部屋を表示、予約でした。UXデザインは、美的優先ではなく、目標固有でなければなりません。

パフォーマンス層は、速度をコンバージョンに不可欠なものとして扱い、オプションの磨きではありません。Paradisehomeのデータは、8.7秒の読み込み時間で71%がバウンスしたことを示しました。2.1秒では、38%しかバウンスしませんでした。1,000人の訪問者が毎日いる場合、その33%の維持は、330人の余分な訪問者を意味し、毎日16件の余分な問い合わせ、または毎月480件を生み出します。モバイルページの速度に関するGoogleの研究によると、3秒以上かかるページをモバイルユーザーの53%が放棄します。パフォーマンスの最適化は、あると便利ではなく、コンバージョンのインフラストラクチャです。

コンバージョン層は、すべての要素を、ユーザーの意図に合わせたコンテキスト固有のCTAでコンバージョンに役立てます。DKGの最初のサイトには、ホームページに「詳細を見る」があり、プロパティページに「お問い合わせ」があり、11%の問い合わせ率を達成しました。再構築後、ホームページに「[あなたの日にちの]空室状況を確認」、プロパティページに「1泊120ドルからの部屋と料金を表示」、部屋ページに「この部屋を予約」と「ご質問はありますか？ WhatsAppでチャット」を使用しました。問い合わせ率は23%に跳ね上がりました。CTAは、次のアクションと、クリックする理由を正確にユーザーに伝える必要があります。

データ＆トラッキング層は、ビジネス成果に関連付けられた指標を使用して、重要なすべてを測定します。再構築前は、ページビュー、バウンス率、トラフィックソースを追跡していましたが、アクションを起こせるものは何も使用していませんでした。再構築後、博物館は、セッションごとの展示会ページビュー、バーチャルツアーの完了率、モバイルとデスクトップのエンゲージメントを追跡しました。DKGは、ホームページからプロパティ、部屋、予約のファネルドロップオフ、フィールドごとの問い合わせフォームの放棄、CTAのクリックスルー率、訪問者あたりの収益を追跡しました。Paradisehomeは、時間帯別の検索パフォーマンス、フィルターの使用パターン、モバイルとデスクトップのコンバージョン、およびバウンス率との読み込み時間の相関関係を追跡しました。戦略のないデータはノイズです。最初にKPIを定義し、それから容赦なく追跡してください。

パート4：再構築

DKGホテルについては、6週間にわたって8,000ドルの再構築費用を自社で負担しました。「お問い合わせ」を削除し、「[日付範囲]の空室状況を確認」を追加し、「ご滞在を予約」をホームページのファーストビューに配置し、「240人のお客様から4.8/5の評価」のような信頼のシグナルを追加し、進捗インジケーターを備えたマルチステップの予約フローを構築しました。Nielsen Norman Groupのフォームユーザビリティに関する研究によると、長いフォームをステップに分割すると、完了率が大幅に向上します。最初の予約で10%オフを提供する出口インテントポップアップを実装し、ベトナムのユーザーがチャットを好むため、即時問い合わせ用のWhatsAppボタンを追加しました。Googleアナリティクス4を設定し、拡張eコマーストラッキング、ホームページからプロパティ、部屋、予約、確認に至るコンバージョンファネルを表示し、CTA言語をA/Bテストしました。

3か月後の結果では、予約問い合わせ率が11%から23%に増加（109%増）、フォーム完了率が34%から67%に増加（97%増）、問い合わせまでの時間が4分30秒から2分10秒に短縮（52%減）、モバイル予約が全体の18%から41%に増加（128%増）しました。WhatsAppの問い合わせは、1日あたり12件の新しいチャネルを追加しました。月間のウェブ経由の予約は23件から61件に増加（165%増）しました。1泊あたり180ドルの平均予約価値と平均2.3泊の場合、追加の月間収益は15,732ドルに達しました（クライアントは再構築費用を負担しなかったため、投資はゼロ）。

Paradisehomeについては、クライアントと共有して12週間で8,500ドルをかけて、パフォーマンスのオーバーホールを優先しました。従来のシステムを段階的に再構築する私たちのアプローチと同様に、ロケーション、価格帯、空室状況フィールドにデータベースインデックスを追加し、15分の有効期間を持つRedisキャッシングを実装し、1ページあたりのクエリ数を847から12に減らしました。TinyPNGを使用して、画像を平均3.2MBから180KBに圧縮し、遅延読み込みを実装し、プログレッシブJPEGを使用しました。JavaScriptバンドルサイズを2.1MBから420KBに減らし、コード分割を実装し、1,000室ではなく、一度に20室を表示するページネーションを使用しました。8つのオプションから4つの必須オプションにフィルターを簡素化し、「予約表示」CTAをすべての部屋カードに追加し、ページ読み込みが3秒を超えた場合にアラートがトリガーされるリアルタイムパフォーマンスモニタリングを設定しました。

4か月後の結果では、モバイルページの読み込み時間が8.7秒から2.1秒に短縮（76%減）、バウンス率が71%から38%に低下（46%減）、検索から問い合わせへの比率が1.2%から4.8%に上昇（300%増）しました。月あたりの表示予約件数は47件から183件に増加（289%増）し、システムのタイムアウトは1日あたり15～20件から1日あたり0～1件に減少（95%減）しました。月間の問い合わせは89件から356件に増加（300%増）しました。18%の過去の問い合わせからリースのコンバージョン率の場合、これは毎月約48件の追加リースを意味しました。平均リース価値が月450ドルで、平均滞在期間が6か月で2,700ドルになる場合、追加の月間価値は129,600ドルに達しました。8,500ドルの投資は、最初の月に15倍回収されました。

パート5：なぜほとんどの中小企業のウェブサイトが失敗するのか

「パンフレットの考え方」は、専門的な外観がビジネス成果を推進すると想定しています。DKGの最初のサイトは専門的に見えましたが、予約を促進することに失敗しました。それは、コンバージョン戦略家ではなく、デザイナーを雇ったためです。代理店はポートフォリオの作品に焦点を当てますが、6か月でどのような特定のビジネス成果を変える必要があるのか誰も尋ねません。

断片化されたテクノロジーは、システム思考を妨げます。Paradisehomeの再構築前は、ウェブサイトはカスタムDjangoで、予約は電話とメールで行われ、CRMはExcelスプレッドシートにあり、分析には目標追跡がありませんでした。統合された開発プロセスの分析で検討したように、ファネルへの可視性がないということは、最適化がないということです。統合後、ユーザーがどこでドロップオフしたかを正確に確認し、体系的に最適化できました。

ウェブサイトを資産ではなくコストとして扱うと、「一度構築し、最小限に維持し、永遠に機能することを期待する」という考え方につながります。博物館はスタッフに、新しい展示会、イベント、物語で毎週コンテンツを更新するように訓練しました。コンテンツが新鮮さを保ったため、トラフィックは12か月で130%増加しました。DKGの再構築後、四半期ごとにレビューを実施し、休日の予約パターンを分析し、A/Bテスト価格表示を行い、クライアントがロイヤリティプログラムを開始したときにメッセージングを追加しました。継続的な改善は、静的なサイトに勝ります。

パフォーマンスを無視することは、収益を無視することを意味します。オフィスでのテストでは、DKGが高速WiFiとデスクトップで完璧に機能することを示しました。実際のユーザーは、8.7秒で読み込まれ、71%がバウンスするモバイル3G/4Gを使用していました。 Cloudflareのページ読み込みの影響分析によると、2.4秒で読み込まれるページは1.9%のコンバージョン率を達成する一方、3.3秒のページは1.5%に低下します。これは、一見小さな違いですが、スケールで劇的に複合します。中小企業はこれを逃しますが、それは、実際の条件で負荷をテストせず、公開後のパフォーマンスを監視せず、レスポンシブデザインがモバイル最適化と同じではないことに気づかないためです。実際のデバイスと実際のネットワークでテストし、継続的に監視してください。

パート6：現在どのように適用しているか

すべてのウェブサイトプロジェクトは、1つのビジネス成果、成功コンバージョン率、ユーザーコンテキスト、およびサイトが存在する場合の現在のファネル分析を定義する発見から始まります。この発見は、すべてを定義します。UXフロー、パフォーマンスターゲット、コンバージョン要素、およびトラッキング設定。

デザインフェーズは、ピクセルではなく、ユーザーの旅のマッピングから始まります。DKGの場合、オーガニック検索からのランディングを、ヒーローCTA「空室状況を確認」へ、インライン日付選択へ、フィルターされたプロパティへ、プロパティの詳細へ、「部屋と料金を表示」へ、部屋の選択へ、「この部屋を予約」へ、最小限のゲスト詳細フォームへ、メールとWhatsAppを介した予約確認へマッピングしました。この旅をマッピングした後でのみ、美的好みではなく、旅に役立つUIを設計します。

開発フェーズは、最初からアーキテクチャにパフォーマンスを組み込みます。Paradisehomeの場合、検索可能なすべてのフィールドにインデックスを付け、結合を回避するために読み込みの多いデータを非正規化し、15分のRedis TTLで頻繁なクエリをキャッシュし、ホームページと検索の別々のバンドルでコード分割を実装し、WebP形式と遅延読み込みで画像を最適化し、Celeryを非同期メール通知に使用し、一度に20件の結果をロードするようにページネーションを行い、1ページあたり12件のクエリにクエリを最適化しました。ページ読み込みが3秒を超えた場合にリアルタイムアラートがトリガーされ、毎週のパフォーマンスレポートと実際のユーザーエクスペリエンスを示すセッション録画が行われます。

公開後のフェーズは、「公開して放置」ではなく、データに基づいた反復を強調します。開発チームのパフォーマンスの測定方法で説明したように、DKGの場合、最初の90日間、1～2週目はトラフィックソース、行動、ファネルドロップオフに関するベースラインデータを確立しました。3～4週目は、「ゲストの詳細」で40%がドロップオフし、フィールドが多すぎることがわかりました。8つのフィールドから4つのフィールドに減らすと、フォーム完了率が34%から52%に上昇しました。5～8週目は、プロパティページで「今すぐ予約」と「空室状況を確認」をA/Bテストし、「空室状況を確認」が18%高いクリックスルー率で勝利しました。これは、ユーザーがコミットする前に部屋と料金を確認したかったためです。9～12週目は、モバイルバウンス率60%対デスクトップ30%に対処するために、タッチターゲットサイズを大きくし、フォームレイアウトをモバイル最適化し、モバイルバウンスを35%に下げました。

この継続的な反復が、3か月で結果がすぐに改善されなかった理由を説明しています。

結論：パンフレットからシステムへ

博物館の成功、DKGの最初の失敗、Paradisehomeのパフォーマンス危機は、ウェブサイトがデザインプロジェクトではなく、システムエンジニアリングプロジェクトであることを教えてくれました。視覚的な演習として扱うことは、コンテンツサイトでは成功しましたが、トランザクションサイトでは失敗しました。システム思考への移行、UX、パフォーマンス、コンバージョン、データの統合された層は、DKGを11%から23%の問い合わせ率に、Paradisehomeを8.7秒から2.1秒の読み込み時間にし、300%のコンバージョン増加をもたらしました。

4層フレームワークが、現在の私たちのアプローチです。モックアップ前の旅のマッピング、最初からの速度のエンジニアリング、すべての要素をコンバージョンに役立てること、そして重要なものを測定することです。これは理論ではありません。1,000室以上の部屋、15以上のプロパティ、3つの業界で、25,000ドルの再構築費用を吸収したことから学んだことです。