スマホ対応化へのカスタマイズがしにくいホームページの仕様

スマホ対応化へのカスタマイズがしにくいホームページの仕様


少し前、「ホームページのスマホ対応とその後の運用を考えた設計 」で少しお伝えしましたが、ホームページのスマホ対応にあたり、現状のホームページがモバイルフレンドリーサイトでないものから、スマホ対応サイトへと修正する際に、スマホ対応化へのカスタマイズがしにくいホームページの仕様があります。

今回は、そんなホームページのスマートフォン表示最適化への変更に費用がかかるホームページの設計の特徴についてお伝えします。

今現在のホームページの作りによって、スマホ対応化しやすいものとしにくいものがあります。

比較的簡単にホームページのスマホ対応ができるものから、根本的なホームページの仕組みをカスタマイズする必要のあるホームページまで、既存ホームページの中でスマホ対応化がしにくいケースについてお伝えしていきます。

既存ホームページをスマホ対応化しにくいケース

既存ホームページをスマホ対応化しにくいケース

ゼロからホームページ制作を行う場合は、ホームページのスマホ対応の仕様の選択ができますが、既存ホームページをスマホ対応化する場合は、現在のホームページの仕様・設計によって、カスタマイズしにくいケースがあります。

スマホ対応しにくいホームページの仕様の代表例は、ホームページ制作の技術的な面のお話になりますが、ブロック要素にidやclassがついていない場合や要素にスタイルが直書きしてあったりWordPressテーマ設定が直に吐き出すケースです。

その他、古いタイプのテンプレートに多かった、ホームページ全体にテーブルを利用したホームページの設計(コンテンツ部分に挿入する表としてのテーブルではなくサイト全体)などが該当します。

新規ホームページ制作においてこうしたホームページの仕様は現在ではほとんど見られないと思いますが、モバイルフレンドリーアップデート以前から利用されているホームページであれば、こうした仕様のものも現役であるケースもよくあります。

この仕様では簡単にはレスポンシブ変換できない

既存ホームページをスマホ対応ホームページへと変換するツールなどがあるようですが、おそらくこうしたブロック要素などの仕組みがしっかりしていないと、単純にはレスポンシブレイアウトに変換できないのではないかと考えています。

その他、テンプレートでテーブルの仕組みを利用しているものであれば、テーブル自体をレスポンシブ化する必要があります。

通常は汎用ブロック要素である<div>などでホームページのレイアウトが構成されていますが、古いタイプのホームページテンプレートでは、<table>などで全体レイアウトを設計しているものがあります。

こうした場合は、無理やりtableをレスポンシブレイアウトに変更することでホームページをスマホ対応化することもできますが、基本的な枠組み自体をブロック要素などに変更したほうが、後々のカスタマイズの市やすさなどを含めて何かと利点が多いと考えられます。

ブロック要素にidやclassがついていない

ブロック要素にidやclassがついていない

ホームページをスマホ対応にする基本的なポイントはホームページのレイアウト構造です。

スマートフォン表示用のホームページレイアウト設計は、原則としてサイドバーなしのワンカラムです。

ホームページをワンカラム表示する方法は以前の記事でご紹介した、レスポンシブウェブデザイン、動的配信によるページの振り分け、異なるURLでのページ運用の3つですが、ホームページをレスポンシブ化する場合は、通常ホームページを構成するブロック要素のid、classに応じてCSSのメディアクエリで修正パッチのようにスマホ表示用の横幅などを指定していきます。

この仕組を利用することで、サイドバーをコンテンツ部分の下に回り込ませつつ、コンテンツ部分もサイドバー部分も横幅をスマートフォン画面の横幅いっぱいにまで広げることができます。

要素にスタイルが直書きしてあるケース

一般的にはこうしたブロック要素にIDなどを付けておいて、CSS側で該当IDの要素に関する指定を行いますが、ホームページのレイアウト構造を記述するにあたり、ブロック要素に要素にidやclassついておらず、横幅や縦幅の指定を要素に直書きしてあるケースがあります。

ホームページをスマホ対応化していくためには、スマートフォンなどのモバイルデバイスからのアクセスであることを認識して、ブロック要素に紐付いているCSSをスマートフォン用のものに適応し直させる必要があります(メディアクエリですね)。

しかしながら、ブロック要素にスタイルが直書きされていると、そうした「PC用のCSS設定」、「スマートフォン用のCSS設定」の振り分けができません。

こうした仕様のホームページがスマホ対応化のカスタマイズがしにくいホームページの代表例です。

外部CSSを上書きする形で、ヘッドにスタイルが直書き

また古いWordPressテーマなどでありがちですが、外部CSSでメディアクエリ(スマートフォン用のスタイルを定義するもの)をせっかく設定しても、WordPressテーマの「カスタマイズ(カスタマイザー)」でスタイルの設定をヘッドの部分に直で吐き出すタイプのものがあると、少し別の工夫をしないと、メディアクエリがこのスタイルにさらに上書きされてしまうという事が起こります。

