「スマホ対応は、テンプレートをスマホ向けのものに替えれば、自分でもできそう」。ホームページ作成サービスのヘルプには、スマホでの表示は自動で調整されると書かれているため、作業は管理画面で数回クリックすれば終わると思われがちです。
ところが、テンプレートやテーマの切り替え、表示の調整で済むのは、作成サービスや、配布されているテーマを使ったWordPressのサイトです。HTMLを直接書いたサイトや、スマホ用に別のURLを持つサイトでは、レイアウトを組み直す作業になります。自分でやるか頼むかは、今のサイトの作りで線を引けます。
本記事では、今のサイトがスマホ対応かの見分け方から、作り別に自分でできる作業と頼む作業、自分で進める手順まで、ホームページの制作を請け負う会社の視点で順を追ってお伝えします。
- スマホ対応できているかは、スマホで開いて文字の大きさと段の並びを見れば分かる
- 作成サービスと配布テーマのWordPressは、表示の確認と調整を自分でできる
- HTMLを直接書いたサイトとスマホ用の別URLがあるサイトは、書き換えを制作会社に頼む
- 切り替えた後は、画像の中の文字や隠れたパーツを、スマホの実機で1ページずつ確かめる
ホームページがスマホ対応かの見分け方
ホームページがスマホ対応できているかは、自分のスマホでサイトを開くと見分けられます。
スマホで開いて確かめる点は次の3つです。当てはまらない項目が1つでもあれば、スマホ対応はできていません。
- 拡大しなくても本文の文字が読める
- パソコンで横に並んでいた段が縦に並んでいる
- 横にスクロールしなくてもページの端まで見える
スマホで読めるかどうかは、お客さんの見やすさだけでなく、検索にも関わります。Googleは、スマホ用のクローラーで読んだモバイル版のページの内容を、インデックスへの登録と順位付けに使っているためです。
※ 出典：Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」
スマホ対応を自分でできるかを分けるサイトの4種類
スマホ対応を自分でできるかは、今のサイトが何で作られているかで決まります。サイトの作りは次の4種類で、種類ごとに自分でできる作業と制作会社に頼む作業が分かれます。
| 自分でできる作業 | 制作会社に頼む作業 | |
|---|---|---|
| ホームページ作成サービス | スマホ表示の確認と調整（テンプレートを替えられるサービスでは切り替えも） | 作業の時間が取れないときの代行 |
| WordPress | 配布されているテーマへの切り替えと表示の確認 | 独自のテーマや追加したCSSの書き換え |
| HTMLを直接書いたサイト | スマホでの表示の確認 | CSSの書き直しか作り直し |
| スマホ用の別URLがあるサイト | 2つのサイトの内容がそろっているかの確認 | 1つのサイトへのまとめ |
作業が管理画面の設定で終わるサイトは、自分で進められます。HTMLやCSSを書き換えたり、URLを整理したりする作業になるサイトは、社内に書き換えられる人がいなければ制作会社に頼みます。
ホームページ作成サービスのサイト
ホームページ作成サービスで作ったサイトは、スマホ対応の作業のほとんどを自分でできます。Wixはパソコン向けのサイトの内容からモバイル版を自動で作り、WordPress.comは提供しているテーマをすべてモバイル対応にしています。
自分でする作業は、スマホでの表示を確かめて直すことです。Wixのモバイルエディタで変えた見た目はパソコン版に影響しないため、パソコン版を崩さずに、スマホでの文字の大きさやセクションの並びを整えられます。
古いテンプレートでスマホの表示が崩れるときは、テンプレートを替えます。ただしWixでは、今のサイトの内容を保ったまま別のテンプレートへ移せないため、スマホ表示の調整で直します。Googleも、WixやBloggerなどのサービスで今のテーマを直せないなら、モバイル フレンドリーな新しいテーマを探すよう案内しています。
※ 出典：Wix ヘルプセンター「Wix エディタ：モバイルエディタについて」、WordPress.com「サイトをモバイル端末対応にする」
WordPressのサイト
WordPressで作ったサイトは、使っているテーマが配布されているものか、制作会社が独自に作ったものかで、自分でできる範囲が変わります。テーマの名前は、管理画面の［外観］→［テーマ］で確かめられます。
配布されているテーマなら、スマホ対応をうたうテーマに替える作業を自分で進められます。注意したいのは、テーマに合わせて書き足したCSSです。WordPress.comのヘルプには、追加したCSSはテーマに固有のもので、テーマを替えると引き継がれないと書かれています。CSSで見た目を細かく直しているサイトほど、替えた後に直す箇所が増えます。
制作会社が独自に作ったテーマは、替えるとデザインがまるごと変わります。今のデザインのままスマホに合わせる作業は、テーマのファイルの書き換えになり、制作会社に頼む範囲です。
HTMLを直接書いたサイト
HTMLを直接書いて作ったサイトのスマホ対応は、テンプレートの切り替えではなく、CSSの書き直しになります。Googleがすすめるレスポンシブ デザインは、同じURLで同じHTMLを返しながら、画面の大きさに応じて表示を変える作りです。
パソコンの画面の幅で組んだレイアウトを、画面の幅で変わるように書き換える量は、ページが多いほど増えます。社内にHTMLとCSSを書き換えられる人がいなければ、制作会社に書き換えを頼むか、作り直すかを比べて決めます。
スマホ用の別URLがあるサイト
スマホ用にm.example.comのような別のURLでサイトを持っている場合、自分でできるのは、2つのサイトの内容がそろっているかの確認までです。Googleはこの作りも認めていますが、両方のサイトに同じ内容とtitle要素、メタディスクリプションを載せ、rel=canonicalとrel=alternateで2つのURLを結ぶよう案内しています。
スマホ用のサイトで文章を減らしていると、Googleが読む情報も減ります。Googleは、モバイル版の内容をパソコン版より意図的に少なくしているサイトでは、ある程度のアクセスの減少が予想されるとしています。
2つのサイトを1つにまとめると、スマホ用のURLはなくなります。そのURLへのリンクやブックマークから来た人をどのページへ送るかまで決める作業になるため、制作会社に頼む範囲です。
自分でスマホ対応を進める4つの手順
作成サービスやWordPressのサイトを自分でスマホ対応にするときは、次の4つの手順で進めます。切り替える前に今の表示を残しておくと、切り替えた後に崩れた箇所を見比べて探せます。
お客さんがよく見るページをスマホで開き、画面を保存します。トップページと、料金や予約の方法、問い合わせ先を載せたページから残します。
WordPressでは、スマホ対応をうたうテーマを選びます。公式のテーマディレクトリでは、テーマの紹介ページからデモを開いて見た目を確かめられます。今のテンプレートのままモバイル版を直せる作成サービスでは、この手順は要りません。
WordPressのブロックテーマは、有効化する前にサイトエディターのライブプレビューで、今のページの表示を確かめられます。Wixでは、エディタ上部の［モバイル］アイコンからモバイルエディタに切り替え、スマホでの見た目を確かめながら直します。
切り替えた後は、最初に保存した画面と並べて、スマホの実機で1ページずつ確かめます。
※ 出典：WordPress.org「Work with themes」
スマホ対応の後に実機で確かめる4つの項目
テーマやテンプレートを替えた後に、スマホの実機で確かめる項目は次の4つです。
- 画像の中の文字：文字を入れた画像は、小さい画面で文字が途中で切れることがある
- 文字の大きさ：ピクセルで指定した文字は、画面の大きさに合わせて変わらない
- 隠れたパーツ：Wixでは、マウスを重ねたときの動きや外部のアプリが、モバイル版で自動的に隠れる
- メニューのリンク：テーマを替えた後は、メニューに正しい項目が並び、正しいページにつながっているかを見る
文字が切れる画像は、画像の上に文字を重ねる形に直すと、画面の幅に合わせて文字が調整されます。WordPressではカバーブロックで画像の上に文字を載せ、ピクセルで指定した文字はemやremで指定し直します。
Wixで隠れたパーツに予約や問い合わせの入口が含まれていたら、モバイルエディタの［非表示のパーツ］から表示し直します。
Web担当者プレビューで崩れていなければ、スマホ対応はそこで終わりにしてもいいですか？
Writers-hub編集部
プレビューやパソコンのChromeのデバイスモードは、スマホでの見え方を近い形で再現したものです。Chromeの公式の説明でも、迷ったときはスマホで実際に開くのが最善とされています。お客さんがよく見るページだけでも、自分のスマホで開いて4つの項目を確かめてください。
※ 出典：WordPress.com「サイトをモバイル端末対応にする」、Chrome for Developers「Device Mode でモバイル デバイスをシミュレートする」
制作会社にスマホ対応を頼むときの準備
制作会社にスマホ対応を頼むときは、見積もりを取る前に次の3つをそろえて渡します。3つがそろうと、制作会社はどのページをどこまで書き換えるかを見積もりに入れられます。
- サイトのURL
- サイトを作った方法
- スマホで見にくいページの画面
HTMLを直接書いたサイトや独自のテーマのサイトは、書き換えるページやレイアウトが多いほど、直す費用が上がります。今のサイトを直す見積もりと、作り直す費用を並べて決めます。
作り直す場合の一例として、弊社の小さなお店向けのホームページ制作は、次の料金と条件で、今あるサイトの作り直しにも使えます。
項目 | 内容 |
|---|---|
初期費用 | 0円 |
月額 | 19,800円（税別・最低2年） |
ページの数 | 10ページまで、ブログやお知らせの個別のページは数えない |
打ち合わせ | 毎月30分まで |
文章や写真の差し替え | お店が管理画面で行う |
2年後のサイトとドメイン | お客様のものになる |
2年後の運用（続ける場合） | 月額5,000円（税別）、年払いなら年5万円（税別） |
2年の途中で解約するときは、制作費の残りを払います。
今のサイトを直すか作り直すかで、迷っていませんか
HTMLを直接書いたサイトやスマホ用の別URLがあるサイトは、直す作業がCSSの書き直しやURLの整理になります。滋賀の小さなお店向けのホームページ制作は、今あるサイトの作り直しにも使えます。
ホームページのスマホ対応のよくある質問
ホームページのスマホ対応でよくある2つの質問に答えます。
スマホ対応しないと検索に出ない？
スマホ対応していないサイトも、Googleの検索結果には表示されます。Googleは、モバイル版のページを用意することを、検索結果に表示されるための条件にはしていません。
表示はされますが、Googleはスマホ対応を強くすすめています。スマホ対応が検索順位にどう関わり、サイトの作りごとにどこから直すかは、「スマホのSEO対策とは？サイトの作り方で変わる優先順位を解説」にまとめています。
テーマを替えると今の文章は消える？
テーマを替えても、作ったページや画像は消えません。WordPress.comのヘルプには、テーマを変更しても、既存のページやメディアなどのデータはサイトに残ると書かれています。
ただし、テーマによっては、有効化したときにトップページが新しいテーマのものに置き換わり、元のトップページは下書きに移ります。WordPressのウィジェットは、新しいテーマに置く場所がないと、ウィジェットの画面の「使用停止中のウィジェット」に設定ごと残ります。
※ 出典：WordPress.com「テーマを変更する」、WordPress.org「Manage WordPress widgets」
まとめ｜スマホ対応を自分でするかはサイトの作りで決める
ホームページのスマホ対応を自分でできるかは、今のサイトが何で作られているかで決まります。作成サービスと、配布されているテーマを使ったWordPressのサイトは、テーマの切り替えと実機での確認まで自分で進められます。
HTMLを直接書いたサイトや独自のテーマのサイト、スマホ用の別URLがあるサイトは、CSSの書き直しやURLの整理が要ります。直す見積もりと作り直す費用を並べて、頼む内容を決めます。
私たち合同会社Writers-hubは、滋賀の小さなお店向けに、初期費用0円の月額制でホームページを作っています。
スマホで見にくいサイトの作り直しを、月額で考えてみませんか
滋賀の小さなお店向けのホームページ制作は、月額19,800円（税別・最低2年）で10ページまで作り、毎月30分までの打ち合わせがあります。今あるサイトの作り直しにも使え、2年たつとサイトとドメインはお客様のものになります。
