工程 000 / 069
相談する

BACKSTAGE OF THE WEB — 諏訪のホームページ制作 アットランド

見えているのは、 ほんの表面。

1枚のホームページの裏で、何十もの工程が動いています。
画面にカーソルを当てると、裏側が透けて見えます。スクロールすると、裏側が透けて見えます。

「ホームページって、テンプレートに文章を入れたら、
1週間くらいでできるんでしょう?」

よく聞かれます。正直に言うと、見た目だけなら、それもできます。

でも、誰にも見つけてもらえず、問い合わせが一件も来ないホームページは、作らなかったのとあまり変わりません。

見つけてもらう。読んでもらう。連絡をもらう。その一つずつに、表からは見えない仕事があります。

見えている仕事3
  • 見た目
  • 文章
  • 写真

水面の下66

点のひとつひとつが、この先の物語に出てくる工程です。

THE STORY

ここから先は、ある町の小さな味噌蔵の
ホームページができるまでの話です。

いくつもの実際の仕事をもとに組み立てた、架空のお店です。お客様のお名前は出てきません。

01

聞くヒアリング

「新しくしたい」の、
その奥へ。

最初の電話は、こうでした。「ホームページが古いので、新しくしたいんです」

話を聞いていくと、三代目の店主がぽつりと言いました。「本当は、蔵に見学に来てくれる人を増やしたいんです。うちの味噌は、蔵を見てもらうと買ってもらえるので」

依頼の言葉と、本当の願いは、たいてい少しずれています。最初の仕事は、そのずれを見つけることです。

表の言葉ホームページが古いので、新しくしたい
少し奥スマホで見ると、文字が小さくて読めない
さらに奥若い人が、うちのことを知らない
本音蔵を見に来てほしい。見てもらえば、分かってもらえる

AI

打ち合わせの録音を文字に起こし、話の要点と、まだ聞けていないことを整理します。

人

「いまの一言が本音だ」と気づくのは、目の前で話を聞いている人間です。
  • 初回のヒアリング
  • 録音の文字起こし
  • 事業の整理(ブリーフ)
  • 本当の課題を言葉にする
  • ゴールを決めて合意する

02

調べる市場・競合の調査

思い込みを、
データで疑う。

店主は「味噌、で検索されたい」と言いました。気持ちはよく分かります。

ところが、蔵を見に来そうな人が実際に打ち込んでいる言葉は、少し違いました。探しているのは味噌そのものより、「週末に行ける場所」や「おみやげ」だったのです。

AIはこういう調べものがとても速い。ただ、速く出た答えほど疑います。「それは本当に、そう言えるのか」。別の説明がつかないかを、わざと3方向から当てていきます。

3つの対抗仮説

  1. 自分たちの側に理由がある?ページの書き方、季節の商品、価格。
  2. 世の中の側に理由がある?連休、天気、話題になった番組。
  3. 測り方に理由がある?計測の漏れや二重カウント。数字そのものを疑う。
  • 検索される言葉の調査
  • 競合サイト3社の比較
  • 地域・季節の動きの調査
  • アクセス解析の実データ確認
  • 対抗仮説を3つ立てる
  • 狙う人を決める

03

設計するサイト設計・導線設計

迷わせない、
地図をつくる。

何を載せるかより、どの順番で見せるか。設計で考えるのは、そこです。

前のホームページでは、トップから見学の予約にたどり着くまでに5回クリックが必要でした。途中で迷った人は、そのまま帰っていきます。

トップ 会社 沿革 お知らせ 見学 蔵のこと 予約

5 CLICKS→2 CLICKS

  • サイトマップ
  • URLの設計
  • 予約までの導線
  • ワイヤーフレーム(骨組み)
  • ゴールまでのクリック数を数える

04

書くライティング

AIの下書きを、
人の言葉に。

文章の下書きは、AIが一瞬で書きます。速いし、整っている。でも、読むとどこかで見たような文章になりがちです。

AIの下書き

取材した人の書き直し

どの店にも書ける一行ではなく、その店にしか書けない一行を。それを書けるのは、蔵の寒さを肌で知った人間です。

「日本一」「必ず売れる」のような裏付けのない言葉も、ここで外します。言い過ぎは、法律の面でもお店を危うくします。

  • 取材と撮影
  • 原稿の下書き
  • AIっぽさを消す書き直し
  • 翻訳調の言い回しを直す
  • 誇大表現のチェック
  • 事実の裏取り
  • 見出しとキャッチコピー

05

つくるデザイン・スマホ対応・表示速度

開く前に、
帰られないように。

見学先を探す人の多くは、スマホで、移動の合間に見ています。

蔵の写真は美しいけれど、そのままでは重すぎました。ページが開く前に、戻るボタンが押されてしまう。見た目を落とさずに軽くするのは、地味で根気のいる作業です。

