ホームページをリニューアルしたいと思い立ったものの、手が付けられず数年経過…そんな方はいませんか。同じように2年前からリニューアルを考えていた私ですが、このほどようやく実現！実体験をもとに、いかに効率よく「2日でリニューアルする」ヒントを書いてみたいと思います。
リニューアル作業をラクにするにはテンプレート選びが重要。テンプレートからのアレンジのコツを紹介します
古くなったホームページをどうすればいいのか？
古くなったホームページを放置している会社さんやお店さん、決して少なくありません。それぞれ事情があると思いますが、古いホームページは営業的にもマイナスに働くことが多くあります。
こうしたお客さんの心理……容易に想像できますよね。
記載や価格が古く間違っているなどは当然のこと、デザインが古めかしく見えてしまうのも印象を悪くします。
この私も、個人ブログは更新できていたものの、サイトのほうはデータを壊してしまって以降は更新しないまま2年が経過しました。
ここまでジリジリ後伸ばしにできたのも、すでに「レスポンシブWeb」に対応していた安心感があったから。レスポンシブウェブは、パソコンでも、スマホでも閲覧しやすいデザインに自動で切り替えされるので、お客さんにも無理なく読んでもらえ、見せるのも恥ずかしくないサイトになっていました。しかし最近、事務所を移転したこともあり内容の更新がいよいよ必要です。そこで重い腰をようやっと上げました。
久しぶりの情報更新。気に入っているサイトですが、データがないので更新できません。
リニューアル前のホームページ
使い勝手がよければ全面リニューアルをする必要はありませんが・・・・さようなら、旧サイトさん。
この記事をお読みの悩めるみなさんも、以下のチェックリストをもとに、1つでも当てはまったらゼロから全面リニューアルがおすすめです。
ホームページを全面リニューアルすべきかどうかチェックリスト
- サイト全体がスマートフォンに対応していない
- スマホ用のサイトはあるが、PCサイトと別々で更新が大変
- ツールが古くて使いづらく更新するのがストレス
- 業者に依頼したため、更新の仕方がわかないうえ、運用契約も切れてしまった
- Google アナリティクスを入れたいけれど全ページに手動で入れる必要があり手間
- 情報が散漫してどこになんの情報があるか読み手に伝わりづらい
いかがでしょうか？ 1つでもあれば作り直しが吉！です。
更新しづらい環境のままだと、一生ホームページから成果があがらないと思って、いち早く改善していきましょう！
サイト構成を考えながらテンプレートを眺めよう
今回は、上記のチェックポイントをすべてクリアできるホームページ制作サービスBiNDupを使って、実際にリニューアルした流れに沿ってポイントを紹介していきましょう。
1）テンプレートは「レスポンシブ」を選択
最速でホームページを改修すると決めたら、BiNDupの場合、すぐにテンプレート選びに入ってもOKです。というのも、サイトの構成を考えるにもテンプレートをブラウズしてみると構想がわきやすいからです。
テンプレートを選ぶ際、一般的には自分の業務ジャンルに合わせて選ぶと思いますが、私のオススメの方法は、「すべて」を対象にした上、「レスポンシブ」で絞り込みすること。
このご時世、断然レスポンシブがおすすめですから、それ以外はまずは除外してしまいましょう。腕に覚えがない限り、自分でレスポンシブ化する手間は避けましょう（笑）。
BiNDupのサイトテンプレート選択画面で「すべて」→「レスポンシブ」を選択します。
2）写真ではなく、トップページの構成で決める
次に、選ぶ基準です。
BiNDのテンプレートは美しくついデザインに目移りしてしまいますが、いったんデザインや配色は無視して、「作るのが楽なのはどれか」で選ぶことにします。これは「プレビュー」でサイトを確認せずとも、ざっとサムネール画像を眺めるだけで当たりをつけられます。
そして、楽に作るなら1段組でシンプルなサイトテンプレートが断然オススメです。「サイドバー」のある2段や3段の構成だと、その分メニュー作成の作業が増えますし、掲載コンテンツが少なすぎたときに格好がつかなくなります。無難にすばやく…ということであれば、ここは大きなポイントです。
幸い、1段組スタイルで内容を調整しやすいデザインが多数あります。コーポレートジャンルでは「BC-TEC」（複数ページサイト）、「TOKYO QUality Corporation」（シングルページ）、「Certified Accountant Site」（シングルページ）などですね。
サービスジャンルでは、「Office Miyazaki」（シングルページ）、「MURATA Manipulative Institute」（複数ページサイト）などが1段組スタイルで使いやすいと思います。
なお、「OMG inc」「Kriss Vector Salon」や「Japanese Dining NISHIYAMA」など、印象的なアニメーションで表示される美しいトップページのテンプレートもあります。自社の業務内容にテイストがあっている場合は使いやすいと思いますが、注意したいのは、これらの印象的なデザインは、写真やメニューの数を変更するとデザインの印象が一気に崩れる恐れがあること。素材が良ければ見栄えよく成功すると思いますが、そこまで手が回らず自信がない場合は失敗する可能性も高いです。
3）シングルページか複数ページか？
先ほど（ ）内に記載しましたが、BiNDupには手早く1ページで済ませられる「シングルページサイト」のテンプレートと、より一般的なデザインで、グローバルナビをクリックしてページを遷移する「複数ページサイト」のテンプレートがあります。
シングルページはとにかく最小限の情報のみです。名刺代わりくらいと思ってください。このタイプは「更新してページを増やす」となるとまたゼロから考えないとなりませんのでご注意を。特設サイトだったり、掲載するコンテンツがあまりない場合はシングルページを選ぶ>とよいでしょう。
サイトへのリピーターを望んだりSEOを意識して上げていきたいという場合は、最初から「複数ページサイトを選ぶ」ことをオススメします。
私は、今後コンテンツをブログ機能BiND Pressで増やしたいので、BiND Pressが組み込み済みの複数ページサイトのテンプレート「BC-TECH」のレッドを選びました。うちの名刺はポイントカラーがピンクなので、コーポレートカラーとしては暖色の強い色がいいと判断。
ブログがあらかじめ入っている5ページ構成のサイト。アンカーリンクが細かく切ってあるのも再利用しやすかったです。
テンプレートを見ながら、構想をシミュレーションする
テンプレート選びの後、なかなかその先に進まない方へうまくいく秘訣は、テンプレートのプレビューを見ている最中に「ここにどの写真を入れて、メニュー内容はこれだな」とできあがりの目標を、想像を膨らませてみることです。そこで、テンプレートがどんなにステキでも、コンテンツがはまりにくそうなら作るのに向きません。
たとえば、実際にサイトの素材をはめる気持ちになって「BC-TEC」のトップページをブラウズしてみましょう。
まず、元のテンプレートは「事業内容」が6つもあります。それぞれ写真に対して200文字くらいずつ入れられます。自分の場合は3つ紹介するものがあるので半分削って使えるな、と判断しました。
↑テンプレートでは6つの事業内容。2つや4つの変更ではバランスが悪くなりますが、3つに変更ならデザイン的にも一切修正いりません。
次に「メンバー」は4人並んでいます、これを1人に削ったらおかしくなるでしょうか？ いえ、おそらくセンター揃えにすればおかしくないだろうと想像できるのでこれもセーフ。
こんなふうに、テンプレートを見て「いいデザインかどうか」だけでなく「ここに入れたらどんな雰囲気かな…」と自分のコンテンツに寄せて想像してみることがポイントです。
なおテンプレートの中には使わないコンテンツが含まれていることもあります。
私の場合、ページの下のフッターエリアにあるサイトマップは本来はあったほうがいいのですが、素早く作業を終わらせるために、今回は不要と判断しました…。そんな場合、BiNDupは「非表示」にしておけば、後で必要になったときすぐに着手でき便利なので、削除しないで取っておきましょう。
同様に、グローバルメニューの項目も、とりあえず時間がなければできていないところは「非表示」で公開できるので気が楽です。
作成の手始めに、まずキャッチと写真を入れてみる
まず、やる気を保つためにもトップページのキャッチと写真、ロゴを入れてみましょう。ただ写真を入れただけでも自分のサイトらしくなってくると、俄然とやる気がでます。
また、各ページのトップの写真は「テイストがあっているもの」を選ぶと不思議とサイトのテイストが整います。
テイストを揃えるというのは、単純にいえば同じカメラで撮ったものや同じ作家のアートワークを使うことなどです。レンタルフォトを使う場合も、同じクリエイターのシリーズから選ぶと統一感が出てクオリティが安定します。
↑BiNDの背景画像が使われているテンプレートでは、トップページのビルボード画像をどこで変えるかちょっと戸惑うことがあります。「ページ設定」の中の「背景画像」です。スマホとPCの両方の背景画像を変更しましょう。
私は「自分のサイトには自分で撮った写真を使う」ようにしています。私自身はお店でも作家でもないので特段良い写真を使わなくてもいいと思っているのですが、職業柄、オリジナリティは大切にしたいと思うからです。
視覚を占める大きさからいって、トップの写真は一番大切な部分だとおもいます。いろいろ試行錯誤しながら決めていきたい、難しいけれど楽しい作業パートだと思います。
URLに影響するファイル名を決める
各ページのメインの写真を選ぶうちに、コーナータイトルも決まってきたので、合わせて書き換えておきましょう。
この際、「ファイル名」も確認しておきます。「コーナー名」や「ファイル名」は、URLの末尾で使われるため、内容に適した名前を付けましょう。
実は、URLのファイル名もSEOに関連するという話もあります。何より、内容とファイル名の意味が異なるのは意外に気持ち悪いもの。ずっとあとになって直すと、せっかくリンクをはってもらった被リンクが切れてしまうこともあるので、最初のうちにファイル名を定めましょう。
↑ファイル名を、ページ名に合わせて変更します。意味合いが一致したファイル名のほうが使っていても分かりやすいですし、SEO的にも適していると言われます。
各ページの目処がたったところで各ブロックの写真や原稿を入れ替えるなどしていけば、サイトのほとんどの部分ができあがってきます。
「お問い合わせ」ページのフォームを5分で作る
テンプレートの流れに沿って、「トップページ」や「ミッション」「サービス」など、サイトの基本ページの内容を作成し終わったらコンテンツはほぼOKですが、最低限、設定しておきたいのが「お問い合わせ」ページにあるフォームです。
とはいえ、BiNDupでは「Smooth Contact」という、メッセージ送信やアンケート画面が作れるフォーム機能が標準で使えるのでこれを設定すれば5分で完成します。
BiNDupのテンプレートにお問い合わせフォームのページが挿入されている場合は、ダミーで挿入されているフォームのブロックを開き、「フォーム」パーツを選んで「フォームを編集」を開きます。または、新規でフォームブロックを作成して、「編集」ボタンからSmooth Contactのダイアログウィンドウを開きます。
Smooth Contactのダイアログで「新規フォームを登録」→「フォームテンプレートを選択」します。
私はシンプルなフォームでいいので「簡易お問い合わせフォーム」を使いました。デザインの変更点がなければ、1分でフォーム設定終了です！
また、いわゆるお問い合わせフォームの場合は、閲覧者から送信された内容を即時メールで受信しておきましょう。そのためには、「詳細設定」にある「メールアドレス」に、転送先のメールアドレスを設定しましょう。あとはフォームを「公開」し、ブロック編集画面に適用し、編集画面を閉じます。必ず、実際にフォームでテスト送信して無事に届くかどうか確認することを忘れずに。
ブログのように簡単に投稿できるようにしておく
もう一つ、今回ぜひ設定しておきたいと考えたのが、今後のサイト更新作業を楽にする「BiND Press」です。BiND Pressは、BiNDupでコンテンツを作成するための「ページ編集画面」を開かなくても、「記事を編集」ボタンから気軽に記事の投稿が行えるようになります。
記事を投稿するだけで、自動でページを作ってくれるので手間が省けます。
この機能を使うには、BiND Pressに対応したコーナーを作成する必要がありますが、BiND Pressが組み込み済みのテンプレートを選んでおくと、細かい設定のことは心配いりません。
すでにテンプレートに組み込まれている場合は、「サイトエディタ」のBiNDPressが設定されているコーナーで「鉛筆」のマークをクリックすると、記事の更新画面が表示されます。ダミーで入っている記事を、適宜削除したり書き直しましょう。
BiND Pressの記事は、SNSでシェアする際のサムネール画像や、公開日時（公開予約）を設定できるので、手軽に公開して拡散させたい記事などを掲載するコーナーとしても優れています。これで、サイトの更新をサボる可能性も今後はグンと減りそうです。
サイトを公開後にBiND Pressを使用するときは、サイトのサムネール画面の右下にある「記事を編集」をクリックして記事編集画面が開けます。
リニューアル前のデータのバックアップを取ってから公開しよう
旧ホームページのデータがまったく不要、ということは少ないと思います。一部を今後流用したり、参照してほしいページもあるかもしれません。そこで、同じURL上に新しいBiNDで作ったホームページを公開する場合は、まず、公開されている古いホームページのデータのバックアップを取って、それからBiNDupの新サイトを公開しましょう。
旧ホームページもBiNDで作った人であれば、各バージョンの仕様に合わせてデータのエキスポートやバックアップを適宜取っておきましょう。
もしも、旧ホームページの内容をWeb上に残しておいて、適宜リンクさせたりしたいという場合は、たとえば下図のように、新たにフォルダ（ディレクトリ）を作成して、いままでのデータをすべて移動すればよいでしょう。
↑図のピンクの文字で示したように新規に作成したフォルダ（図ではoldsite）内に旧ホームページデータをすべて移動してしまいましょう。バックアップの代わりにもなります。
このファイル移動の作業は、BiNDのソフトウェア上からは行えないので、FTPクライアントを使ってデータの移動をする必要があります。WindowsではFTP接続はFinderウィンドウから行えますが、Macはクライアントソフトが必要です。CyberDuckやViper FTP Liteなど有料無料でいろいろありますのでAppStoreで探してみてください。
BiNDサーバーでないホスティングサービスを利用している場合は、ブラウザからファイル管理ができることが多いので、その場合はFTPクライアントは不要です。
この操作がよくわからない、、けれど、どっちみち過去のデータはなくていい、もしくはバックアップはあるという場合は、ここで紹介した内容はスキップしても大きな被害はありません（前のファイルが強制上書きされるのと、不要なファイルがサーバ上に残るという点はありますが、大きな害はありません）。
では、ここまでできたらサイトの公開に進んでしまいましょう！
サイト設定からアップロード設定してリニューアル完了！
サイト設定では、サイトのサーバー設定をして、「サイトを公開」をクリックすれば、データが指定したサーバーにアップロードされて、ホームページの公開が完了です。実際にページもアクセスしてみて、間違いなくサイトが公開されたか確認しましょう。
また、ブラウザにキャッシュが残っているとサイトの確認時に古いサイトの内容が表示されることもあります。うまく表示できない場合はSafariの「プライベートウィンドウ」やChromeの「シークレットウィンドウ」のようにキャッシュが保存されないウィンドウで確認してみましょう。
ホームページが公開できたら、新しい閲覧者が増えるようにサイトをお知らせしましょう！
次は、サイト制作からはいったん離れ、リニューアルにあたって注意しておきたい集客のためのチェックポイントとして、アクセス解析のGoogle アナリティクスの利用、古いURLリンクがエラーになるのを防ぐリダイレクトなどについて紹介します。
集客アップにつながりますので、ぜひチェックしてみてください。
Google アナリティクスのコードを全ページに配置する
Googleアナリティクスは、無料で多機能な解析が行えるWebアクセス解析ツールです。大企業でも使われるほどの解析機能の高さを誇るとともに、世界一のユーザー数を誇るGoogleに集まるアクセス情報をもとに、訪問ユーザーの年齢層や傾向分析なども提供してくれます。ホームページを公開するなら、Google アナリティクスを設定しない手はまず、ありません。何も入れていない人はぜひ、入れましょう。
最初はよくわからない場合も、ページごとの閲覧数（PV）などから見て慣れていきましょう！
Googleアナリティクスを使うには、BiNDupで設定をする前に、まず、Googleアカウントでログインして、アクセス解析用のトラアッキングコードとIDを入手します。
入手したGoogle アナリティクスのトラッキングコードはHTMLの全ページに配置するので手間がかかるのですが、BiNDではこれを一気に行える設定があるので、作業は一発で終わります。BiNDupを起動し「サイト設定」の「アクセス解析設定」の「<head>内」の項目に、生成されたアクセス解析用のトラッキングコードをコピーしましょう。
なお、追加したトラッキングコードが反映されるように、サイトを公開し直しする必要があります。この作業を忘れずに。
※Google アナリティクスのトラッキングコードの形式は、開発に伴って仕様が変更されている場合が多々あります。旧サイトの「アクセス解析設定」からコピーするのではなく、Google アナリティクスの管理画面（プロパティの設定画面）から入手してください。
アクセス解析設定を使ってサイトを分析する（BiNDupサポートサイト）
BiNDupでは、フォームにもアクセス解析が組み込めます。
Google Analyticsのトラッキングコードをフォームに組み込む（BiNDupサポートサイト）
Google アナリティクスのPVグラフをBiNDupの画面で表示
BiNDupには、サイトのアクセス数を起動時に表示させる機能があります。BiNDを開くと同時にぱっと見でサイトのアクセス数の変化が見られるので便利ですよね。
この設定を行うにはGoogleアナリティクスのビューIDを入手します。
Googleアナリティクスの「ビュー設定」から、「ビューの設定」を選び、「ビューID」をコピーしておきます。
次に、BiNDupを開いて設定するサイトを選んだ際の画面で右上の「設定」ボタン→「アカウント設定」を選択します。
「ビューID」の入力欄にGoogleアナリティクスでコピーした数字をペーストします。
ビューIDを入力してアクセス数がグラフ表示された状態は下のようになります。ちなみに、Googleアナリティクスで複数サイトを管理している場合にビューIDを間違えると別のサイトなどの情報が出てしまうのでご注意を。
リニューアル前のページのデッドリンクを作らない
サイトをリニューアルしたときよくあるパターンとして、古いサイトの内容がGoogle検索でヒットしてしまったり、外部サイトからのリンクによって存在しないページが残ってしまうケースです。いわゆる404エラーなどのNot Foundのページですね。
リニューアル後のページも同じURLに存在するなら新しいページで上書きされるので心配はありませんが、削除したページを訪問したユーザーは「そのページは存在しません」などの画面が表示され、ホームページにたどり着けなくなります。
そこで、やっておくとよいのがもう存在しないURLからトップページなどへ誘導する「リダイレクト」の設定です。例えば、
http://hogehoge.jp/abc.html
というページが旧サイトにあり、削除された場合、このリンクをクリックしたユーザーは本来、エラーになるのですが、そこのところを、自動的に
http://hogehoge.jp/
のように、存在するページへ遷移してやる仕組みがリダイレクトです。
BiNDupのリフレッシュ機能を使う
BiNDupで設定する場合、なくなってしまったURLと同じファイル名で空白ページを作成し「このページは現在表示できないため、サイトのトップページへ移動します」などの説明文を掲載した上で、「ページ設定」→「スクリプトと詳細設定」を開き、「詳細設定」で「リフレッシュ」という機能でトップページなど任意のページへ遷移させることができます。
この設定を使う場合、ファイル名とコーナー名（ディレクトリ）が、過去のURLに対応するようにリネームしておくことがポイントです。
.htaccessを設定する
また、少し高度な方法としては、ホームページをおいているサーバーの.htaccessファイルという設定ファイルに指示を書き込んでも実現できます。WWWサーバーを利用しているプロバイダによって詳細は異なりますが、BiNDupのサーバーを使う場合は以下の手順を踏んでください。
ここでは、
【転送元URL】 http://hogehoge.jp/abc.html
【転送先URL】http://hogehoge.jp/
として設定を書きます。
1）エディタなどを使い、書式設定なしのテキストファイルを作成します。
2）ファイルの改行コードをユニックス（LF）にして、保存します。この段階でファイルの保存名は「適当な名称.txt」で結構です。
3）次のように、指示を書きます。
RewriteEngine On
RewriteRule abc.html $ http://new.com/ [R=301,L]
4）保存したファイルをFTP接続を使って、ホームページデータの入っているトップの階層（トップページとなるindex.htmlと同じ階層）に配置します。その上でファイル名を「.htaccess」に変更します。これは、MacやWindowsが「.」をファイル名冒頭に使えないためで、FTPソフト上でないとできません。拡張子も削除します。ちょっと大変なので、原則はBiNDのリフレッシュ機能を使うとよいでしょう。
最終確認をするときは、転送元URLをブラウザで入力して、正しく転送先へリダイレクトするか確認してください。
基本的に、ほかのWWWサーバーでも手順は同じです。ただし、既存の.htaccessファイルがある場合は、上書きによって過去の設定が消えてしまうことがあるので、その場合は、既存ファイルをダウンロードし、必要な設定を書き出したあとアップロードし直す、という手順を取ってください。
未対応なら急務！常時SSL「https」化しよう
ウェブページの通信を暗号化して閲覧がより安全に行える仕様が「https」です。ホームページのURLは従来「http」が使われてきましたが、現在では「https」通信への対応が進んでいます。
2019年に入り、Macの場合は状況が深刻です。最新のSafariブラウザを使っているユーザーにはアクセス先サイトがhttpだと、「このサイトは安全ではありません」というメッセージが出るようになってしまいました。
BiNDupなら、無料かつワンボタンでサイトまるごとhttpsに対応できるので使わない手はありません。この設定を行うと、httpでアクセスしてきたユーザーは自動的にhttpsへ転送してページを表示するため、「安全ではありません」などのメッセージが出る心配はなくなります。しかもサイトデータには、一切手を加える必要もありません。
条件は独自ドメイン名を使っていることのみ。BiNDのサーバーを使っている場合はとても簡単なのでぜひ、利用しましょう。BiNDupのコントロールパネルの「独自ドメイン設定」から設定を行ってください。
いかがでしたか？ 魅力的なサイトデザインを制作するだけでなく、集客のために最低限やっておくべき機能もかなりありました。サイトを更新し、メンテナンスを行うのは、思った以上にいろいろとルーチンの作業があるものです。集客成果のチェックやコンテンツの企画などになるべく時間をかけたいからこそ、長く更新を続けるなら、サイトを簡単に更新・制作できるツールを選ぶに越したことはありませんね。
BiNDupで2日でサイトリニューアル！みなさんも今月こそ、試してみませんか？
