ホームページの作り方

小規模ホームページリニューアルの手順を実例レポート!改善ビフォー・アフター画像も

「ホームページの内容を変えたいが、どこから手を付けていいかわからない」
「あまり費用をかけずに、ホームページのデザインを変えたい」

この記事は、【ホームページをよりよい内容やビジュアルへ、低コストでリニューアルしたい】と思っている皆さまへ向けて書いています。

皆さま、こんにちは。

ホームページは一応持っているけれど、うまく活用できていなくてリニューアルしたいなと思っている…とのお悩みはとてもよく聞きます。プロにお願いすればいいものができるとわかっていても、ホームページにそれほど費用をかけられないというそれぞれの事情もありますよね。

そこで、今回の記事では、実際にある個人事業主の小規模なホームページをリニューアルする過程を、実際のビフォー・アフター画像を交えながらレポートします。

小規模なホームページとは、ここではネットショップや会員限定サイトではない、シンプルな情報ページ(文章+画像)が並んでいるホームページと定義します。飲食店や美容院、整骨院、塾などの個人事業主の方が運営しているホームページや、個人で作った自作のホームページはほとんどの場合でこの「小規模なホームページ」のカテゴリに属すると思います。

ホームページリニューアルのプロセスや、費用をかけないデザイン刷新(見栄えよくする)のコツがわかる内容です。最後までお読みいただければ幸いです。

はじめに:ホームページをリニューアルしたい理由を洗い出す

「ホームページをリニューアルしたい!」という強い気持ちは何を原動力として湧き上がってきているのか、まず考えましょう。

現状のホームページに不満があるから、作り変えたいなと思われているはずです。もちろん、なかなか言葉にならない思いもあるでしょう。でもこれは前段階ですので、どんな言葉であっても構いません。ノートや付箋に、思いつくままに吐き出してみましょう!

ここで自分の気持ちを出せたら、リニューアルも絶対よい方向へ進みます。この段階では費用の心配や謙虚な気持ちをなくし、シンプルな思いを出し切りましょう。

リニューアルステップ1:ホームページに対する希望をリスト化

では、ここから実際のリニューアルに向けての具体的なプロセスに入っていきます。現状の不満や気になることを踏まえて、次のホームページはどうあってほしいのか、希望を出していきましょう。

なかなか言葉にならないときは、自分に質問をしていくように、落ち着いてひとつずつ考えていきます。例えば、「仕事が取れない」という不満。では、「仕事をくれる人はどんな人?」→「その人たちが信頼するだろうデザイン、好きそうなデザインはどんなもの?」→「ではそのために使うべき色は?」とステップアップしていきます。

ホームページリニューアルを外注するのであれば、その制作会社やデザイナーさんに付き合っていただき、一緒に行うとよいでしょう。

一人の場合は、検索エンジンで調べながら進めます。「清潔感のある色」「企業に信頼される色」など調べているといろいろな記事が見つかるはずです。それらを参考に進めましょう。

もちろん、デザインなどビジュアル部分のほか、コンテンツ(中身)にもこの方法は使えます。何を載せるべきなのか?何を書いたらいいのか?悩んだら、ひとつずつ自問自答しながらステップを踏んで、具体的な作業に落とし込んでいきます。

  • 明るい色にしたい
  • 信頼されるように
  • 実績ページがほしい

悩みや不満から、前向きなホームページ改善の希望へ。

希望が出れば、あとはそれを叶えていくだけ。ここまでがとても大切なプロセスなのです。時間をかけて、ライバルのホームページなども見ながら、どうしていきたいかしっかり考えていきましょう

リニューアル作業に入ってしまってから、「やっぱり色はクールにかっこよくしたい」となると、デザインや中身の考え直しで時間と手間が無駄になります。もし誰かに依頼していたとしたら、デザイン料が2倍になることも。

しっかり希望をリストアップしていきましょう。

リニューアルステップ 2:コンテンツ設計

全体のビジュアルイメージや必要なページが何となく見えてきたら、実際のホームページの中身の設計に入ります。

