PCやタブレットとの違いは?スマートフォンWebサイトの作り方


2019年5月28日

Webサイトの作り方は基本的に同じ

スマートフォンWebサイトの作り方は、PCやタブレットで閲覧するWebサイトを作るのと基本的に同じです。まず、HTMLというコンピュータ言語で本文を書きます。次に、同じくCSSというコンピュータ言語でそのHTMLに装飾を施し、レイアウトやフォントなどのページデザインを指定します。そして、完成したファイルを用意したサーバーコンピューター(レンタルするのが一般的)にアップロードします。これでWebサイトは完成です。あとは閲覧者がそのサーバーコンピューターにアクセスすれば、そのサイトを閲覧することができます。

各端末ごとにCSSを変える必要はある

しかしながら、PC用にデザインしたサイトをタブレットやスマートフォンで閲覧しても、当然ですが読みづらくなります。そこで、各端末ごとにCSSを変更する必要が出てきます。そのため、PC用のCSS、タブレット用のCSS、スマートフォン用のCSSと複数のCSSを用意しましょう。

複数のページを作るかレスポンシブWebデザインにするか

CSSを書く場合、HTMLファイル内に直接書き込むこともファイルを別に作成してそれをHTMLに読み込ませることもできます。ですから、まずPC用ページ、タブレット用ページ、スマートフォン用ページを別URLでそれぞれ用意する方法があります。閲覧者には利用している端末によって違うページを閲覧する形になります。一方で、1つのURLのHTMLファイルを用意し、閲覧する端末ごとに違うCSSを読み込ませる方法もあります。こちらはレスポンシブWebデザインと呼ばれており、閲覧者は1つのページを閲覧していますが、利用している端末ごとに違うCSSが適用されています。

スマートフォンサイト制作においては、レスポンシブ対応が大切です。無数にサイトがある昨今、スマートフォンに最適化されていないサイトは離脱を招きます。