超簡単!スマートフォン向けWebサイトの作り方

サイト作りのポイント

スマートフォン向けWebサイトは画面サイズを考慮して表示領域を気にする必要があります。小さな画面をスクロールして閲覧するので、サイトの構成は上からヘッダー(サイト名、メニューバー)、メインコンテンツ(記事など)、サイドバー(記事リンクなど)、フッター(連絡先、問い合わせ)の順番に配置していきます。各コンテンツは全て横幅100%に近い状態に設定してスマートフォンの表示領域を最大限使いましょう。

スマートフォンに最適なフォント設定

スマートフォンの小さな画面ではフォントの設定も重要になります。読みやすいフォント、文字の大きさ、行間などは閲覧者の感じ方で変わりますが、あまりにも大きい文字や行間が適切では無い文章は読み難くいので避けたほうがよいでしょう。見出しに使われるh1とh2タグの大きさは20px前後に抑え、本文は16px前後に設定するくらいが見栄え的にもよいと考えられます。行間は1.5em~1.7emくらいに設定すると窮屈な印象は無くなります。

タブレットやPCへの配慮

スマートフォン向けのサイトであってもタブレットやPCでの表示は気にしたほうがよいでしょう。タブレットに関してはほとんどスマートフォンと同じ設定で構いませんが、PCに関してはコンテンツの配置場所とフォントの設定を変えたいです。一般的に見られるPCサイトはメインコンテンツの横にサイドバーを並べて表示することが多いです。大きな画面で見ることを想定して、見出しや本文の文字サイズはスマートフォンよりも一回り大きいサイズに設定しましょう。

スマホサイト制作とは、PCではなくスマホに特化したサイトを制作する事です。情報量が適正で小さい画面でも見やすく、スマホのタッチ操作で簡単に扱えるように、画面と操作性を考えて制作します。