AIに頼むと、ホームページはここまで変わる — 同じ会社のサイトで見る4つのレベル

「AIでホームページを直せる」と聞いても、どこまで変えられるのかは、実物を見ないと分かりにくいと思います。文字を直すくらいなのか、それとも、よく見かける「スクロールすると動くおしゃれなサイト」まで作れるのか。

そこでこの記事では、同じ会社のホームページを、古いままの状態から最先端の表現まで、4つのレベルで並べました。どのレベルも、下のリンクから実際に動く見本を開けます。スクロールしながら見比べてみてください。

見本の会社は、私たちが検証用に用意した架空の町工場(株式会社ヤマダ製作所・金属加工)です。実在のお客様のサイトではありません。

4つのレベルを先に一覧で

レベル	ひとことで	主な変化	向いている会社
1	10年前のまま	紺の帯・小さな文字・スマホで崩れる	―
2	今の標準に整える	写真を大きく・余白・スマホ対応	ほとんどの会社はまずここ
3	2026年らしく	透けるメニュー・スクロールで現れる文章・横に流れる実績	採用や新しい取引先に「今の会社」と伝えたい
4	最先端の表現	スクロールで3Dの部品が組み上がる・場面が切り替わる	技術や製品そのものを見せたい

レベルが上がるほど、見た目の印象は強くなりますが、作業も大きくなります。上のレベルほど良い、というわけではありません。会社に合ったレベルを選ぶための材料として見てください。

レベル1: 10年前のまま

紺色の太い帯、左上に小さな会社名、文字の小さい本文。2010年代によく作られた形です。スマホで開くと表が画面からはみ出し、お知らせは1年以上前、フッターの年号は「© 2019」のまま、という状態を再現しています。

内容は悪くないのに、見た目で「今も営業しているのかな」と思われてしまう。多くの会社のホームページが、今この状態にあります。古く見える理由は、2026年に「古く見える」ホームページの特徴7つと、AIへの頼み方で1つずつ解説しています。

レベル1の見本を開く →

レベル2: 今の標準に整える

レベル1のサイトを、AIが実際に直した結果です。文章・写真・ページの並びは変えず、見た目だけを整えました。

• いちばん上の写真を画面いっぱいに大きく、その上に会社のひと言
• 白を基調に、会社の色(青)はボタンと見出しの一部だけ
• 余白を広げ、文字を大きく
• スマホで見ても崩れない

この作業は、依頼から確認までおよそ20分でした(くわしい記録は実録: 20年前の見た目のホームページ、AIでリニューアルしたら20分だった)。多くの会社は、まずこのレベルに整えるだけで、印象が大きく変わります。

頼み方の例: サイト全体を、白を基調にした今のコーポレートサイトらしい見た目にしてください。トップの写真は横幅いっぱいに大きく。会社の色(紺色)はボタンと見出しの線だけに残してください。文章・写真・ページの並びは変えないでください。

レベル2の見本を開く →

レベル3: 2026年らしく

ここからは、表現の見本として、お客様の作業で使っているのと同じAIで作ったページです。会社の内容はレベル2と同じで、見せ方だけを変えています。

• すりガラスのように透けるメニューとボタン。後ろの写真がうっすら見え、スクロールしても上に残る
• 写真がゆっくり寄っていく動き。止まった写真より、現場の空気が伝わる
• スクロールすると、文章がふわっと現れる。「創業の年」や「設備の台数」などの数字が数え上がる
• 実績は横に流れるカードに。指やマウスで横に送って見られる

動きは「少しだけ」がコツです。レベル3の動きは、どれも読む邪魔をしない程度にとどめています。

頼み方の例: 上のメニューを、後ろが少し透けて見えるガラスのような見た目にして、スクロールしても上に残るようにしてください。各まとまりは、スクロールして画面に入ったときに、下からふわっと表示されるようにしてください。文章と写真は変えないでください。

レベル3の見本を開く →

レベル4: 最先端の表現

大きな会社や製品のサイトで見かける、スクロールに合わせて場面が切り替わる表現です。見本では、町工場の仕事を「切る → 曲げる → 組み上げる → 届ける」の4場面で見せています。

• スクロールするほど、3Dの金属部品がひとつずつ組み上がる(画像ではなく、その場で描いています)
• 場面ごとに見出しが切り替わり、組み上がると歯車が回り出す
• 最後は、工場の写真が画面いっぱいに広がって、次の話へと続く

言葉で「精度が高い」と書くより、見た瞬間に「ものづくりの会社だ」と伝わるのがこのレベルの強みです。一方で、作業が大きく、見せる順番(物語)を先に決める必要があります。