いわばホームページのスマホ対応用に、せっかくCSSを調整したのに、テーマのカスタマイザーの設定に上書きされて反映されないという事が起こります。

こうした場合は、CSSの設定以外にも調整が必要になるため、ホームページのスマホ対応費用が少し高くなります。

静的HTMLでホームページ制作がなされているケース

要素にid、classがなく、HTMLにスタイルが直書きされている場合は、HTML側の記述を変更する必要があります。

この場合、ホームページをphpで制作されていた場合は、ヘッダーやフッター、サイドバーなどは一つのファイルを使っているケースが多いため、一括の編集ができますが、全て静的HTMLで作成されていた場合は、その全てのHTMLの該当部分を編集する必要が生じます。

静的HTMLで、さらに異なるテンプレートがたくさんある場合、その種類やページ数に応じて、カスタマイズ・修正費用の見積額が高くなっていきます。

WordPressなどでホームページ制作がなされているケース

WordPressなどであれば、テーマファイルはphpで作成されているため、カラムが分割されているコンテンツ部分とサイドバー部分に関する横幅の修正が比較的簡単に修正可能です。静的HTMLでホームページ制作がなされているケースでは、ページ数に応じてカスタマイズ費用が高くなっていきますが、修正ファイル数が少なくて済むため、WordPressサイトなどでは比較的安価でスマホ対応サイトへと変更することができます。

ボタンなどが画像で制作されている

ボタンなどが画像で制作されている

以前「より優れたモバイルフレンドリーサイトのために 画像編」でも少しお伝えしていますが、ホームページに設置している画像内のテキストの大きさがユーザー目線での狭義のモバイルフレンドリーを考えた場合には、マイナス要因となることがあります。

また、ホームページの画像素材の影響でホームページのレイアウト面に関してもうまくスマホ対応化することができないケースがあります。

ページ内の画像の埋め込みにおいて、コンテンツ部分などへの<img>タグの使用であればスマホ対応はしやすいですが、ヘッダーグローバルメニューやサイドバーメニューにおいて「バックグラウンドイメージ」として該当ブロック要素に埋め込んである場合は、修正作業に手間がかかるケースがありますので、モバイルフレンドリー化の費用が高額になるケースもあります。

また、「ホームページ素材の特殊加工 画像ボタンの再作成」でお伝えしていますが、ホームページ内の画像設置は修正が困難なケースがほとんどです。

ホームページ制作時の設置画像に関する元データを保有している場合は修正がしやすいですが、こうした現在のホームページを制作した時のデータが残っていなかったり、制作者が不在になったりといったったケースでは、画像の再作成が必要なシーンで元データがないため、全てを作り変えるか無理やり類似画像を作成するしかありません。

要素のバックグラウンドイメージとして画像が埋め込んであるケース

ホームページのサイドバーなどにおいてブロック要素のバックグラウンドイメージとして画像が埋め込んであるケースでは、この背景画像そのものの横幅に影響されてホームページのスマホ表示に横幅のバランスが崩れることがあります。

例えば、ホームページのスマホ対応にあたり、ホームページをレスポンシブ化しても、下に回り込んだサイドバー部分の背景画像が横幅400px出会った場合、iPhone4やiPhone5などは横幅が320px、iPhone6でも375pxなので、最大幅以上に占有することになります。

この時ホームページのスマートフォン表示の際の挙動としては、400pxに合わせて、その他の部分を相対的に小さくするか、400pxの一部が切れる形になります(大半のケースでその他の部分を縮小します)。

HTML側で<img>として画像を埋め込んでいる場合は、イメージに対するメディアクエリで一括対応することができますが、CSS側で指定した画像はCSS側で対応する必要があり、CSSでは背景画像そのものに対する縮小の設定はできないため、画像そのものを縮小し、別ファイルとしてアップロードした上で、メディアクエリで対応しながら個別に再設定する必要があります。

この場合、画像の縮小だけで済めばよいのですが、縮小やトリミングによって画像の中のテキストがあまりに小さくなってしまうケースもあります。

こうした場合が、該当画像の再作成が必要になるため、いっそのこと類似画像で全て入れ替えるという方法のほうが簡単なケースもあります。

スマホ対応後のホームページ運用・アップデートを考えれば、画像の入れ替え時にテキストを含んだボタンは背景画像としての設置を極力少なくした方がいいでしょう。

画像内に余白が組み込まれているケース

Googleのモバイルフレンドリーテストの合格という面では特に問題がないのですが、実際のWebデザインの見栄えとして、ホームページのスマホ対応が不完全だったケースをご紹介します。

モバイルフレンドリーのチェック項目として、画像ボタン(画像リンク)の余白の問題があり、誤タップの原因となるような近すぎるリンクはマイナスポイントとなります。

