自社サイトのリニューアルの記録（戦略編）｜AIで“作る”が速くなった時代に、“作る前”に考えたこと

はじめに

こんにちは。株式会社 X Umbrella代表の宮川です。先日、弊社のリニューアルサイト（本サイト）を公開しました。これまで専門的な知見やスキルを活かして行っていた実装作業の多くを、今回のリニューアルではAIが担っています。

「AIを使えば、Webサイトは速く作れる」。それは、半分は本当です。けれど、「速く作れること」と「成果につながること」は別物です。今回のリニューアルでは単に効率化するだけではなく「自社は何者で、誰に、何を届けたいのか」。その解像度を上げることにAIを活用しました。

先にお伝えしておくと、AIを使っても、リニューアル全体が速く終わったわけではありません。作業そのものは速くなったにもかかわらず、全体の期間は従来の制作と比べてほとんど変わってません。なぜそうなったのかは、後ほど解説します。

本記事は、クリニック専門のWeb制作・集患マーケティングを手がける X Umbrella が、自社サイトをリニューアルした記録です。それと同時に、「AIが普及した今だからこそ大切にすべき工程」をお伝えしたいと考え、Webサイトの新規制作やリニューアルを検討されている経営者やWebディレクター、Webマーケターの方向けに執筆しました。

事業と向き合い、言葉を固め、心理学や行動経済学を設計の根拠に据えるまでのプロセスを、実務レベルの粒度で書いています。このやり方が唯一の正解というわけではありませんが、弊社がどのようにサイトを作り上げたのかを知っていただき、サイト制作の参考にしていただけたら嬉しいです。

なお、本記事は3部作の「戦略編」です。実際にどうデザインしたかはデザイン編、どう実装したかは実装編で詳しく解説しています。

サイトリニューアルした背景・目的 ── きっかけは、クリニック専門化への決断

サイトリニューアルのきっかけは、事業の進む方向を定め直したことでした。

株式会社 X Umbrella は、2021年11月5日にWebサイト制作会社として設立しました。設立当初から有難いことに引き合いをいただき、業種を問わず幅広い企業に向けて Web 制作・マーケティング支援を行ってきました。

そんな中で後回しになっていたのが、自社のコーポレートサイトです。まさに「医者の不養生」で、クライアント様のサイトには全力を注ぐ一方、自社サイトは時間をかけて制作する余裕がなく、WordPressの有料テーマ TCD を使って、とりあえず名刺代わりに置いているだけでした。Webサイト制作会社でありながらテンプレートのままでいることに後ろめたさを感じつつ、リニューアルのリソースを割けないことにも、もどかしさを抱えていました。

一方で、SEO対策やMEO対策、広告運用、集客、採用など、Web制作の枠を超えるご要望やお困りごとに対応する機会も増えていました。そうした経験を重ねるほど、本当にクライアント様の成果——売上や予約の増加——につなげるには、その業界・事業への深い理解（いわゆる、ドメイン知識）が欠かせないと感じるようになります。手段を広げるより、一つの領域を深く理解する。そう考え、これまで特に貢献度の高かったクリニックに専門特化する道を選びました。

そしてこの機会に合わせて、「自社は何者で、誰に、何を届けたいのか」を見つめ直し、それをリニューアルサイトで表そうと考え、目的は次の3つに整理しました。

X Umbrella を言語化（自社の強みや想いを明確にする）
ブランディング（自社に対するイメージを作る）
リード獲得（問い合わせ・相談につなげる）

この記事の概要

まず、X Umbrella がサイトを制作するときの全工程は下図の通りです。このうち、商談・契約にあたる 01〜03 と、納品後のアフターサポート 15 を除いた、04〜14 が今回の自社リニューアルの制作工程です。

ただし、本記事では工程を一つずつ解説していくわけではありません。作業手順ではなくそれぞれの工程の根底にあった、“思考の順番”を次の4つのSTEPに分けて追っていきます。

