利用者の多いPCとスマホ端末で適切にページを表示させる方法
PCとスマホ端末で適切にページを表示させるには、PCとスマホの画面の大きさの違いに対して、
どのように対応していくのかが課題になります。
PCの画面は横に広いのに対して、モバイル(スマホ)端末は縦に長い画面であります。
そのため、同じようにブログレイアウト(HTML・CSSタグ)を構成して
記事やブログパーツを配置してしまうと、
いずれかの端末ではブログが見づらくなってしまいます。
例えば、
左右にサイドバーがあるレイアウトの場合、
横に画面が広いPCでは見やすいですが、
縦に画面が長いモバイル(スマホ)でも、同じように左右にサイドバーがあると、
ブログ記事の横幅が縮小されてしまいうため、文字が小さくなってとても見づらいです。
⇒PCとスマホのそれぞれで見やすいように
ブログ構成(記事やブログパーツの配置)を行なう必要があります。
そこで、対応方法としては2つあります。
対応方法(１)
⇒PC専用サイトとスマホ専用サイトをそれぞれ作るようにします。
また、用途によって、PCサイトとスマホサイトを使い分けるようにします。
⇒こうすることによって、きれいにページを表示させることができるので、
PC表示設計のサイトはしっかりとPCユーザーの利用者・アクセス数が増え、
スマホ表示設計のサイトはモバイル(スマホ)端末からのクリックが増えます。
特にトレンド系を扱うサイトは、
スピーディにネットに接続できるモバイル(スマホ)端末からのアクセスが見込まれることから、
PC表示は行なわず、モバイルファーストでサイトを構築していくのが良いでしょう。
しかし、ビジネスの市場やジャンルや利用者層、もしくは用途によっては、
引き続きPCからのアクセスが根強く見込まれます。
そこで、現実的にはPCサイトとスマホサイトの両方を管理していくことになるので
手間がかかります。
対応方法(２)
⇒1つのURL・HTMLソースで管理できるレスポンシブウェブデザインの導入。
簡単に言えば、レスポンシブウェブデザインは、
画面のサイズに応じて読み込むページレイアウト(CSS)が切り換わる仕組みになっています。
PCから閲覧してもスマホから閲覧しても、
画面サイズに合わせて、適切なレイアウトを選んでページを表示してくれるので見やすいです。
この仕組みならば、1つのURL・HTMLソースでPC表示とスマホ表示の両対応ができ、
それぞれPCサイトとスマホサイトの両方を作らなくてもよいですので、
管理は楽であります。
PCとスマホ端末で適切にページを表示させる方法(技術的対応方法)を2つ挙げましたが、
それぞれ特長があります。
そこで、ビジネスの市場やジャンルやターゲットによって、どちらの方法を取るのかを
考えていくことになります。
個人で情報発信したり、アフィリエイトを行なう場合には、一概には言えませんが、
効率を考えてレスポンシブウェブデザインが導入するのが一般的であります。
そして、
ネット上を調べると、レスポンシブウェブデザインのテンプレートがたくさんあり、
高度なCSSの知識がなくても導入しやすくなっています。
また、ブログサービスによっては、
PCレイアウト(テンプレート)とスマホレイアウト(テンプレート)が別々に設定でき、
便利になっています。
