2022年8月18日

スマホでWebページを閲覧していると、パソコン専用ページが表示されることはありませんか？パソコン画面が表示されると、開くのが重かったり、文字のサイズが小さくて読みづらかったりなどの弊害が出てストレスが溜まることもあります。そこで、パソコンサイトとスマホサイトの作り方の種類などをご紹介します。

スマホ対応ではないhtmlサイトで困ることは？

表示画面への影響大

パソコン用サイトがスマホに表示されたときに最初に戸惑うのは、文字サイズが小さいことでしょう。文字が小さいまま読み続けると目が疲れたり、リンクボタンを押しづらかったり、間違って違うリンク先に飛んでしまったりします。

それらを避けるために行う拡大にも、問題が生じてくるのです。例えば、スクロール回数が増える、全体像が分からない、希望の位置まで移動しにくいなどが起き、ストレスの原因となることが挙げられるでしょう。

パソコンに合わせたサイトは文字や画像、動画などの情報量が多いため、重くなります。それによってページを呼び出すのに時間が掛かり、イライラして見るのを諦める人も出てくるでしょう。

文字サイズ、情報量の兼ね合いなど、パソコンサイトそのままではスマホでの閲覧に問題があるといえます。

スマホ対応にしていないとアクセス数に影響

スマホの保有率は年々増加しています。パソコンは持っていないけれどスマホを持っている人も多く、若い人たちの情報収集はスマホからが一般的です。

スマホに対応していないサイトは、読みづらい、操作性が悪いということで閲覧者にストレスを与えます。その結果、そのサイトから逃げられることになってしまうのです。

ビジネスに関係のないサイトなら、アクセスが伸びなくても自分が落胆するだけですむかもしれません。しかし、これが企業やアフィリエイトなど宣伝や利益のために運営しているものなら、収益に直結してくるでしょう。

また、閲覧者の意識だけでなくgoogleの検索順位にも影響があります。なぜなら、スマホに対応しているか、否かで検索順位を変動させるプログラムが採用されているからです。

そのため、できるだけ多くの人に閲覧してもらうには、スマホに対応したサイトが必要ということになります。

スマホ対応のhtmlってどんなもの？

広く使われているのは「レスポンシブWebデザイン」

スマホに対応したサイトにするための方法として有名なのが、「レスポンシブWebデザイン」です。この設定を使うと、サイトにアクセスしてきた端末に反応して適切なものを表示させることができます。

一番正しく表示されるのは、その端末やブラウザのバージョンなどに配慮して別々のサイトを作り上げることです。しかし、そのようなことをしていては、労力やコストが大きくなってしまいます。

そこで、利用されるのがレスポンシブWebデザインです。この設定の利点は、パソコンとスマホ兼用のhtmlサイトを作るだけでよいため、一度に両方の更新が可能なことでしょう。

ただし、端末により表示画面が切り替わるようにCSS(スタイルシート)で各対応端末のサイト幅や文字サイズなどを指定する必要があります。

難点は、パソコンとタブレット・スマホに対応するため、デザインが限定されてしまうところです。

デザインを気にするなら別々のhtmlサイト作り

一つのサイトを作ってアクセス時に自動的に切り替えられるシステムは、管理や更新のことを考えると楽です。しかし、デザイン性を重んじる人や画像が多い場合は、パソコンとスマホのサイトを切り分けた方がよいでしょう。

この場合、URLは同じなのにアクセスした端末の違いで誘導されるサイトが変わる「.htaccess」ファイルを使う方法があります。レスポンシブWebデザインとの違いは、パソコン用とスマホ用の二つのhtmlサイトが必要になることです。

二つのサイトの管理は大変になりますが、それぞれに合わせて作ることができるため、デザインにこだわる人にはよいでしょう。

まとめ

スマホサイトを作るための特別なhtml言語があるわけではなく、設定の仕方でパソコンサイトとスマホサイトに分けることができます。一つのサイトを作りCSSで見え方を適正化するやり方と、最初から専用サイトを別に作る方法です。

どちらにもメリットとデメリットがあります。どちらを選ぶかは、求めるものや負担と相談して選びましょう。