モバイル フレンドリー 対策・対応について(簡単にできる最低限の応急措置、まとめました)

モバイル フレンドリーテスト画面

スマートフォンでご覧のみなさま、こんにちは。
2015年4月21日から、Googleが「モバイル フレンドリー」という方法を採用することになりました。

「スマホ画面対応」の見やすいサイトは、モバイルでの検索結果で優遇しますよ”、というものです。
(”スマホで見づらいサイトは、モバイルでの検索結果で順位を下げますよ”、ということです。)

このブログは、@niftyのブログシステムを使っているため、「モバイル フレンドリー」になっています。
しかし、2015年4月現在もかなりの数のウェブサイトが、モバイル フレンドリーに対応していないようです。この連休中、サイトを手直しするか、思い切って作り直すか、頭の痛い人も多いのでは・・・?

筆者のホームページも非対応だったため、4月にちょこちょこ手直しをしました。
その経験をもとに、とりあえずモバイル フレンドリーにする、簡単にできる方法を書いています。

 

1.モバイル フレンドリーかどうか確認する
こちらですぐに分かります。調べたいサイトのURLを入れて下さい⇒モバイルフレンドリーテスト

2.「PageSpeed Insights」で、具体的な問題点を把握する
こちらですぐに分かります。調べたいサイトのURLを入れて下さい⇒PageSpeed Insights

 

以下で、具体的な設定をしていきます。

3.(1)「モバイル用 viewport (ビューポート)を設定する」
htmlの<head>部分に、この一文を追加しました。
<meta name=viewport content=”width=device-width, initial-scale=1″>

↓こんな感じになります(一例です)↓

<head>
<title>Jun Kanematsu Photo Works</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” >
<meta name=”robots” content=”noimageindex”>
<meta name=viewport content=”width=device-width, initial-scale=1″>
<meta name=”Keywords” CONTENT=”beautiful scnery photos,nature photos,Japan,Katata.” >
<meta name=”Description” content=”兼松純の公式ホームページです” /></head>

 

▼画像検索から外してもらうために、<head>部分にこちらも追加しております。
<meta name=”robots” content=”noimageindex”>

viewport の設定パターンは他にもあるということなので、ご関心のある方はこちらをどうぞ。⇒http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
(上記の「てっく煮ブログ」さんで紹介されている「パターン4」が、今回ご紹介している方法です。)

 

3.(2)「リンク同士が近すぎます」(タップ要素同士が近すぎます)対策
・改行(<br>)やスペース(空白)を入れて、リンク同士を遠ざけるのが一番早いです。
・この際リンクボタンを大きくするのもひとつの方法です。

※あくまで「簡単にできる最低限の応急措置」ということでご容赦下さい。

 

3.(3)「テキストが小さすぎて読めません」(フォントサイズが小です)対策
CSSで{font-size}の箇所を探す。
たぶん{font-size: 12px; }など小さい数字になっていると思うので、16や20などの数字に変えてみる。

※{font-size}の箇所の探し方
・Windowsの場合⇒CSSの管理画面を開いた後、CTRLキーを押しながらFを押す
⇒出てきた検索ボックスに font-size と入力

※私の場合、デザイナーさんの作った雛形を一部利用しているので、CSSをむやみにいじれず・・・。やむをえず、htmlで対処しました。
<body>部分に、<p style=”font-size:150%;”>を追加。

↓こんな感じになります↓

<body>
<p style=”font-size:150%;”>
(本文です)
</p>
</body>

 

▼今回参考にしたページ
Googleのサポートページ(モバイル ユーザビリティ)
技術者以外には難しい部分も含まれているので、触りの部分のみ参考にしました。

 

今後の対応・・・レスポンシブ・ウェブデザインへの移行

スマートフォン用、パソコン用と分けてページを作る必要がなく、単一の設計図(html)で対応できる。それがレスポンシブ・ウェブデザインです。

当ブログもいずれ独自ドメインに移して、WordPressで運用することを検討中です。
(このブログは容量が2GBまでなので、そろそろ画像で一杯になりつつあります・・・)

WordPressテーマで考えているのが、こちらのsimplicity。
日本語で、無料でできるWordpressテーマをお探しの方は、こちらもチェックしてみてください。⇒http://wp-simplicity.com/

普段他のことに追われて、なかなかこういう作業って後回しになってしまうんですよね。
ご参考になれば幸いです。

※注:この記事を書いた数か月後にWordPressに移行しました。