ホームページの「設計」では、何を決めるのですか？
どのページをつくり、どの順番で見せ、訪れた人をどこへ案内するかを決めます。作るのは、ページの一覧とつながりを表すサイトマップです。ページごとの骨組みであるワイヤーフレームと、問い合わせや予約までの導線も作ります。私たちは、ゴールにたどり着くまでのクリック数を実際に数えます。迷う場所を減らすところまでが、設計の仕事です。
- 何を載せるかより、どの順番で見せるかを決める
- サイトマップとURLはAIと整え、導線は人が決める
- ゴールまでのクリック数を数えて、迷う場所を減らす
サイトマップとワイヤーフレームって、何が違うの？
サイトマップはサイト全体の地図で、ワイヤーフレームは1ページごとの骨組みです。
サイトマップは、ホームページにどんなページがあり、どうつながっているかを1枚に描いた地図です。たとえば、トップページの下に「蔵のこと」「味噌」「見学」が並び、見学のページから予約へ進みます。このように、ページの親子関係と行き来の道を表します。
叩き台は、AIと一緒に作ります。もとにするのは、いまのサイトのページ一覧と、ヒアリングでまとめたブリーフです。そこへ人が、置き場所の優先順位を付けていきます。ゴールにつながるページは手前に、補足のページは奥に置きます。
ワイヤーフレームは、1枚のページの中に何をどの順番で置くかを、線と箱だけで描いた骨組みです。見出し、写真、説明文、予約ボタンの位置を、色や飾りを付ける前の段階で決めておきます。
デザインより先に骨組みを決めるのは、見た目の好みと情報の順番を分けて考えるためです。順番が先に決まっていれば、そのあとのデザインや文章づくりは「この場所に何を置くか」に集中できます。大きな作り直しも避けられます。
設計で考えるのは、何を載せるかより、どの順番で見せるかです。載せたい情報が多いお店ほど、この順番の整理が効いてきます。
予約や問い合わせまで、何回クリックが必要？
ゴールまでのクリック数は実際に数え、多ければ道のりそのものを組み替えます。
架空の味噌蔵の例では、前のホームページでトップから見学の予約まで、5回のクリックが必要でした。会社案内、沿革、お知らせ、見学のページと順に進む作りです。そこでようやく、予約の画面が出てきます。
途中で迷った人は、そのまま帰っていきます。新しい設計ではトップから「蔵のこと」を経て予約へ進む道を作り、クリックは2回まで減りました。あわせて、見学の案内をページのいちばん手前に置いています。
見学先を探す人の多くは、スマホで移動の合間にページを見ています。小さな画面で何度もページを行き来させる作りは、それだけで帰られる理由になります。
クリック数を数えるのは、設計図の上だけではありません。ワイヤーフレームができた段階で、トップから予約までを実際にスマホでたどります。どこで手が止まるかを、人の目で確かめます。
道のりはページとページの間だけでなく、フォームの中にもあります。私たちが実際に対応した例では、「問い合わせが届かない」の正体はフォームの作りでした。確認画面でもう一度送信ボタンを押さないと、送られない作りだったのです。自社のサイトで予約までの道のりが長いと感じたら、一度ご相談ください！
導線を決めるのは、AIではなく人？
道筋の案はAIと一緒にそろえます。どこへ案内するかは、お客様の本音を知る人が決めます。
導線とは、ホームページを訪れた人を、問い合わせや予約といったゴールへ案内する道筋のことです。どのページから入っても迷わずゴールに着けるよう、ボタンの位置やリンクの順番を決めていきます。
物語の中でAIだけに味噌蔵のページを作らせると、メニューには「商品」「会社概要」が並びました。いちばん目立つボタンは「商品一覧を見る」です。通販の店だと思い込んだ結果でした。作りとしては整っていても、蔵見学という本当のゴールにはつながりません。
ゴールが蔵見学だと分かっているのは、ヒアリングで店主の本音を聞いた人です。AIが出した売り場の型の案は参考にしつつ、どこへ案内するかは人が決めました。「見学を予約」のボタンは、画面上部のメニューにも置きました。
予約フォームの項目も導線の一部です。物語では、スマホで片手のまま予約が終わるようにしました。入力はお名前・日時・人数の3項目まで削っています。AIが書いたコードの下書きも、人が迷わない順番に直しています。
予約が入ったあとの流れも、導線の続きとして考えます。物語では、予約が入ったら店主のスマホへ知らせる仕組みをつなぎました。管理画面を開かなくても、予約に気づけるようにするためです。止まったときの逃げ道も、人が足しています。
URLの決め方で、あとから困ることはある？
URLはページの住所です。中身が分かり、あとで変えずに済む形で最初に決めておきます。
URLの設計では、ページごとの住所を決めます。たとえば見学の案内なら「kengaku」のように、中身が分かる短い言葉をあてます。そうすると、検索結果に表示されたときにも何のページかが伝わります。
URLの名付けや一覧づくりは、AIが得意な作業です。サイトマップと照らし合わせながら、抜けや重複がないかを確かめます。人は、そのURLがあとから変えずに使い続けられる名前になっているかを見ます。
リニューアルでは、古いURLの扱いも設計に含めます。私たちが実際に対応した例では、リニューアル前のページ50枚が残っていました。それが新しいページと検索順位を取り合っていたのです。古い住所から新しい住所へ、1枚ずつ案内を付け直して解消しています。
古いURLからの転送は、公開の直前にも改めて確かめます。設計の段階で新旧のURLを並べておくと、その確認も漏れなく進められます。
AIと人の分担
この段階の5工程のうち、AIが主に担うものが1、人とAIで進めるものが2、人が担うものが2です。
AIAIが担うこと
- いまのサイトのページ一覧の書き出し
- サイトマップの叩き台づくり
- ページごとのURL案と重複のチェック
- ワイヤーフレームとコードの下書き
- 売り場の型の案出し
人人が担うこと
- 何を手前に見せるかの優先順位づけ
- 予約や問い合わせまでの導線を決める
- ゴールまでのクリック数を実際に数える
- スマホで迷わない順番への組み替え
- ワイヤーフレームをお客様と確認する
この段階の5工程
- 12
サイトマップ AI×人
ホームページにどんなページがあり、どうつながるかを1枚の地図に描きます。叩き台はAIと作ります。どのページを手前に置くかは、ヒアリングで聞いた本音をもとに人が決めます。
- 13
URLの設計 AI
ページごとの住所であるURLを、中身が分かる短い言葉で決めます。抜けや重複の確認はAIが受け持ちます。リニューアルでは、古いURLからの転送先もここで整理します。
- 14
予約までの導線 人
訪れた人を予約や問い合わせへ案内する道筋を決めます。ボタンの位置やリンクの順番、フォームの項目まで含めて考えます。迷わずゴールに着ける順番を、人が組み立てます。
- 15
ワイヤーフレーム（骨組み） AI×人
1ページごとに、見出し・写真・説明文・ボタンをどの順番で置くかを線と箱で描きます。AIが下書きし、人がスマホで迷わない順番に組み替えます。そのうえで、お客様と確認します。
- 16
ゴールまでのクリック数を数える 人
トップから予約や問い合わせまで、実際に何回クリックが必要かを数えます。味噌蔵の例では、5回かかっていた道のりを2回まで縮めました。
よくある失敗
会社の紹介順にページを並べる
会社案内、沿革、お知らせと作り手の都合で並べると、お客様が知りたい情報やゴールが奥に隠れます。味噌蔵の前のサイトも、予約まで5回のクリックが必要な作りでした。
AIの構成案をそのまま使う
AIは整った構成をすぐに出しますが、ゴールを取り違えることがあります。味噌蔵の試作では、AIは通販の店だと思い込みました。その結果、見学の予約ではなく商品一覧へ案内する作りになりました。
古いURLを放置したままリニューアルする
古いページを残したまま公開すると、新しいページと検索順位を取り合うことがあります。古いURLからの転送まで設計に含めておかないと、新しいページが検索で埋もれてしまいます。
設計についてよくある質問
サイトマップは、こちらで用意する必要がありますか？
ご用意いただく必要はありません。ヒアリングと調査の結果をもとに、私たちが叩き台を作ってご提案します。残したいページや、なくしてもよいページのご意見があれば、それを反映して仕上げます。
ワイヤーフレームの段階で、見た目も確認できますか？
ワイヤーフレームは線と箱で描く骨組みなので、色や写真はまだ入っていません。この段階で確かめていただくのは、何がどの順番で並ぶかです。予約ボタンがどこにあるかも見ていただきます。見た目は、次のデザインの工程で決めていきます。
ページ数は多いほうが、検索に有利ですか？
私たちが大切にしているのは、ページの数より、それぞれのページが誰に何を伝えるのかがはっきりしていることです。古いページが残って、新しいページと検索順位を取り合っていた例もあります。増やすより、整理したほうがよい場合もあります。
リニューアルすると、いまのURLは変わってしまいますか？
設計によっては変わる場合があります。変わるときは、古いURLから新しいURLへの転送を設定します。公開のときには、転送が働いているかを確かめます。ブックマークや検索結果から来た人が、行き止まりにならないようにするためです。