少し前、「ホームページのスマホ対応とその後の運用を考えた設計 」で少しお伝えしましたが、ホームページのスマホ対応にあたり、現状のホームページがモバイルフレンドリーサイトでないものから、スマホ対応サイトへと修正する際に、スマホ対応化へのカスタマイズがしにくいホームページの仕様があります。
今回は、そんなホームページのスマートフォン表示最適化への変更に費用がかかるホームページの設計の特徴についてお伝えします。
「自分のホームページはスマホ対応しやすいのかどうか？」
「結構前に作ってもらったホームページだけど、今さらスマホ対応化できるのだろうか？
ホームページを作り直した方が早いのではないか？」
そうした疑問をお持ちの方もたくさんいらっしゃいます。
今現在のホームページの作りによって、スマホ対応化しやすいものとしにくいものがあります。
ホームページのスマホ対応変換ツールなどもあるようですが、ホームページのスマホ対応化は想像以上に一筋縄ではいきません。
ホームページのスマホ対応にあたって、ホームページのレイアウトを縦型にするレスポンシブ化のみで対応できる仕様のものや、レスポンシブ化だけでなくメニュー構造を変更する必要があるもの、本文部分のレイアウト変更も必要なものなどレスポンシブ化だけではスマホ対応化できない仕様のホームページまで、様々なケースが想定されます。
比較的簡単にホームページのスマホ対応ができるものから、根本的なホームページの仕組みをカスタマイズする必要のあるホームページまで、既存ホームページの中でスマホ対応化がしにくいケースについてお伝えしていきます。
既存ホームページをスマホ対応化しにくいケース
ゼロからホームページ制作を行う場合は、ホームページのスマホ対応の仕様の選択ができますが、既存ホームページをスマホ対応化する場合は、現在のホームページの仕様・設計によって、カスタマイズしにくいケースがあります。
ホームページ制作の技術的な面のお話になりますが、スマホ対応しにくいホームページの仕様の代表例は、ブロック要素にidやclassがついていない場合や要素にスタイルが直書きしてあったりWordPressテーマ設定が直に吐き出すケースです。
これらはホームページのレイアウトに関するレスポンシブデザインに関係しています。
- 要素にidやclassがついていない
- 要素にスタイルが直書きしてある
- WordPressテーマ・プラグインにより幅設定などが直に吐き出されている
その他、古いタイプのテンプレートに多かった、ホームページ全体にテーブルを利用したホームページの設計（コンテンツ部分に挿入する表としてのテーブルではなくサイト全体）などが該当します。
新規ホームページ制作においてこうしたホームページの仕様は現在ではほとんど見られないと思いますが、Googleのモバイルフレンドリーアップデート以前から利用されているホームページであれば、こうした仕様のものも現役であるケースもよくあります。
この仕様では簡単にはレスポンシブ変換できない
既存ホームページをスマホ対応ホームページへと変換するツールなどがあるようですが、おそらくこうしたブロック要素などの仕組みがしっかりしていないと、単純にはレスポンシブレイアウトに変換できないのではないかと考えています。
その他、テンプレートでテーブルの仕組みを利用しているものであれば、テーブル自体をレスポンシブ化する必要があります。
通常は汎用ブロック要素である<div>などでホームページのレイアウトが構成されていますが、古いタイプのホームページテンプレートでは、<table>などで全体レイアウトを設計しているものがあります。
こうした場合は、無理やりtableをレスポンシブレイアウトに変更することでホームページをスマホ対応化することもできますが、基本的な枠組み自体をブロック要素などに変更したほうが、後々のカスタマイズの市やすさなどを含めて何かと利点が多いと考えられます。
ブロック要素にidやclassがついていない
ホームページをスマホ対応にする基本的なポイントはホームページのレイアウト構造です。
スマートフォン表示用のホームページレイアウト設計は、原則としてサイドバーなしのワンカラムです。
ホームページをワンカラム表示する方法は以前の記事でご紹介した、レスポンシブウェブデザイン、動的配信によるページの振り分け、異なるURLでのページ運用の3つですが、ホームページをレスポンシブ化する場合は、通常ホームページを構成するブロック要素のid、classに応じてCSSのメディアクエリで修正パッチのようにスマホ表示用の横幅などを指定していきます。
この仕組を利用することで、サイドバーをコンテンツ部分の下に回り込ませつつ、コンテンツ部分もサイドバー部分も横幅をスマートフォン画面の横幅いっぱいにまで広げることができます。
しかしながら、要素に横幅などを指定するスタイルが直書きしてあるケースや外部CSSを上書きする形でhead部にスタイルが直書きしてあるケースでは、CSSのメディアクエリ指定よりも優先されてしまい、スマホ対応化できないという場合があります。
この場合、直書きや上書きされているものを修正することから始める必要が出てきます。
要素にスタイルが直書きしてあるケース
一般的にはこうしたブロック要素にIDなどを付けておいて、CSS側で該当IDの要素に関する指定を行いますが、ホームページのレイアウト構造を記述するにあたり、ブロック要素等の要素にidやclassついておらず、横幅や縦幅の指定を要素に直書きしてあるケースがあります。
ホームページをスマホ対応化していくためには、スマートフォンなどのモバイルデバイスからのアクセスであることを認識して、ブロック要素に紐付いているCSSをスマートフォン用のものに適応し直させる必要があります（メディアクエリですね）。
しかしながら、ブロック要素にスタイルが直書きされていると、そうした「PC用のCSS設定」、「スマートフォン用のCSS設定」の振り分けができません。
こうした仕様のホームページがスマホ対応化のカスタマイズがしにくいホームページの代表例です。
外部CSSを上書きする形で、ヘッドにスタイルが直書き
また古いWordPressテーマなどでありがちですが、外部CSSでメディアクエリ（スマートフォン用のスタイルを定義するもの）をせっかく設定しても、WordPressテーマの「カスタマイズ（カスタマイザー）」でスタイルの設定をヘッドの部分に直で吐き出すタイプのものがあると、少し別の工夫をしないと、メディアクエリがこのスタイルにさらに上書きされてしまうという事が起こります。
いわばホームページのスマホ対応用に、せっかくCSSを調整したのに、テーマのカスタマイザーの設定に上書きされて反映されないという事が起こります。
こうした場合は、CSSの設定以外にも調整が必要になるため、ホームページのスマホ対応費用が少し高くなります。
静的HTMLでホームページ制作がなされているケース
静的HTMLのスマホ対応の場合、HTMLを全て記述し直す必要がある
要素にid、classがなく、HTMLにスタイルが直書きされている場合は、HTML側の記述を変更する必要があります。
この場合、ホームページをphpで制作されていた場合は、ヘッダーやフッター、サイドバーなどは一つのファイルを使っているケースが多いため、一括の編集ができますが、全て静的HTMLで作成されていた場合は、その全てのHTMLの該当部分を編集する必要が生じます。
ホームページの該当箇所にidやclassが予め設置されており、それを書き換えるのであれば、作業は楽な場合もありますが、そもそもidやclassがついていない場所に新規で設置する場合は手作業の分量が膨大になる場合があります。
静的HTMLで、さらに異なるテンプレートがたくさんある場合、その種類やページ数に応じて、カスタマイズ・修正費用の見積額が高くなっていきます。
WordPressなどでホームページ制作がなされているケース
phpベースのため、WordPressサイトのスマホ対応は比較的簡単
WordPressなどであれば、テーマファイルはphpで作成されているため、カラムが分割されているコンテンツ部分とサイドバー部分に関する横幅の修正が比較的簡単に修正可能です。
静的HTMLでホームページ制作がなされているケースでは、ページ数に応じてカスタマイズ費用が高くなっていきますが、修正ファイル数が少なくて済むため、WordPressサイトなどでは比較的安価でスマホ対応サイトへと変更することができます。
ボタンなどが画像で制作されている
ホームページ中のボタンなどが画像で制作されている場合、スマホ対応には画像そのものの変更などが必要になることも
以前「より優れたモバイルフレンドリーサイトのために 画像編」でも少しお伝えしていますが、ホームページに設置している画像内のテキストの大きさがユーザー目線での狭義のモバイルフレンドリーを考えた場合には、マイナス要因となることがあります。
ホームページ中の画像の中に文字が埋め込まれていた場合、スマートフォンの画面に合わせて画像が縮小されれば当然に文字も小さくなるため、読みにくくなってしまうというものです。
ページ内設置画像の中の文字であればそれほど影響はないかもしれませんが、ホームページのメニューボタンが画像で作成されている場合は要注意です。
重要なページへのボタンが読みづらく、ユーザーの操作性がかなり下がってしまうからです。
また、ホームページの画像素材の影響でホームページのレイアウト面に関してもうまくスマホ対応化することができないケースがあります。
ページ内の画像の埋め込みにおいて、コンテンツ部分などへの<img>タグの使用であればスマホ対応はしやすいですが、ヘッダーグローバルメニューやサイドバーメニューにおいて「バックグラウンドイメージ」として該当ブロック要素に埋め込んである場合は、修正作業に手間がかかるケースがありますので、モバイルフレンドリー化の費用が高額になるケースもあります。
また、「ホームページ素材の特殊加工 画像ボタンの再作成」でお伝えしていますが、ホームページ内の画像設置は修正が困難なケースがほとんどです。
ホームページ制作時の設置画像に関する元データを保有している場合は修正がしやすいですが、こうした現在のホームページを制作した時のデータが残っていなかったり、制作者が不在になったりといったったケースでは、画像の再作成が必要なシーンで元データがないため、全てを作り変えるか無理やり類似画像を作成するしかありません。
要素のバックグラウンドイメージとして画像が埋め込んであるケース
要素のバックグラウンドイメージとして画像が埋め込んであるケースでは、スマートフォン表示の際に埋め込み画像が影響するためホームページを完全にはスマホ対応することができない。
ホームページのサイドバーなどにおいてブロック要素のバックグラウンドイメージ（背景画像）として画像が埋め込んであるケースでは、この背景画像そのものの横幅に影響されてホームページのスマホ表示に横幅のバランスが崩れることがあります。
例えば、ホームページのスマホ対応にあたり、ホームページをレスポンシブ化しても、下に回り込んだサイドバー部分の背景画像が横幅400px出会った場合、iPhone4やiPhone5などは横幅が320px、iPhone6でも375pxなので、最大幅以上に占有することになります。
この時ホームページのスマートフォン表示の際の挙動としては、400pxに合わせて、その他の部分を相対的に小さくするか、400pxの一部が切れる形になります（大半のケースでその他の部分を縮小します）。
HTML側で<img>として画像を埋め込んでいる場合は、イメージに対するメディアクエリで一括対応することができますが、CSS側で指定した画像はCSS側で対応する必要があります。
CSSでは背景画像そのものに対する縮小の設定はできないため、画像そのものを縮小し、別ファイルとしてアップロードした上で、メディアクエリで対応しながら個別に再設定する必要があります。
この場合、画像の縮小だけで済めばよいのですが、縮小やトリミングによって画像の中のテキストがあまりに小さくなってしまうケースもあります。
こうした場合が、該当画像の再作成が必要になるため、いっそのこと類似画像で全て入れ替えるという方法のほうが簡単なケースもあります。
スマホ対応後のホームページ運用・アップデートを考えれば、画像の入れ替え時にテキストを含んだボタンは背景画像としての設置を極力少なくした方がいいでしょう。
画像内に余白が組み込まれているケース
画像内の余白が入っている場合、CSSソースの変更ではホームページを完全にスマホ対応することはできない。
Googleのモバイルフレンドリーテストの合格という面では特に問題がないのですが、実際のWebデザインの見栄えとして、ホームページのスマホ対応が不完全だったケースをご紹介します。
モバイルフレンドリーのチェック項目として、画像ボタン（画像リンク）の余白の問題があり、誤タップの原因となるような近すぎるリンクはマイナスポイントとなります。
そこで、ホームページのスマホ対応化にあたっては、横並びボタンを縦並びに変更したりなど、ボタンのタップのしやすさのために配置を変更することがよくあります。
この時、ホームページの横並びメニューとしての画像が「横並び」だった時は問題のなかった「ボタンの左右の余白」が問題になることがあります。
横に並べた画像が縦並びになった時に、画像の左右の余白の影響でボタンがガタガタに見えるという感じです。
実際にあったメニューボタンの余白ズレのケース
実際にあったケースでは、ボタンの作成時に画像ボタンの両端に白や透明で余白を設置しており、その余白が1px程度の範囲ですが、それぞれ若干ずれていました。
このボタンが横並びの時は特に問題にならなかったのですが、縦並びに変更した時に、余白の幅がバラバラ（といっても1pxくらいの単位です）だったので、縦並び時に並びがガタガタに見えてしまうということが起こりました。
この場合には、修正の際に画像そのものについている余白をトリミングし、再設置してマージンを設定していく必要があります。こうした作業が必要になった場合、どうしてもホームページのスマホ対応費用が少し高くなります。
スマホ対応変換ツール
ID、classがなく、HTMLにスタイルが直書きしてある場合など、こうした仕様のホームページは、スマホ対応変換ツールで、モバイルフレンドリー化しようと思ってもうまくいかないケースがあると考えることができます。
またそうしたスマホ対応変換ツールで、ホームページのレイアウトがレスポンシブ化したとしても、完全なモバイルフレンドリーサイトとはいえません。モバイルフレンドリーはあくまで「ユーザーの使い勝手」を目的としたものであるからです。
設置画像のテキストが読めない状況では、SEOとしてのモバイルフレンドリーテストに合格はできても、最終的な対象者であるユーザーに対する使い勝手は悪いままになります。
そして、その後の運用がしやすいホームページのスマホ対応を行うべきだと考えています。
今あるホームページをスマホ対応にして、新しくページを配信する時に、変な手間があるとコンテンツ配信にブレーキがかかってしまうからです。結果が同じなら手間は最小限にしておくほうが賢明です。
現状のホームページをスマホ対応化するだけでなく、今後増やしていくページに関しても自動的にスマホ対応ページとして配信していけるようにすることで、無駄な煩いと手間を減らすことができます。
時代の流行りやモバイルSEOのためだけではなく、ホームページをWebマーケティングのためのひとつのツールとして考え、ユーザーへの配慮や運用のしやすさを第一に検討すべきでしょう。
何度も変換する手間
固定的なホームページであれば一度の変換で済むかもしれませんが、頻繁にホームページアップデートを繰り返す場合は（もちろんホームページのWebマーケティング効果を向上させたい場合はそれが普通です）、こうしたスマホ対応変換の手間は無駄な時間を使うことになります。
また、スマホサイトサービスでは、現在のホームページをレスポンシブ対応にして、別ドメインで運用しているケースもあるようです。
スマホ変換ツールで毎回変換するのも面倒ですが、こうしたサービスで確かに見栄えはスマートフォンサイトが出来上がりますが、SEOを考える上で、重複コンテンツ問題が生じます。
ホームページのスマホ対応変換サービス
またホームページのスマホ対応化に向けて、現状のホームページを特に操作しないままスマホ変換サービスを提供している業者もあるようですが、場合によってSEOなどの危険性を持っている場合があります。
弊社のお客さまの事例で実際にあったケースですが、月額制の既存ホームページのスマホ変換サービス、スマホ対応化サービスがあり、実際にその仕組を確認したところ様々な問題を抱えていたというケースがありました。
既存ホームページをスマホ対応ホームページに変換するサービスやツールの危険性と問題点については次のページをご参照ください。
Webマーケティングのためのスマホ対応サイト
極論を言うと、企業がホームページを利用し、スマホ対応へのニーズを持つときは、単に「スマホ対応サイト」が欲しいわけではなく、スマホ対応サイトをモバイルユーザーに見てもらって、Webマーケティング活動を行い、結果として企業の売上を向上させることが目的のはずです。
そう考えれば、見栄えだけのスマホサイトを運用していても、それが重複コンテンツであり、インデックス対象とならず、検索エンジンの検索結果に出ないのであれば本末転倒です。
ホームページのスマホ対応に関してはそのようなことも念頭に置いていただければと思います。
以上、今回は、スマホ対応化へのカスタマイズがしにくいホームページの仕様についてお伝えしました。
ホームページ制作 京都 ファンフェアファンファーレでもホームページをスマホ対応化する「モバイルフレンドリー化サービス」を提供しています。
スマホ対応変換ツールでうまくいかなかったホームページやカスタマイズの再修正や、現在利用しているホームページのスマホ対応を試みたもののうまくいかなかった場合はご相談ください。
ホームページのスマホ対応にかかるモバイルフレンドリー化サービス料金は、現在のホームページの仕様によって変動します。場合によってはWordPress化などのほうがお安くなる場合があります。詳しくはお問い合わせください。
ホームページのスマホ対応について（詳細） ホームページのスマホ対応
既存ホームページのモバイルフレンドリー化（スマホ対応への変更）についてと価格表など
（初回投稿日 2017年3月28日）
