• 87k
  • 10
ウェブデザイン \ 2017年3月8日

勝負できるスマホサイトを作成するための7つのチェックリスト

みなさんはスマホを使って何かを検索するのは、どんなときですか?通勤中や待ち合わせ中など、ちょっとした空き時間に、スマホを利用する人が多いのでは? このブログも、スマホから読んで頂いているかもしれません。

インターネットへのアクセスの半分以上がモバイル機器からという今の時代、「使い易さ」「デザイン」「機能性」を備えたスマホサイトを作成するには、どんな点を考慮すべきか。

今回は、使い易いスマホサイトを作成する7つのチェックリストをご用意しました。まだホームページをお持ちでない方は、モバイルエディタでスマホ対応サイトも楽々作成できるWixで本格サイトを作成しましょう。

▼使い易いモバイルサイトを作成するためのチェック項目!!

その1:小さな画面サイズを考慮する

PC版サイトとモバイル版サイトの大きな違いは、当然ながら画面サイズ。またスマホサイトを見ている方は、電車に乗っていたり、外出中にサイトをみていたりする人も多いので、サイトを流し読みする事が多い傾向にあります。

小さな画面にいろいろとコンテンツを詰め込んでも、読みにくかったり、レイアウトが崩れたり、これではモバイルに最適化されているとはいえません。Wix のモバイルエディタを使えば、PC版のサイトコンテンツをモバイル向けに自動変換してくれます。

モバイルエディタを使って、コンテンツの見え方を確認・調整しましょう。大切なのは一番伝えたいメッセージを目立たせること、そして訪問者がすぐに探している情報を得られるようにすることです。PC版のサイトでも同じですが、モバイルサイトを作る時は特にメッセージを厳選しましょう。

その2:クリック一つで問い合わせができるようにする

いつどこにいても、知りたいときに知りたい情報が手に入るのが、スマホの最大のメリットです。実店舗に向かっている途中で、お店の住所や電話番号をスマホで検索したこと、ありませんか?情報探しに時間がかかるホームページですと、離脱率が高くなってしまいます。

ホームページを見ている人が簡単に基本情報にアクセスできるように工夫が必要です。Wix サイトをには、追加するとクリック一つで電話をかけたり、メールが送れる「モバイルアクションバー」を追加するのがおすすめです。

また、モバイル対応の地図もお問合せページに追加し、オフィスやお店を発見しやすくしましょう。

モバイルサイト

 

その3:無駄なスクロールやページ移動は省く

特にスマホでは、限られた時間内に、必要な情報を見つけたいものです。縦長のスクロールページやページ間の移動が多すぎると、訪問者をイライラさせてしまうだけでなく、最も大切な情報にたどり着く前に諦めてしまうことも。

モバイルサイトでは、長々としたテキストや無駄なコンテンツは省き、簡潔にまとめることがPC版サイトよりも重要になります。Wix には、クリック一つでコンテンツを「モバイルサイトで非表示」にする機能がありますので、ぜひご活用ください。

その4:画像サイズをモバイル用に調整する

モバイルサイトを作る際は、さまざまな機種のスクリーンで表示し、各デバイスでサイトがどのように見えるかを確認しましょう。良く見るのが、画像サイズが大きすぎたり、小さすぎたりするもの。中には画像が文字を隠してしまっているサイトもあります。画像が思いどおりに表示されていない時はWixの「画像サイズ変更ツール」を使って、サイズを調整しましょう。

また、PC用サイトとモバイルサイトでもう一つの大きな違いは、操作の方法です。ボタンが小さすぎて、間違って隣のボタンをクリックしてしまったという経験はありませんか?

指先だけで簡単に操作できるよう、ページ上のボタンやリンクは、大きく分かりやすいデザインにすることが、モバイルサイトで成功する基本です。

その5:読みやすさに気を配る

一番最悪なのが、書いてある文字が読みにくいホームページです。

フォントの種類やサイズに気を配る必要がありますが、読みやすさはフォントだけの問題ではありません。ホームページの配色や、文章量とスペースのバランスも読みやすさに大きく影響します。

①背景と文字の色にコントラストをつける、②明度が近い色の組み合わせは避ける、③多くの色を使いすぎない、④文字間や段落間のスペースはしっかりとるなど、基本的な事を大切にしましょう。

 

読みやすさ

 

その6:便利な検索バーを追加する

必要な情報をすばやく簡単に見つけたいのが、スマホからの閲覧者の特徴ということはご説明した通りです。極力少ない手順で情報を得られるようにするには、サイト内に検索機能を追加しましょう。「サイト検索」アプリを加えれば、訪問者は最小限のステップで知りたい情報を発見できます。

その7:必要な機能が入っているか、確認する

デスクトップ同様に、お客様がオンラインで予約やイベントへの参加申し込み、ネットショップで買い物などを楽しめるよう、必要な機能がスマートフォンでもきちんと機能するかチェックしましょう。Wix App Marketでは、モバイル対応のアプリや機能がたくさん用意されています。

またスマホでは文字入力もパソコンに比べて、時間がかかります。例えば、アンケートフォームをサイトに設置する場合、アンケートの回答はタイプ形式ではなく選択できるような形にしたり、絵文字で回答できるような形にするなど工夫が必要です。

いかがでしたでしょうか?
ちょっとした努力で、使い勝手がぐんとアップするスマホサイト。

▼まだスマホサイトをお持ちでない方は、Wixで無料スマホサイトを作成しましょう!▼

ホームページ作成ならWix

ライター: Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email