スマートフォンWebサイト制作の基本の「き」

スマートフォンWebサイトに欠かせないビューポート

スマートフォンWebサイトを作るうえで必須なのがビューポートの記述です。ビューポートの設定をすることによって、スマートフォンに最適化したサイズでWebサイトを表示することができます。ビューポートはHTMLコードのheadタグ内に、「<meta name=”viewport” content=”width=device-width”>」のように記述します。また、content属性には他にも値を指定することが可能です。「content=”width=device-width, initial-scale=1.0, minimum-scale=1.0」のように記述すると、ページ読み込み時に1倍の拡大率で表示(initial-scale=1.0)、ユーザーのピンチ操作による最小拡大率を1倍までとする(minimum-scale=1.0)などの設定ができます。

スマートフォンWebサイトのレイアウトの基本

スマートフォンWebサイトのレイアウトでは、ページの横幅を可変にするリキッドレイアウトが基本です。スマートフォンの画面幅はさまざまなので幅を固定してしまうと、大きすぎて画面に収まりきらなかったり、逆に画面幅よりもページが小さくて無駄な余白ができてしまったりします。スマートフォンの画面はパソコンに比べて小さいので、効率よく情報を伝えるためには画面をいっぱいに使えるように全体のwidthを100%にするのが基本です。また、それぞれのパーツもスマートフォンに最適化することが求められますが、特にリンク要素には気を付ける必要があります。スマートフォンでは指でリンクをタップするので、リンク要素の大きさやリンク同士の空きを十分に確保することが大切です。

スマートフォンWebサイト制作はどのような性能の端末でも閲覧しやすいデザインにすることが大切です。動画や音声など、容量を使う項目は最小限に留め、必要な情報を簡潔に表示することを心がけます。