【体験記】2日でホームページをリニューアルする方法～１日目

ホームページをリニューアルしたいと思い立ったものの、手が付けられず数年経過…そんな方はいませんか。同じように2年前からリニューアルを考えていた私ですが、このほどようやく実現！実体験をもとに、いかに効率よく「2日でリニューアルする」ヒントを全3回に分けて書いてみたいと思います。

第1回目の今回は、ホームページのテンプレート選びまでを中心にお伝えします。

リニューアル作業をラクにするにはテンプレート選びが重要。テンプレートからのアレンジのコツを紹介します

古くなったホームページをどうすればいいのか？

古くなったホームページを放置している会社さんやお店さん、決して少なくありません。それぞれ事情があると思いますが、古いホームページは営業的にもマイナスに働くことが多くあります。

「検索でお店のホームページを発見」→「サイトが更新されておらず、しかも一部壊れたまま…」→「イケてないお店だから他へ行こう」
こうしたお客さんの心理……容易に想像できますよね。

記載や価格が古く間違っているなどは当然のこと、デザインが古めかしく見えてしまうのも印象を悪くします。

この私も、個人ブログは更新できていたものの、サイトのほうはデータを壊してしまって以降は更新しないまま2年が経過しました。
ここまでジリジリ後伸ばしにできたのも、すでに「レスポンシブWeb」に対応していた安心感があったから。レスポンシブウェブは、パソコンでも、スマホでも閲覧しやすいデザインに自動で切り替えされるので、お客さんにも無理なく読んでもらえ、見せるのも恥ずかしくないサイトになっていました。しかし最近、事務所を移転したこともあり内容の更新がいよいよ必要です。そこで重い腰をようやっと上げました。

久しぶりの情報更新。気に入っているサイトですが、データがないので更新できません。

リニューアル前のホームページ

使い勝手がよければ全面リニューアルをする必要はありませんが・・・・さようなら、旧サイトさん。

この記事をお読みの悩めるみなさんも、以下のチェックリストをもとに、1つでも当てはまったらゼロから全面リニューアルがおすすめです。

ホームページを全面リニューアルすべきかどうかチェックリスト

1. サイト全体がスマートフォンに対応していない
2. スマホ用のサイトはあるが、PCサイトと別々で更新が大変
3. ツールが古くて使いづらく更新するのがストレス
4. 業者に依頼したため、更新の仕方がわかないうえ、運用契約も切れてしまった
5. Google アナリティクスを入れたいけれど全ページに手動で入れる必要があり手間
6. 情報が散漫してどこになんの情報があるか読み手に伝わりづらい

いかがでしょうか？　1つでもあれば作り直しが吉！です。
更新しづらい環境のままだと、一生ホームページから成果があがらないと思って、いち早く改善していきましょう！

サイト構成を考えながらテンプレートを眺めよう

今回は、上記のチェックポイントをすべてクリアできるホームページ制作サービスBiNDupを使って、実際にリニューアルした流れに沿ってポイントを紹介していきましょう。

1）テンプレートは「レスポンシブ」を選択

最速でホームページを改修すると決めたら、BiNDupの場合、すぐにテンプレート選びに入ってもOKです。というのも、サイトの構成を考えるにもテンプレートをブラウズしてみると構想がわきやすいからです。

＜BiNDのテンプレートを見る＞

テンプレートを選ぶ際、一般的には自分の業務ジャンルに合わせて選ぶと思いますが、私のオススメの方法は、「すべて」を対象にした上、「レスポンシブ」で絞り込みすること。

このご時世、断然レスポンシブがおすすめですから、それ以外はまずは除外してしまいましょう。腕に覚えがない限り、自分でレスポンシブ化する手間は避けましょう（笑）。

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」のレッドを選びました。うちの名刺はポイントカラーがピンクなので、コーポレートカラーとしては暖色の強い色がいいと判断。

BC-TECのテンプレート

テンプレートを見ながら、構想をシミュレーションする

テンプレート選びの後、なかなかその先に進まない方へうまくいく秘訣は、テンプレートのプレビューを見ている最中に「ここにどの写真を入れて、メニュー内容はこれだな」とできあがりの目標を、想像を膨らませてみることです。そこで、テンプレートがどんなにステキでも、コンテンツがはまりにくそうなら作るのに向きません。

