ブログ

自社ホームページのリニューアルの方法

⇒ WordPress設置・運営の個別指導
LINEで送る
Pocket

下記は2012年時のリニューアルについての内容です。4年後の2016年7月に行った弊社サイトリニューアルについてはこちらの記事をご参照ください。

現在のHPのデザインリニューアル&フルWordPress化を行います
ホームページを全面WordPressへ移行しました

サイトのリニューアルについて

2012年9月5日に当サイトをリニューアルオープン致しました。このリニューアルは、2012年の4月から構想を練っていたのですが、私がどのようにしてサイトのリニューアルを行ったかをご参考までにここから書いていきます。

1.リニューアルに当たり、はっきりさせたかったこと

文章化すると、下記のような5項目になると考えています。

  • 会社の経営理念・経営に対する考え方
  • ホームページリニューアル制作の目的
  • ホームページを制作することにより実現させたい効果
  • 想定するターゲット顧客
  • 商品・サービスの特徴と会社の一番のセールスポイント

これらを明確にさせることにより、ホームページをどのように位置付け、活用していきたいのかがはっきりします。そうすれば、後はビジュアルに落とし込んで、文章を書いたりキャッチコピーを考えたり、画像を作ったりするといった作業に進めます。

こういったことを最初に考えておくことにより、ホームページ制作の途中で方向性に迷いが生じた時もここに立ち返ることができます。

ホームページが営業の中核をなす重要な拠点であるとの認識のもと、会社全体として最良な目的を考えることがまず第一です。

2.ワイヤーフレームを手書きで書く

1.が決まれば、だいたいの方向性が見えてきます。その次に取る行動としましてはワイヤーフレームを作ることです。

ワイヤーフレームというのは、ここではホームページの出来上がりのイメージ図を指しています。手書きで色々な状況を具体的に考えながら、紙と鉛筆でイメージを具現化します。

ホームページ制作屋としては、この作業は非常に楽しいものです。毎日推敲を重ねながら、書いては消してを繰り返しながら、訪問者の方をどのように引き付け、どこに誘導するかを明確にしていきます。

書いている途中のものもあればよかったのですが、ここではワイヤーフレームの最終型を掲載しておきます。図のような感じで、非常にラフな手書きのものになります。

弊社の場合、カテゴリページや個別ページは作っていません。100ページ程度の規模のサイトなので、トップページだけを作って、他のページは実制作時に個別に考えていくという形を取りました。

ホームページを自社で作りたい方はこちらもご参考にしてください。ワイヤーフレーム制作以降はソフトを使って制作してOKです。
→ ホームページを自社で作りたいのですが?

3.デザインに落としこむ

大体のところで完成としたワイヤーフレームは次にデザイナーさんに引渡します。手書きのイメージを具体的なビジュアルデザインに落とし込んでもらいます。(画像が長くなり過ぎるのでフッター部分はカットしています。)

キャッチコピーや文章は全てワイヤーフレームの段階で作っておきます。使用する写真や画像イメージなども、同じくワイヤーフレーム制作の段階で無料素材サイトや素材購入したりして集めました。

デザイナーさんには直接お会いし、メールや電話も補助的に使いながら、ワイヤーフレームだけでは表現しきれない具体的な希望も同時に伝えます。

ベースとなるカラー、イメージしている参考サイト、フォントやロゴのイメージ、全体のテイストなどコミュニケーションを蜜に取りながら進めていきます。

最初のデザインラフ(デザインイメージ画像)が出来た段階では修正する箇所が通常はたくさんあります。
それを一つずつ自分のイメージに合わせてもらうように修正を重ねます。1ヶ月くらい掛かりました。

そうして確定されたデザインは、次の工程である「コーディング」「プログラミング」の段階へ引き継ぎます。

4.コーディングとプログラミング

デザインラフ完成の段階では一枚ものの画像であるトップページに、リンクボタンや背景画像などの各パーツに分けるスライスという作業を行います。

スライスはデザインラフのデータを元に、フォトショップ・ファイヤーワークスといった画像加工ソフトを使って、画像を切り分けていきます。

