知っておいて損はない!スマートフォンWebサイト制作の基礎知識

スマートフォンWebサイトのデザイン

PCのWebサイトでは、サイドバーなどを加えた2カラム3カラムのレイアウトはよく見られますが、スマートフォンの画面はPCに比べて狭いため段組みを使わないシンプルなデザインが基本です。また、スマートフォンの画面の大きさはデバイスにより様々なので、全てのデバイスに対応できるように横幅を固定しないリキッドレイアウトにしましょう。データの通信量を抑えるという観点から、目的の情報へたどりつくための画面遷移をなるべく少なくすることも重要です。スマートフォンではリンクにホバーしたときに、リンクの色を変えるなどはできません。そこで、一目でリンクと分かるようなデザインが必要になります。一つのページでの情報量が多いとその情報を閲覧するためにスクロール量が増えてしまいます。そのため、途中で上へ戻れるような機能があると、ユーザーにとって親切になるでしょう。

表示速度をできるだけ上げる

Webサイトがなかなか表示されなくてイライラした経験をお持ちの方もいることでしょう。特にPCに比べて通信環境で劣るスマートフォンでは、データの通信量を減らすことが重要になります。画像はデータ量が大きいため無駄な画像はなるべく減らし、必要な画像においても圧縮処理を施しデータ量を削減しましょう。HTMLやCSS、JavaScriptが書いてあるソースコードも、改行や空白などを取り除くミニファイ処理を行うことでファイルを圧縮できます。そのほか、ブラウザのキャッシュ機能を利用すれば、一度閲覧したサイトのデータの一部をクライアント側で保存しておいてくれるため、次回からその分だけデータの通信量を減らすことができます。

スマホサイト制作では、スマホだけを所有している人にも閲覧してもらえるというメリットがあり、さらにレイアウトを工夫して使い勝手の良さを追求することもポイントです。