これなら見やすい!スマートフォンWebサイトの作り方

今や、スマートフォンWebサイトは必須です!

2010頃までは、Webサイトを作る時に複数のデバイスで閲覧されることを意識する必要はありませんでした。パソコン向けのサイトは作りながら簡単に確認することができますし、携帯電話向けサイトは文字と簡単な画像しか配置することができず、レイアウトを考慮する必要もなかったからです。ところが、スマートフォンが普及して多数派となったことにより、スマートフォンWebサイトの作成は必須となりました。では、どのようにして作れば良いか、詳しく解説していきましょう。

1つのページに複数のスタイルを適用する方法

1つめの方法は、あるページをユーザーが閲覧した時に、そのデバイスによって適用するスタイルを変更するというものです。たとえば、パソコンで閲覧した時は通常のスタイルが適用されて、左右にメニューのカラムが配置され、中央に本文が表示されるようにします。このページに、「画面が小さいデバイスで閲覧された時は、カラムを本文の上下に移動させたスタイルを適用する」という記述を加えておけば、スマートフォンWebサイトを別に作ることなく、スマートフォンで閲覧しやすいデザインにすることができます。

スマートフォンWebサイトを別に用意する方法もある

2つ目の方法は、パソコン用のものとは別に、スマートフォンWebサイトを用意しておくことです。パソコンとスマートフォンで別々のスタイルを適用するという部分は変わりませんが、ページ自体も別のURLで表示されるようにするのです。サーバーでデバイスを振り分けて、本文や画像などのデータを改めて表示させる必要はありますが、スマートフォンWebサイトに誤ってパソコン用のスタイルを適用するなどのミスがなくなり、メンテナンスもしやすくなります。レイアウトだけでなく、パソコン用サイトとスマートフォンWebサイトで大幅にデザインを変更したい時は、この方法がおすすめです。

スマホサイトを見ていると、バナー広告が表示されることが多いと思います。それが邪魔に感じる人のために、最近ではバナー広告を非表示にするアプリがあり、広告の画像分の通信費を削れるなどの利点があります。