会社のホームページを、3日で全部作り替えた ― 指示とAIだけで、16ページ

弊社のホームページ（data-parade.com）を、全面的に作り替えました。トップから会社概要、事業内容、導入事例、お問い合わせまで、16ページ。かかったのは3日間で、実際に手を動かしていた時間は約7.6時間でした。

まずは、出来上がったトップページをご覧ください。

実際のサイトはこちらです。動きも含めて、ぜひ触ってみてください。

👉 https://data-parade.com/

デザイン、コーディング、スマートフォン対応、既存記事との接続。ひととおり必要な作業が、弊社からの指示95回とAIだけで仕上がりました。

ただ、この記事で本当に書きたいのは「短時間でできた」という話ではありません。作り替えたあと、いつでも直せる状態になったこと。そちらのほうが、会社にとっては大きい変化でした。

きっかけは「今風にできる？」の一言

始まりは、こんな一言でした。

データパレードのホームページだが、固定ページのトップを今風のデザインに変更できたりする？

トップページだけのつもりが、進めるうちに会社概要へ、導入事例へ、事業内容へと広がり、最終的にサイト全体になりました。途中で範囲を広げられたのは、作り直しのコストが低かったからです。従来なら「追加は別途お見積もり」となるところが、その場で「じゃあ次はここ」と言えてしまう。

何を、どう作ったか

作ったページは16。トップ、会社概要、事業内容4本柱、導入事例の一覧と個別3枚、データ飯店、お問い合わせ、各種方針ページ。

設計の軸は3つに絞りました。

1. ブランドカラーを「実測」する

「なんとなく青」ではなく、公式ロゴから色を測ってパレット化しました（#25a0ea → #0a58a8 のグラデーション、文字はチャコール #34373c）。これを1か所で定義し、サイト全体がそこを参照する形にしています。

2. IT・AI企業らしい見た目にする

ダークテックなヒーロー、ノード網のアニメーション、等幅フォントのラベル、スクロールに連動した演出。「うちは何屋か」が、文章を読む前に伝わる状態を目指しました。

3. 「見て終わり」の導線をなくす

事業内容・導入事例・お知らせ・ブログが相互に行き来できるようにしました。トップの事業カード4枚は、それぞれの詳細ページへ。詳細ページからは、実際の導入事例と関連するブログ記事へ。

ホームページに「集約」する

今回いちばん意識したのは、相手が知りたいことと、こちらが伝えたいことを、1か所に集めることでした。

会社案内、事業の説明、実際の導入事例、日々書いているブログ、登壇のお知らせ。これまで別々に存在していたものを、ホームページの中で線でつなぎました。訪れた方が「この会社は何ができて、実際に何をやったのか」を、ページを行き来しながら自分のペースで確かめられる。

とくに導入事例は、一般化して書くのではなく、お店の名前を出し、実際に動いている画面のキャプチャを載せました（金額やお客様名はぼかしています）。データベースの設計図は実物では細かすぎて読めないので、規模感が伝わるイラストを別に描きました。「できます」と言うより、動いているものを見せたほうが早いからです。

思考プロセス ― 95回の指示は、ほとんどが「ダメ出し」

3日間で、弊社からAIへの指示は95回。その中身は、ほめ言葉よりも具体的なダメ出しが中心でした。実際のやり取りから、いくつか引用します。

フォーマットはいい感じだが、データパレードのデザインやロゴが全く使われていないし、アイコンなどもとても陳腐だね。

全体カラーはDataParadeのロゴからもっと取ってきてよ。だいぶ白いよこれ

内容は良くなっているが、どうもシンプルだなぁ。もっとIT屋とかAI屋さんっぽくしたい

いい感じになってきたけど、もっとCSSとか使って、スクロールした時にアニメーション入れたりとかしたいな

あともう一つ。ヘッダーの白がちょっと目立ち過ぎているかな

この流れが、そのまま完成までの道のりです。「陳腐だ」→ロゴから色を実測 →「白すぎる」→ダークテックに →「シンプルすぎる」→アニメーションと演出を追加。一度で正解に着地したのではなく、具体的な不満を1つずつ潰していった結果が、いまの見た目になっています。

ここが肝心なところで、指摘が具体的でないとAIは動けません。「なんかイマイチ」では直しようがない。「ヘッダーの白が目立ちすぎる」まで言えれば、直すべき場所が一つに決まります。AIに任せる仕事の品質は、フィードバックの解像度でほぼ決まると感じました。

「読みにくい」を、測れる形に翻訳する

途中、スマホのメニューが読みにくいという指摘がありました。こういう感覚的な指摘は、そのままだと「直ったのか」が誰にも判定できません。

そこで、数値目標に翻訳しました。文字を純白・20px・太字にし、背景をさらに暗くして、コントラスト比19.8:1（アクセシビリティのAAA基準は7:1）。タップできる範囲も20px→67px、3.35倍に広げました。

ロゴのサイズが切り替わりで微妙に動く問題も同じです。見た目では「なんとなくズレる」としか言えませんでしたが、画像の中身を測ると、2枚のロゴで余白の比率が95.5%と71.4%で違っていました。CSSで高さを調整するのは対症療法なので、画像そのものを切り直して差0.3%に揃えています。

感覚を数字に置き換えると、直し方が一つに決まり、直ったかどうかも判定できる。これはAIに任せるかどうかに関係なく、効く考え方だと思います。

見落としがちですが、いちばん助かったのは「テスト」でした

