ブログ

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

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.サーバーへアップロード・サイト公開

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

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

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

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

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

この記事に関するお問い合わせは下記よりお願いいたします

お電話の方はこちらをタップしてください。→ 0798-77-5520 サービス一覧はこちら

お名前 (必須)

ふりがな (必須)

メールアドレス (必須)

貴社名

電話番号

お問い合わせ項目を選択してください (必須)

当記事についてWordPressサイト制作WordPressへの移行検索上位表示コンサルWPカスタマイズのご依頼保守管理・運営代行弊社サービスについてその他

選択項目について内容を詳しくご記入ください (必須)

株式会社ウェブロードのプライバシーポリシーに同意する。プライバシーポリシー

The following two tabs change content below.

山口 敦

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

関連記事

  1. どら焼き 目的を明確にしてからメイン画像を作る
  2. 目的を決める 従業員が30人規模の中小企業がHP開設する4つの手順
  3. HP制作ソフトはコンテンツを作ってくれない
  4. コールセンターの女性 ビジュアルが良ければ良く見えるのがWebサイト
  5. 「リース契約」のWeb制作会社は利用してはいけないのですか?
  6. ワードプレスの有料テンプレートを購入する際の注意点
  7. ホームページはどのソフトで作れば良いか?
  8. 中身作りがHP制作で一番時間の掛かる作業

最近の記事

最新のお知らせ

「旗ポール建て隊」様のWebサイトを制作しました

旗ポール建て隊様のホームページ制作は、西宮商工会議所の職員の方にも初回から三度の打ち合わせにご参加いただき、新規サービスの立ち上げをどの切り口かで進めるか徹底的に意見を出し合ってからのスタートでした。 ブレーンストーミン […]
コメントなし

スタジオポルテ夙川公園FPオフィス様HPを制作しました

JRさくら夙川駅から徒歩5分ほどのところにある、国道2号線沿いの「スタジオポルテ夙川公園FPオフィス」様のホームページを制作させていただきました。 こちらには松村様が経営されている、デイサービスという介護事業所があり、同 […]
コメントなし

赤外線雨漏りドクター様のHPをリニューアルしました

赤外線建物診断のパイオニアとして西宮を中心に近畿各地、要請があれば全国各地の建物の診断をしている、アーキテック様のホームページのリニューアルをお手伝いさせていただきました。 建物の雨漏り診断と外壁劣化の調査をドローンや特 […]
コメントなし

制作サービス体系を変更します

検索エンジンからの集客数を大きくするためにはブログは新規投稿を継続すればいいということはありません。 現状のインターネットの状況をお伝えしますと、ブログは過去に書いた記事をきっちりと書き直したり、充実させたり、似たような […]
コメントなし

今津の買取ぷら座一蔵様のHPをリニューアルしました

国道43号線沿い今津交差点すぐ南側にある買取ぷら座一蔵様のホームページのリニューアルをお手伝いさせていただきました。 元々、女性の担当の方がしっかりとしたホームページを作っておられたのですが、デザイン面や機能面でさらに充 […]
コメントなし

サイト内検索

アーカイブ

PAGE TOP