STEP1：参考サイトを集めて「なぜ良いか」の解像度を上げる
STEP2：自社と向き合い、“らしさ”の解像度を上げる
STEP3：心理学・行動経済学を“伝わり方”の根拠にする
STEP4：サイト全体を“ユーザー心理に沿って”設計する

STEP1 ── 参考サイトを集めて「なぜ良いか」の解像度を上げる

最初に行なったのは、世の中の良いサイトを集めることでした。ねらいは、ただ眺めて参考にすることではなく、他社のサイトを後工程の自社のコンセプト作りと、表現の参考にすることです。

きれいだから、ではなく「なぜ心が動いたか」を集める

「良いサイト」＝「おしゃれなサイト」を探してしまいますが、それでは個人的な見た目の好みで終わってしまうので、見栄えの良さではなく、他のページも見てみたいか、アクションを起こしたいか、など自分の心が動いたかどうかを基準にしました。

あるサイトを見て何かを感じたら、その「何か」を——何を見て（What）、なぜ心が動いたのか（Why）、どうやって実現しているのか（How）——の3つをユーザー目線で考え直すようにしました。サイトを訪れた人は何を見て、なぜ心を動かされ、それはどんな仕掛けで実現されているのか。「良い」という曖昧な感覚を理由まで深掘りすることで、ぼんやりとした輪郭がはっきりと象（かたど）っていきます。

Figmaに貼って、気になった箇所にコメントを残す

作業そのものはいたってシンプルで、気になったサイトはスクリーンショットを撮り、Figma のキャンバスにどんどん貼り付けていきました。そのうえで、気になる箇所に直接コメントを残していきました。このとき、3つの視点で分けて考えます。

コンテンツ：コピーの言い回し、情報の見せ方、言葉選び
デザイン：余白、色づかい、フォント、写真の使い方
機能：スクロールの仕掛け、アニメーション、操作のしやすさ

同じ「いいな」でも、それがコンテンツの良さなのか、デザインの良さなのか、機能の良さなのか。理由を分解しておくと、後で「自社のサイトでは何をすべきか」を考えるときに、そのまま判断材料になります。

STEP2 ── 自社と向き合い、“らしさ”の解像度を上げる

STEP1で判断基準ができたら、自社と向き合います。今回のリニューアルで、最も時間をかけたのがこの工程でした。

なぜ「言葉」がデザインより先なのか

考え方の軸は、逆算です。本当に作りたかったのは、「サイトを見た人に、X Umbrella の想いや空気感が伝わるサイト」でした。

届けたい相手に響くデザインには、その相手に向けた設計が要る。その設計の土台には、相手に向けた言葉が要る。そして言葉を書くには、まず自社が何者かを分かっていなければならない。つまり、デザイン ← 設計 ← 言葉 ← 自社理解。最初に手をつけるべきは「自社と向き合うこと」になります。多くのリニューアルが見た目はオシャレでも成果に繋がらないのは、自社理解をしないまま制作することだと考えています。

AIとの壁打ちで、自社のコンセプトを抽出する

「自社と向き合う」ために、感覚に頼らず体系立てて、コンセプトを作り上げる仕組みを用意しました。

弊社には設立時から Purpose / Mission / Vision があります。「社会の悲しみから守る傘になる」という理念もそのひとつです。今回は、クリニック専門化という今の事業に合わせて、これらを“今の言葉”で見直しました。とりわけミッションは、新しく定義し直しています。

参考にしたのは、株式会社北の達人コーポレーション・木下勝寿社長の著書『戦わずして売る技術』にあるコンセプト抽出の考え方です（この本、とてもオススメです）。

これをもとに、自社の提供しているサービス、ターゲット、現在のサイトURLの質問に答えたり、資料をアップロードするだけで、自社のコンセプト候補が出てくるカスタムGPTs（ChatGPT）を自作しました。主に、カスタムGPTsでは、以下の内容を洗い出してくれます。

1. 深層心理にある顧客ニーズ

ターゲットが抱える、不便、不安、不満、期待、要望などをリストアップし、以下の4つに整理。

