ホームページをリニューアルしました！【手順とポイント】

この度ホームページをリニューアルしました。
今回は実際リニューアルしたサイトを例にリニューアルの手順をまとめます。
自社WEBサイトのリニューアルを考えているWEB担当者様の参考になれば幸いです。

現サイトの課題の洗い出しと目的設定

まずは、何故サイトリニューアルを行うのか、そこには必ず理由があるかと思います。
この理由こそが、リニューアルの最終目標です。
最後までブレることなく筋を通して行えるよう、現サイトの課題の洗い出しと、しっかりとした目的設定を行いましょう。

ペコプラの旧サイトの課題とリニューアルの目的

旧サイトの課題	目的設定
旧サイトはSEOに特化したしていたが、コンテンツが多く、ユーザーが欲しい情報がどこにあるのかがわかりづらかった。	→SEO対策事業のパワーアップに伴うコンテンツ整理と集約化 構成をシンプルにしユーザーにわかりやすく。その為コンテンツの集約化を行う。 SEOのノウハウなどはコラムとして投稿する事で濃密な内容の詰まったサイトにする。
旧サイトはSEO会社推しであった。	→事業内容の明確化 確かにSEOを最も得意とする会社ではあるが、コンサルティングからサイト制作、システム開発までWEB全般請け負える会社という事がわかるようにする。 その為、「SEO対策」「WEB制作」の2大柱をたてる。

サイト構成図を設計する

目的設定を明確なったらサイト構成図を作成していきます。
便利な作成ツールも色々ありますが、弊社ではExcelがなんだかんだ作りやすく・見やすく・使い易い！となりエクセルを使用して作成します。クライアント様や社内のメンバー内でも共有しやすい点もメリットかと思います。
また、サイト構成でそのサイトの成功の8割は決まるとも言われており、かなり重要な部分となります。

ペコプラのサイト構成図

まず、目的の1つであるコンテンツの整理と集約化
これをしっかり行う為、旧サイトのサイト設計図を1度洗い出し、整理と集約化を行いました。
結果、40近くあったコンテンツぺージを半分以下まで絞りました。まさにコンテンツの断捨離…すっきりです。

ワイヤーフレーム作成

次にワイヤーフレームを作成していきます。

ワイヤーフレームの役割

• 図面化する事でデザインをする前にクライアント様と制作側で方向性の擦り合わせができる
• デザイナーに依頼する為の指示書になる
• 開発ファイルの整理になる

などが挙げられます。
特に開発ファイルの整理については、Wordpressのサイトではよく思いますが、どのようなファイルを作成していくかが明確になります。

ペコプラのワイヤーフレーム

目的に設定した、事業内容の明確化に伴い、「SEO対策」「WEB制作」の2大柱に加え、「コラム記事」この3つの導線をわかりやすく配置する事。またお問い合わせフォームへの導線もわかりやすいように、ワイヤーを組みました。
また、コラム記事を回遊しやすいようにする為に、
3カラムの下層ぺージには人気記事の表示、日付やカテゴリーのアーカイブリンクを設置、
2カラムの下層ぺージにはfooter部分に人気記事と最新コラムの一覧を表示するようにしました。

デザイン

サイト構成の設計とワイヤーフレームが決まるといよいよデザインに入ります。
ここまでまとめて、今更書くまでもありませんが、あくまでデザインはサイト問題点の解決手段であり、目的を達成する為の要素の１つでしかありません。
社長の好み、デザイナーがかっこいいと思うものなどは、よろしくないかと思います。

おすすめ関連記事

 

WEBデザインを成功させる為に抑えるべき、たった4つのヒアリング項目

“問題解決する為のデザイン”をご提供出来るよう、WEB制作やランディングページをご依頼をいただく際に弊社が必ず行っているヒアリング内容をご紹介をいたします。

 

ペコプラのデザイン

ただ、今回は自社サイトのリニューアル…
「自分たちのサイトはかっこいい方がいい！自信を持って見せられるサイトを作りたい」と思いました。
またお客様のサイトの場合でもやはりイメージの部分はしっかりヒアリングさせていただき、デザインをご提案いたします。
なんだかんだ言っても人もサイトも第一印象は大事ですよね。

今回のペコプラサイトのデザインポイント

• 「どんな高い壁もアイデアと実行力で乗り越える」というキャッチコピーを表現したメインビジュアル
• ロゴマークのPOPなカラーを使用しながらも、POPになりすぎないようモノトーンベースでバランスをとった配色
• SEO業者=不透明という印象を持たれ易い為、オープンで明るい印象のデザインにする事

この3点を重点的にデザイン詰めしていきました。

コーディング・開発

デザインが決まりましたらコーディングを行います。
リニューアルといえど、デザインを忠実に再現するため、もちろん1からコーディングを行います。
SEOに効果的なマークアップを行う事も基本です。
また今回新規コンテンツとして追加した「制作実績」と「社長ブログ」はカスタム投稿を追加で作成しました。

リリース作業

テスト環境でのコーディング､開発が終わったらいよいよリリース作業です。
ブラウザチェックに加え、モバイル端末やタブレットでも表示やシステムにエラーがないか念入りにチェックしていきます。
特にリニューアルは以前のコンテンツを生かしている場合などもあり、そういった部分の確認も怠らないようにします。

更新・改善

リリース完了して終わりではありません。
サイトリリース完了はサイトリリーススタートでもあります！
更新や改善をし、もっと魅力的なサイトになるよう育てていきましょう。
弊社では時間がないWEB担当者様や、コンテンツが増やせない会社様に変わって、サイト保守やコンテンツ制作も承っております。

まとめ

いかがでしたでしょうか。
簡単ではありますが、サイトリニューアルの手順のご紹介と合わせて、自社サイトアピールを少しさせていただきました！
リニューアルの目的は会社それぞれかと思いますが、弊社ではしっかりヒアリングをさせていただき、ご紹介させていただいたリニューアルの手順項目に加え、SEO対策はもちろん、ライティング代行でのコンテンツ作成も承ります。またその全てをワンストップでお任せいただけます。
まずはご相談だけでも構いません！お気軽にお問い合わせください。