Webサイトのリニューアルを検討し始めると、
「デザインを今っぽくしたい」
「スマートフォンで見づらい」
「コンテンツを整理したい」
といった、目に見える課題から話が始まることは多いと思います。
もちろん、それらを解決することも大切です。
ただ、実際にWebサイトを作り直していくと、その前に整理しておいた方がよいことがたくさんあります。
- 誰に見てもらうサイトなのか
- その人に何を理解してほしいのか
- Webサイトは、営業やSNSなど他の顧客接点の中で何を担うのか
- どんな状態になれば「リニューアルして良かった」と言えるのか
こうした前提が曖昧なまま制作を始めると、見た目は新しくなっても、「何のためのWebサイトなのか」は以前と変わらない、ということもあります。
2026年、markeTransでも自社サイトを全面的にリニューアルしました。
その過程では、デザインを考えるより前に事業や顧客を整理し、ワイヤーフレームを作りながらサービスの定義を見直し、実装後に情報設計まで戻って修正することもありました。
今回はその実体験をもとに、Webサイトをリニューアルするときに考えておきたいことを、
戦略 → 情報設計 → 設計を形にして検証する
という3つのフェーズに分けて整理します。
フェーズ1：「何のため」を問い直す
1. まず、「なぜリニューアルするのか」を言葉にする
リニューアルで最初に考えたいのは、ページ数でもデザインでもありません。
まず、
今のWebサイトでは、何ができていないのか。
を整理します。
例えば、
- 事業内容が変わったのに、サイトは数年前のまま
- サービスは増えたが、何を頼める会社なのか分かりにくい
- 問い合わせはあるが、求めている顧客と合わない
- SNSや広告から流入はあるが、その後の行動につながらない
- データは取れているが、改善に活かせていない
といった状態です。
「古くなったから新しくする」だけでは、リニューアル後に何をもって成功とするのかも決まりません。
markeTransの場合も、最初の問題はデザインではありませんでした。
既存サイトを見直したときに感じたのは、
現在の事業内容と、サイトで伝えていることがズレている
ということでした。
以前は、Web運用、SNS運用、ブランディング、解析などを個別のサービスとして紹介していました。
一方、実際の仕事では、
事業や顧客を整理する。
WebやSNSの役割を考える。
必要に応じて制作チームを組む。
公開後はデータを見ながら次の改善を考える。
というように、個別施策よりも前段から関わるケースが増えていました。
そこで、既存ページを部分的に直すのではなく、まず「今のmarkeTransは何をしているのか」から整理し直しました。
Webサイトを作り始める前に、
なぜ今、リニューアルする必要があるのか。
ここを言葉にしておくことが出発点になります。
2. 他の顧客接点も含めて、Webサイトの「役割」を決める
次に考えたいのが、
このWebサイトは、事業の中で何を担うのか。
です。
「集客するため」だけでは少し広すぎます。
例えば、
- 検索から新規顧客を獲得する
- 営業後の比較検討材料になる
- 紹介された人が会社やサービスを確認する
- SNSで興味を持った人の理解を深める
- 採用候補者に会社を理解してもらう
など、Webサイトに期待する役割は事業によって異なります。
さらに、顧客との接点はWebサイトだけではありません。
SNS。
検索。
営業。
紹介。
イベント。
広告。
さまざまな接点がある中で、
そのうちWebサイトは何を引き受けるのか
を整理します。
markeTransの場合、現在の受注は紹介が中心です。
そのため、Webサイトの第一の役割を、
紹介された人が、相談するかどうかを判断できる状態をつくること
としました。
アクセス数をとにかく増やすことよりも、
「関谷さんという人を紹介された」
↓
サイトを見る
↓
何ができるのか理解する
↓
実績や考え方を確認する
↓
相談するか判断する
という流れを優先しています。
Webサイトを単独の集客媒体として考えるのではなく、
他の顧客接点で生まれた興味や疑問を受け止め、理解・比較・納得を進める場所
として捉える。
役割が決まると、必要なページや情報の優先順位もかなり見えやすくなります。
フェーズ2：ユーザーの「判断」を設計する
3. 「何を説明したいか」ではなく、「何を判断したいか」を考える
Webサイトを作る側は、つい自分たちが説明したい順番で情報を並べがちです。
会社概要。
理念。
サービス。
特徴。
実績。
お問い合わせ。
ただ、それが訪問者の知りたい順番とは限りません。
今回のリニューアルでは、ページを考える前に、
サイトを訪れた人は、何を順番に判断するのか
を整理しました。
例えば、
- 何を頼める？
- 何が違う？
- 本当にできる？
- なぜできる？
- どんな考え方？
- 誰がやる？
- 相談してみよう
という流れです。
こうして考えると、
「自分たちはこの情報を載せたい」
ではなく、
相手が次の判断をするためには、何が必要か
という視点で情報を整理できます。
サービス内容を理解した人が次に気になるのは、
「本当にできるのか」
かもしれません。
それなら実績へ。
実績を見た人が、
「なぜこんなことができるのか」
と感じるなら、専門性や仕事の進め方へ。
Webサイトを単なるページの集合ではなく、
ユーザーの疑問に応じて理解を進められる情報のネットワーク
として考えていきます。
4. すべてのページに「役割」を持たせる
現在のWebサイトは、必ずしもトップページから読まれるとは限りません。
検索から事例ページへ来る人。
SNSから記事へ来る人。
紹介されたあと、プロフィールだけ確認する人。
入口はさまざまです。
そこで今回、
「全ページを意思決定ページにする」
というルールを決めました。
主要なページについて、次の6つを整理します。
- このページに来るのは誰か
- 何を知りたくて来るのか
- 読後に何を理解してほしいのか
- その次に何を知りたくなるのか
- 次にどこへ進んでもらうのか
- 最終的にどんな行動につなげるのか
この6つを考えると、
「このページは何のために存在しているのか」
がかなり明確になります。
逆に、役割を説明できないページは、独立させる必要がないかもしれません。
markeTransでも、当初は「強み」を独立ページとして設計していました。
しかし実際にサイトへ実装してみると、「markeTransについて」と説明している内容がかなり重なっていました。
そこで最終的には統合しています。
一度決めたサイトマップを守ることよりも、
ユーザーが理解しやすい構造になっているか
の方が重要です。
5. CTAは「お問い合わせ」だけではない
CTA（Call To Action）というと、
「お問い合わせ」
「資料請求」
「申し込む」
などを思い浮かべることが多いと思います。
もちろん、最終的なコンバージョンとしては重要です。
ただ、まだ十分にサービスを理解していない人に、いきなり問い合わせを求めても動きにくい。
そこで今回は、
「この情報を知った人は、次に何を知りたくなるか」
から導線を考えました。
例えば、
- Webリニューアルについて読んだ人 → 関連する事例
- 事例を読んだ人 → その仕事を支える専門性や考え方
- 知見記事を読んだ人 → 関連事例やサービス
- Aboutを読んだ人 → 実績や相談
といった形です。
つまり、
次に必要な情報へ進んでもらうこともCTA
と考えます。
すべてのページの最後に同じお問い合わせボタンを置くだけではなく、
ユーザーの理解が一段深まるように内部リンクを設計する。
「回遊を増やす」というよりも、
次の判断に必要な情報へ案内する
という考え方です。
フェーズ3：設計を形にし、検証する
6. デザインの前に、ワイヤーフレームで「内容」を詰める
ここまで整理してから、ワイヤーフレームを作ります。
ワイヤーフレームというと、
「ここに画像」
「ここに見出し」
「ここに本文」
といった、画面上の箱を配置するものをイメージするかもしれません。
今回のリニューアルでは、もう少し踏み込みました。
実際の見出し。
本文。
図解。
CTA。
内部リンク。
情報の強弱。
さらに、公開後に見るKPI（成果を確認するための指標）まで入れています。
例えばWebリニューアルのページでは、制作工程より先に、
WHO：誰に届けるのか
VALUE：なぜ選ばれるのか
JOURNEY：どう動いてもらうのか
ROLE：Webは何を担うのか
を整理しました。
「要件定義 → デザイン → コーディング」
という制作工程を説明する前に、
そもそも何のために、このWebサイトを作るのか
を決めるためです。
そして、ワイヤーフレームを作ってみると、戦略の曖昧さが見えてくることがあります。
markeTransの初期のワイヤーフレームでは、
「Webを、マーケティングへ。データを、判断へ。」
というコピーを使っていました。
一見すると大きな問題はありません。
ただ、画面として見ていく中で、
「これではWeb制作が主で、その付加価値としてマーケティングも扱うように見える」
という違和感が出ました。
実際の仕事は逆です。
まずマーケティングを整理する。
それをWebへ落とし込む。
公開後の顧客行動をデータで確認する。
その結果を次の判断へ戻す。
そこで、
「マーケティングを、Webに翻訳する。データを、次の判断に変える。」
へ変更しました。
ワイヤーフレームは、決まった戦略を画面にするだけの工程ではありません。
実際に形にすることで、まだ曖昧だった戦略やサービスの定義を発見する工程
でもあります。
7. デザインは「格好いいか」だけで判断しない
情報設計が固まったら、デザインへ進みます。
ここで、
「格好いい」
「今っぽい」
だけで判断するのは少し危険です。
信頼感を出す。
先進的に見せる。
高級感を出す。
親しみやすくする。
どれもデザインで表現できます。
ただ、その結果、
本来とは違う会社に見えてしまう
こともあります。
markeTransでも、複数のデザイン案を作りました。
ある案は、
「地場の広告代理店っぽい」。
別の案は、
「建築事務所やデザインスタジオっぽい」。
さらに別の案は、
「SaaSのサービスサイトっぽい」。
どれも、必ずしもデザインの品質が低かったわけではありません。
問題は、
markeTransがどういう存在なのかと、画面から受ける印象が一致していなかったこと
です。
最終的には、装飾でブランドらしさを作るのではなく、
支援してきたWebサイト。
SNS。
自分で撮影した写真。
分析画面。
データ。
といった、
仕事の実態そのものをビジュアルとして見せる
方向へ変更しました。
デザインは、情報をきれいに飾るための工程ではなく、
ユーザーが「自分たちは何者なのか」を直感的につかむための工程
だと捉えています。
8. 実装して違和感があれば、もう一度「設計」に戻る
Web制作は、
戦略 → 情報設計 → デザイン → 実装 → 公開
という一直線の工程に見えます。
実際には、必ずしもそうなりません。
今回も、ワイヤーフレームでは問題ないと思っていたものを、ブラウザやスマートフォンの画面で見ると、
「この二つのページ、役割が重なっている」
「このリンク先は不自然」
「スマートフォンだと情報量が多すぎる」
といった違和感が出ました。
そこで、必要に応じて、
実装 → デザインへ戻る
実装 → 情報設計まで戻る
といった修正も行いました。
先ほど触れた「強み」と「markeTransについて」の統合も、その一つです。
ワイヤーフレーム上では分からないことも、実物にすると見えてきます。
だからこそ、
一度決めた仕様を守ること
よりも、
実際のユーザー体験として自然か
を優先します。
リニューアルの工程は、一方向ではなく、必要に応じて前の工程へ戻りながら精度を上げていくものだと思います。
9. 公開前に、「公開後に見る数字」を決めておく
Webサイトを公開してから、
「さて、何を計測しよう」
と考えるのでは少し遅い場合があります。
何を見るべきかは、
そもそも何を変えたかったのか
によって変わるからです。
例えば、
「サービスを理解してもらう」
ことが目的なら、単純なPVだけでは十分ではありません。
サービスページを読んだあとに、
- 事例へ進んでいるか
- Aboutへ進んでいるか
- 関連する知見を読んでいるか
- 相談ページまで到達しているか
といった行動も確認したくなります。
そのため今回のリニューアルでは、ワイヤーフレームの段階から、
- 流入
- 閲覧
- 回遊
- 離脱
- CTAのクリック
- 問い合わせなどのCV（コンバージョン）
などを、公開後にどう確認するかまで考えました。
そして公開後は、
仮説 → 計測 → 分析 → 解釈 → 判断 → 改善 → 新しい仮説
を繰り返します。
リニューアルは、公開日がゴールではありません。
公開後に改善を始められる状態をつくること
まで含めて、リニューアルだと考えています。
Webサイトのリニューアルは、事業を整理し直す機会にもなる
今回、自社サイトをリニューアルして改めて感じたのは、
Webサイトのリニューアルは、単にデザインやページを新しくするだけではない
ということです。
誰に届けるのか。
なぜ選ばれるのか。
どう理解してもらうのか。
Webサイトは何を担うのか。
何をもって成果とするのか。
こうしたことを整理していくと、
Webサイトの話をしていたはずなのに、
「そもそもこのサービスは何を提供しているのか」
「自分たちは何者なのか」
「どんな顧客と仕事をしたいのか」
という、事業そのものの話に戻ることがあります。
markeTransでも、ワイヤーフレームを作りながらサービスの定義を修正し、コピーを書き直し、実装後にはサイト構造そのものを見直しました。
結果として、
Webサイトを作り直しながら、現在のmarkeTransという事業を整理し直していた
とも言えます。
Webサイトのリニューアルを検討するとき、
いきなり、
「どんなデザインにするか」
から始めるのではなく、まず、
「このWebサイトで、誰に何を判断してもらいたいのか」
から整理してみる。
そこが決まると、
必要なページも、
必要なコンテンツも、
デザインの方向性も、
公開後に見るべき数字も、
かなり見えやすくなります。
この記事が、リニューアルを検討する際の最初の整理に使えるものになればと思います。
リニューアルの進め方を、もう少し具体的に知りたい方へ
markeTransでは、事業や顧客の整理から、Webサイトの役割・情報設計・制作、公開後の改善までをつなげて支援しています。リニューアルで何を変えたいのか、そのために何から考えるのか。具体的な支援内容や進め方は、Webリニューアルのページをご覧ください。
