スマートフォン用のWebサイトはレスポンシブデザインで作ろう

スマホ用サイトは縦一列のデザインが基本

スマートフォン用のWebサイトを作る場合、縦一列にコンテンツを重ねていくことを心がけた方がいいでしょう。というのは、スマートフォンの大きさは5インチから7インチ程度のものが多く、ユーザーは縦にして画面を見ることが多いからです。
ただ、ガラケー専用のサイトほどシンプルにする必要はありません。画面の大きさはパソコンよりも小さいものの、解像度自体はパソコンもスマホのモニタもそれほど変わらないですし、スマホにインストールされているブラウザは「フルブラウザ」であり、最新バージョンのHTML及びCSSを解釈し、表現することができるからです。

レスポンシブデザインはCSSで設定する

では、具体的にどのようにスマートフォン用のWebサイトを作ればいいのかというと、基本的にレスポンシブのデザインにするといいでしょう。レスポンシブデザインとは、アクセスしてきた端末に合わせて表示するデザインのことで、サイトのアドレスは同一であるというのが基本です。
つまり、特定のURLにアクセスした場合、端末がパソコンであればパソコン用のデザインを、スマホであればスマホ用のデザインを表示するということになります。
レスポンシブデザインにするためには、CSSが重要です。CSSでは、アクセスしてきた端末の画面幅によって、同じHTMLでもどのように表示するのかを変えることができるので、パソコン、スマホの平均的な解像度を確認し、それに合ったデザインを設定するといいでしょう。

スマホサイトは、ホームページを画面の小さなスマホでも見やすいように作られたサイトです。情報量はPCサイトに比べて限られますが、見やすさ使いやすさを優先して作られています。