Web関連

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

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

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

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

文章は短く!

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

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

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

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

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

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

画像は少なく!

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

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

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

タップしやすく!

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

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

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

移動しやすく!

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

関連するサービス

ホームページ制作

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

WordPressのプラグイン PS Disable Auto Formattingを使ってみた前のページ

サイトの骨格、ワイヤーフレームとは次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    WordPressのプラグイン PS Disable Auto Formattingを使ってみた

    WordPressをCMSとして使っていると余計な機能があります。それ…

  2. Web関連

    富士山から習うサイトのモバイル対応の必要性

    電車での移動時間、お昼の休憩時間、ちょっとしたスキマ時間に使用するスマ…

  3. Web関連

    アドラーの思想でSDGsについて考えてみる

    最近SDGsという言葉を聞くことが増えたと思います。SDGsとは、…

  4. Web関連

    WordPress開発者必見!sitemap.xmlを手動で作る時代は終わった!?

    最近WordPress開発の案件を納めて、ほっとしている山谷です。…

  5. Web関連

    WEBサイトの更新が楽々に? CMS導入のすすめ

    Webの担当者の皆さんは、WEBサイトの更新を行うとき自分の社内で行っ…

  6. Web関連

    広告費をムダにしないために学ぶべき3つのこと

    今回は、費用対効果の高いネット広告について全3回に…

おすすめ記事

最近の記事

  1. 意外と身近なVUI~必要なのはあなたの声だけ~
  2. ここまで来た!ARが魅せる未来
  3. キャッシュレス決済で財布を持たずにお出かけできる時代がやって…
  4. 「モノ」から「コト」へ。変わる購買理由。
  5. 家で学ぼう

アーカイブ

  1. Web関連

    大手企業も導入しているAWSとは?
  2. Web関連

    4つのポイントを押さえて、シンプルにデザインする
  3. Web関連

    コンバージョンを上げるABテストとは!?
  4. Web関連

    スマホはアプリ?サイト?どっちがいいの?
  5. Web関連

    GAFAは知ってた。じゃあBATHは?
PAGE TOP