レスポンシブデザインテンプレートとiPhoneサイト同時生成機能の共存について

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

レスポンシブデザインテンプレートとiPhoneサイト同時生成機能の共存について

サンプル画像

 

すべてのレスポンシブテンプレートで動作検証を行っているものではありません。ご了承ください。

カスタマイズの際の注意点として、元に戻せるようオリジナルファイルのコピーは必ず作ってください。

それでも不安な方はサイトのバックアップを事前に作成しておくと安心です。

シリウスのレスポンシブデザインテンプレートについて

レスポンシブデザインテンプレートというのは
最近の有料テンプレートにはほぼ標準で装備されている機能の一つで、
見る機器の画面幅に応じて最適なレイアウトでサイトを表示させるという機能のことですね。

 

例えば画面幅の広い PCではすべての情報を見せ、
幅のちょっと狭いタブレットやもっと幅の狭いスマホでは
見やすい配置に置き換えて主要部分だけを見せるといったように。

 

シリウスはこれまで固定幅のテンプレートを採用してきました。(デフォルトで 900px)
その代わり PC上での表示と iPhone(スマホ)上では、
同じ URLながら別々の独自レイアウトを表示させるという仕組みを取り入れてます。

 

では今回のレスポンシブデザインテンプレートの販売で
今後はレスポンシブデザインで突き進むのかというと必ずしもそうではないようで、
相変わらず PCサイトと iPhoneサイトという棲み分けのシステムは続けていくみたいです。

 

その理由として、現在のシステムは、
機器に合わせて複数の広告タイプを明確に振り分けることができたり、
<pcc>や<ipc>といった独自タグを使った表示分けなどが使えるというメリットがあります。

 

何より iPhone(スマホ)でのアクセスが半分以上と言われる現状、
iPhone(スマホ)専用のきちんとしたシステムが作れるというのは
他のテンプレートに較べてかなりアドバンテージが高いものと言えるでしょう。

 

レスポンシブテンプレートが限定販売という点に関しては、公式上は
「システムが全く同じテンプレートが広がりすぎると SEO的にまずいから
システムをレスポンシブデザインにして差別化を図った」
「しかしそのレスポンシブデザインテンプレートが増えすぎてもまた SEO上よくないので
数量限定にした」と言ってます。

 

もしかしたらレスポンシブデザインテンプレートに移行するテストケースだったのかも、、、
といううがった見方もあるかな。(^^ゞ

 

「iPhoneサイト同時生成機能」は使うべきか

さてようやく本題ですが、
シリウスのレスポンシブデザインテンプレートはもちろんそのままで使うこともできますが、
実は上位版のみの機能でもある「iPhoneサイト同時生成機能」を ON にして使うこともできます。
ちょっと変わったテンプレートですよね。

 

こうなると、どの使い方が一番いいんだろうという疑問がわいてきます。

 

そこでテンプレートの違いによるメリット・デメリットを私なりに考えてみました。

 

iPhoneサイト同時生成機能 ON の場合

★PCでの表示
PC 上では完全にレスポンシブデザインでの表示になります。

 

★iPhoneでの表示

iPhone上 では iPhoneサイト同時生成で選択したテンプレートでのレイアウトが優先されます。

そのため PC 上でブラウザを iPhone画面サイズまでに狭めたレイアウトと
実際の iPhone上での表示レイアウトは、異なったレイアウトになります。

 

★Androidでの表示
iPhoneサイト用のテンプレートが優先されるので、
場合によっては一部レイアウトが崩れる場合もあります。
(動作未確認です。スミマセン)

 

★カスタマイズ
<pcc><ipc> といったシリウス独自タグを使って

PC上と iPhone上での動作・表示を完全に振り分けることができます。

ただし iPhoneで見てるときは
「iPhone」フォルダの中にあるHTMLファイルが作動し、しかも URLがリダイレクトされるため、
一部のスクリプトがうまく機能しないというデメリットもあります。

 

iPhoneサイト同時生成機能 OFF の場合

★PCでの表示
PC 上では完全にレスポンシブデザインになります。

 

★iPhoneでの表示
レスポンシブデザインが機能してレスポンシブ専用のレイアウトで表示されます。

 

★Androidでの表示
レスポンシブデザインが機能してレスポンシブ専用のレイアウトで表示される、ハズです。
(動作未確認です。スミマセン)

 

★カスタマイズ

1つの HTMLファイルをいじるだけで済むのでカスタマイズがシンプルになります。
(iPhoneフォルダは作成されません)

スマホでの表示の ON・OFF等は、CSSのメディアクエリで振り分け可能になります。
ただし PCやスマホでの動きを分ける <pcc> や <ipc> といった独自コードは機能しません。

 

表示例

たとえばこんなウェブサイトがあったとします。
ちなみにこちら↓はレスポンシブデザインテンプレート使用時の PC表示例です。

 

キャプチャ画像

 

そしてこちらが PC上で iPhoneサイズまでブラウザの横幅を縮めた時の表示例。

 

キャプチャ画像

 

こちらは「iPhoneサイト同時生成機能」を OFFにした状態での
iPhoneでの実際の表示例です。上の例とほとんど同じレイアウトですね。

 

キャプチャ画像

 

ちなみにこちら↓は Android 4.4 での表示例です。
(実機を持ってないのでエミュレーター上での確認画像です)

 

キャプチャ画像

 

一方、「iPhoneサイト同時生成機能」を ONにした状態だと、
PC上で iPhoneサイズまでブラウザの横幅を縮めた時の表示は前と同じですが、
実際の iPhone上での表示はこちら↓になります。

 

iPhoneサイトのテンプレートで「ピンク」を選んだんですが、
まさに専用のレイアウトで表示されてますね。

 

キャプチャ画像

 

こんな感じでしょうか。

 

どちらがいいと言うものでもないので、
カスタマイズがそれほど得意でない人は「iPhoneサイト同時生成機能」を使わず
レスポンシブデザインのみでの使用がやりやすいでしょう。

 

カスタマイズが得意な人は、労力をかけたくないのであれば
やはり「iPhoneサイト同時生成機能」を使うことなくレスポンシブデザインのみで。

 

細かく制御したいのであれば「iPhoneサイト同時生成機能」を ONにして
使ってみるといいかもしれません。

 

一度「iPhoneサイト同時生成機能」を ONにしてアップロードを行った後、気が変わって「iPhoneサイト同時生成機能」を OFFにしてレスポンシブデザインサイトに切り替えたい場合は、サーバー上の .htaccess ファイルを削除してからアップロードをかけた方がトラブルが出にくいです。

購入ページへ


TOPへ戻る