写真 1枚あたり

4.8MB

※ 説明用のイメージです

  • デザイン
  • コーディング
  • スマホ・タブレット対応
  • 画像の軽量化
  • 表示速度の調整
  • 読み上げソフトへの対応
  • ブラウザごとの表示確認

06

仕込むSEO・計測の設定

誰にも見えない、
いちばん大事な仕事。

ページの裏には、人の目には見えない「説明書き」をたくさん入れます。読む相手は、検索エンジン、SNS、そして最近はAIです。

同じページでも、どこで見られるかによって見え方が変わります。そのひとつずつを、あらかじめ整えておきます。

Google で検索されたとき

〇〇miso.jp › kengaku

蔵見学のご案内|〇〇味噌店(諏訪)

杉樽が並ぶ冬の蔵を、店主がご案内します。土日10時から、所要40分。おみやげ用の味噌も蔵で…

AI に聞かれたとき

諏訪で、味噌蔵の見学ができるところは?

〇〇味噌店では、土日の10時から蔵見学を受け付けています1。杉樽で一冬寝かせる…

1 〇〇miso.jp

よくある落とし穴

問い合わせの完了が、裏で2回ずつ数えられていた。成果が実際の倍に見えていて、誰も気づいていなかった——数字は、測り方から疑います。

  • ページタイトル
  • 検索結果の説明文
  • SNSで共有されたときの見え方
  • 検索エンジン向けの店舗情報
  • AI向けのサイト紹介文
  • 検索エンジン向けのページ一覧
  • 「本物のページ」の指定
  • アクセス解析のタグ
  • 問い合わせ完了の計測
  • 予約フォーム
  • 自動返信メール
  • 送信完了ページ
  • 迷惑メール対策

07

確かめる公開前のテスト

本番には、
いきなり触らない。

いま動いているホームページを、いきなり書き換えることはしません。まず丸ごと保存して、別の場所にテスト用のページをつくり、そこで確かめます。

  1. いまのサイトを保存
  2. テスト用の場所につくる
  3. チェックリスト
  4. お客様に確認
  5. 本番へ
  • スマホで崩れていない
  • リンク切れがない
  • 誤字・脱字がない
  • 検索エンジンに「載せないで」の札が残っている「載せないで」の札を外した
  • フォームが届く
  • 前からある機能が壊れていない

テスト用のページには「検索に載せないで」という札を掛けておきます。公開のときにこれを外し忘れると、どれだけ良いページでも検索に出てきません。実際に、いちばん起きやすい事故のひとつです。

  • 本番サイトのバックアップ
  • 影響範囲の調査
  • テスト環境での確認
  • 前からある機能が壊れていないか
  • 公開前チェック(9区分+8項目)
  • お客様の確認と修正

08

公開する公開作業

「公開して」の、
ひと言から。

店主から「お願いします」と連絡が来た瞬間に、最後の確認が始まります。公開して初めて確かめられることが、いくつかあるからです。

  • 「載せないで」の札が外れている
  • 検索エンジンへの案内板
  • 「本物のページ」の指定
  • SSL(鍵マーク)
  • 古いURLからの転送
  • アクセス解析の発火
  • フォームが本番で届く
  • 画像・表示の崩れ
CHECKING

そして、「公開しました」と伝える前に、本番のページをもう一度読み込んで、本当に変わったかを自分の目で確かめる。これが、うちの決まりです。

  • 公開を決める
  • 公開設定と転送の確認
  • フォームの実送信テスト
  • 計測が動いているかの確認
  • 本番ページの取り直し確認

09

育てる公開後の運用・改善

公開してからが、
本番です。

ホームページは、建てたら終わりの看板ではありません。季節が変われば検索される言葉も変わるし、サーバーの部品も古くなります。

人が眠っている間も、仕組みは動いています。これは、私たちの事務所で実際に毎日動いている時刻表です。

00:00

 

  • 新しいお客様の情報を読み込み、翌朝の準備
  • 毎月1日、すべてのサーバーをバックアップ
  • サイト健康診断(カルテ)の下準備
  • アクセスが前年より落ちたサイトを検知
  • 月に一度、外から見えるセキュリティの点検
  • 広告の成果を直近2週の実績で判定
  • 月に一度、広告のムダな検索語を洗い出し
  • AIがどのページを読みに来たかを集計
  • 作業記録のダッシュボードを更新
  • 止まっている仕組みがないか点検し、チャットで知らせる
  • 出社。夜のうちに上がってきたことを、人が読んで判断する

夜のあいだにAIが見つけたことを、朝、人が読んで判断する。口コミへの返信も、AIが下書きまでつくり、送るかどうかは人が決めます。

  • 月次レポート
  • 前年同月との比較
  • 順位が落ちたページの書き直し
  • タイトル改善と90日後の効果判定
  • 広告の運用
  • 広告文・バナーの制作
  • Googleマップの情報整備
  • 口コミ返信の下書き
  • 返信を送るかの判断
  • SNSの投稿
  • メルマガ配信前のチェック
  • 改ざん・弱点の監視
  • AIに引用されているかの測定
  • サーバー・ドメインの更新
  • 定例ミーティング

INCIDENT FILES

味噌蔵は架空です。
でも、これは本当にあった話。

どれも、表から見ただけでは気づけなかったことです。
業種もお名前も伏せて、お見せします。

FILE 01

検索に、1か月出てこなかった。

公開したはずのページに「検索に載せないで」の札が掛かったままでした。今は、札の外し忘れを機械が自動で見張っています。

公開の確認

FILE 02

売上の記録が、何年も届いていなかった。

ネットショップの「購入されました」という記録が、解析の画面に一度も届いていませんでした。原因は、たった1行の書き忘れ。

計測の点検

FILE 03

送信ボタンを、2回押す必要があった。

「問い合わせが届かない」の正体は、確認画面でもう一度押さないと送られない作りでした。1回で送れるように直しました。

フォーム

FILE 04

知らない外国語のページが、数千枚。

見覚えのないページが、サイトの中に大量に仕込まれていました。気づいたのは、検索エンジンに届いていたページ一覧から。証拠を残して、取り除きました。

セキュリティ

FILE 05

ページの重さ、9MB。犯人は私たち。

写真3枚の埋め込み方を間違えて、スマホで開くのに時間がかかるページにしてしまいました。自分たちの失敗も、記録に残しています。

表示速度

FILE 06

古いページ50枚が、本命と争っていた。

リニューアル前のページが残っていて、新しいページと検索順位を取り合っていました。古い住所から新しい住所へ、1枚ずつ案内を付け直しました。

転送設定

FILE 07

検索結果に、よその会社のロゴ。

検索結果に小さく出るアイコンが、別の会社のものになっていました。地味ですが、信用に直結する場所です。

細部の点検

FILE 08

「送料無料」を決めていたのは、値段ではなかった。

送料のルールを見直すために実際の注文データを調べたら、無料かどうかは金額ではなく重さで決まっていました。思い込みは、データでほどきます。

データ確認

10

決める改善策の判断

最後に決めるのは、
人。

AIは、たくさんの案を出すことと、見落とさないことが得意です。人は、そのなかから「このお店にとって何が最善か」を決めることが仕事です。

私たちは、次に打つ手を三つに分けて考えています。

C

任せていいこと

画像を軽くする、タグを点検する、検索の説明文を整える。お客様の判断がいらないことは、AIが進めて、人が確かめます。

B

相談して決めること

広告の予算、ページの構成、新しいサービスの見せ方。案はAIと一緒にそろえて、決めるのはお客様と私たちです。

A

聞きに行くこと

「この冬、蔵でいちばん忙しい日はいつですか」。お客様しか知らない一次情報は、どんなAIにも調べられません。だから、聞きに行きます。

11

人とはAIと人の役割分担

その「人」とは、
誰のことか。

ここまで何度も「人が決める」と書いてきました。では、その「人」とは誰のことでしょう。

先に、AIだけで同じお店のページを作ってみます。

AIだけで作った試作所要 数分

創業百年の老舗

伝統の味を、
食卓へ。

厳選素材にこだわった本格味噌を、全国へお届けします。

商品一覧を見る
  • こだわり
  • 商品一覧
  • 会社概要
  • どの店でも言える「伝統」「厳選素材」。名前を入れ替えても、そのまま通じてしまう。
  • 誰に向けたページか分からない本当に来てほしいのは、週末に蔵を見たい人。でもAIは通販のお店だと思い込んだ。
  • それらしく見える見た目はきれいで、文章にも間違いはない。だからこそ、気づかれないまま公開されてしまう。

AIは、店主が言葉にしなかった気持ちまでは汲み取れません。そのページを本当に使うのが誰なのか、その手ざわりも持っていません。だから、整っているのに中身の薄い施策になりがちです。

それでもAIの答えを信じすぎてしまう。
これは、多くのWeb会社が犯しているミスです。

私たちは、

AIを、信じすぎません。
AIには、たくさん考えてもらう。
でも「誰のためのページか」は、人が決めます。
お店に通い、話を聞き、迷ったら現場に戻る。
役割の違う人の目を何度も通ってはじめて、
ページは「そのお店のもの」になります。

BACKSTAGE · LIVE

同じ試作に、
人の手が入っていく。

AIが作った下書きに、役割の違うアットランドのメンバーが順番に手を入れていきます。スクロールすると、裏側の作業が順番に再生されます。

