スマートフォン対応サイト制作のコツ│web制作会社のスマホ関連コラム

Columnコラム

Web制作

スマートフォン対応サイト制作のコツ

スマートフォン対応サイト制作のコツ

2015/07/03
このエントリーをはてなブックマークに追加

スマートフォンの爆発的な普及により、スマートフォン対応サイトの制作は「必須」的な感じになってきました。
「うちは関係ないから。」と思っているWeb担当者の方!それを決めるのは利用者ですよ!

とはいえ、闇雲にスマートフォン対応サイトを作っても、その利用者に「使いづらい」と思われたらマイナスですよね。

今回はスマートフォン対応サイトを制作するに当たって絶対に押さえるべきポイントを紹介します。

smpfujita_15062001.jpg文章は短く!

最近は画面サイズが大きいスマートフォンも出てきましたが、基本的に画面は小さいもの。
ずらずらと長い文章はスライドしないと最後まで読めないなど、ストレスを与えてしまいます。

隙間時間に読んでいるユーザーも多いと思われるので、文章は簡潔に!

箇条書にしたり、アイコンをつけるなど、読みやすさを重視しましょう。

伝えるべき情報は最上部に!

先に言ったように画面サイズが限られているスマートフォンでは、ファーストビューで見れる情報も少なくなります。
伝えるべき情報をファーストビューで見れるようにしましょう。

PCサイトのようにページのイメージを伝える画像は必要ありません。
伝えるべき情報として必要ないものは徹底的に削除しましょう。

画像は少なく!

装飾に使う画像はなくしましょう。
表示に時間がかかるのも利用者にストレスを与えます。

年々通信速度が上がってきているとはいえ、電車の中など、通信が不安定な場所もあります。
装飾はcss3を利用し、出来るだけサイトを軽くしましょう。

商品画像など必要な画像も圧縮ソフトなど利用して軽くしましょう。

タップしやすく!

指で直接画面を操作するスマートフォンは、テキストリンクなど隣接していると、間違ったリンクをタップしてしまいます。
これは利用者にとって非常に嫌がられますね。

リンクはボタンにして、タップしやすいサイズにしましょう。
隙間も充分に取り、ミスをなくすようにするのが重要です。

テキストリンクは極力使用しないほうが良いですが、使用する場合は、リンクである事が分かるように背景色を付けるなど工夫しましょう。
もちろんこの場合も隣接するリンクとは隙間を充分空けましょう。

移動しやすく!

スマートフォンサイトの利用者はページを読み終えると、取り合えずトップページに戻る傾向にあります。

次に見たいコンテンツが深い階層にあると、探すのが面倒で離脱するかもしれません。

目的のページまで2タップで行けるようにするのが良いでしょう。

サイト内検索を設置したり、ナビゲーションの工夫をしましょう。

フォームの入力は簡単に!

PCサイトと違い、スマートフォンでは文字を打つのがとても面倒と思う利用者は多いようです。
出来るだけ操作が少ないよう工夫しましょう。

例えば、数字を入力する項目では自動的にキーボード変換されるように設定するなど。

タップするラジオボタンも、cssで大きく見みやすくし、チェックされている事も分かり易くしましょう。

ただでさえ面倒と思われてるフォーム入力、エラーが表示されただけで強烈なストレスを与えてしまいます。

まとめ

お気づきの方もいるかと思いますが、
以上の事はスマートフォンサイトを利用するシーンを考えたサイト構成ってことですね。

基本的に移動中(通勤)、トイレ、休み時間など、すき間時間に利用することが多いので、

 ・直ぐに表示できる(表示速度)
 ・目的のコンテンツを見つけやすい

これを踏まえてサイト構築しましょう!

いまだにフリック入力が出来ず、指も短い為、文字を打つときは両手で打っている、
コーディングディレクター藤田です。

スマートフォンサイトはどんどん進化しています。
わたしもフリック入力人間に進化したいと日々念じています。(練習はしない)

関連するサービス

ホームページ制作

スマートフォンサイト制作

text_totop