Web上では、画像は各パーツに分かれて配置されます。その配置を上手くイメージ通りにウェブ上で閲覧できるように行うのがコーディングという作業になります。

もちろん画像だけでなく文章も画像同様、ラフデザインと同じ配置にしていきます。後は、TwitterやFacebookなどのSNS等と連動したりするための簡易プログラム(スクリプトと言います)が動作するように設置していきます。

このサイトはマウスオーバーした時に画像が少し光るような加工をしていますが、これも簡単なスクリプトを用いて表現しています。

このようにしてトップページがブラウザであるインターネットエクスプローラーやファイヤーフォックス、グーグルクローム、サファリ等で閲覧できるようになります。

5.個別ページの制作

こうして完成したトップページは、コストを下げるため、全てのページにトップページのファイルをコピーして利用します。ベースとなるデザインが全てのページで同じでしたら、そのまま使えます。このサイトもそのようにして制作しています。

個別ページでは、サイトの構成を考えて作りますが、これはワイヤーフレームの制作段階で既にある程度の項目を作っていますので、それほど時間の掛かる部分ではないはずです。ワイヤーフレーム制作時に考えたサイドバーやメイン画像の下のナビゲーションリンクの部分に必要なページをまずは作っていきます。

実際は中身だけ作れば良いので、時間がなければ取り急ぎの文章だけでも入れて公開します。遅い公開はインターネットの世界では全てが機会損失につながりますので、とにかく文章が出来たと思えばどんどん個別のページにアップして公開することをお勧めします。

この文章もまず7割くらいの出来でアップし、その後運営の中で推敲・修正を繰り返し行う予定です。後は運営の中でひたすら最新情報ページの追加やPDCAを元にしたサイト改善を行い続けます。

6.サーバーへアップロード・サイト公開

こうしてローカルのパソコンの中に作られたデータは、誰もが閲覧できるサーバーの中にアップロードします。これでウェブサイトの一般公開の完了です。

ただ、完了とは言いましても、これから先が長い運営の始まりです。公開したばかりではアクセス数は微々たるものです。

ページ追加やあなたの商品・サービスを必要としているお客様に必要な情報を公開し続けることでウェブサイトは人気になり、色々なキーワードで検索エンジンから見込み客を呼び込める装置になってくれるでしょう。

検索エンジンでどうしたら上位に表示できるかということは考えず、ひたすらあなたのお客様の事だけを考えて文章を書いて、商品・サービスが欲しくなるようなアピールをして下さい。

ウェブサイトを効果的に運用し、あなたの望むお客様が自らサイトに訪れてくれるようになれば、初めてホームページがあなたの受注獲得マシンになったことを意味するのです。

無料アドバイス

ウェブロードの3つのサービス

自社管理できるWordPressサイトを制作したい方、サイト更新作業委託とアドバイスが欲しい方、本気でSEOに取り組む方に向けたサービスを展開しています。ご相談はこちらからお気軽に。

WordPress自動お見積
The following two tabs change content below.

山口 敦

代表取締役株式会社ウェブロード
1974年大阪生まれ。西宮商工会議所青年部所属。プロフィールはこちら。経営理念「頑張る人の自立を応援する」の下、IT活用に積極的な個人・中小企業のWebサポートを積極的に展開しています。

関連記事

  1. コールセンターの女性 ホームページはどこまで自分で作れば良いのか?
  2. 中身作りがHP制作で一番時間の掛かる作業
  3. HPを公開することによる価格競争
  4. GoogleやAmazonのようなシンプルサイトを作ろう
  5. HP制作ソフトはコンテンツを作ってくれない
  6. 小売 どのような会社がホームページを持つべきなのか?
  7. 広告チラシ 過剰なデザインはコストアップ要因にしかならない
  8. 「リース契約」のWeb制作会社は利用してはいけないのですか?

WordPress自動お見積

メルマガ登録
メールアドレス
お名前(任意)



WP立ち上げ個別指導ご予約

2017年10月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2017年9月

サイト内検索

最近の記事

  1. どら焼き
  2. 専門家

アーカイブ

PAGE TOP