• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / モバイル / モバイルサイト制作の上で注意したい箇所25点

モバイルサイト制作の上で注意したい箇所25点

池田祐太郎 | 2014年5月11日 公開 コメントを書く

PRINCIPLES OF MOBILE SITE DESIGN 2
モバイルサイト、レスポンシブといわれるマルチスクリーンサイト制作の上で注意したい箇所、サイトの購入やコンバージョンを上げる上での用例を紹介した資料をGoogleがアナウンスしました。

Multi-Screen Resources ? Google

英語の資料ですが、図も多様されていて文字数は少なめなのでサクッと見やすいと思います。
英語はよくわからない…という方のために要約だけザザッといくつかピックアップします。

目次

  • 1 どんな内容?
    • 1.1 ホームページ&サイトナビゲーション
    • 1.2 サイト内検索
    • 1.3 ECサイト&コンバージョン
    • 1.4 フォーム最適化
    • 1.5 ユーザビリティ
    • 1.6 技術チェックリスト
  • 2 まとめ

どんな内容?

PDFコンテンツは以下のような内容で構成されています。

ホームページ&サイトナビゲーション

Calls to action 2

・購入や資料請求などのボタンをわかりやすく最適な形で配置する
・メニューを画面に収まるように、使いやすい形にする
…etc

など、ウェブサイトを使いやすいようにするための工夫が紹介されています。

サイト内検索

Ensure site search results are relevant 2

・検索ボタンをわかりやすい位置に
・検索結果ページをユーザーにとって見やすいように、比較しやすいように
…etc

サイト内検索の重要性が説明されています。ECサイトの場合、モバイルユーザーとあろうと比較検討できるため、「一番メリット(安い、見やすい、使いやすい…etc)があるところで購入する」となることは必須です。そのために、使いやすい検索体験を提供するということは今後かなり重要になってきそうです。

ECサイト&コンバージョン

Let users purchase 2

・ユーザーにログインをさせることなくサイト閲覧を許可させる
・ログインしなくてもゲストととして購入できる選択肢を用意する
…etc

ECサイトでの購入体験を最適化するためのTIPSが紹介されています。購入に至るまでに障壁となっているだろう部分、買いやすい環境にするといった有益な用例のため、ECを運用しているサイト管理者は読んでおいて損はない内容です。

フォーム最適化

Choose the simplest 2

・フォーム入力時のキーボード
・リアルタイムにエラーを検知し表示する
…etc

個人的にフォーム入力時のキーボード選択はユーザビリティにかなり影響すると感じています。例えば郵便番号や誕生日を入力するときは数字のキーボードを最初から表示ということです。こういうことまで気遣いができていると「すごい使いやすいサイト」という印象が残ります。
リアルタイムのエラー検知はまだ一般的ではありませんが、ユーザーはすぐにエラーと気づくので使いやすいですね。こういうところまでケアしたい…と勉強になります。

ユーザビリティ

Make product images expandable 2

・モバイル対応、モバイル対応、モバイル対応
・ユーザーに拡大をさせない
・画像は拡大させる
…etc

モバイルユーザー増加により、ウェブサイトのモバイル対応の重要性が書かれています。
まだまだ未対応のホームページはたくさんありますが、Googleのモバイル対応に対する本気度が伺えます。まだまだスマホ最適したサイトは多くないので、これからこの分野は間違いなく需要は増えるでしょう。

技術チェックリスト

Technical checklist 2

・複数のデバイスで動作確認をしたか
・ページ読込時間は問題ないか
・モバイルサイトでもアナリティクスでコンバージョンやトラッキングを確認できているか
…etc

資料の最後に5つの技術的なチェックリストが用意されています。こういったところもチェックしておいてね、という感じで念を押すかんじでしょうか。

まとめ

これからモバイル対応、とくにスマートフォンユーザーへの配慮はますます重要になっていきこれができるかできないかでECサイトをはじめ全てのウェブサイトで重要になってくると思います。
気づいた時には時既に遅し…とならないよう、注意していきたいと思います。

メールコンサルティング
WordPress保守管理サービス

Filed Under: モバイル 関連タグ:スマホサイト, 最適化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

Googleがモバイルフレンドリー対応のランキング影響を段階的に対応するとアナウンス
2016年3月30日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作
スマホ未対応だったサイトをスマホ最適化した結果、どのくらい検索順位が上昇したのか検証しました
2015年9月19日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作
Googleのモバイルフレンドリーアップデートでどのくらいに検索結果に影響があったのか検証しました
2015年5月18日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. Elementorで表を作る3つの方法

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.