スマホ向けのサイトを作るには解像度に合わせたレイアウトと画面表示に気を配ろう!

スマホを縦に持った状態を意識してレイアウトをする

基本的にスマートフォンにインストールできるブラウザアプリは、二種類の表示モードを備えています。まず、PCのモニターで見るのと同じレイアウトで見られるモード、そしてスマホの解像度に合わせた表示になるモードです。通常、後者の方がデフォルトになっているので、スマートフォンに合わせたサイトを作るのであればスマホの解像度を意識して作らなければなりません。解像度を意識した作りをするにはどうすればいいのかというと、まず、スマホを縦にしたときの画面を基準にすることが重要です。なぜかというと、スマホでサイトを見る場合、横にするよりも縦にしてみる人の方が多いからです。したがってサイトの横幅は「スマホを縦に持ったときの横幅」を超えないようにしましょう。

スマホでも横長の画像を違和感なく表示させるには

スマホで正常にサイトを表示させるには画像にも少し手を加えなければなりません。というのは、横に長い画像をコンテンツ内に置いた場合、スマホで見ると横方向に潰れてしまって比率がおかしくなってしまうことがあるからです。これを回避するためにはスタイルシートで「max-width」という設定を行うとうまくいきます。ただ、PC向けとスマホ向けの設定を同じスタイルシートファイルで行う場合、こうしたスマホ向けの設定をPC向けにも適用しないように注意しましょう。また、スマホの通信速度は必ずしも高速とはいえないことがあるので、画像をたくさん並べたページを開こうとするとなかなか表示されず、閲覧者を待たせてしまうことがあります。そういったことを防ぐためにスクリプトを使ってスクロールに合わせて画像を読み込んでいくようにすると閲覧者にとってアクセスしやすいサイトになるでしょう。

スマートフォンWebサイト制作は専門業者へ委託して制作しましょう。専門的な知識の必要があるWebページ制作は業者へ任せることでホームページを制作してもらえます。