先日、X Umbrellaのリニューアルサイトを公開しました。 これまで専門的な知見やスキルを活かして行っていた実装作業の多くを、今回のリニューアルではAIが担っています。
「AIを使えば、Webサイトは速く作れる」。それは、半分は本当です。けれど、「速く作れること」と「成果につながること」は別物です。 今回のリニューアルでAIを活用したのは、単に効率化するためではなく、「X Umbrellaの雰囲気や想いをしっかりと届けるため」でした。
見た目を新しくすること自体を目的にしてしまうと、リニューアルはたいてい「自己満足」で終わってしまいます。 だからこそ、AIの活用によって浮いた時間は、その失敗を避けるために使いました。——「自社は何者で、誰に、何を届けたいのか」。その解像度を上げることに集中したのです。
先にお伝えしておくと、AIを使っても、リニューアル全体が速く終わったわけではありません。作業そのものは速くなったにもかかわらず、全体の期間は従来の制作と比べてほとんど変わっていないのです。なぜそうなったのかは、後ほど解説します。
本記事は、弊社の自社サイトをリニューアルした記録です。それと同時に、「AIが普及した今だからこそ大切にすべき工程」をお伝えしたいと考え、Webサイトの新規制作やリニューアルを検討されている経営者やWebディレクターの方向けに執筆しました。
事業と向き合い、言葉を固め、心理学や行動経済学を設計の根拠に据えるまでのプロセスを、実務レベルの粒度で書いています。このやり方が唯一の正解というわけではありませんが、弊社がどのようにサイトを作り上げたのかを知っていただき、サイト制作の参考にしていただけたら嬉しいです。
なぜ「いきなり設計・デザイン」しなかったのか
リニューアルと聞くと、多くの人が思い浮かべるのは「設計やデザインを新しくすること」です。けれど、見た目の刷新そのものをゴールに置くと、「何のために作るのか」が置き去りになり、たいてい「なんとなくオシャレになった」で終わってしまいます。
これは自社サイトに限った話ではありません。クライアント様のWeb制作でも、手を動かす前に考え切ることを徹底しています。
実際の制作工程
X Umbrella がクリニックのサイトを制作するときの工程は、次の通りです。
このうち、商談・契約にあたる 01〜03 と、納品後のアフターサポート 15 を除いた、04〜14 が今回の自社リニューアルの制作工程です。
思考の順番
ただし、本記事では工程を一つずつ解説していくわけではありません。それぞれの工程の根底にあった“何を基準に判断したか”で仕上がりは変わるため、作業手順ではなく“思考の順番”を、次の5つのSTEPに分けて追っていきます。
- STEP1：参考サイトを集めて「なぜ良いか」の解像度を上げる
- STEP2：自社と向き合い、“らしさ”の解像度を上げる
- STEP3：心理学・行動経済学を“伝わり方”の根拠にする
- STEP4：サイト全体を“ユーザー心理に沿って”設計する
- STEP5：AIには「速さ」を、人は「判断」を持つ
サイトリニューアルした背景・目的 ── きっかけは、クリニック専門化への決断
サイトリニューアルのきっかけは、事業の進む方向を定め直したことでした。
株式会社 X Umbrella は、2021年11月5日にWebサイト制作会社として設立しました。設立当初から有難いことに引き合いをいただき、業種を問わず幅広い企業に向けて Web 制作・マーケティング支援を行ってきました。
そんな中、自社のコーポレートサイトについては、時間をかけて制作する余裕がなく、WordPressの有料テーマ TCD を活用して、とりあえず名刺代わりのつもりで置いていました。Webサイト制作会社でありながらテンプレートのコーポレートサイトのままでいることに後ろめたさを感じつつ、リニューアルのリソースを確保できないことにも、もどかしさがありました。
一方で、SEO対策やMEO対策、広告運用、集客、採用など、Web制作の枠を超えるご要望やお困りごとに対応する機会も増えていました。そうした経験を重ねるほど、本当にクライアントの成果——売上や予約の増加——につなげるには、その業界・事業への深い理解が欠かせないと感じるようになります。手段を広げるより、一つの領域を深く理解する。そう考え、これまで特に貢献度の高かったクリニックに専門特化する道を選びました。
そしてこの機会に合わせて、「自社は何者で、誰に、何を届けたいのか」を見つめ直し、それをリニューアルサイトで表そうと考え、リニューアルの目的は次の3つに整理しました。
- X Umbrella を言語化（自社の強みや想いを明確にする）
- ブランディング（自社に対するイメージを作る）
- リード獲得（問い合わせ・相談につなげる）
STEP1：参考サイトを集めて「なぜ良いか」の解像度を上げる
いきなり「自社と向き合おう」と意気込んだところで、手は動きませんでした。クライアント様のお仕事でも同様ですが、真っ白な状態から「自社は何者か」を考え始めたところで、行き詰まります。
そこで最初にやったのは、自社の話ではなく、世の中の良いサイトを集めることでした。ねらいは、ただ眺めて参考にすることではなく、「なぜ良いと感じるのか」の解像度を上げることです。集め方には、ひとつだけ軸を置きました。「自分の心が動いたかどうか」です。
きれいだから、ではなく「なぜ心が動いたか」を集める
「良いサイト」を集めようとすると、つい「きれいなサイト」「おしゃれなサイト」を探してしまいます。けれど、それでは個人的な見た目の好みで終わってしまう。だから基準にしたのは、見栄えの良さではなく、他のページも見てみたいか、アクションを起こしたいか、など自分の心が動いたかどうかでした。
あるサイトを見て、何かを感じた。その「何か」を、そのままにせず——何を見て（What）、なぜ心が動いたのか（Why）、どうやって実現しているのか（How）——の3つで捉えるようにしました。このとき意識したのは、自分の感想で終わらせず、ユーザー目線で考え直すことです。サイトを訪れた人は何を見て、なぜ心を動かされ、それはどんな仕掛けで実現されているのか。「良い」という曖昧な感覚を理由まで深掘りすることで、その解像度が上がっていきます。
Figmaに貼って、気になった箇所にコメントを残す
作業そのものは、いたってシンプルです。気になったサイトはスクリーンショットを撮り、Figma のキャンバスにどんどん貼り付けていきました。
ただ眺めるだけでは、印象は流れて消えてしまいます。そこで、気になる箇所に直接コメントを残していきました。このとき、3つの視点で分けて考えます。
- コンテンツ：コピーの言い回し、情報の見せ方、言葉選び
- デザイン：余白、色づかい、フォント、写真の使い方
- 機能：スクロールの仕掛け、アニメーション、操作のしやすさ
同じ「いいな」でも、それがコンテンツの良さなのか、デザインの良さなのか、機能の良さなのか。理由を分解しておくと、後で「自社のサイトでは何をすべきか」を考えるときに、そのまま判断材料になります。
これは、単純に真似するための作業ではありません。目的は、自分の中に「良し悪しの判断基準」をつくっておくことです。基準がないまま作り始めると、一つひとつの判断が「なんとなく」になり、最終的に「なんとなくオシャレなサイト」へ逆戻りしてしまいます。
STEP2：自社と向き合い、“らしさ”の解像度を上げる
STEP1で判断基準ができたら、自社と向き合います。今回のリニューアルで、最も時間をかけたのがこの工程でした。
なぜ「言葉」がデザインより先なのか
考え方の軸は、逆算です。本当に作りたかったのは、「サイトを見た人に、X Umbrella の想いや空気感が伝わるサイト」でした。その理想から逆にたどると、作るべき順番が見えてきます。
届けたい相手に響くデザインには、その相手に向けた設計が要る。その設計の土台には、相手に向けた言葉が要る。そして言葉を書くには、まず自社が何者かを分かっていなければならない。つまり、デザイン ← 設計 ← 言葉 ← 自社理解。逆算すると、最初に手をつけるべきは「自社と向き合うこと」になります。多くのリニューアルが失敗するのは、自社理解をしないまま制作に入ってしまうことだと考えています。
AIとの壁打ちで、自社を棚卸しする
とはいえ「自社と向き合う」は、漠然としています。そこで、頭の中の曖昧な感覚を、ひとつずつ言葉に押し出していきました。
X Umbrella には、設立当初から Purpose / Mission / Vision（存在意義・使命・未来像）があります。ただ、クリニックへ専門特化したいま、それを“今の事業の言葉”として語り直す必要がありました。
「本当に届けたいものは何か」「提供したい価値は何か」「誰に貢献したいのか」——こうした問いを、AIと壁打ちしながら一つずつ言語化していきました。問いを投げ、返ってきた問い返しに答え、また考える。壁打ち相手がいることで、一人では言葉にならなかった感覚が輪郭を持ち、自社への解像度が上がっていきます。出てきた言葉は文章にして Notion（ノーション） に集約し、Webサイトに掲載する原稿の下書きにしました。
ロゴのマイナーチェンジ
専門特化に合わせて、ロゴにも手を入れました。ただし、全面的な作り直しはしていません。
X Umbrella のロゴは、傘のシンボルの中に「X」の文字が隠れた構成で、淡いブルーから深いブルーへのグラデーションには「悲しみの深さ」という意味を込めています。構造もデザインも、込めた意味も、一切変えていません。変えたのは、配色だけです。
クリニックは、不安を抱えた人が健康や命と向き合う場所です。そうした“安心や優しさが求められる領域”に専門特化していくにあたり、ブランドの印象も、より親しみや優しさが伝わる色合いへと寄せました。涼しげで落ち着いた青から、明るく柔らかい青へ。淡から深への濃淡（＝悲しみの深さを表す構造）はそのまま保っているので、込めた意味を損なわずに、印象だけを更新できています。
これは、この記事全体に通じる考え方の小さな実例でもあります。リニューアルだからといって、すべてを変える必要はない。変えるべきは、目的のために必要な部分だけ。ロゴの一色をどうするかも、「誰に、何を届けたいか」という同じ問いから決めました。
STEP3：心理学・行動経済学を“伝わり方”の根拠にする
言葉が固まると、次は「その言葉を、どう伝えるか」の設計です。
ここで意図的に取り入れたのが、心理学・行動経済学の知見でした。なんとなく良さそうだから、で要素を置くのではなく、「人がどう感じ、どう動くか」を根拠にする。サイトの読み手は、Web制作会社を探しているクリニックです。発注前の不安や迷いを、どこで・どうやわらげるか。一つひとつの要素に、その狙いを持たせました。以下はその一例です。
制作費シミュレーター ── 段階的な開示と、目標勾配効果
Web制作の費用は、外からは見えにくいものです。問い合わせる前の「いくらかかるのか分からない」という不安は、誰にでもあります。
そこで、質問に1問ずつ答えると概算費用が見える設計で、制作費シミュレーターを作成しました。
狙いは2つ。一度にすべてを聞かず段階的に開示することで、答えるユーザーの負担を減らすこと。そして進むほど結果に近づく感覚——ゴールが近づくほどやり遂げたくなる目標勾配効果が、回答を後押しすることです。何より、手軽に自分の知りたい情報を知ることができ、問い合わせ前の不安をやわらげます。
月額制という料金の“形” ── 痛みの分散と、伴走の意思表示
Web制作を月額制にしたことにも、明確な理由があります。
もともと弊社は、Webサイト制作を200〜1,000万円ほどで一括でお引き受けしていました。けれど、AIが普及したいま、専門家であるわれわれは大きく工数が変わらないことやクオリティの担保にはそれなりの知見やスキルが必要なことは理解していますが、専門家ではない一般の方は「簡単にサイトが作れてしまうのでは」という世間的な見え方が変わってしまいました。
そのため、一括で数百万円という受注のかたちは以前ほど成立しにくくなっています。この変化に正直に向き合った結果が、月額制への移行でした。行動経済学の面から見ても、一括の高額な支払いはハードルが高い一方、月々の小さな額なら受け入れやすい。これは支払いの痛みの分散と呼ばれる考え方で、初期費用という最初の壁も下げられます。
そしてそれ以上に、弊社が掲げる Growth Partner——伴走し続ける存在という姿勢を、価格の仕組みそのもので示せます。言葉で約束するだけでなく、仕組みで証明するための選択でした。
集患マーケティングの2プラン ── 状況に合わせた入り口を用意する
この「料金の形で姿勢を示す」考え方は、Web制作だけではありません。これまで「Webコンサルティング」として提供してきた支援も、今回のリニューアルに合わせて「集患マーケティング」へと置き換えました。
そして、クリニックの状況に合わせて選べるよう、2つのプランを用意しています。毎月決まった額で安定して伴走する月額固定プランと、月々の費用を抑えて成果に応じてお支払いいただく成果報酬プランです。
「Webをつくるのではなく、想いと成果をつくる。」という弊社のミッションの姿勢を示す目的もあり、今までなかった成果報酬プランを新たに作り、小さく始めたいクリニックにも、腰を据えて取り組みたいクリニックにも、それぞれに合った入り口を用意しました。
Google口コミ ── 第三者評価による社会的証明
自社が「いい会社です」と言うより、実際に依頼した第三者の評価のほうが、はるかに信じられます。これが社会的証明です。さらにGoogleという誰もが知るプラットフォームの口コミとして載せることで、「Googleに集まった評価」への信頼が、そのまま弊社への信頼として移ることを期待しています。
「なんとなく」をなくす
ここまでの要素に共通するのは、「なんとなく置いた」ものが一つもないことです。すべてに「人がどう感じ、どう動くか」という根拠があります。
アニメーションやイラストも同じ考え方です。スクロールに連動して動く PROMISE セクションのスクロール位置を固定したアニメーションには、2つの狙いがあります。「この先も見てみたい」という気持ちを引き出すこと。そして、弊社が掲げる「7つの約束」をしっかり見てもらうことです。
スクロールに合わせて内容が展開する仕掛けで読み手をその場に留め、読み飛ばされがちな大切なメッセージを確実に届けます。装飾のためではなく、伝わり方そのものを設計するための演出です。
ただし、ここで紹介したのは、あくまで個々の“点”の施策です。一つひとつに根拠があっても、それだけでは成果になりません。点と点をつなぎ、サイト全体をひとつの流れとして設計すること——それが、次のSTEP4のテーマです。
STEP4：サイト全体を“ユーザー心理に沿って”設計する
STEP3で紹介したのは、サイトの各所に置いた“点”の施策でした。けれど、一つひとつに根拠があっても、バラバラに置かれていては力を発揮しません。点と点をつなぎ、訪れた院長先生・理事長が抱える不安をひとつずつ解消しながら、自然と次の行動へ進む。その面の設計が、STEP4のテーマです。
「読む順序」ではなく「不安への対応」で考える
サイトを設計するとき、「上から順に読んでもらう」前提は置きませんでした。訪れた人がどこから読み始めるかは分からないし、必要な情報だけ拾って離脱することもあります。
そこで考え方を変え、読み手が抱えるであろう不安や迷いを一つずつ洗い出し、その一つひとつに応えるコンテンツを配置する設計にしました。「この順番で読ませたい」ではなく、「この不安には、これで応える」。相手の不安をどれだけ細かく捉えられるか——その解像度が、設計の質を決めます。
たとえば「顔が見えない不安」に応える
Web制作会社を探す院長先生にとって、「どんな人が・どんな想いでやっているのか分からない」のは大きな不安のひとつです。顔の見えない会社より、顔の見える会社のほうが安心して相談できる。そこで、この不安に応えるために、次のコンテンツを配置しました。
- 代表の写真 ── 会社の「顔」を、文字どおり見えるようにする
- クリニックに向けたメッセージ ── 誰に語りかけている会社なのかを示す
- 事業を通して成し遂げたい想い ── 何のためにこの仕事をしているのかを伝える
- X Umbrella の強み ── 任せたときに何が得られるのかを明らかにする
応えるべき不安は「顔が見えない」だけではないので、ほかの迷いにも対応するコンテンツを当てていきました。
- 費用が分からない不安 → 制作費シミュレーター
- 実績や信頼への不安 → Google口コミ
「どんな順番で読ませるか」ではなく、「どんな不安に、何で応えるか」を起点に配置する。これが全体設計の基本方針です。
行動しやすい「導線」── 一段ずつ、行動を引き上げる
不安を解消した先に行動の出口がなければ、高まった気持ちも行き場を失います。そこで意識したのが、気持ちの高まりに合わせて、行動を一段ずつ引き上げる設計です。
その代表が、費用まわりの導線です。まず制作費シミュレーターで概算を知ってもらう。費用の輪郭が見えると「もっと詳しく知りたい」という気持ちが生まれるので、全サービスの料金をまとめた価格表ダウンロードで手元でじっくり検討できるようにする。そして関心が高まった人に、最後の一歩としてオンライン相談への入り口を置く。
シミュレーター → 価格表ダウンロード → オンライン相談。一足飛びに「お問い合わせはこちら」と迫るのではなく、一段ずつ階段を上ってもらう。STEP3で触れた目標勾配効果や段階的な開示を、コンバージョン導線にも応用したものです。判断の基準は一貫して、「見た目が美しいか」ではなく「伝わるか・動きやすいか」。サイト全体を、見た目の作品ではなく、院長先生の不安に一つずつ応えていく場として組み上げました。
STEP5：AIには「速さ」を、人は「判断」を持つ
ここまで「AIと壁打ちした」「実装の多くはAIが担った」と書いてきました。最後に、AIをどう使ったのか、そして導入でお伝えした「作業は速いのに、なぜ全体は遅くなったのか」をお話しします。
作業は速くなったが、かかった時間は減らなかった
今回のリニューアルは、複数のAIを役割で分けて進めました。実装の主担当を一つのAIに、コードのレビューを別のAIに、イラストの生成にはさらに別のAIを使う、という分業です。仕様書の下書きから実装、図解やテキストの草案まで、「手を動かす速さ」が要る工程は、AIに任せました。ひとつの作業を取り出せば、確かに以前より速くなっています。
ところが、リニューアル全体にかかった時間は、従来の制作と比べてあまり変わっていません。理由は2つあります。
ひとつは、やり取りの往復と、判断の工程が増えたこと。AIは、放っておいて完成品を出す魔法ではありません。問いを投げ、返ってきた提案を吟味し、「採用する」「ここは違う」と判断し、修正を指示して、また確認する。この往復がまるごと増えました。AIが速く案を出すほど、こちらが判断すべき回数も増えていきます。
もうひとつは、判断が増えた分、より深く考える必要が生まれたこと。提案を受けて「これでいいか」を決めるには、その都度「そもそも何を目指していたか」に立ち返らなければなりません。選択肢が次々に出てくるからこそ、一つひとつを深掘りする時間が要りました。
つまり、AIを使うほどアウトプットの密度は濃くなり、考えることも決めることも増えていく。これは非効率だったのではありません。逆に、空いた手の時間が、そのまま「考える時間」に変わったのです。
その分、自社のことをより解像度高く言語化でき、掲載できるコンテンツが増え、表現の幅が広がりました。これはAIがなかった時代にはできなかったことです。
まとめ：作る前に決めるべきこと
今回のリニューアルでやったことは、まとめるとシンプルです。いきなりデザインせず、まず参考サイトから判断基準をつくり、自社と向き合って“らしさ”の解像度を上げ、その言葉をどう伝えるかを心理学・行動経済学を根拠に設計し、サイト全体を不安への対応として組み上げ、AIで速くなった分を「考える時間」に回す。やったのは、その順番を守っただけ、とも言えます。
サイトで誰に何を届けたいか
AIでサイトが速く作れる時代だからこそ、差がつくのは「何を作るか」を決める前の段階です。ツールが手を速くしてくれるほど、考えた部分の質が、そのまま成果物に表れます。
その第一歩は、「このサイトは誰に、何を届けたいのか」を一言で言えるかどうかです。すぐに言葉が出るなら、土台はできています。もし詰まるなら、制作の前に、まだ固めるべきものが残っているのかもしれません。
弊社は、その問いと向き合い言語化するところからお手伝いしています。クリニックサイトのリニューアルや「何から考えればいいか」で迷ったときは、オンライン相談でお話できますので、お気軽にお問い合わせください。