たとえば、実際にサイトの素材をはめる気持ちになって「BC-TEC」のトップページをブラウズしてみましょう。

まず、元のテンプレートは「事業内容」が6つもあります。それぞれ写真に対して200文字くらいずつ入れられます。自分の場合は3つ紹介するものがあるので半分削って使えるな、と判断しました。

テンプレートの編集結果

次に「メンバー」は4人並んでいます、これを1人に削ったらおかしくなるでしょうか？　いえ、おそらくセンター揃えにすればおかしくないだろうと想像できるのでこれもセーフ。

こんなふうに、テンプレートを見て「いいデザインかどうか」だけでなく「ここに入れたらどんな雰囲気かな…」と自分のコンテンツに寄せて想像してみることがポイントです。

なおテンプレートの中には使わないコンテンツが含まれていることもあります。
私の場合、ページの下のフッターエリアにあるサイトマップは本来はあったほうがいいのですが、素早く作業を終わらせるために、今回は不要と判断しました…。そんな場合、BiNDupは「非表示」にしておけば、後で必要になったときすぐに着手でき便利なので、削除しないで取っておきましょう。

同様に、グローバルメニューの項目も、とりあえず時間がなければできていないところは「非表示」で公開できるので気が楽です。

作成の手始めに、まずキャッチと写真を入れてみる

まず、やる気を保つためにもトップページのキャッチと写真、ロゴを入れてみましょう。ただ写真を入れただけでも自分のサイトらしくなってくると、俄然とやる気がでます。

また、各ページのトップの写真は「テイストがあっているもの」を選ぶと不思議とサイトのテイストが整います。

テイストを揃えるというのは、単純にいえば同じカメラで撮ったものや同じ作家のアートワークを使うことなどです。レンタルフォトを使う場合も、同じクリエイターのシリーズから選ぶと統一感が出てクオリティが安定します。

BiNDのビルボード画像変更箇所

私は「自分のサイトには自分で撮った写真を使う」ようにしています。私自身はお店でも作家でもないので特段良い写真を使わなくてもいいと思っているのですが、職業柄、オリジナリティは大切にしたいと思うからです。

視覚を占める大きさからいって、トップの写真は一番大切な部分だとおもいます。いろいろ試行錯誤しながら決めていきたい、難しいけれど楽しい作業パートだと思います。

URLに影響するファイル名を決める

各ページのメインの写真を選ぶうちに、コーナータイトルも決まってきたので、合わせて書き換えておきましょう。
この際、「ファイル名」も確認しておきます。「コーナー名」や「ファイル名」は、URLの末尾で使われるため、内容に適した名前を付けましょう。
実は、URLのファイル名もSEOに関連するという話もあります。何より、内容とファイル名の意味が異なるのは意外に気持ち悪いもの。ずっとあとになって直すと、せっかくリンクをはってもらった被リンクが切れてしまうこともあるので、最初のうちにファイル名を定めましょう。

↑ファイル名を、ページ名に合わせて変更します。意味合いが一致したファイル名のほうが使っていても分かりやすいですし、SEO的にも適していると言われます。

各ページの目処がたったところで各ブロックの写真や原稿を入れ替えるなどしていけば、サイトのほとんどの部分ができあがってきます。このあたりで1日目は終わりにしましょう。

1日目のまとめ

リニューアルをやってみた感想として、作業時間は数時間ですが、やはりテンプレートを決定して決まる写真を入れるまでが勝負かなと思いました。写真素材をどう準備するかは各社のテーマだと思います。たとえば店内にしたいとか、人物モデルにしたいとか。とりあえずのものであっても、自分のビジネスを象徴するようなビジュアルを選びたいもの。逆にキャッチコピーなどは何度でも変えられますからとりあえず店名でも会社名でもいれてスタートすればいいかもと思いました。

もちろん、BiNDupなら写真もいつでも変えられます。まずは気負わず作り始めてみるといいと思います。みなさんの「重かった腰」がこの記事で少し軽くなれば幸いです…！
新しいBiNDupで今すぐリニューアルする

次は2日目！ページを更新しやすくしたり、公開するときに設定しておくべきことはこちらからどうぞ

【体験記】2日でサイトリニューアル！最低限やりたい公開前の注意点