ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

スマホサイト制作で最低限知っておきたい7つの注意点【基本編】

こんばんは、今年の目標は「体重を元に戻す」です。佐谷です。
いや、言い訳じゃないですが年末年始さえなければ(ry

さて、先日スマホサイト制作には大きく分けて2つの方法があるということをお伝えしました。
(詳しくは先日の記事「スマホサイト制作で大きく異なる2つの方法」をどうぞ!)

今回は【基本編】と称して、スマホサイト制作における「最低限知っておきたい7つの注意点」についてまとめました!

①横幅はパーセンテージで指定する(リキッドレイアウト)

スマホサイトを制作する場合、多種多様なブラウザ幅に対応する必要があります。
ピクセルで要素や幅を指定すると、ブラウザ幅に関係なく大きさが固定されてしまうため、レイアウトする要素(div)や画像(img)の横幅(width)は、パーセンテージで設定する必要があります。

②画像は多用せずCSSで対応する

ページの表示速度を考慮して、少しでもサイトを軽量化するために、実現できるものはCSSで対応しましょう!

③見やすい文字の大きさや行間

視認性を高めるために、文章で使用するフォントの大きさは14pt以上で作成します。
また、行間は150%~190%が好ましいです。

④適切なボタンの大きさ

ボタンの縦幅、横幅のサイズは人差し指、または親指で押しやすい大きさ(44px以上)で作成します。

⑤Flashは使わない

PCサイトでは動画を表示する技術の「Flash(フラッシュ)」をよく使うが、iPhoneではこのFlashが表示できません。(Android端末でも一部OSのバージョンによっては表示不可)
そのため、アニメーションや動画を設置する場合はJavaScriptかCSS3で行う手法が一般的です。

⑥段組を使わないシンプルなレイアウトにする

PC向けに作られたウェブサイトでは、段組を作って「サイトバー」を設けるなど、横方向にも広がるレイアウトがよく使われます。

しかし、スマートフォンでは画面が小さいため基本的には1カラムのシンプルなレイアウトにしたほうがいいでしょう。

⑦できるだけ画面遷移を少なくする

スマートフォンの場合、画面サイズや通信速度の関係から、PCサイトの閲覧に比べて画面遷移(ページの移動)をすることに対してストレスを感じます。
なので、できるだけ画面遷移をしなくても済むようなサイト構成にしましょう。

 

以上、スマホサイト制作における7つの注意点でした!
基本的な所ですが、いざ制作の段階でどうすればいいんだっけ?とならないために、あらかじめチェックしておきましょう!