ホームページが厄介なのは、同じページが見る人によって違う形になるところです。PCの大きな画面、iPadの縦と横、スマートフォンの縦と横。それぞれで文字の折り返しが変わり、メニューの出方が変わり、画像の比率が変わります。1ページ直すたびに、この全パターンを見直さないと安心できません。16ページあれば、その掛け算です。

ここを、AIがやってくれました。実際に確認した画面サイズは、PCが4種類、iPadの縦と横、スマートフォンが4種類で、合わせて10種類。ページを直すたびに各サイズで表示させ、崩れているところを見つけて、どこがどう崩れていたかを報告してもらうという進め方をしました。

出てきた報告は、たとえばこういうものです。

• スマートフォンでヘッダーのロゴが切り替わったときに大きさが変わる
• お知らせの行が意図しない位置で折り返す
• フッターの余白が縦向きと横向きで揃わない
• 成果を示す数字と単位が縦に積み重なってしまう
• ボタンの枠線が下辺だけ消える

どれも、実際にその画面サイズで見なければ気づけないものばかりです。従来なら、この確認は人が手元の端末を持ち替えながら、1ページずつ目視するしかありませんでした。その工数がまるごと浮いた、というのが正直な実感です。

弊社がやったのは、報告を読んで「これは直そう」「これは許容」と判断することだけでした。見つける作業と、直す作業と、直ったことを確かめる作業。この3つを任せられると、人の側に残るのは判断だけになります。

いちばんの変化は、「いつでも直せる」こと

冒頭に書いたとおり、本当に大きいのはここです。

作り替えたあとも、弊社は毎日のようにホームページに手を入れています。事業内容の色分けを変える。ブログ側のヘッダーとフッターをトップと揃える。ファビコンを作り直す。登壇の告知を載せる。どれも、思いついた日のうちに反映できます。

しかも、直すだけではありません。新しいページを一枚まるごと増やすことも、その日のうちにできました。 「こういうページが要るな」と思ったその日に、既存ページのデザインを引き継いだ新しいページが立ち上がる。ページを1枚足すのに見積もりと納期の相談から始まっていた頃を思うと、ここがいちばん実感の変わったところです。

従来、こういう小さな変更は「まとめて次回の改修で」となりがちでした。1回ごとに依頼して、見積もりを取って、順番待ちをして。その手間を考えると、多少の違和感は目をつぶることになる。結果、ホームページは少しずつ実態から離れていきます。

いつでも直せるなら、ホームページは会社の「いま」を映し続ける場所になります。新しい事例ができたら足す。登壇が決まったら載せる。方針を定めたら公開する。更新の心理的なコストがほぼゼロになったことが、デザインが新しくなったこと以上の変化でした。

「いつでも直せる」を支えているのは、記録です

ここが、今回いちばん伝えたい仕組みの話かもしれません。

思いついた日に直せると書きましたが、これは腕のいいAIがいれば自動的に手に入るものではありません。数日後・数週間後に「あそこを直したい」と言ったときに、前回の続きから始められるか。そこが分かれ目になります。

弊社は、2つの置き場を決めています。

1. 経緯はNotionの1ページに集約する

何をどういう方針で作ったか、どこでつまずいたか、運用のルール、残っている課題。この案件に関することを、すべて1つのページに書き足していきます。たとえば「新しいページを作るときは、本文のHTMLだけでは動かない。共通CSS・全幅テンプレート・スクリプト2本・進捗バーの要素を必ずセットで入れる」といった作法も、ここに残しています。

2. 画像などの素材はGoogleドライブの1か所にまとめる

ロゴ、キャプチャ、図版、書き出したファイル。散らばらせず、案件ごとのフォルダに集約します。

この2つがあるので、しばらく間が空いても、AIにNotionのページを読んでもらえば、経緯を把握したうえで作業を再開できます。 「前回どうしてこの色にしたんだっけ」「あのページはなぜこの作りなんだっけ」を、人が覚えている必要がありません。

逆に、ここを整えずに作ってしまうと、更新のたびに前提の説明からやり直しになります。それでは「思いついた日に直せる」状態は続きません。作る速さより、続けられる形をつくることのほうが、長い目で見ると効いてきます。

任せて分かったこと

手を動かす部分は、もう渡せます。今回、弊社がやったのは「どうしたいかを具体的に言うこと」と「出てきたものに正直な感想を返すこと」、そして「記録の置き場を決めておくこと」だけでした。

データも人もAIも、つながるから、先がある。会社のホームページが「作って終わるもの」から「毎日直せるもの」に変わると、そこに載せられる情報の鮮度も変わります。御社のホームページは、いまの会社を映していますか。

参考

• 記事で紹介したホームページはこちらです 👉 https://data-parade.com/
• 実際に何を言って、どう直していったか（体験談）：会社のホームページを、指示だけで3日で作り替えた話（X）

AIにどこまで日々の仕事を任せているかは、こちらにまとめています。

あわせて読みたい

AI秘書を「時短ツール」ではなく「副社長」として会社に入れた話 ― 導入して、毎月17人日ぶんの仕事が弊社の手を離れた

石井 亮介（りょうさん）

データパレード 代表取締役

XContact

㈱データパレードの代表取締役で、高田馬場の町中華「一番飯店」のChief Data Officerも務めています。BIツールのセールスエンジニア・システムエンジニア・カスタマーサクセス歴15年。大学のデータサイエンス教育で講師も担当してきました。現在は自社業務のほとんどをAIに移管し、AI10部署と50を超える自動処理が24時間動く「AI経営」を実践中。その実践知をこのブログで発信しています。