Webサイトリニューアルの9ステップをWeb制作会社が解説！

こんにちは。2007年創業のWeb制作会社、株式会社LIGのデザイン部　部長の吉田です。

これからWebサイトのリニューアルを検討しているけど、どうやって進めればよいのかわからない……という方に向けて、Webサイトのリニューアルの手順を9ステップで解説します。加えてWebサイトリニューアルの基礎知識や、参考事例もご紹介していきます。

Webサイトリニューアルの進め方9ステップ

Webサイトリニューアルの具体的な手順をご紹介していきます。

• ①リニューアルする目的を考える
• ②現サイトの問題点を洗い出す
• ③サイトマップ（ディレクトリマップ）作成
• ④デザインコンセプトの設計
• ⑤ワイヤーフレーム作成
• ⑥デザイン作成
• ⑦コーディング
• ⑧テスト・公開
• ⑨日々のチェック・更新・改善（公開後）

①リニューアルする目的を考える

「そもそもなぜサイトをリニューアルする必要があるのか？」まずはこれを考えることがスタートだと思います。

リニューアルする主な理由としては以下のようなことが挙げられると思います。

• 新たなコンテンツの追加
• ユーザーの使いやすさや満足度の向上
• 機能面での変更
• ブランドイメージの刷新

たとえば「商品の売上を上げたい」というような場合は、EC（ショッピング）機能付きのWebサイトを検討するなど、リニューアルの目的を明確にすることによってどのようなサイトにするのかも決まってきます。

目的が定まったら、目的を達成するための具体的な指標（KPI）を決めておくと、改善点すべき点も明らかになっていきます。

たとえば以下のような指標があります。

たとえば「商品の売上を上げたい」という場合には、目標の売上額から、どれくらいの問い合わせ数・購入数が必要になるのか、その問い合わせを得るためにはどのくらいのユーザーの訪問数が必要なのか……をどんどん逆算して算出していきます。

②現サイトの問題点を洗い出す

目的を明確にしたあとは、現サイトの問題点をすべて洗い出していきます。

Googleアナリティクスを使った現サイトのアクセス解析はもちろん、プロジェクトメンバーが実際に使ってみての所感やユーザーへのインタビューを参考に洗い出しをしていきます。サイトリニューアルでは洗い出した問題点が改善されるように設計します。

以下の例のように、サイトの問題点をどんどん挙げていきましょう。

• メニュー項目が多すぎて迷ってしまう
• 実際に作っている人が見えない（イメージできない）
• 文字だけなので内容がイメージがしづらい
• サイトの雰囲気がなんとなく暗い etc.

その他、競合他社のWebサイトや広く他業界のWebサイトを参考にすることで、自社サイトの問題点が明らかになることもあります。

③サイトマップ（ディレクトリマップ）作成

目的や改善点が定まったら、サイトマップやディレクトリマップを制作して、サイトの設計に入っていきます。

 
▲サイトマップの例

サイトマップとは、サイトのページ構造をツリー構造などで表した一覧図です。サイトに必要なコンテンツ決めや全体のボリューム感を把握したいという場合には作っておいたほうがよいものです。

 
▲ディレクトリマップの例

ディレクトリマップとは、Webサイト内のすべてのページのURL及びそのタイトル、内容などが網羅された一覧表のことをいいます。

リニューアル前後のURL情報やページタイトル情報を一覧で見ることができるので、制作をすすめる上では必須のものとなります。

その他にも、要件定義書というものを作成して、細かな制作要件を決めていきます。

▼要件定義の項目例

④デザインコンセプトの設計

サイト全体の設計が決まったら、次にデザインコンセプトの設計に入っていきます。

デザインコンセプトとは、プロジェクト全体のデザインについて定めた方針のことで、これからデザインを作っていく上での判断基準となるものです。デザインコンセプトをしっかりと定めておくことで、依頼者含めたプロジェクトに携わるメンバー全員の共通認識となり、より発想力を高め、さいごまで軸をブラさずに制作を進めることができます。

また、デザインコンセプトに基づいてつくられたコンテンツは、ブランドの理念や個性が反映され、ユーザーに対して魅力をダイレクトに伝えることができます。

デザインコンセプト設計では、課題のすり合わせからはじまり、競合調査、キーワードの洗い出し、厳選したキーワードからコンセプトへの落とし込みなどをやっていきます。

 
▲ムードボードのイメージ

また、デザインコンセプトに近い既存のデザイン例を集めたムードボードを使って、イメージを具体化することもあります。

⑤ワイヤーフレーム作成