人の手が入った回数 00

  1. 01代表方向を決める

    「うちは“売る店”じゃない。“来てもらう店”だ」

    店主と30分話して、ページの目的を「通販」から「蔵見学」に切り替えた。

    AI
    売り場の型を3案
    人
    どの店になるかを決めた
  2. 02ディレクター聞きに行く

    「冬の蔵は寒い。でも、それがいいんです」

    打ち合わせで店主がぽろっと言った一言を、そのまま見出しの芯にした。

    AI
    議事録を清書
    人
    言葉の“温度”を拾った
  3. 03Webマーケター数字を読む

    「“蔵見学 予約”の検索、冬だけ伸びています」

    見学の案内を、ページのいちばん手前に出した。

    AI
    検索データを集計
    人
    何を前に出すかを決めた
  4. 04ライター言葉を整える

    「“厳選素材”は、どの店でも言える」

    どこにでもある言葉を消して、この蔵にしかない事実だけを残した。

    AI
    言い換えを40案
    人
    嘘のない一文を選んだ
  5. 05デザイナー見た目をつくる

    「写真は“味噌”より“蔵の中”」

    色を木と麹の色に寄せ、主役の写真を商品から蔵の中に替えた。

    AI
    配色を12パターン
    人
    この店らしさで選んだ
  6. 06フロントエンド画面を組む

    「予約フォームは3項目まで」

    スマホで片手のまま予約が終わるように、入力を削った。

    AI
    コードの下書き
    人
    迷わない順番に直した
  7. 07エンジニア仕組みにする

    「予約が入ったら、店主のスマホへ」

    店主が管理画面を開かなくても、予約に気づける仕組みをつないだ。

    AI
    通知の処理を生成
    人
    止まった時の逃げ道を足した
  8. 08広告運用届ける

    「広告は木・金だけでいい」

    週末の予定を決めるのは木曜と金曜。その2日だけ予算を使う。

    AI
    入札の候補を計算
    人
    お金の使いどころを決めた
  9. 09品質チェック公開前に止める

    「この写真、まだ重い」

    公開ボタンを押す前に、表示速度とリンク切れを最後に確かめた。

    AI
    全ページを自動点検
    人
    “公開していいか”を判断した
  10. 10サポート公開のあとを守る

    「写真を替えたい? 明日やります」

    店主からの電話を受ける窓口。公開した日から、本当の仕事が始まる。

    AI
    問い合わせを整理
    人
    電話の向こうの声を聞いた

AIの下書きは、数分。
そこから先の何日かが、私たちの仕事です。

ALL THE STEPS

この物語に出てきた工程は、
全部で 69 個。

しかもこれは、味噌蔵ひとつ分。業種が変われば、工程も変わります。

    69の工程を、ひとつずつ解説していますホームページ制作の流れ|12の段階と、AIと人の分担

    BEYOND THE WEB

    ホームページの外側も、
    同じやり方でつくっています。

    • デジタルサイネージ店頭や施設の画面に、更新できる案内を
    • チケット販売・施設予約窓口と電話の手間を、仕組みに
    • 点検表のクラウド化現場の紙の点検表を、スマホから
    • 生産管理・受発注伝票の手書きと二重入力をなくす
    • 音声ガイダンス展示や施設を、耳で案内する
    • LINEで求人「アット採用」応募までの距離を、いちばん短く
    SINCE
    2003独立。2007年に法人に
    BASE
    SUWA長野県諏訪市
    PARTNERS
    ≈100社のWebとシステムに関わっています

    ABOUT THIS PAGE

    このページは、長野県諏訪市のホームページ制作会社アットランドが、ホームページ1本ができるまでの仕事を紹介するものです。制作の流れを12の段階・69の工程に分け、工程ごとに「AIに任せること」「AIと人で進めること」「人が担うこと」を分けて示しています。物語の味噌蔵は架空ですが、「本当にあった話」の8件は、実際の仕事で起きたことです。

    公開 ・ 更新 ・ 文責 アットランド

    EPILOGUE

    春になって、蔵見学の予約フォームに、知らない名前が並ぶようになりました。
    店主からの連絡は、短い一行でした。「今週末、見学が三組です」

    1. 〇〇味噌店 ・ 予約フォーム

      蔵見学のご予約 土曜 10:00 ・ 2名

      きっかけ:検索で見つけました

    2. 〇〇味噌店 ・ 予約フォーム

      蔵見学のご予約 土曜 13:30 ・ 4名

      きっかけ:地図アプリ

    3. 〇〇味噌店 ・ 予約フォーム

      蔵見学のご予約 日曜 10:00 ・ 3名

      きっかけ:AIにおすすめされました

    最善は、ひとつじゃない。 だから、一緒に探します。

    AIのはやさと、人の目と耳。その両方で、あなたの会社にとっての最善を探します。
    ホームページのこと、まずは話を聞かせてください。