ウェブサイトマスター: 予約が入る本物のサイト

ピラティススタジオのオーナーの朝を想像してみてください。スマホを開くと、夜のうちに入った予約申し込みが3件。サイトのレッスン時間割を見て、トレーナー紹介を読み、予約フォームを埋めたお客たちです。オーナーが眠っている間に、サイトが営業をしていたのです。

これが見せ物のサイトと働くサイトの違いです。このコースで作るのは後者です。きれいなのは当たり前として、訪問者を予約という行動まで連れていく構造を組みます。

16ステップは長く見えるかもしれませんが、各ステップは実際のボタンひとつずつと対になっています。終わればあなたの手元には、人に見せられる完成品が残ります。

更地から始める必要はありません。スタジオの「テンプレートから始める」を開くと、ウェブ、アプリ、ゲーム、動画まで125種の完成例がギャラリーとして広がります。ひとつひとつが実際に動く完成品なので、押してみるだけで目が肥えます。

今することはショッピングです。下の「スタジオで試す」でスタジオを開き、自分のアイデアと系統が近いテンプレートを2〜3個お気に入りにしておきましょう。「このテンプレートを使う」を押すと、その完成品が自分の作業台に載り、色や文章や画像を変えたいと言えば、すぐに自分のものへ変わり始めます。

2つの出発点には、それぞれの力があります。テンプレート出発は速い。構造とデザインが検証済みの状態で中身だけ差し替えればいいので、今日中に成果物が必要なときに最高の選択です。白紙出発は自由です。プロンプトでゼロから描くので、構造そのものが特別なサイト、たとえばストーリーテリング型のブランドページに合います。

判断基準はこれです。自分のサイトが業界の標準構造(紹介、ギャラリー、料金、予約)に沿ってよいならテンプレート、構造そのものが差別化ポイントであるべきなら白紙。初めてならテンプレート出発をおすすめします。標準構造を一度経験してからこそ、白紙が本当に自由になります。

サイトはセクションというブロックの塔です。ピラティスのサイトなら、上からヒーロー(最初の画面)、スタジオ紹介、レッスン時間割、トレーナー紹介、口コミ、料金、予約フォーム、アクセスの順が定石です。この構造をプロンプトやリファインで、そのまま言葉でリクエストすればOKです。

順序にも論理があります。訪問者は上から「ここはどこ?(ヒーロー)」「何をする場所?(紹介・時間割)」「信頼できる?(トレーナー・口コミ)」「いくら?(料金)」「やってみようか(予約フォーム)」の順に心が動きます。セクションの順序がそのまま説得の順序というわけです。

「口コミセクションを料金の上に上げて」のように、セクション単位で話す習慣をつけましょう。AIとの会話が目に見えて正確になります。

構造が骨ならコピーは声です。いちばん手をかける場所は、ヒーローの見出しの一行です。「○○ピラティスです」のような自己紹介より、「1日50分、姿勢が変わる時間」のように訪問者が得るものを語る文章が強いのです。

ボタンの文言も声です。「送信」より「レッスンを予約する」、「もっと見る」より「時間割を確認する」のように、押したら何が起きるかを教える文言がクリックを生みます。リファインに「見出しを、顧客が得る価値中心で3案提案して」と頼めば、AIがコピーライターになってくれます。

サイトの第一印象は、ほとんど画像が決めます。スタジオでは画像を別途探し回る必要はなく、その場で生成できます。「明るい自然光のピラティススタジオの内部、セージグリーンのトーン」のように雰囲気まで指定してリクエストすれば、サイトの色味に合う画像が作られます。

配置の原則は役割です。ヒーローには雰囲気を伝える横長の画像、トレーナー紹介には人物の画像、レッスン紹介には動きの画像。画像が文章の内容を支えるとき、サイトはようやくプロらしく見えます。自分の店舗の写真があるなら、それを使うのがいつでも最高です。本物には生成画像はかないません。

平凡なサイトを特別にする近道がスキルライブラリです。3D演出、パララックススクロール、チャート、スクロールアニメーションのような検証済みの技法がカテゴリと検索で整理されていて、選べばビルドにそのまま入ります。

実は選ばなくても、スタジオがプロンプトに合うスキルを自動で選んで組み合わせてくれます。それでも自分で選ぶ方法を学ぶ理由は、特定の技法をどうしても入れたいときに指定できる必要があるからです。ピラティスのサイトなら、スクロールに合わせて動きの写真がなめらかに現れる演出ひとつで格が変わります。

下の「スタジオで試す」で「スキルを探す・追加」を開き、検索欄に3Dやパララックスと打ってみてください。今作っているビルドの種類に合うスキルだけを絞って見せてくれます。