機能的ニーズ（経営・業務・仕組みとして“できていないこと”）
感情的ニーズ（不安・後悔・焦り・ストレス）
社会的ニーズ（立場・評価・信頼・周囲からの見え方）
深層ニーズ（言語化されにくい本音・根源欲求）

2. USP(Unique Selling Proposition)の洗い出し

自社のUSP（強み）をリストアップし、以下4つに整理。

ユニーク・ベネフィットUSP（独自性の便益）
リーズンUSP（論理的根拠）
オーソリティUSP（第三者評価）
エクストラUSP（付随的価値）

3. 競合との比較と、独自性の判定

各「顧客ニーズ × USP」に対して、競合を以下の3つの観点で洗い出し。

プロダクト競合（同じ土俵で戦う競合）
メソッド競合（別の手段で同じ目的を満たす競合）
インサイト競合（心理的な競合）

そのうえで、競合と比べて自社に優位性があるかを判定し、その理由まで言語化してくれます。

4. 競合との比較と、独自性の判定

競合に対して優位性のある「顧客ニーズ × USP」に絞って、専門用語を使わない訴求メッセージ。「その施策、やりっぱなしにしていませんか」といった、ターゲットに直接届く言葉の候補です。

ここまでを一気に出してくれるので、あとは出てきた大量の候補をGoogleスプレッドシートに転記し、自社の実態に合致し「これなら勝てる」と思えるものを絞り込みました。

ミッションの再定義

こうして絞り込んだ要素を、最終的にひとつの言葉へ落とし込みました。

Webをつくるのではなく、想いと成果をつくる。

この言葉は、X Umbrella のMission そのものに据えました。元々は「心と生活を豊かにするモノ・サービス・想いを広める」というMission でしたが、今の事業に合わせて新たに定義し直しました（Purpose と Vision は変えていません）。リニューアルサイトのトップのファーストビューにもコピーとして掲載しています。

そして、Googleスプレッドシートで絞り込んだ顧客ニーズやUSP、訴求メッセージなどを文章にして、ドキュメントツール Notion（ノーション）に集約し、そのままWebサイトに掲載する原稿の下書きにしました。

ロゴのマイナーチェンジ

専門特化に合わせて、ロゴにも手を入れました。X Umbrella のロゴは、傘のシンボルの中に「X」の文字が隠れた構成で、淡いブルーから深いブルーへのグラデーションには「悲しみの深さ」という意味を込めています。

クリニックは、不安を抱えた人が健康や命と向き合う場所です。そうした“安心や優しさが求められる領域”に専門特化していくにあたり、ブランドの印象も、より親しみや優しさが伝わる色合いへと寄せました。

このロゴカラーの変更も「誰に、何を届けたいか」という同じ問いから決めました。

STEP3 ── 心理学・行動経済学を“伝わり方”の根拠にする

言葉が固まると、次は「その言葉を、どう伝えるか」の設計です。

ここで意図的に取り入れたのが、心理学・行動経済学の知見でした。なんとなく良さそうだから、で要素を置くのではなく、「人がどう感じ、どう動くか」を根拠にする。サイトの読み手は、Web制作会社・マーケティング支援会社を探しているクリニックで、人も実績も費用も分からない不安や迷いを、どこで・どうやわらげるか。一つひとつの要素に、その狙いを持たせました。以下はその一例です。

制作費シミュレーター：段階的な開示と、目標勾配効果

Web制作の費用は、外からは見えにくいので、質問に1問ずつ答えると概算費用が分かる、制作費シミュレーターを作成しました。
狙いは2つ。一度にすべてを聞かず段階的に開示することで、答えるユーザーの負担を減らすこと。そして進むほど結果に近づく感覚——ゴールが近づくほどやり遂げたくなる目標勾配効果が、回答を後押しすることです。何より、手軽に自分の知りたい情報を知ることができ、問い合わせ前の不安をやわらげます。

月額制という料金の“形”：痛みの分散と、伴走の意思表示

Web制作を月額制にしたことにも、明確な理由があります。

