PC&スマホ・レイアウト切り替え表示

キャプチャ画像

レスポンシブデザインのホームページというのは、
見る機器に応じて自動的に最適なレイアウトデザインで表示してくれるので
とても便利です。

 

”レスポンシブデザイン”とは

レスポンシブデザインというのは、PCやスマホ・タブレットなどの画面サイズに応じて自動で見やすい表示に切り替えてくれるデザインのことです。

 

これに対してSIRIUS(シリウス)の上位版に付属している「iPhone同時生成機能」というのはPC用とモバイル用に別々のサイト(デザイン)が用意され、見る機器に応じていずれかのサイト(デザイン)が表示されるというものです。
(サイトURLは同じものになります)

 

それぞれにメリットとデメリットがあります。

 

特にiPhone(スマホ)用に最適化されたモバイルレイアウトはページ表示も早いし、
余計な部分を後回しにして見やすさを優先したレイアウトなので、
iPhone(スマホ)でサイトを見る人が増えてるのもうなずけます。

 

ただしホームページのジャンルや性質によっては”余計な”部分が実は重要な要素であったり、
機能が制限されていてPC用のレイアウトデザインでなければ見ることができない要素もあったりします。

 

また中には”iPhone(スマホ)向けのレイアウトデザインが見づらい・気に入らない”という方もいらっしゃいます。

 

そんな方のために、iPhone(スマホ)上でもPCと同じレイアウトデザインで一時的に見れる機能があったりはするんですが、モバイル機器によってはなかなかスムーズにいかないこともあるようでして。


モバイルでのPCサイト表示の現状

実際、iPhoneのSafariには『デスクトップ用サイトを表示』とか、

 

キャプチャ画像

 

AndroidのChromeなら『PC版サイト』というチェック項目があったりします。

 

キャプチャ画像

 

このうちAndoridの『PC版サイト』は、チェックのON・OFFだけで
瞬時にPC版の表示・非表示が切り替えられるのでかなり重宝します。

 

これに対しiPhoneの『デスクトップ用サイトを表示』は、
一度PC版のレイアウトに切り替えてしまうと
そこからiPhone(スマホ)用レイアウトに戻すことができません

(※iOS11.4で検証時)

 

戻すには”新たにタブを開いて同じURLを貼って開く”などの操作が必要です。

 

しかもiPhoneの場合、Appleのホームページのように、『デスクトップ用サイトを表示』を使っても
PC版レイアウトに切り替わらないサイトもあったりします。

(※Andoridなら問題なし)

 

iPhoneでは新SIRIUSで作ったサイトもPC版レイアウトに切り替えることができません。

 

そこでカスタムテンプレート【Volar】では、
PC版レイアウトと本来のiPhone(スマホ)用レイアウトを交互に切り替えられるボタンを
用意しました。

 

記事の最下段、このサイトで言えばCTAの直後に切り替えボタンを表示させてます。

 

ただしモバイル用なのでPC上のブラウザでは非表示になります。

 

iPhone(スマホ)、iPad(タブレット)などモバイル機器でしか表示されません。

切り替え前と切り替え後の比較画像

※コチラ↓はiPhone(スマホ)上で表示される
PC表示レイアウト切り替えボタンのキャプチャ画像です。

 

キャプチャ画像

 

iPhone(スマホ)上なら『PC版へ表示切替』をタップすることで
iPhone(スマホ)の画面内にPC版とほぼ同じレイアウトが再現されます。

 

そしてコチラ↓がiPhone(スマホ)上でPC表示レイアウトに切り替えた後に表示される
スマホ表示に戻す切り替えボタンのキャプチャ画像です。

 

iPhone(スマホ)用レイアウトに戻すときは、
先ほどと同じ位置にある『スマホ版へ表示切替』ボタンをタップするだけ。

 

キャプチャ画像

 

またSIRIUSで作ったサイトをiPad(タブレット)で見るとPC版と同じ2カラムで表示はされるのですが、PC版レイアウトをそのまま表示させると文字がちっちゃくなって読みにくくなるのを避けるためでしょうか、微妙なレイアウトで表示されます。

 

特にサイドバーのテキストは、改行箇所が多くなってちょっと見にくい印象も受けます。

 

例えばコチラ↓がSIRIUSで作ったサイトをiPadで表示した時のキャプチャ画像です。

 

キャプチャ画像

 

カスタムテンプレート【Volar】のPC&スマホ・表示切替ボタンは
iPad(タブレット)上にも表示させてます。

 

そのボタンをタップするとPC版の表示にかなり近いサイズで再表示させることができます。

 

その結果、コチラ↓がiPadでPC表示レイアウトに切り替えた後のキャプチャ画像です。

 

キャプチャ画像

 

個人的にはiPad(タブレット)ではPC版と同じレイアウト表示でもいいと思うんですけどね。

 

PC&スマホ・表示切替ボタンはデフォルトでは表示OFFになってます。

 この記事をシェア 
キャプチャ画像

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)

PC版レイアウトに切替

スマホ版レイアウトに切替