モバイル対応は常識!? のレベルに到達するには?

WPtouch Pro4 でモバイル対応は万全と思っていい??

example of mobile-friendly-test

モバイルフレンドリーテストの結果の例

WPtouch Pro4 に必要な設定をして有効にしたあと、モバイルフレンドリーテストにページを評価してもらうと… 「このページは、モバイル端末での使い勝手に優れています」という結果。

つまり、WPtouch Pro4 はモバイル対応にそれなりの評価をもたらしてくれていると分かります。

ただ、このテスト結果の一番上、黄色い ! のシンボルといっしょに表示されている「ページの読み込みに関する問題」がある!? というのはどういうことでしょう? この情報の詳細を確認してみると、分析・評価を正確に行えるように再確認が必要なエレメントが残っていることが分かります。

“使い勝手” 以前にページの部品と構成、設定を見直しなさいということですね^^;

WPtouch Pro4 を使っているので、サイトを訪れてくれるユーザーの使い勝手の基本はカバーできていると言ってもよさそうだけれど、それとは別にページを構成しているデータや構造に確認と工夫が必要ですよという意味。

つまり、WPtouch Pro4 を導入しただけでモバイル対応が完成するわけではないよということですね。

モバイルフレンドリー & モバイルユーザビリティ

もうひとつ、モバイルフレンドリーテストのページに表示される情報でちょっと気をつけたい? のは、「サイト全体のモバイル ユーザビリティ レポートを開く」 の項目。
モバイルフレンドリー” “モバイルユーザビリティ” はどう違うのでしょう??

超基本を必要とする私たちには少しレベルが高すぎる内容のようですが、モバイルフレンドリーテストで評価する “使い勝手” のように、モバイルユーザビリティ* はページを構成するエレメントの集まり。しかも、そうしたエレメントがどんな状態になっているか、どんなふうに機能しているかについての情報集まりです。

MEMO:
*: ユーザビリティ (usability): “便利さ・使いやすさ・使い勝手” のこと。そして、フレンドリー (friendly): “使いやすい・扱いやすい・分かりやすい ” という意味です。

モバイルユーザビリティレポートを開いてみるとその内容が分かります。問題数の推移を示すグラフの下、「ユーザビリティの問題」としてリスト表示されているのが、その内容です。

example mobile usability report

モバイルユーザビリティ レポートの例

その集めた情報をまとめ総合的に評価してくれているのがモバイルフレンドリー*だと理解すればよさそうです(興味ある方は、Google の John Mueller氏の説明などを読んでみてください)。

MEMO:
注意してください。私のサイトはモバイルフレンドリーテストOKと評価されていますが、そのテスト結果のユーザビリティレポートを開くとユーザビリティの問題があるとされています。そしてグラフが右肩下がりになっています。WPtouch Pro4 の設定と公開、その効果がグラフに反映されるまでにタイムラグがあります。

 

ローカルサイトの構築は簡単・便利にできる?? らしいけれど

推奨されているのはバックアップとローカルサイト

モバイル対応には

  • ページをどう表示するか・使ってもらうか、
  • ページを構成するテキストや画像などのデータや構造

の2つの面で知識と技術が必要だということが分かってきました。

ただ、WPtouch Pro4 を導入したり、テーマそのものをモバイル対応機能を持ったレスポンシブ仕様のものに差し替えたいと思ったとき、先輩方やサーバー運営会社が推奨しているのは、

  • サイトデータのバックアップ、そして
  • ローカル環境での事前の確認、つまり、いきなりサイトに変更を加えてしまうのではなくてサイトのコピー版を用意してそこで変更やデザインを作り込み、確認してからサイトにアップ

しましょうという手順です。

Instant WordPress は実は簡単ではなかった!?

簡単・スピーディが売りのInstant WordPress。
確かに、ローカルサイトを立ち上げて、その環境にサイトの内容をコピーするという作業はかつては XAMPP、最新型は Instant WordPress + Duplicator でしょうか。

手順を確認してみただけでも Instant WordPress + Duplicator の分かりやすさに助けられるなぁと感じているのですが…

 

ひと言で言えば、基本的な理屈は理解できていて、手順をたどっているのですが、私の環境ではひとつひとつのエレメントがうまく動いてくれない^^; - その連続です。

スポンサードリンク

ただ、ひとつひとつのエレメントがうまく動いてくれないというのは

  • ページを構成するテキストや画像など、エレメントとしてのデータや構造

に問題があるということの現れなんだなということが少しずつ分かってきました。Step By Step で (工程ごとに)エラーにぶつかり、前に進めないのです。Instant WordPress はインストールOK! そこから先を Step by Step で確認しつつ、備忘録していきましょう。

to be continued …