もともと弊社は、Webサイト制作を数百万円単位で一括でお引き受けしていました。けれど、AIが普及したいま、専門家であるわれわれは大きく工数が変わらないことやクオリティの担保にはそれなりの知見やスキルが必要なことは理解していますが、専門家ではない一般の方は「AIで簡単にサイトが作れてしまうのでは」という世間的な見え方が変わってしまいました。

そのため、一括で大きな費用での受注というかたちは以前ほど成立しにくくなっている、と個人的に感じています。この変化に向き合った結果が、月額制への移行でした。行動経済学の面から見ても、一括の高額な支払いはハードルが高い一方、月々の小さな額なら受け入れやすい。これは支払いの痛みの分散と呼ばれる考え方で、初期費用という最初の壁も下げられます。

そしてそれ以上に、弊社が掲げる Growth Partner——伴走し続ける存在という姿勢を、価格の仕組みそのもので示せます。言葉で約束するだけでなく、仕組みで証明するための選択でした。

集患マーケティングの2プラン：状況に合わせた入り口を用意する

この「料金の形で姿勢を示す」考え方は、Web制作だけでなく、これまで「Webコンサルティング」として提供してきたマーケティング支援サービスも、今回のリニューアルに合わせて「集患マーケティング」という名称に変更しました。

そして、クリニックの状況に合わせて選べるよう、2つのプランを用意しています。毎月決まった額で安定して伴走する月額固定プランと、月々の費用を抑えて成果に応じてお支払いいただく成果報酬プランです。

前述の「Webをつくるのではなく、想いと成果をつくる。」という弊社のミッションの姿勢を示す目的もあり、今までなかった成果報酬プランを新設し、小さく始めたいクリニックにも、腰を据えて取り組みたいクリニックにも、それぞれに合った入り口を用意しました。

Google口コミ：第三者評価による社会的証明

いくら自社サイトで「いい会社です」とアピールするより、実際のクライアント様からのGoogle口コミによる評価の方が、強力で社会的証明になります。SNSなどでもフォロワーが0人より、フォロワーが数万人いるアカウントの方が、初めてそのアカウントを見る人は、興味を持ちやすくなります。

口コミの評価は「また頑張ろう」という、励みにもなります。口コミの数を集めることを目的にするのではなく、クライアント様の期待を超える結果に繋がった際に、頂くことができるので、一つひとつ真摯に取り組む姿勢でいることを忘れないようにしたいです。

「なんとなく」をなくす

ここまでの要素に共通するのは、「なんとなく置いた」ものが一つもないことです。すべてに「人がどう感じ、どう動くか」という根拠があります。

アニメーションやイラストも同じ考え方です。スクロールに連動して動く PROMISE セクションのスクロール位置を固定したアニメーションには、2つの狙いがあります。「この先も見てみたい」という気持ちを引き出すこと。そして、弊社が掲げる「7つの約束」をしっかり見てもらうことです。

スクロールに合わせて内容が展開する仕掛けで読み手をその場に留め、読み飛ばされがちな大切なメッセージを確実に届けます。装飾のためではなく、伝わり方そのものを設計するための演出です。

STEP4 ── サイト全体を“ユーザー心理に沿って”設計する

STEP3で紹介したのは、サイトの各所に置いた“点”の施策でした。けれど、一つひとつに根拠があっても、バラバラに置かれていては力を発揮しません。点と点をつなぎ、訪れたユーザーが抱える不安をひとつずつ解消しながら、自然と次の行動へ進む。その面の設計が、STEP4のテーマです。

「読む順序」ではなく「不安への対応」で考える

サイトは訪れた人がどこから読み始めるかは分からないし、必要な情報だけ拾って離脱することもあります。

そこで考え方を変え、読み手が抱えるであろう不安や迷いを一つずつ洗い出し、その一つひとつに応えるコンテンツを配置する設計にしました。「この順番で読ませたい」ではなく、「この不安には、これで応える」。相手の不安をどれだけ細かく捉えられるか——その解像度が、設計の質を決めます。

たとえば「顔が見えない不安」に応える