ホームページにはまず全体を見渡すためのトップページ(HOME)があり、その下に各種ページがぶら下がるような形で作られています。

自分たちのホームページを、よりわかりやすく、より顧客からの依頼や集客につなげられるようなページを作成する必要があります。

実例

以下のホームページ設計図は、実際にあるホームページをリニューアルするプロセスで書いたものです。

このホームページの持ち主は、和歌山でプロコーチとして活動する穂藤友美さん。コーチングスキルを使って、起業支援、キャリアコンサルティング、企業研修の講師などをしています。

▽穂藤友美さんのホームページはこちら
http://brilliant-link.com/

たくさんの人に自分の仕事内容を知ってもらうため、穂藤さんにとってホームページは必須のツールです。これまではWordPressと無料のデザインテンプレートを使って自分なりに作っていたそうです。

以前のデザインはこちら

この状態で2年ほど公開していたものの、シンプルすぎる見た目と、自分の事業をきちんと伝えられていないというもどかしさがあったそうです。

そこで、希望している事業展開に合わせて、どういうページにどういうことを書いていくかコンテンツ(中身)の改修を考えました。

  • プロフィール
  • サービス一覧
  • 問い合わせフォーム

これらは以前からありましたが、仕事につなげるためには実績や料金目安があったほうが安心感があるだろうということで、新規にページを作ることにしました。

いきなりホームページの管理画面に向き合うと、なかなか全体図を頭に浮かべるのが難しいと思いますので、このように紙の上で考えていくと、画を描きやすいと思います。

全体のコンテンツ(中身)がだいたい決まってきたら、次の段階として見栄え(ビジュアル、デザイン)の改修へ進みます。

リニューアルステップ 3:デザインテンプレートを選ぶ

デザインの改修は、低予算で実施する場合はデザインテンプレートを使います。一からデザイナーさんにつくってもらうのは最低でも数十万円かかりますし、オリジナルでデザインしたところで大きく売上が変わるということはないと思います。

基本的に小規模ホームページのデザインはテンプレートを使えばOKです。それにプラスアルファ、気になる部分だけスポットでWEBデザイナーさんにお願いするというスタンスで進めるのがよいです。

デザインテンプレートは、使っているホームページサービスと合ったものを使います。WordPressであれば「テーマ」という名前で、無料配布もあれば有料販売もあります。

また、WiXやJimdoなどの無料ホームページ作成サービスにもデザインテンプレートは必ずあります。プレミアムプランへ移行して課金すればより多くのデザインテンプレートが使えることも。

そのほか、ホームページ作成ソフトにも基本のテンプレートがいくつか入っていますし、サーバーとホームページ作成がセットになったPageKitにも企業タイプ、美容院タイプ
といった業種別のテンプレートがあります。

プロのデザイナーが「こうするのがいちばんいい」と考えて発表しているものですから、デザインテンプレートを使うのはコストパフォーマンスの面でも効果の面でもメリットが多いのです。

また、テンプレートは気分や仕事の状態に合わせて気軽に変えられるので、変えるハードルが低いのもメリットのひとつです。一からデザインを作ってしまうと、変えるためにもまた一から作り直しとなり、費用は積み重なってきます。テンプレートからテンプレートへの移行はとても気楽ですね。

リニューアルステップ 4:写真とロゴでデザイン刷新

とはいえ、同じテンプレートを使う他の人と同じような見栄えになってしまうというテンプレートならではのデメリットがあります。

テンプレートを使っても、いかにも「テンプレートを使っています!」というデザインにしないコツは、トップページに高品質な写真を使うことと、ロゴ画像を入れることです。

この2点さえ準備すれば、素敵な見栄えのホームページに仕上げられるんです。写真はできればプロのカメラマンに撮ってもらったものがオススメです。トップページ用の数カットであれば、数万円で頼めるはず。デザイン一式を数十万円で作るよりお手頃です。

実例