サイト全体の構造やデザインコンセプトが決まったら、個別ページの詳細をワイヤーフレームをとおして決めていきます。

 
▲ワイヤーフレームの例

ワイヤーフレームとは、Webサイトの「配置図」のことです。「何をどこに置けばユーザーにとって一番いいのか？」を考えながら作っていきます。Adobe XDやPhotoshopなどのデザインツールを使って作成するのが一般的です。

Webサイト制作においてワイヤーフレームは必ず必要となってきます。Webサイトを作成するときに、いざデザインをしてみたらこの情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしまうこともあります。そうならないためにも、まずはワイヤーフレームを作成して、どこにどのような情報を入れるか、という構成を決めた上でデザインを進めていきます。

⑥デザイン作成

▲デザインカンプの例

ワイヤーフレームを作ったあとは、実際にPCやスマホで見たときの画面図（デザインカンプ）に落としこんでいきます。ツールはPhotoshopやIllustratorなどを使用します。

一気に作るのではなく、都度依頼者にデザインの確認を行ってもらいながら進めていきます。デザイン作成のフェーズではデザイナーがフロントに立って進めることが多く、定例MTGなどをとおして繰り返しコミュニケーションを取ることになります。

⑦コーディング

デザインが確定したら、あとは制作会社側でガリガリとコーディングしていきます。デザイン通りの見た目をWebブラウザ上で表示するための工程であり、この開発の段階に入ると、依頼者側ですることはほとんどありません。

コーディングツールはDreamweaver、Sublime Text、Codaなどがあります。

⑧テスト

サイトが完成したら、公開前の最終チェックをおこないます。

おもなテスト項目は以下のとおりです。

Chrome、Safariなどの各ブラウザに加え、iOS、Androidなどのモバイル端末やタブレットが登場してきたことでブラウザチェックの必要性はより一層増してきたと思います。デバイスの種類が増えてそれなりに工数もかかりますが、Web制作もいよいよ終盤です。

修正作業が完了したら、無事公開となります！

⑨日々のチェック・更新・改善（公開後）

「Webサイトは作ったらもうおしまーい！」って思っていませんか？　Webサイトは作ってからが本番です。

作りっぱなしで何もしないサイトは今の時代すぐに死んでしまいます。子どもと同じで気持ちを込めて育てていくことによってWebサイトは輝きを増すのです。

保守運用作業には以下のようなものがあります。

• ドメインやサーバの更新
• ソースコードのバージョン管理
• レイアウト崩れへの対応
• サーバ監視
• システムのバージョンアップ作業
• 外部サービスの仕様変更への対応
• コンテンツの更新
• 開発環境の保持とバックアップの取得

さらにサーバー代などのランニングコストが発生することも忘れてはいけません。丹精込めてサイトを育てていきましょう！

リソースが足りないという場合は、保守運用まで制作会社に任せるとよいでしょう。

Webサイトの保守運用について全てを解説した記事はこちら

Webサイトリニューアルとは？ 知っておきたい基本の知識

Webサイトリニューアルとは、既存のWebサイトのデザインや機能を一新することをいいます。

Webサイトはどんなタイミングでリニューアルをすべき？ 期間や費用はどれくらいになるの？ これからWebサイトをリニューアルする方が気になる情報についてご紹介していきます。

サイトリニューアルの適切なタイミングは？

リニューアルを検討すべきタイミングは、新規事業などあたらしくなにかをはじめるタイミングや、Webサイトとしての機能が低下していると感じたタイミングです。

具体的なケースは以下のとおり。

• Webサイトからのお問い合わせが減った
• ブランドイメージを刷新したい
• 新規事業をはじめたい
• 情報が多くなりすぎて見づらい
• 時代に合ったサイトに作り変えたい

サイト改善で解決するケースもありますので、自社にリソースがある場合はそちらを検討することもあるかなと思います。

💡サイト改善の5ステップと成功事例を解説した記事はこちら

Webサイトからのお問い合わせが減った

Webサイト経由のお問い合わせを増やすために、リニューアルによってサイトの構造を改善するケースです。

たとえばサイト内の回遊導線を見直すことで、ユーザーがストレスなく情報を得たり問い合わせにたどり着きやすくなったりすることが期待できます。それに伴いWebサイト自体の評価も上がり、SEO対策の強化にも繋がります。

Webサイトからの問い合わせが急に減った、もしくは徐々に減っているという場合には、なんらかの問題が発生している可能性がありますので、リニューアルを検討したほうがよいかもしれません。

ブランドイメージを刷新したい

