スマートフォン対応デザインの考え方
概要
2025年の段階で、多くのWebサイトではモバイルからのアクセスがPC（デスクトップ）からのアクセスを上回っています。特に一般向けのサイトでは、訪問者の60-70%以上がスマートフォンからアクセスすることも珍しくありません。
このようなデバイス利用の変化に伴い、Webサイト設計においても「モバイルファースト」のアプローチが標準となっています。これは単にスマートフォン対応を後付けすることではなく、最初からモバイル環境を前提としたデザインと機能設計を行うことを意味します。
重要なのは、スマートフォンユーザーに対して機能や情報が欠落しないようにすることです。PCでは見られるがスマートフォンでは見られないコンテンツがあると、そのコンテンツは多くのユーザーにとって「存在しないコンテンツ」となってしまいます。
WIKIPLUSのデザイン切り替え機能
WIKIPLUSでは、入力されたWIKI形式のコンテンツを各デバイスに最適な形でレンダリングする仕組みを提供しています。デバイスに応じたデザイン適用は主に以下の2つの方法で実現できます：
1. レスポンシブデザインアプローチ
1つのHTMLと1つのCSSで、画面サイズに応じて柔軟にレイアウトを変更する方法です。これには以下の利点があります：
- 保守が容易（1つのテンプレートのみを更新）
- SEO面でのメリット（URLが共通）
- キャッシュの効率化
2. デバイス別テンプレートアプローチ
スマートフォン向けに最適化された別テンプレート（〇.design.sp.tpl）を用意する方法です：
- デバイスごとに完全に異なるUX/UIを提供できる
- デバイスの特性に最適化されたパフォーマンス
- ページサイズの軽量化が容易
WIKIPLUSでは、アクセスデバイスを自動判定し、適切なテンプレートを適用する機能（vt=spパラメータによる切り替え）を標準で備えています。この自動切り替え機能は設定で制御することも可能です。
これらの設定方法はスマートフォン表示の自動切り替え（vt=sp）設定に記載されています。
スマートフォン用デザインの作成方法
スマートフォン向けのデザインテンプレートは、PC用テンプレートと同様の方法で作成します。ファイル名は〇.design.sp.tplとします。
例： PC向けデザインが「A.design.default.tpl」の場合、対応するスマートフォン向けデザインは「A.design.sp.tpl」となります。
スマートフォン向けデザイン作成のポイント：
- 画面の小ささを考慮したシンプルなレイアウト
- タッチ操作に最適化したUIコンポーネント（ボタンサイズ、間隔など）
- 読み込み速度を意識した軽量設計
スマートフォン用デザインの適用順序
システムはデザインファイルを以下の優先順位で適用します：
1. デバイス専用テンプレート
スマートフォンの場合は「A.design.sp.tpl」が最優先で適用されます。
2. 通常テンプレートへのフォールバック
「A.design.sp.tpl」が存在しない場合、「A.design.default.tpl」が適用されます。
3. ベーステンプレートへのフォールバック
上記両方が存在しない場合、「base.default.tpl」が適用されます。
4. システムデフォルト
いずれも存在しない場合、システム内蔵のデフォルトテンプレートが適用されます。
URLとデバイスパラメータ
スマートフォン向けURLには「?vt=sp」パラメータが付与されます。このパラメータは以下の役割を持ちます：
- デバイス判定の明示的な指示
- キャッシュの分離によるパフォーマンス向上
- アクセス解析でのデバイス別統計の容易化
例： PC向けURL「http://www.example.jp/index.html」に対し、スマートフォン向けは「http://www.example.jp/index.html?vt=sp」となります。
デバイス判定は自動的に行われますが、必要に応じて手動で切り替えるリンクを設置することも推奨します：
//PC表示へのリンク
[[{$permalink}.html?vt=default|PC版で表示]]
//スマートフォン表示へのリンク
[[{$permalink}.html?vt=sp|スマートフォン版で表示]]
自動デバイス判定と「vt=sp」パラメータの付与は設定で制御可能です。詳細はスマートフォン表示の自動切り替え（vt=sp）設定をご参照ください。
