ブログ

HTMLサイトリニューアルの事例

LINEで送る
Pocket

当記事は2012年時のリニューアルについての内容です。4年後の2016年7月にもサイトリニューアルを行いました。

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

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年大阪生まれ。プロフィールはこちら。(代表ご挨拶動画) 経営理念「育て拡げるお手伝い」の下、IT活用に活路を見出す個人・中小企業のWebサポートを積極的に展開している。 西宮商工会議所青年部2018年度広報委員長、尼崎商工会議所会員。

関連記事

  1. 写真ギャラリーサイトの簡単な作り方
  2. ホームページはどのソフトで作れば良いか?
  3. どら焼き トップページ画像の作り方
  4. HPリースは危険な契約
  5. 美容師さん 店舗用予約システムの導入
  6. デモサイトのような作り込みが大変

最近の記事

  1. 老朽化した建物と同じ

最新のお知らせ

リノベーション専門の不動産会社ワイズワンホーム様

2019年3月から不動産事業を開始される、ワイズワンホーム様のホームページを制作させていただきました。西宮で新築のデザイン注文住宅を中心に事業展開されているワイズテック様の別会社として新たに立ち上げられた会社様になります […]
コメントなし

姫路のカーセキュリティ【サブロク】のティアラスタイル様

車に後付けできるパノラマミックモニターシステムのサブロクを販売・取り付けされている、兵庫県姫路市のティアラスタイル様のホームページを制作させていただきました。ティアラスタイル様はサブロクの販売会社も持っておられ、サブロク […]
コメントなし

行政書士法人牧江&パートナーズ姫路支店様のHP制作

行政書士法人牧江&パートナーズ様の姫路支店の新規開設に伴いまして、ホームページ制作を行わせていただきました。播州・姫路を中心に、新たに建設業を始める方や、建設業種の追加の許可申請を取るための代行業者を探されている方へ向け […]
コメントなし

武庫之荘 鉄板焼き・お好み焼き・居酒屋ももふく様

阪急武庫之荘駅、北側へ徒歩3分のところにある鉄板焼き・お好み焼き・居酒屋「ももふく」様のホームページを制作させていただきました。飲食店様のサイトなので、とにかくトップページでアクセスや店舗外観、メニュー概要など、必要な情 […]
コメントなし

元銀座ママが運営する結婚相談所ウィルマイン様

昨年より、東京白金高輪の結婚相談所ウィルマイン様のホームページの運営代行をさせて頂いております。こちらのサイトは既存ホームページで集客ができていなかったため、東京と兵庫の遠方ではありますが、メールと電話とSkypeを併用 […]
コメントなし

サイト内検索

アーカイブ

PAGE TOP