多くの経営者が公式サイトを作ろうとするとき、同じ問題で立ち止まります。レスポンシブWeb開発とモバイル専用サイトを、そもそも分けるべきなのか？
聞かれることが多くなるうちに、皆さんが本当に心配しているのは技術そのものではなく、3つのことだと気づきました。お金をかける価値があるか、今後の保守が面倒ではないか、モバイルで開いたときに遅くないか。この記事では回りくどい言い方をせず、コストから実装までをはっきり説明します。
まず結論：ほとんどの企業サイトは分ける必要がない
非常に明確な理由がない限り、レスポンシブWeb開発のほうがコスト効率の良い選択です。
理由は単純です。1つのコード、1つの管理画面、1つのドメイン。文章を1か所変更すれば、PCとスマホが同時に更新されます。商品画像を1回アップロードすれば、両方に反映されます。一方、分けて作る場合は2つのコード、2つの管理画面、2つのコンテンツが必要になり、長期的には人件費が倍になります。
具体的な例を挙げます。産業機器を扱う企業が、公式サイトのリニューアル時に「スマホ版は簡素に、PC版は情報を網羅したい」という理由で、スマホ版とPC版を分けることにこだわりました。しかし公開から3か月で、PC版は製品パラメータを6回更新したのに対し、スマホ版は2回しか同期されておらず、顧客がスマホで見た価格は古いままでした。この問題は技術の問題ではなく、プロセスの問題です。そして分けて作ることは、プロセスの問題を自然に拡大させます。
つまり、まずこの一言を覚えておいてください。分けて作ることは不可能ではないが、それを保守するための十分な人員とプロセスが必要です。
レスポンシブの本当の強みはこの3点
1. SEOが楽
BaiduもGoogleも現在はモバイルファーストインデックスです。レスポンシブサイトはURLが1つだけで、評価が集中し、モバイル向けのcanonicalやリダイレクトルールを設定する必要がありません。分けて作る場合は、mドメインとメインドメインの対応関係を処理する必要があり、少し注意を怠ると重複コンテンツが発生したり、モバイルページがインデックスされなくなったりします。
2. 保守コストが低い
企業サイトは通常、作って終わりではなく、ニュース、事例、製品を継続的に更新します。レスポンシブなら1つのコンテンツを保守するだけで済み、分けて作る場合は2つを保守する必要があります。人件費を年単位で計算すると、差は明らかです。
3. リニューアルのリスクが小さい
レスポンシブのリニューアルは1つのテンプレートを変更するだけですが、分けて作る場合は2つを変更します。どちらかで漏れがあると、ユーザーには一貫性のない体験が見えてしまいます。
どのような場合に分けて作るのが本当に適しているか
一律に決めるべきではありません。以下のようないくつかのケースでは、分けて作ること、または独立したモバイル端末を作ることが合理的です。
- モバイルの業務ロジックがPCとまったく異なる。たとえばPC側は複雑なデータダッシュボードで、モバイル側はQRコードで注文照会だけにしたい場合、機能差が大きいため、無理に1つのテンプレートに押し込むとむしろ不自然になります。
- モバイル側をミニアプリやAppで展開する。この場合、「モバイル公式サイト」の問題ではなく、ミニアプリ開発やApp開発でモバイルトラフィックを受け止めるかどうかです。WeChatエコシステムにおけるミニアプリの共有、決済、メッセージ通知の能力は、Webページには及びません。
- 旧サイトの歴史的な負債が重い。10年前の古いアーキテクチャの企業サイトもあり、レスポンシブに改修するコストが新規作成より高い場合、まず独立したモバイル版で移行することを検討できます。
注意すべきは、これら3つのケースはいずれも「スマホの画面が小さいから」分けるのではなく、業務形態が異なるからです。
レスポンシブで最も陥りやすい3つの落とし穴
落とし穴1：viewportを入れたらレスポンシブだと思う
本当のレスポンシブでは、ブレークポイント、画像の自動調整、表の横スクロール、タッチ領域のサイズを処理する必要があります。meta viewportを1行書くだけでは、スマホでは縮小版のPCページのように表示され、文字が小さすぎてタップできません。
落とし穴2：画像を圧縮せず、モバイルの読み込みが遅い
PC側の2MBのバナー画像は、スマホでもそのままダウンロードされます。正しい方法は、srcsetを使うか、ブレークポイントごとに異なるサイズの画像を読み込むことです。この点はWeb開発の段階でルールを決めておく必要があり、後から補うのはとても面倒です。
落とし穴3：主要機種だけをテストする
自分のスマホで少し触っただけで公開しないでください。少なくともiOSとAndroidの主要サイズを2〜3種類ずつカバーし、特にフォーム、ナビゲーション、ポップアップの3つを確認しましょう。
企業サイトは結局どう選ぶか：判断チェックリスト
次の質問を自分に問いかけてみてください。
1. モバイルとPCのコンテンツは同じセットか？
2. チームに2セットのコンテンツを長期的に保守する人員がいるか？
3. モバイルに決済、QRコード読み取り、メッセージプッシュなどのネイティブ要件があるか？
4. 予算は一度きりの投資か、それとも長期的に低保守を望むか？
もし1が「同じセット」、2が「いない」、4が「低保守」なら、レスポンシブを選びましょう。もし3が「ある」なら、考えるべきは公式サイトを分けることではなく、ミニアプリ開発やApp開発です。
どのような場合にMIC Studioに相談すべきか
MIC Studioは企業サイトの開発とリニューアルを行い、ミニアプリ開発、App開発、スクリプト開発も手がけ、さらにWebセキュリティテストとリバーステストを提供しています。
以下のような場合には、ぜひご相談ください。
- 公式サイトをリニューアルしたいが、レスポンシブか分けるべきか判断できず、評価してほしい；
- モバイル側でWeChatエコシステムと連携し、公式サイトとミニアプリをつなげたい；
- サイト公開後のセキュリティが心配で、一度セキュリティテストを行いたい；
- APIやデータのリバース分析が必要で、実現可能性を検証したい。
私たちは最初から方案を押し付けることはせず、通常は現在のコンテンツ構造、トラフィック源、チーム状況を確認してから提案します。
最後に：すぐ実行できる3つの提案
1. まずコンテンツ戦略を決め、次に技術方案を決める。コンテンツが1セットならレスポンシブ、2セットなら分けることを検討する。
2. モバイル優先で引き算する。どの方案を選んでも、スマホではユーザーが最もよく行う3つのことだけを残し、それ以外はメニューに収める。
3. 公開前に実機テストを1回行う。異なるサイズのスマホを3台用意し、フォーム、ナビゲーション、ポップアップを一通り確認する。デザインカンプを見るよりはるかに役立つ。
レスポンシブWeb開発とモバイル専用サイトは、本質的には技術の選択問題ではなく、コンテンツと保守能力の選択問題です。この点をはっきり考えれば、答えは通常見えてきます。