さて、上記↑にも登場した、穂藤友美さんのホームページもテンプレートに写真+ロゴを入れて刷新してみました。テンプレートはホームページのシステムがWordPressだったため、WordPressに対応している有料テンプレート「SnowMonkey」を購入して変更しています。

http://brilliant-link.com/

ページは「実績」だけを増やしました。また、トップページの画像をプロに撮っていただいたものに、そしてロゴを変更。そのほかはこれまでに掲載されていたものを、テンプレートに合わせて見せ方を変えただけです。

テンプレートが変われば、雰囲気もガラリと変わりますね。

リニューアルステップ 5:SEO対策をする

ホームページをリニューアルするときに、デザインやコンテンツ(中身)に加えて、手を入れたいのがSEO対策です。SEO対策の基礎知識については別記事「初心者でもわかるSEOの基礎知識とは」を御覧ください。

さて、リニューアルのタイミングで行いたいSEO対策は、トップページに仕事に直結するキーワードをたくさん入れることです。例えば、今回のレポートで例に挙げている穂藤さんのホームページの場合は、業種を指す「コーチング」という言葉と、活動エリアである「和歌山」の言葉です。

リニューアルのタイミングで心機一転、改めてホームページを確認し、キーワードを入れた文章がトップページに載せられないか検討します。

実例

穂藤友美さんの場合は、これまで下層ページに書かれていたサービス一覧の文章をトップページにも掲載することで、訪問者への利便性の向上と、SEO対策を同時に実現しています。

http://brilliant-link.com/

サービスをわかりやすく見せながら、トップページ内に関係するキーワードをたくさん盛り込むことに成功。何の仕事をしている人のホームページなのか、ひと目でわかるようになっています。一石二鳥ですね。

デザインテンプレートにテキストを書き込めるスペースがあれば、そこにサービスについての説明を載せると同じ効果があります。ぜひ実践ください。

<インタビュー>リニューアルしてよかったこと

リニューアルのプロセスについての解説がすべて終わりました。

今回、この記事で解説したプロセスを踏みながらホームページのリニューアルをした穂藤友美さんからホームページを変えた感想をいただきました。

穂藤:自分の事業をどう見せたら訪問者にわかってもらえるのか、ずっと悩んでいました。今回ホームページのリニューアルを機に、コンテンツ(中身)を考えながら、改めて見せ方を考えられたのがよかったと思っています。

トップページの写真を変えたことや、ロゴ(今までも作ったデータがあったのに名刺にしか入れていなかった)を入れたことで、かなり印象が変わりました。デザイン費をかけなくても、わたしのようにデザインスキルがなくても、これだけで変えられるのだと気づき、驚きました。

ホームページの見栄えを調整したことで、わたしのテンションも変わりました。それがなにより楽しいし、よかったことですね。リニューアル、いいですよ!皆さんもぜひやってみてください。

まとめ

できる限り低コストで、けれどリニューアル効果の高い手順をご紹介しました。デザインテンプレート+高品質な写真+ロゴ画像があれば、本当に費用をかけずに一新できます。

ロゴがなければ無料のロゴ作成ソフトなどを使って自作してもよいですし、クラウドソーシングサービス等を利用して、コンペ形式で募ってみてもいいですね。また、別記事でロゴについては解説をしたいと思います。

写真は5万円程度の費用を確保すれば、フリーのカメラマンに好きな場所で好きなカットを撮影してもらえます。この機会に撮っておくと、何かと便利です。

デザインテンプレートの選び方については以下の記事をご覧ください。

▽ホームページデザインテンプレートの選び方

あわせて読みたい
ホームページデザインテンプレートの選び方「デザインの知識がないが、見た目のきれいなホームページを作りたい」 「テンプレートを使いたいと思っているが、どれを選んでいいかわからな...
ホームページ簡単制作 PAGEKit

どうしてもホームページ作りが難しいという場合はページキットにおまかせください。

かんたん3ステップ最短15秒で、業種ごとにぴったりの文章が入ったホームページが作れます。サポートつきで30日間無料でお試しいただけます。

サンプルを作ってみる