Webデザイナーがこだわるべきスマホサイトの見やすさ

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

スマートフォンでのユーザーが増えてきたことで、何かを調べる時もスマホで検索してサイトを訪問する人が増えてきました。サイト制作時にデザイナーがこだわるべきポイントはどこなのかをご紹介いたします。

レスポンシブWEBデザインをしよう 

まずはスマホ対応でもっとも主流となっているレスポンシブWEBデザインをしましょう。PCサイトのデザインを元に、スマホ最適化をしていく方法です。PC用のデザインからスマホで見やすいように画像やフォントのサイズを変えたり配置を変えたりしていきます。PCサイトとは全く統一性のないデザインを作成しないように気をつけましょう。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

軽量化をしよう

パソコンとスマートフォンで大きく異なってくるのは、スマートフォンでWebサイトを閲覧する時、通信環境があまり良くないことが多いことです。通信環境が良くなくても、ストレスなくページを見ることができるよう、スマホサイトでは、表示速度が早い、いわゆる「軽いサイト」を作ることが重要となってきます。
具体的にはなるべく画像を使わない、スマホサイトに適したサイズで画像を書き出し、パソコン用のサイズが大きな画像は読み込まないようにすることなどです。デザイン面から文字も画像で置きたい場合も出てくるかと思いますが、スマホではできるだけ画像ではなくテキストで表示するようにしましょう。

CTAの作り込み

CTAとよばれる、Webサイトの訪問者を具体的な行動に誘導する部分をまずはしっかり作り込むことが大切です。例えば、パソコンではクリックしてフォームやカートページなどに飛びますが、スマホではタップするようになるので、指先で押しやすいサイズ感でボタンを作成することはもちろん、スマホで電話ボタンを設置する場合はタップして電話がかかる設定にすることが必要です。
CTA部分の文言も、ぱっとみてわかりやすく簡潔に情報を入れ込むようにしましょう。

ページのボリュームを考えよう

スマホユーザーが訪問したページの概要が流し読みでもわかるように、文字数が多すぎる場合は調整をしましょう。PCと違ってスクロールも長すぎるとスマホではユーザーにしっかり読んでもらうことができません。画面幅がパソコンよりも狭いことで、必然的にページの長さが長くなってしまうので、ページの長さをおさえるために、タブやアコーディオン・スライダーなどを使用して、限られたスペースを有効的に使う工夫をしていきましょう。
ECサイトの場合などは各商品ページにつく人気ランキング一覧をスライダーで出したり、商品説明の概要部分デフォルトで表示しておいて、「もっと読む」をタップで詳細がアコーディオンで表示されたりすることも多く見られます。

リンクの見直しをしよう

スマートフォンでは画面の大きさがパソコンと比べると小さくなってしまうので、パソコンサイトのように同じリンクをなんども貼るのは極力避けましょう。CTA部分など、これだけは外せない!というようなリンクは、追従でおいたりすることも可能です。その他はハンバーガーメニューを押すと出てくるポップアップメニューに格納するようにしましょう。

フォームのデザインを見直そう

サイトのコンバージョンともなるお問い合わせフォームなどのフォームをスマートフォン用にしっかりと作り込んでいきましょう。ユーザーの利便性を考慮して、入力の手間を減らすことも重要です。必須項目はなるべく少なくし、郵便番号からの住所自動入力なども利便性を考えて実装すべきです。また、どの項目が入っていないからダメなのか、というようなエラーがリアルタイムで出るものや、必須項目が全て入っていないと送信ボタンが押せない仕様なども最近ではよく見かけます。
スマホでフォームを入力すると、設定されている文字サイズによってはフォーカスされてしまったりすることも、ユーザーのストレスになり得るので避けるようにしましょう。基本的にはinputの中のフォントサイズを16px以上にしておけば、フォーカスされることはありません。

操作がしやすいデザインとなっているか

指先でタップをしていくことから、デザインによっては誤操作を招くこともあります。クリックしやすいサイズでのボタン作成はもちろん、文字でおくリンクひとつにしても、文字サイズや上下の余白を誤操作が置きないよう十分にとってあげる必要があります。また、PC用サイトではマウスオーバーで効果をつけることがほとんどですが、スマホではそのような効果がつけられません。
マウスオーバーでの効果がなくてもわかりやすい作りにすることも重要です。

まとめ

パソコンとスマートフォンとではサイズはもちろん、異なる点が多くあるので、スマホユーザーにとって使いやすいサイトをデザインしていくことは近年大変重要視されています。Webデザイナーもスマホユーザーの利便性を考えて、デザインをしていくようにしていきましょう。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree