いよいよ夏本番の暑さですね！
暑いとあまり食欲がわきませんが、夏バテにならないよう栄養のある食事をこころがけたいものです。
今回は、スマートフォンに対応したWebデザインのポイントやその効果についてご紹介いたします。
Webサイトのデザインはスマートフォンをベースに考えよう
いまや、多くの人がスマートフォンでWebサイトを閲覧しています。サイトによっては80％以上がスマホユーザーからの訪問ということもあるようです。そうなると、Webサイトを制作する際にスマホ対応はおまけではなく、むしろスマホサイトの方をメインに考えてデザインする必要があります。
わかりやすい画面構成と押しやすいボタン
スマホではPCよりも画面が小さくなるので、見やすくてシンプルでわかりやすい構成と、押しやすいボタンが重要になります。また、その要素はPC用でも見やすさに繋がりますので、初めからスマホを意識したデザインで進めるメリットは絶大です。
レスポンシブウェブデザイン
一般的なWebサイトの場合は「レスポンシブウェブデザイン」という形式でサイト制作を行ないます。パソコン、タブレット、スマートフォンなど画面のサイズが変わると、自然にそれぞれの表示に合うようにレイアウトが変化する仕組みです。PC、スマートフォンで完全に別々のサイトをつくってしまうと、更新や修正の作業にかかる手間が倍以上になってしまい、制作コストもかかるのでおすすめしません。
スマートフォンサイトのデザインのポイント
スマートフォンサイトでは、PCサイトと異なるデザインのポイントがいくつかあります。
ボタンは大きく押しやすく
1つ目はボタンの押しやすさです。スマートフォンでは、人差し指や親指でタップを行ないます。そのため、印象のよいボタンは横長よりも、親指の腹で簡単に押せるような、正方形や円が中心になります。横に長細いリンクなどは非常に押しにくいのです。これだけでクリック率や遷移率に大きな影響を及ぼします。
縦スクロールを基準にする
情報はなるべく横に並べずに、上下にスワイプするだけで、さっと見られるようにするべきです。スマートフォンの画面は縦長でLINEやTwitter、Facebookなど主要なSNSがそうであるように、私たちの目線も上下移動に慣れています。
横にたくさん情報が詰め込まれていると、狭くて見づらくなります。画面を横スクロールさせる機能を実装する事もできますが、慣れない動作のため気づかれずスルーされてしまったり、見るのをやめてしまう可能性も高くなります。どうしても横でないと表現しづらい「表」などの部分には横スクロールは有効ですが、デザイン的に多用することは望ましくありません。
フォントサイズに注意
スマートフォンの場合は、画面サイズの関係から利用するフォントのサイズにも注意が必要です。はっきり視認できるおすすめのフォントサイズは、15px〜16pxです。最低でも12px以上の大きさを確保しましょう。
いかがでしょうか。
最近ではスマホに対応したHPもますます増えており、Googleの評価の対象にもなっています。弊社でもスマホ対応（レスポンシブデザイン）のご依頼を受け付けておりますので、気になることがありましたらいつでもご相談ください！
