スマホサイトを作る時に気をつける2つのこと

画像の大きさに注意!

スマホでWebサイトを見ていると、画像が小さくて左端に寄っていたり、画像が大きすぎて横にスライドできてしまうサイトを見かけます。Webサイトで伝えたいことを分かりやすく使用している画像が、これでは逆に分かりにくくなってしまいます。スマホでWebサイトを作るときに指定する画像の大きさの単位は、「%」を使用して作るようにしましょう!「%」を使用することで画面の大きさが違うスマホでWebサイトを見ても、比率は変わらず綺麗に画像を表示することができます。画面の横幅いっぱいに表示するときは「100%」を指定することで大きく綺麗に表示ができます。もし、画像を小さい状態で使う場合は、左端ではなく中央に寄せるだけで格段に見やすくなります。

レイアウトは分割しない!

パソコンのWebサイトでは、メニューとコンテンツが左右に分割しているレイアウトをよく見かけます。ですが、スマホのWebサイトは左右で分割することは殆どありません。どうしても表現したいデザインや理由がない限りは、縦に長い1つの長方形をイメージして作ると良いです。
しかし、メニューなどパソコンで左右に分けていたコンテンツを表示させると、ただでさえ小さいスマホの画面にコンテンツが溢れてしまい、見にくくなる可能性があります。そういう時は、タップすることで表示/非表示が切り替わる「ハンバーガーメニュー」を置くことで、場所を取っていたメニューなどを、必要な時だけ表示させることができます。小さなスマホの画面でも表示方法を工夫することで、シンプルかつ使いやすいレイアウトを組むことができるのです。

スマートフォンの普及率が高まっている昨今、スマートフォンサイト制作は企業活動において、優先的に取り組むべき施策の一つです。視認性の高いサイト作りを目指しましょう。