頼み方の例: トップページのいちばん上だけ、スクロールに合わせて場面が切り替わる見せ方にしてください。場面は「切る・曲げる・組み上げる・届ける」の4つで、見出しは【……】です。下のまとまりと、ほかのページは変えないでください。

レベル4の見本を開く →

ほかにも頼める、動きのある見せ方

見本はまだありませんが、次のような見せ方も、同じように言葉で頼めます。どれも写真や動画などの素材があるほど、仕上がりが良くなります。

見せ方	どんなものか	向いている例
パラパラ漫画	連続した写真を、スクロールに合わせて1枚ずつめくる。製品が回ったり、組み上がったりして見える	製品・料理・建物
前と後の見比べ	境目を左右に動かして、施工の前と後を見比べる	工務店・リフォーム・清掃
3Dの展示室	画面の中の部屋を歩くように、作品や商品を見て回る	作品・ギャラリー・展示会
写真が広がる	スクロールすると、小さな写真が画面いっぱいに広がる	店内・景色・現場

頼み方の例(パラパラ漫画): 用意した【製品を少しずつ回して撮った写真36枚】を使って、トップページでスクロールすると製品が1回転して見えるようにしてください。ほかのまとまりは変えないでください。

動きをつけるときの注意

動きのある見せ方は印象に残りますが、やりすぎると逆効果になります。見本では、次のことに気をつけています。

• 読む邪魔をしない: 文章が動いている間は読めません。動くのは現れる瞬間だけにする
• 重くしない: 古いスマホでは、動きが多いと表示が遅くなることがあります。スマホでは動きを控えめにする
• 動きが苦手な人に配慮する: スマホやパソコンで「動きを減らす」設定にしている人には、動きを止めて表示する(見本もそうしています)
• 大事な情報は動きの外に: 電話番号・営業時間・問い合わせの入口は、動きがなくても見つかる場所に置く

頼むときは「スマホでは動きを控えめに」「動きを減らす設定の人には止めて」と添えると安心です。

どのレベルを選べばいい?

迷ったら、次のように考えてみてください。

• まだレベル1のまま → まずはレベル2へ。いちばん変化が大きく、作業も小さい
• レベル2になっている → トップページだけレベル3の動きを足す。採用ページにも効きます
• 製品や技術が売り → トップページの一場面だけレベル4に。全ページを変える必要はありません

どのレベルでも、コツは同じです。どこを・どうしたいか・どこは変えないかを言葉にして、一か所ずつ頼むこと。そのまま使える頼み方は、AIへのホームページ修正の頼み方 例文集に16個まとめています。

この見本と同じAIで、自分のサイトを直す(Revibe)

Revibe(リバイブ)は、今あるWordPressのホームページを、AIと会話しながら直せるサービスです。この記事の見本は、Revibeの作業で使っているのと同じAIで作りました。

レベル2のような整え直しから、レベル3のような動きの追加まで、「このページのここを、こうしたい」と話しかけて頼めます。話しかけるとすぐ作業が始まり、直した結果は下書きとして本物のサイトに出す前に見比べられます。「本番に反映する」を押すまで公開中のサイトは変わらず、公開したあとでも元に戻せます。

よくある質問

レベル3やレベル4は、自分のWordPressサイトでもできますか?

レベル3・4の見本は、今あるWordPressを直したものではなく、表現の見本として1ページで作ったものです。自分のサイトで同じことをする場合は、テーマやページの作りによって、できる範囲や作業の大きさが変わります。まずはトップページの一か所から試すのがおすすめです。

レベルが上がると、料金も上がりますか?

はい。動きや3Dの表現は作業が大きくなるため、文字や色の修正より料金は上がります。Revibeでは、使った分だけが残高から差し引かれるので、大きな作業ほど料金は上がります。作業中でも「止める」で止められます。

文章や写真はそのままで、見た目だけ変えられますか?

できます。レベル2の見本も、文章・写真・ページの並びは変えずに見た目だけを整えたものです。頼むときに「文章と写真は変えない」と添えてください。

スマホでも同じように動きますか?

見本はスマホでも動くように作っていますが、画面が小さいため、文字や部品の配置をスマホ用に変えています。頼むときは、スマホでの見え方も一緒に確かめるのがおすすめです。

まとめ

• 同じ会社でも、見せ方しだいで「10年前のまま」から「最先端の表現」まで印象が変わる
• 多くの会社は、まずレベル2(今の標準)に整えるだけで大きく変わる
• 動きは「少しだけ」。読む邪魔をせず、動きが苦手な人やスマホにも配慮する
• 気になったレベルの見本を開いて、自分のサイトならどこを変えたいか、一か所から考えてみてください