Web関連

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

0

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

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

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

文章は短く!

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

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

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

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

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

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

画像は少なく!

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

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

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

タップしやすく!

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

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

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

移動しやすく!

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

関連するサービス

ホームページ制作

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ITやWebの力を1番借りたい業界は、観光業界かも?

    あらゆる業界でWebはもちろんのこと、ITの活用やIoTへの取り組…

  2. Web関連

    スマートフォンサイトに適したUI設計とは(1)

    こんにちは。育児に家事に大忙しのディレクター、望月です。ス…

  3. Web関連

    マーケティング大成功!人気アニメ作品はなぜ「人気」となったのか?

    こんにちは。ティファナ内でオタク代表を名乗っている真野です。今季もそろ…

  4. Web関連

    テンプレートセットを使ったフルスピードweb制作

    今回は、ティファナで取り組み始めた新しいWebの制作フローについてご紹…

  5. Web関連

    この夏は簡単にスポーツ観戦しよう!スポーツライブ配信サービスまとめ

    みなさん、この夏は何をして過ごそうと考えていますか?学生の方々はも…

  6. Web関連

    売れるECサイトをつくるためには天気を見よう!

    ECサイトの売り上げを上げるための方法について触れていきたいと思います…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    ECサイトの売上を向上させたい 第3回目
  2. Web関連

    就活生目線から見た!こんなリクルートサイトが使いやすい!
  3. Web関連

    Webサイトの裏側までこだわるアートなHTMLソースコード集
  4. Web関連

    【必見!】時短に便利なブックマークレットまとめ
  5. Web関連

    キーワードは「共感」?クレーム解決への最短経路
PAGE TOP