そこで、ホームページのスマホ対応化にあたっては、横並びボタンを縦並びに変更したりなど、ボタンのタップのしやすさのために配置を変更することがよくあります。

この時、ホームページの横並びメニューとしての画像が「横並び」だった時は問題のなかった「ボタンの左右の余白」が問題になることがあります。

実際にあったケースでは、ボタンの作成時に画像ボタンの両端に白や透明で余白を設置しており、その余白が1px程度の範囲ですが、それぞれ若干ずれていました。

このボタンが横並びの時は特に問題にならなかったのですが、縦並びに変更した時に、余白の幅がバラバラ(といっても1pxくらいの単位です)だったので、縦並び時に並びがガタガタに見えてしまうということが起こりました。

この場合には、修正の際に画像そのものについている余白をトリミングし、再設置してマージンを設定していく必要があります。こうした作業が必要になった場合、どうしてもホームページのスマホ対応費用が少し高くなります。

スマホ対応変換ツール

スマホ対応変換ツール

ID、classがなく、HTMLにスタイルが直書きしてある場合など、こうした仕様のホームページは、スマホ対応変換ツールで、モバイルフレンドリー化しようと思ってもうまくいかないケースがあると考えることができます。

またそうしたスマホ対応変換ツールで、ホームページのレイアウトがレスポンシブ化したとしても、完全なモバイルフレンドリーサイトとはいえません。

設置画像のテキストが読めない状況では、SEOとしてのモバイルフレンドリーテストに合格はできても、最終的な対象者であるユーザーに対する使い勝手は悪いままになります。

そして、その後の運用がしやすいホームページのスマホ対応を行うべきだと考えています。

時代の流行りやモバイルSEOのためだけではなく、ホームページをWebマーケティングのためのひとつのツールとして考え、ユーザーへの配慮や運用のしやすさを第一に検討すべきでしょう。

何度も変換する手間

固定的なホームページであれば、一度の変換で済むかもしれませんが、頻繁にホームページアップデートを繰り返す場合は(もちろんホームページのWebマーケティング効果を向上させたい場合はそれが普通です)、こうしたスマホ対応変換の手間は無駄な時間を使うことになります。

また、スマホサイトサービスでは、現在のホームページをレスポンシブ対応にして、別ドメインで運用しているケースもあるようです。

スマホ変換ツールで毎回変換するのも面倒ですが、こうしたサービスで確かに見栄えはスマートフォンサイトが出来上がりますが、SEOを考える上で、重複コンテンツ問題が生じます。

ホームページのスマホ対応変換サービス

またホームページのスマホ対応化に向けて、現状のホームページを特に操作しないままスマホ変換サービスを提供している業者もあるようですが、場合によってSEOなどの危険性を持っている場合があります。

弊社のお客さまの事例で実際にあったケースですが、月額制の既存ホームページのスマホ変換サービス、スマホ対応化サービスがあり、実際にその仕組を確認したところ様々な問題を抱えていたというケースがありました。

既存ホームページをスマホ対応ホームページに変換するサービスやツールの危険性と問題点については次のページをご参照ください。

ホームページのスマホ変換サービスに要注意

Webマーケティングのためのスマホ対応サイト

極論を言うと、企業がホームページを利用し、スマホ対応へのニーズを持つときは、単に「スマホ対応サイト」が欲しいわけではなく、スマホ対応サイトをモバイルユーザーに見てもらって、Webマーケティング活動を行い、結果として企業の売上を向上させることが目的のはずです。

そう考えれば、見栄えだけのスマホサイトを運用していても、それが重複コンテンツであり、インデックス対象とならず、検索エンジンの検索結果に出ないのであれば本末転倒です。

ホームページのスマホ対応に関してはそのようなことも念頭に置いていただければと思います。

以上、今回は、スマホ対応化へのカスタマイズがしにくいホームページの仕様についてお伝えしました。

ホームページ制作 京都 ファンフェアファンファーレでもホームページをスマホ対応化する「モバイルフレンドリー化サービス」を提供しています。

スマホ対応変換ツールでうまくいかなかったホームページやカスタマイズにヨテ現在利用しているホームページのスマホ対応を試みたもののうまくいかなかった場合はご相談ください。

ホームページのスマホ対応にかかるモバイルフレンドリー化サービス料金は、現在のホームページの仕様によって変動します。場合によってはWordPress化などのほうがお安くなる場合があります。詳しくはお問い合わせください。

ホームページのスマホ対応について(詳細) ホームページのスマホ対応

既存ホームページのモバイルフレンドリー化(スマホ対応への変更)についてと価格表など

モバイルフレンドリー(スマートフォン最適化)


「スマホ対応化へのカスタマイズがしにくいホームページの仕様」のカテゴリ Web制作・Web関連
タグ: , , , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら