FILE 01
検索に、1か月出てこなかった。
公開したはずのページに「検索に載せないで」の札が掛かったままでした。今は、札の外し忘れを機械が自動で見張っています。
公開の確認
BACKSTAGE OF THE WEB — 諏訪のホームページ制作 アットランド
1枚のホームページの裏で、何十もの工程が動いています。
画面にカーソルを当てると、裏側が透けて見えます。スクロールすると、裏側が透けて見えます。
AIが担当 人が担当 AI×人
「ホームページって、テンプレートに文章を入れたら、
1週間くらいでできるんでしょう?」
よく聞かれます。正直に言うと、見た目だけなら、それもできます。
でも、誰にも見つけてもらえず、問い合わせが一件も来ないホームページは、作らなかったのとあまり変わりません。
見つけてもらう。読んでもらう。連絡をもらう。その一つずつに、表からは見えない仕事があります。
水面の下66
点のひとつひとつが、この先の物語に出てくる工程です。
THE STORY
ここから先は、ある町の小さな味噌蔵の
ホームページができるまでの話です。
いくつもの実際の仕事をもとに組み立てた、架空のお店です。お客様のお名前は出てきません。
01
「新しくしたい」の、
その奥へ。
最初の電話は、こうでした。「ホームページが古いので、新しくしたいんです」
話を聞いていくと、三代目の店主がぽつりと言いました。「本当は、蔵に見学に来てくれる人を増やしたいんです。うちの味噌は、蔵を見てもらうと買ってもらえるので」
依頼の言葉と、本当の願いは、たいてい少しずれています。最初の仕事は、そのずれを見つけることです。
AI
打ち合わせの録音を文字に起こし、話の要点と、まだ聞けていないことを整理します。人
「いまの一言が本音だ」と気づくのは、目の前で話を聞いている人間です。02
思い込みを、
データで疑う。
店主は「味噌、で検索されたい」と言いました。気持ちはよく分かります。
ところが、蔵を見に来そうな人が実際に打ち込んでいる言葉は、少し違いました。探しているのは味噌そのものより、「週末に行ける場所」や「おみやげ」だったのです。
AIはこういう調べものがとても速い。ただ、速く出た答えほど疑います。「それは本当に、そう言えるのか」。別の説明がつかないかを、わざと3方向から当てていきます。
※ 説明用のイメージです
3つの対抗仮説
03
迷わせない、
地図をつくる。
何を載せるかより、どの順番で見せるか。設計で考えるのは、そこです。
前のホームページでは、トップから見学の予約にたどり着くまでに5回クリックが必要でした。途中で迷った人は、そのまま帰っていきます。
5 CLICKS→2 CLICKS
04
AIの下書きを、
人の言葉に。
文章の下書きは、AIが一瞬で書きます。速いし、整っている。でも、読むとどこかで見たような文章になりがちです。
AIの下書き
取材した人の書き直し
どの店にも書ける一行ではなく、その店にしか書けない一行を。それを書けるのは、蔵の寒さを肌で知った人間です。
「日本一」「必ず売れる」のような裏付けのない言葉も、ここで外します。言い過ぎは、法律の面でもお店を危うくします。
05
開く前に、
帰られないように。
見学先を探す人の多くは、スマホで、移動の合間に見ています。
蔵の写真は美しいけれど、そのままでは重すぎました。ページが開く前に、戻るボタンが押されてしまう。見た目を落とさずに軽くするのは、地味で根気のいる作業です。
写真 1枚あたり
4.8MB
※ 説明用のイメージです
06
誰にも見えない、
いちばん大事な仕事。
ページの裏には、人の目には見えない「説明書き」をたくさん入れます。読む相手は、検索エンジン、SNS、そして最近はAIです。
同じページでも、どこで見られるかによって見え方が変わります。そのひとつずつを、あらかじめ整えておきます。
Google で検索されたとき
〇〇miso.jp › kengaku
蔵見学のご案内|〇〇味噌店(諏訪)
杉樽が並ぶ冬の蔵を、店主がご案内します。土日10時から、所要40分。おみやげ用の味噌も蔵で…
LINE で送られたとき
AI に聞かれたとき
諏訪で、味噌蔵の見学ができるところは?
〇〇味噌店では、土日の10時から蔵見学を受け付けています1。杉樽で一冬寝かせる…
1 〇〇miso.jp
よくある落とし穴
問い合わせの完了が、裏で2回ずつ数えられていた。成果が実際の倍に見えていて、誰も気づいていなかった——数字は、測り方から疑います。
07
本番には、
いきなり触らない。
いま動いているホームページを、いきなり書き換えることはしません。まず丸ごと保存して、別の場所にテスト用のページをつくり、そこで確かめます。
テスト用のページには「検索に載せないで」という札を掛けておきます。公開のときにこれを外し忘れると、どれだけ良いページでも検索に出てきません。実際に、いちばん起きやすい事故のひとつです。
08
「公開して」の、
ひと言から。
店主から「お願いします」と連絡が来た瞬間に、最後の確認が始まります。公開して初めて確かめられることが、いくつかあるからです。
そして、「公開しました」と伝える前に、本番のページをもう一度読み込んで、本当に変わったかを自分の目で確かめる。これが、うちの決まりです。
09
公開してからが、
本番です。
ホームページは、建てたら終わりの看板ではありません。季節が変われば検索される言葉も変わるし、サーバーの部品も古くなります。
人が眠っている間も、仕組みは動いています。これは、私たちの事務所で実際に毎日動いている時刻表です。
00:00
夜のあいだにAIが見つけたことを、朝、人が読んで判断する。口コミへの返信も、AIが下書きまでつくり、送るかどうかは人が決めます。
INCIDENT FILES
どれも、表から見ただけでは気づけなかったことです。
業種もお名前も伏せて、お見せします。
FILE 01
公開したはずのページに「検索に載せないで」の札が掛かったままでした。今は、札の外し忘れを機械が自動で見張っています。
公開の確認
FILE 02
ネットショップの「購入されました」という記録が、解析の画面に一度も届いていませんでした。原因は、たった1行の書き忘れ。
計測の点検
FILE 03
「問い合わせが届かない」の正体は、確認画面でもう一度押さないと送られない作りでした。1回で送れるように直しました。
フォーム
FILE 04
見覚えのないページが、サイトの中に大量に仕込まれていました。気づいたのは、検索エンジンに届いていたページ一覧から。証拠を残して、取り除きました。
セキュリティ
FILE 05
写真3枚の埋め込み方を間違えて、スマホで開くのに時間がかかるページにしてしまいました。自分たちの失敗も、記録に残しています。
表示速度
FILE 06
リニューアル前のページが残っていて、新しいページと検索順位を取り合っていました。古い住所から新しい住所へ、1枚ずつ案内を付け直しました。
転送設定
FILE 07
検索結果に小さく出るアイコンが、別の会社のものになっていました。地味ですが、信用に直結する場所です。
細部の点検
FILE 08
送料のルールを見直すために実際の注文データを調べたら、無料かどうかは金額ではなく重さで決まっていました。思い込みは、データでほどきます。
データ確認
10
最後に決めるのは、
人。
AIは、たくさんの案を出すことと、見落とさないことが得意です。人は、そのなかから「このお店にとって何が最善か」を決めることが仕事です。
私たちは、次に打つ手を三つに分けて考えています。
C
画像を軽くする、タグを点検する、検索の説明文を整える。お客様の判断がいらないことは、AIが進めて、人が確かめます。
B
広告の予算、ページの構成、新しいサービスの見せ方。案はAIと一緒にそろえて、決めるのはお客様と私たちです。
A
「この冬、蔵でいちばん忙しい日はいつですか」。お客様しか知らない一次情報は、どんなAIにも調べられません。だから、聞きに行きます。
11
その「人」とは、
誰のことか。
ここまで何度も「人が決める」と書いてきました。では、その「人」とは誰のことでしょう。
先に、AIだけで同じお店のページを作ってみます。
創業百年の老舗
伝統の味を、
食卓へ。
厳選素材にこだわった本格味噌を、全国へお届けします。
商品一覧を見るAIは、店主が言葉にしなかった気持ちまでは汲み取れません。そのページを本当に使うのが誰なのか、その手ざわりも持っていません。だから、整っているのに中身の薄い施策になりがちです。
それでもAIの答えを信じすぎてしまう。
これは、多くのWeb会社が犯しているミスです。
私たちは、
AIを、信じすぎません。
AIには、たくさん考えてもらう。
でも「誰のためのページか」は、人が決めます。
お店に通い、話を聞き、迷ったら現場に戻る。
役割の違う人の目を何度も通ってはじめて、
ページは「そのお店のもの」になります。
BACKSTAGE · LIVE
AIが作った下書きに、役割の違うアットランドのメンバーが順番に手を入れていきます。スクロールすると、裏側の作業が順番に再生されます。
人の手が入った回数 00
01代表方向を決める
「うちは“売る店”じゃない。“来てもらう店”だ」
店主と30分話して、ページの目的を「通販」から「蔵見学」に切り替えた。
02ディレクター聞きに行く
「冬の蔵は寒い。でも、それがいいんです」
打ち合わせで店主がぽろっと言った一言を、そのまま見出しの芯にした。
03Webマーケター数字を読む
「“蔵見学 予約”の検索、冬だけ伸びています」
見学の案内を、ページのいちばん手前に出した。
04ライター言葉を整える
「“厳選素材”は、どの店でも言える」
どこにでもある言葉を消して、この蔵にしかない事実だけを残した。
05デザイナー見た目をつくる
「写真は“味噌”より“蔵の中”」
色を木と麹の色に寄せ、主役の写真を商品から蔵の中に替えた。
06フロントエンド画面を組む
「予約フォームは3項目まで」
スマホで片手のまま予約が終わるように、入力を削った。
07エンジニア仕組みにする
「予約が入ったら、店主のスマホへ」
店主が管理画面を開かなくても、予約に気づける仕組みをつないだ。
08広告運用届ける
「広告は木・金だけでいい」
週末の予定を決めるのは木曜と金曜。その2日だけ予算を使う。
09品質チェック公開前に止める
「この写真、まだ重い」
公開ボタンを押す前に、表示速度とリンク切れを最後に確かめた。
10サポート公開のあとを守る
「写真を替えたい? 明日やります」
店主からの電話を受ける窓口。公開した日から、本当の仕事が始まる。
AIの下書きは、数分。
そこから先の何日かが、私たちの仕事です。
ALL THE STEPS
しかもこれは、味噌蔵ひとつ分。業種が変われば、工程も変わります。
69の工程を、ひとつずつ解説していますホームページ制作の流れ|12の段階と、AIと人の分担
BEYOND THE WEB
ABOUT THIS PAGE
このページは、長野県諏訪市のホームページ制作会社アットランドが、ホームページ1本ができるまでの仕事を紹介するものです。制作の流れを12の段階・69の工程に分け、工程ごとに「AIに任せること」「AIと人で進めること」「人が担うこと」を分けて示しています。物語の味噌蔵は架空ですが、「本当にあった話」の8件は、実際の仕事で起きたことです。
公開 ・ 更新 ・ 文責 アットランド
EPILOGUE
春になって、蔵見学の予約フォームに、知らない名前が並ぶようになりました。
店主からの連絡は、短い一行でした。「今週末、見学が三組です」
〇〇味噌店 ・ 予約フォーム
蔵見学のご予約 土曜 10:00 ・ 2名
きっかけ:検索で見つけました
〇〇味噌店 ・ 予約フォーム
蔵見学のご予約 土曜 13:30 ・ 4名
きっかけ:地図アプリ
〇〇味噌店 ・ 予約フォーム
蔵見学のご予約 日曜 10:00 ・ 3名
きっかけ:AIにおすすめされました
AIのはやさと、人の目と耳。その両方で、あなたの会社にとっての最善を探します。
ホームページのこと、まずは話を聞かせてください。