Web関連

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

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

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

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

文章は短く!

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

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

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

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

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

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

画像は少なく!

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

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

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

タップしやすく!

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

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

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

移動しやすく!

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

関連するサービス

ホームページ制作

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

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

読むべし!アプリ開発初心者のための本次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    Web制作会社ティファナが伝授!飲食店の集客増加のためのWebマーケティング手法

    全国各地の飲食店は、集客のためにインターネットを活用してマーケティング…

  2. Web関連

    キャッシュレスの時代に備えて、キャッシュレス決済について知ろう!

     お買い物をするときの会計は、現金派ですか?それともキャッシュ…

  3. Web関連

    規制に苦しむ、パチスロ業界の動向について

    パチスロ業界は、時代の流れの影響を受けやすい業界だと言われています。年…

  4. Web関連

    「なんでついて来るの!」あのストーカー広告について整理してみる

    女性A:「このサイトの広告...いつもどのサイトにも表示されている..…

  5. Web関連

    Webマーケティング ナーチャリングを知ろう

    実はまじめなこともちょっとは書ける吉田です。今回はまじめにWebマ…

  6. SEO関連

    【Web制作会社が教える】不正サイトへ誘導するSEOポイズニングに気をつけよう!

    言いたいことも言えない こんな世の中じゃ・・・ポイズン!昔、G…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    Web制作会社が教えるデザイナーのスキルアップ
  2. SNS関連

    マーケティングツールとしてSNSを使いたい
  3. Web関連

    まだ間に合う!オウンドメディアを活用したマーケティング ~飲食・食品業界編~
  4. Web関連

    数年後には常識!?開発を変える『APIエコノミー』とは
  5. Web関連

    ホームページ制作会社が紹介する情報共有を加速させる方法3選
PAGE TOP