スマホサイトのデザイン作成で注意する点について

menu

カテゴリー：スタッフブログ

2020年3月24日

今回は、スマホサイトのデザイン作成で注意した方が良い5つの点についてご紹介いたします！

・スマホサイトのデザインは「端末の横幅」×「2倍」のサイズで作成する

スマホサイトのデザインは、375pxを2倍にした 750px が推奨されることが多くあります。理由は、Retinaディスプレイを搭載したスマートフォンは、通常の倍の解像度を表示することが出来るためです。

そもそも、Retinaディスプレイとは一体どのようなディスプレイのことなのでしょうか？
「Retinaディスプレイ」の概要について触れてみましょう。

■ Retinaディスプレイとは？
Retinaを和訳すると“網膜”という意味になります。肉眼では認識することができない程細かい画素を表示するため、この名前が命名されました。すなわち、Retinaディスプレイは高画素密度のディスプレイであることを意味し、従来のディスプレイの倍の解像度を再現することが可能になっています。

このことから分かる通り、Retinaディスプレイは2倍の密度で表示するため、「端末の横幅」×「2倍」のサイズが必要になります。端末の横幅は、スマートフォンのシェア数が多い端末を参考にするようにしましょう。

※ スマートフォンの技術は加速しており、Retinaディスプレイの画素は2倍だけでなく、3倍、4倍を再現することが可能な場合もあります。そのため、画像サイズは閲覧者のデバイスごとに切り替わるようCSSを記述した方が安心でしょう。

・画像サイズはできるだけ軽くする
閲覧者はページの読み込みに時間がかかると、待ち時間にストレスを感じて他のスマホサイトに行ってしまうことがあります。したがって、画像サイズは軽くするように心掛けましょう。

・レイアウトはシンプルなデザインにする
スマートフォンはPCと違って画面が小さいため、シンプルなレイアウトが良いでしょう。また、メニューは開閉可能なアコーディオンメニューが一般的となっています。

・スマホサイト内での迷子対策を行う
閲覧者がスマホサイト内で迷子になってもTOPページに戻れるように、各コンテンツ内の分かり易い場所にTOPページへのリンクを貼っておくようにしましょう。

・PC版のレイアウトに表示変更できるようにする
閲覧者によってはPC版の表示でスマホサイトを見たいという要望もあります。そのため、自由に表示切替できるように「スマホ版 / PC版」の表示設定を設置すると良いでしょう。

スマホサイトをデザインする際の注意点がお分かりいただけたでしょうか？
技術は日々進歩しています。サイトデザインの作成では柔軟に変化を取り入れるようにしましょう！

投稿一覧

コーディングパックのメールマガジン