SIRIUS(シリウス)のレスポンシブテンプレートでiPhoneサイト同時生成機能の共存について

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

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

サンプル画像

 

この記事はレスポンシブテンプレート限定の内容です。

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

レスポンシブデザインテンプレートというのは
最近の有料テンプレートにはほぼ標準で装備されている機能の一つです。

 

見る機器の画面幅に応じて
最適なレイアウトでサイトを表示させるという機能のことですね。

 

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

 

シリウスの基本は固定幅のテンプレートです。
(デフォルトで900px)

 

その代わりPC上での表示とiPhone(スマホ)上では、
同じURLながら別々の独自レイアウトを表示させるという仕組みを
取り入れてます。

 

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

 

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

 

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

 

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

 

「しかしそのレスポンシブデザインテンプレートが増えすぎてもまたSEO上よくないので
数量限定にした」と言ってます。

 

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

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

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

 

ちょっと変わったテンプレートですね。

 

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

 

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

 

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

★PCでの表示

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

 

★iPhone(Android)での表示

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

そのためPC上でブラウザをiPhone画面サイズまでに狭めたレイアウトと
実際の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での実際の表示例です。

 

上の例とほとんど同じレイアウトですね。

 

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

こんな感じでしょうか。

 

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

 

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

 

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

 

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

 

購入ページへ


てっぺん