Webサイトは企業やサービスの顔となりますので、ブランドイメージの刷新など、ガラッとイメージを変えたい場合にもサイトリニューアルは効果的です。

はじめに企業の理念やビジョン、サービスのセールスポイントの見直しなどをおこなってから、その戦略設計をもとにWebサイトやロゴデザインなどのビジュアルに落とし込んでいきます。

もちろんWebサイトをとおしたイメージ刷新がすぐにお問い合わせに繋がるわけではありませんが、長期的に見たときの企業やサービスのブランドイメージ確立に貢献します。

新規事業をはじめたい

新規事業の立ち上げとともにサイトリニューアルを検討する企業も多いです。

サイトの見た目だけでなく、情報の優先度を変えることで、今後自社が推していきたい事業をサイト上で目立たせることが可能です。

情報が多くなりすぎて見づらい

Webサイトを長年運用していると、「見づらい」「使いにくい」と思う部分が出てくるかもしれません。たとえば、コーポレートサイトを制作した当時は事業も少なかったのでシンプルなデザインに仕上げたけれど、事業が拡大するにつれてWebサイトの情報量も増加し、情報が煩雑になってしまっていた……というようなケースです。

メニュー項目の整備など、情報整理という目的でリニューアルを検討する企業も多いです。

時代に合ったサイトに作り変えたい

スマートフォンやタブレットなどの普及により、それぞれのデバイスに合った表示をするWebサイトが増えてきました。

パソコンでの閲覧しか想定していないようなサイトは、スマートフォンでみたときに文字や画像が小さかったりして見づらいですよね。「見やすさ」や「使いやすさ」は、サイトの評価を左右するもっとも重要な要素です。時代に合わせたユーザーファーストなサイトにするために、リニューアルを検討するケースも多くあります。

また古いWebサイトはセキュリティ的にも脆弱な部分があります。WebサイトのSSL化など、Webサイトの保守運用的な目的でのリニューアルもよくあるケースのひとつです。

リニューアル費用の相場は？

リニューアルの費用は、安くて20万円から、1,000万円以上するケースもあります。既存サイトの規模や追加したい機能によっても変わってくるので、一概にいくらということは難しいです。

ここでは、サイトリニューアル費用の相場に関わってくる3つの要素についてご紹介します。

依頼する会社の規模

Webサイトのリニューアル費用＝人件費と考えてよいです。

Web制作のように人件費が価格のほとんどを占めるような業態は、会社の規模が大きくなればなるほど、会社を維持するコストも高くなり、それが制作費用にも反映されます。

依頼する制作会社の企業規模は、相場を左右するポイントのひとつとなってくるでしょう。

スタッフの技術力

Web制作の見積もりは、人日単価といって、スタッフ一人あたりの日割りの人件費×制作にかかる日数で決められることが多いです。

スタッフの人件費が高い、つまりスキルが高ければ高いほど人件費も高くなり、制作の費用も高くなっていきます。

リニューアルの目的

リニューアルの目的はさまざまですが、サイトに求めることが高度であるほどコストも高くなっていきます。

たとえばサイトの構造や機能はそのままに、ただ見た目だけを変えたいという場合は、数十万円でも十分にリニューアルが可能になってきます。

一方で、サイトからのお問い合わせを大幅に増やしたいとなると、現状の課題分析や市場調査など、事業のコンサルティング的な要素も含んでくるため、プロジェクトに携わる人数も工数も増えて、トータルのコストも大きくなっていきます。

自社にあったリニューアルの相場かどうかを判断するには、サイトに求めることと、かかる費用のバランスが取れているかをしっかりと検討する必要があります。

お問い合わせの中には自社のサイト改善だけで解決する内容もあるので、リニューアルするかどうか含めて検討しましょう。

サイト改善についてはこちらの記事でまとめています

リニューアルにかかる期間

リニューアルにかかる期間は、早くて2〜3ヶ月、大規模なサイトであれば1年以上かかることもあります。サイトの規模や実装したい機能、どんな企業に依頼するかによって変わってきますが、基本的には3ヶ月以上はみておいたほうがよいです。

スケジュールに余裕がないと余計に費用なかかってしまうこともあるため、リニューアルが決まったタイミングですぐに依頼することをおすすめします。

リニューアル成功のポイントや注意点

サイトリニューアルを成功させるために大切なポイントや注意点をご紹介します。

目的を明確にしてさいごまでブラさない

制作会社に依頼する前に、「このサービスが載っていないから載せる」「今後はこういう求職者を採用したいからリニューアルする」など、リニューアルの目的を明確にしておくことはとても大切なことです。

