何年も前に作ったWebサイトを、次のような状態のまま使い続けていませんか。
- スマホで見ると、文字が小さく、横にスクロールしないと読めない
- 更新のしかたを知っている人が、社内に1人しかいない（または誰もいない）
- 文章を1行変えるにも、HTMLファイルを書き換えてFTPでアップロードしている
- サイトを作った制作会社と、連絡が取れない
この記事では、このような古いサイトを、今のHTML・CSSを活かしてWordPressへ移し、社内の誰でも更新できる状態にする方法を解説します。全部を作り直すのではなく、「まず、そのまま移す」「次に、スマホ対応を補正する」の2段階で進めるのがポイントです。
この記事のまとめ
- 最初に、サーバーとドメインの契約者とログイン情報を確認します。制作会社の名義になっていることもあります。
- 「そのままWordPressへ移す」→「スマホ対応を補正する」→「更新する人と手順を決める」の順に進めると、サイトを止めずにリニューアルできます。
- 目的は、見た目を移すことだけではありません。WordPressの管理画面から、誰でも文章や画像を更新できる状態にすることです。
目次
古いサイトでよくある状態と、WordPressへ移して変わること
| 今の状態 | WordPressへ移したあと |
|---|---|
| スマホに対応していない | スマホ用のレイアウトを加えて、スマホでも読みやすくできる |
| 決まった人しか更新できない | 管理画面から、文章や画像を更新できる |
| FTPでHTMLを書き換えている | ブラウザで編集し、プレビューで確かめてから公開できる。変更の履歴も残る |
| 制作会社と連絡が取れない | 自社で管理できる（先にサーバーとドメインの契約を確認する） |
始める前に確認すること
- サーバーとドメインの契約者と、管理画面のログイン情報（制作会社の名義になっていないか）
- FTPなど、サーバーにファイルを置くための接続情報
- 今のサイトのファイル一式のバックアップ
- お問い合わせフォームの仕組み（サーバーのプログラムでメールを送っている場合、WordPressでは別の仕組みに置き換えます）
- アクセス解析のタグと、Search Consoleの設定
- 同じドメインで使っているメール（MXレコード）
サーバーやドメインの契約者が制作会社になっている場合は、名義の変更やドメインの移管が必要になることがあります。移行の作業より先に、契約している会社に確認しましょう。
ステップ1：まず、そのままWordPressへ移す
最初から全部を作り直すと、時間も費用もかかり、その間は古いサイトを使い続けることになります。まずは今の見た目のまま、WordPressへ移すところから始めます。
方法は、HTMLサイトをWordPress化する方法で紹介した4つ（テーマにする、固定ページに組み込む、作り直す、自動変換ツールで取り込む）から選びます。WPSitePortなら、公開中のページのURLを入れてコピーし、元のHTML・CSSを保ったまま、WordPressのページにできます。
ステップ2：スマホ対応を補正する
古いサイトは、PCの画面を前提に、横幅を固定して作られていることがよくあります。そのままでは、スマホで見ると文字が小さく表示されたり、横にスクロールしないと読めなかったりします。
スマホに対応させるには、主に次のような補正をします。
- ページに viewport の指定（
<meta name="viewport" content="width=device-width, initial-scale=1">）があるか確認する。ないと、スマホではPCと同じ幅で縮小して表示されます - 固定の横幅を、スマホでは画面の幅に合わせる
- 横に並んでいる要素を、スマホでは縦に並べる
- 文字の大きさや余白を、スマホ用に調整する
WPSitePortのビジュアルエディタでは、画面をスマホの表示に切り替えて、幅や文字の大きさなどをスマホ用に変更できます。PCの表示は変わりません。viewport の指定がないページは、プロジェクトの「head用カスタムコード」に追加できます（管理者など、HTMLを自由に編集できる権限が必要です）。
ステップ3：更新する人と手順を決める
WordPressへ移したら、誰がどのように更新するかを決めます。
- 更新する人のアカウントを作る：WordPressのユーザーを、1人ずつ作ります。共有のアカウントを使い回さないようにします
- 権限を決める：WPSitePortのビジュアルエディタは、固定ページを編集できる「編集者」の権限で使えます。ページのコピーや設定の変更は、管理者が行います
- 公開の手順を決める：プレビューで確認してから公開する、公開したら履歴を残す、など
WPSitePortでは、保存した版が履歴に残り、前の版を公開し直すこともできます。
移行の前と後で比べておきたいこと
リニューアルの効果を社内で説明するときは、次の点を移行の前と後で比べておくと伝わりやすくなります。
- PCとスマホの表示：同じページの、移行前と移行後のスクリーンショット
- 更新の手順：文章を1か所直すときの手順（HTMLファイルを編集してFTPでアップロード → 管理画面で書き換えて公開）
- 更新できる人：更新のしかたを知っている人の数
- 更新にかかる時間：お知らせを1件追加する、画像を1枚差し替える、といった作業の時間
見た目をコピーしたことより、「WordPressで誰でも編集できる状態になった」ことが、古いサイトを移行するいちばんの成果です。
開発者コメント
WPSitePort 開発者に聞きました
どの程度なら実務投入できると考えていますか？（抜粋）
このツールだけですべてを終わらせるというより、まず自動変換で大部分を作り、その後必要なところだけ人が調整する、という使い方が、現時点では現実的だと思っています。
例えば、10ページのサイトを最初からWordPressで作り直すのと、自動変換したあと数カ所だけ直すのでは、作業量がかなり変わります。
WPSitePortを無料で試す
無料版は登録なしでダウンロードでき、1ページのコピーと、ビジュアルエディタでの編集をお試しいただけます。今のサイトのページを1ページ、WordPressにコピーして、スマホの表示を直せるか試してみてください。
この記事は、WPSitePortの開発元である株式会社InfraAcademyが作成しました。