いよいよ訪問者の目で見る時間です。スマホ表示をオンにすると、実寸のスマホフレームの中でサイトが開き、iPhoneとGalaxyを並べて比較することもできます。2機種は画面比率と角の丸みが違うので、片方で完璧なレイアウトがもう片方でずれることもあります。

確認ルーチンは3つです。第一に、見出しが不自然に改行されていないか。第二に、ボタンが親指で押すのに十分大きいか。第三に、予約フォームがスクロール数回以内に出てくるか。ほとんどの訪問者はスマホから来るので、スマホでの姿が事実上サイトの本当の姿です。

レスポンシブとは、画面サイズに合わせてレイアウトが自分で再配置される性質です。PCでは3列に並んだ料金表が、スマホでは1列に積み上がるといった具合です。スタジオのビルドは基本的にレスポンシブで作られますが、中身をたくさん直しているうちに、ずれる箇所が生まれることがあります。

点検で見つけた問題はリファインで解決します。「モバイルで時間割が切れて見える。モバイルでは縦に積むようにして」のように、画面サイズと症状を一緒に伝えるのがコツです。プレビュー窓の幅を左右に広げたり縮めたりして、レイアウトが付いて動くか見るのも速い点検法です。

サイトが完成したら、言語を増やす番です。翻訳機能は見えるテキスト全体を指定した言語へ自然に移し、デザインと機能はそのまま残します。日本語で完成させたピラティスのサイトが、数クリックで英語、韓国語、中国語のバージョンを持つことになります。

観光客が来る街の店舗、海外の顧客を狙うサービスなら、この機能がそのまま売上です。言語ごとのバージョンをそれぞれ保存しておけば、お客に合わせて出し分けられます。

言葉で直すリファインのほかに、手で直す道もあります。クリック編集をオンにすると、プレビューの要素を直接クリックして選択し、文字をその場ですぐ直せます。見出しの誤字ひとつ直すためにチャットを送る必要がなくなるのです。

ドラッグで動かし、ハンドルをつかんでサイズを変え、インスペクターで色や間隔を精密に調整する発展機能もあります。詳しくはクリック編集の専用コースで扱うので、今日はオンにして文字をひとつ直してみるところまでにしましょう。

誤って壊す心配は要りません。元に戻すがありますし、最悪の場合でも再生成は無料です。思い切り触ってみる人が早く伸びます。

サイトに書かれている内容、本当に全部合っているでしょうか? AIが書いた下書きには、もっともらしいけれど不正確な文章が混ざることがあります。効果を誇張する表現や、確認されていない数値が代表例です。お客の前に立つサイトなら、送り出す前にふるいにかけるべきです。

信頼性チェックはこれを4段階でやり遂げます。1段階、サイトの中の主張を抽出します。2段階、グーグル検索と照合して事実を確認します。3段階、コードをサンドボックスで実際に実行してみます。4段階、レポートと修正案を出します。問題になった文章をどう直せばいいかまで提案してくれるので、受け入れるかどうかだけ決めればいいのです。

完成したビルドは、VibeCampusの外にも出ていけます。埋め込み機能がコピーして貼るだけのコードを作ってくれて、そのコードを既存のホームページ、ブログ、ネットショップの紹介ページ、どこに貼っても、その場所に自分のビルドが現れます。

すでにホームページを運営しているオーナーには特に便利です。ホームページを作り直さなくても、予約フォームやイベントページのような新機能を、額縁を掛けるように追加できるのですから。作るのはスタジオで、見せるのはどこででも。これが埋め込みの精神です。

いよいよ最初から最後までひとりで完走する時間です。下の「スタジオで試す」ボタンを押すと、ウェディングフォトグラファーのポートフォリオサイトのプロンプトが入っています。フルスクリーンギャラリー、パッケージ料金、問い合わせフォーム。写真が主役のサイトなので、このコースで学んだ技術が全部使われます。

ゆっくりでいいので、全工程を踏んでください。完成したら、下の答え合わせを開いてお手本の経路と照らし合わせればOKです。

振り返れば長い道を来ました。テンプレート選びから始まり、構造、コピー、画像、スキル、2機種点検、レスポンシブ、4言語、検証、埋め込みまで。この全工程を知る人は、もうウェブサイトが怖くありません。必要なときに取り出して使う武器になったのですから。

この武器は自分の事業にだけ使えという決まりもありません。近所のお店、知人のスタジオ、街の工房まで、サイトが必要な場所はどこにでもあります。次のコースでは、データが生きているアプリへ、もう一段上がります。