目的のためにどういうサイトにするか、という部分で制作会社側はお手伝いすることができますが、リニューアルの目的は依頼者の事業の課題でもあるので、必ず明確にしておかなければならないポイントとなります。

また、目的を明確にしておかないと、プロジェクトの途中で「やっぱりこれもしたい」など想定していない要望が出てきてしまって、制作の方向性がブレる原因となります。さいごまでブラさないためにも、目的設定をしっかりとおこなっておきましょう。

意思決定が可能な責任者を決める

依頼側で、Webサイトリニューアルプロジェクトの責任者を決めておくことも大切です。

ただし、「上司にリニューアルしろと言われたから」と決定権がない方が責任者になってしまった場合、周囲の確認を取らないと判断が下せなかったり、逆に上司の意見で一度決まったことが覆ってしまったりと、制作会社の都合ではないところでプロジェクトが滞ってしまう可能性があります。

当初予定しないページ追加やデザイン修正があった場合、スケジュールの遅延や追加予算が発生してしまうので、ある程度の意思決定権を持つ責任者の方を決めておくことが重要です。

リニューアル前にデータ移行をするかどうかを決めておく

既存サイトのデータをリニューアル後のサイトに移行するかどうかは、サイトリニューアルにかかる工数に非常に大きな影響を及ぼすポイントです。サイトリニューアルをする際、既存サイトとはデザインやデータの持ち方が変わるので、古いデータを新しいサイト仕様にする必要が出てくるためです。

この古いデータを新しいサイトの仕様に変更する工数はとても大きいので、移行する・しないの判断は必ずサイトリニューアル計画の当初に決めておきましょう。後々変更するとなった場合、1ヶ月以上スケジュールに遅延が発生する可能性があります。

とくにメディアサイトの場合は、これまで蓄積した記事は資産になりますので「すべて移行する」「流入数の多い一部記事を移行する」「移行しない」の大きく3つの選択肢を迫られます。ここは最適な判断をしたいものです。

保守運用まで行ってくれる制作会社を選ぶ

Webサイトは作って終わりではありません。保守運用作業を自社でおこなえるのであれば問題ありませんが、外注したい場合は、リニューアルを担当した制作会社にお願いするのがベストです。

なぜなら、Webサイトのことをもっとも把握しているのは、そのサイトを制作した会社だからです。どんな機能がどこに搭載されているのか、ページ数はどれくらいあるのか、Webサイトはどんな技術で構築されているのか。そうした詳細な情報は、Webサイトを制作した会社でなければわかりません。そして、Webサイトを保守するには、そのような情報が必要なのです。

制作後のことを考えて、制作から保守運用までをおこなっている制作会社に依頼するのがおすすめです。

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

さいごに弊社でおこなったリニューアルの事例をご紹介します。

freee開業　CV率が限界突破

出典：freee開業　公式サイト

開業に関する知識がなくても個人事業主として開業できる、利用料無料のサービス「freeee開業」。

リニューアル前は何が一番ユーザーに求められているかが不明とのことから、ユーザーインタビューや1000人へのアンケート調査を実施し、ニーズを汲み取ったコンセプトを策定しました。

そのコンセプトをしっかり落とし込んだWebサイトを作成させていただきました。「もう上がらないと思っていた」と仰っていたCV率が限界突破（数十％増加）いたしました。

▼改善事例インタビューを詳しくみる

もう伸びないと思っていたCV率が限界を突破できた理由とは。「freee開業」LP制作裏話

たまさん

2021.04.07

個別指導イラスト・マンガ教室「egaco」　　1ヶ月でCV数125％

出典：egaco　公式サイト

合同会社Smiles.様が運営する個別指導イラスト・マンガ教室egacoの、サービス名の策定・ロゴ作成・キャラ設定・サイトリニューアルを担当させていただきました。

リニューアル後、1ヶ月（リニューアル直前の月との比較）でCV数（無料体験申し込み数）125%、検索流入数113%増加。また、校舎のあるエリアでの想定していたキーワードでも上位を獲得することができました。

Webサイトリニューアルもお任せください

サイトリニューアルにおける9ステップと考え方をご紹介させていただきました。

弊社LIGは毎年複数のデザインアワードを受賞するデザイン力、年間150サイトの制作・サイトリニューアルをしている実績に加え、リリース後の集客などサイト改善やコンテンツ作成まで幅広く対応が可能です。

戦略設計から制作することも得意としており、最適なアプローチで貴社のビジネス課題を解決へ導きます。どうぞお気軽にご相談ください！

LIGのWeb制作実績を見る

LIGに問い合わせする