Web制作会社・マーケティング支援会社を探すクリニックにとって、「どんな人会社が・どんな想いでやっているのか分からない」のは大きな不安のひとつです。顔の見えない会社より、顔の見える会社のほうが安心して相談できる。そこで、この不安に応えるために、次のようなコンテンツを配置しました。

代表の写真 ── 会社の「顔」を、文字どおり見えるようにする
クリニックに向けたメッセージ ── 誰に語りかけている会社なのかを示す
事業を通して成し遂げたい想い ── 何のためにこの仕事をしているのかを伝える
X Umbrella の強み ── 任せたときに何が得られるのかを明らかにする

応えるべき不安は「顔が見えない」だけではないので、ほかの迷いにも対応するコンテンツを当てていきました。

費用が分からない不安 → 制作費シミュレーター
実績や信頼への不安 → Google口コミ

「どんな順番で読ませるか」ではなく、「どんな不安に、何で応えるか」を起点に配置する。これが全体設計の基本方針です。

行動しやすい「導線」：一段ずつ、行動を引き上げる

不安を解消した先に行動の出口がなければ、高まった気持ちも行き場を失います。そこで意識したのが、気持ちの高まりに合わせて、行動を一段ずつ引き上げる設計です。

その代表が、費用まわりの導線です。まず制作費シミュレーターで概算を知ってもらう。概算が分かると「もっと詳しく知りたい」という気持ちが生まれるので、全サービスの料金をまとめた価格表ダウンロードで手元でじっくり検討できるようにする。そして関心が高まった人に、最後の一歩としてオンライン相談への入り口を置く。

シミュレーター → 価格表ダウンロード → オンライン相談。一足飛びに「お問い合わせはこちら」と迫るのではなく、一段ずつ階段を上ってもらう。STEP3で触れた目標勾配効果や段階的な開示を、コンバージョン導線にも応用したものです。判断の基準は一貫して、「見た目が美しいか」ではなく「伝わるか・動きやすいか」。サイト全体をユーザーの不安に一つずつ応えていく場として組み上げました。

思考の根底にあるもの ── AIには「速さ」を、人は「判断」を持つ

ここまで、Webサイト制作前の思考の4STEPをお伝えしてきました。そして、最後にAIが発展してきたこの時代において、

作業は速くなったが、かかった時間は減らなかった

今回のリニューアルは、複数のAIを役割で分けて進めました。自社のコンセプト作りはChatGPT、実装の主担当はClaude Code、コードのレビューをCodex、などという分業です。ひとつの作業を取り出せば、確かに以前より速くなっています。

ところが、リニューアル全体にかかった時間は、従来の制作と比べてあまり変わっていません。理由は2つあります。

ひとつは、やり取りの往復と、判断の工程が増えたこと。AIは、放っておいて完成品を出す魔法ではありません。問いを投げ、返ってきた提案を吟味し、「採用する」「ここは違う」と判断し、修正を指示して、また確認する。この往復がまるごと増えました。AIが速く案を出すほど、こちらが判断すべき回数も増えていきます。

もうひとつは、判断が増えた分、より深く考える必要が生まれたこと。提案を受けて「これでいいか」を決めるには、その都度「そもそも何を目指していたか」に立ち返らなければなりません。選択肢が次々に出てくるからこそ、一つひとつを深掘りする時間が要りました。

本編でも「STEP2：自社と向き合い、“らしさ”の解像度を上げる」以外ではAIを活用していません。理由としては、AIは平均的な出力はするけど、本当に成果に繋げるための要素は、人間が判断して作り上げていく必要があるからです。ただし、今後はSTEP2以外もAIを活用しながら、効率化を図りたいと考えています。

AIを使うほどアウトプットの密度は濃くなり、考えることも決めることも増えていきましたが、逆に、空いた手の時間が、そのまま「考える時間」に変わっていきました。その分、自社のことをより解像度高く言語化でき、掲載できるコンテンツが増え、表現の幅が広がったので、この「考える時間」をおろそかにせず自社と向き合うことで、自社だけの価値を見出すことができ、AI時代にも勝ち抜いていくことができるはずです。