Webサイトのリメイク（再構築）における役割は、視覚的な新しさをもたらすことだけではありません。
そのブランドが持つ独自の空気感や、現地でしか得られない「体験の価値」を言葉と構造で整理し、画面を通したシームレスな追体験を設計することにあります。
今回、茨城県大洗町の「海の子ポイント」の真ん前に店舗を構える、創業1995年の老舗サーフショップ「イエローサンズ（Yellow Sands）様」の公式サイトをリメイクするにあたり、私たちが施した「世界観と体験の再構築」における具体的なアプローチをご紹介します。
【リメイクした実際のWebサイトはこちら】 Yellow Sands 公式サイト
抱えていた課題と、情報の「解体」
イエローサンズは、大洗の砂浜まで「徒歩0分」という抜群のロケーションにあり、温水シャワー、30台収容の駐車場、店舗前のウッドデッキを完備した、サーファーにとって極めて利便性の高い「ベースキャンプ」です。また、道具のレンタルや、初心者からステップアップを目指す方まで丁寧に対応するサーフィンスクールも非常に高い評価を得ていました。
しかし、リメイク前の情報構造においては、こうした「居心地の良さ」や「体験のハードルの低さ」が整理されておらず、初めてサーフィンに挑戦したいユーザー（ビジター）にとって「自分が行っても大丈夫なのだろうか」という心理的な壁が生じる懸念がありました。
そこで私たちは、同社が持つ「ハード面の圧倒的な利便性」と「ソフト面の親しみやすさ」を一度解体し、ビギナーと経験者それぞれの視点から「どのような情報があれば、安心して最初の一歩を踏み出せるか」を再定義することから始めました。
縦長LPに見せない、品格と風を感じる「1枚もの」への集約
スクールの予約獲得やレンタルの利用促進を目的とする場合、割引キャンペーンや扇情的なセールスコピーを多用した縦長のランディングページ（LP）が採用されることが一般的です。
しかし、自然を相手にし、長年コミュニティを守り続けてきたイエローサンズ様の佇まいに、過剰な商業感は調和しません。
そこで本プロジェクトでは、「品格ある1枚もの（シングルページ）」の構造を採用しました。 余白を大きく確保したレイアウトと、大洗の空と波を想起させるすっきりとしたタイポグラフィ（文字組み）によって、心地よいスクロール体験を設計。
トップから順にスクロールしていく流れの中で、
- 「ビーチまで徒歩0分」という事実がもたらす圧倒的な快適さ
- 道具の準備も心配もない「手ぶらでOK」のスクール詳細
- 初心者も安心できる、シャワーなどの設備スペック
これらの事実（ファクト）が、過度な売り込みを排除した形で、誠実に閲覧者へ伝わる構成にしています。
「波待ちが楽しくなる初心者知識」による心理的障壁の解体
サーフィンを始めてみたい人が抱く最大の不安は、「海でのルールがわからない」「専門用語が難しそう」という、目に見えない文化的なハードルです。
この障壁を取り除くため、サイト内に「波待ちの時間がもっと楽しくなる、初心者のための基礎知識」という、ノウハウをオープンにするセクションを構築しました。
・スープ（波が崩れた後にできる白い泡状の波。初心者のファーストステップ）
・ワイプアウト（ボードから落ちること。プロでも必ずやること、恥ずかしくないこと）
・カレント（離岸流の危険性と、インストラクターの安全管理体制）
・オフショア／オンショア（風の向きが波に与える影響）
・ローカル（地元サーファーとビジターが、お互いに敬意を払うためのルール）
専門用語を単に辞書的に説明するのではなく、「ワイプアウト（落ちること）は上達への自然なプロセスです」「大洗のローカルは、ルールとマナーを守るビジターに対して非常にオープンです」など、初心者が抱く懸念に先回りして答える言葉を選定しました。
技術の押し売りではなく、海を愛する先輩として安全に楽しく海に入るための「心得」をシェアする姿勢が、ユーザーとの間に深い信頼関係を築くフックとなっています。
ストーリーとしての「大洗の海」の深み
単なるサーフスクール紹介サイトで終わらせないために、私たちは「イエローサンズがベースを構える大洗の海とは、どのような場所なのか」を地質学的・歴史的な事実（ファクト）から紐解くセクションを挿入しました。
- 太平洋のうねりをダイレクトに受ける地形： 大洗岬から犬吠埼まで続く100kmに及ぶ「鹿島灘」の北端に位置し、遮るもののない太平洋の豊かなうねりが届く場所であること。
- 数千万年前の時間が積み重なった地層「大洗層」： 砂浜と岩場が隣り合う大洗の豊かな自然環境は、悠久の時間によって作られた「礫（れき）と砂」の堆積から成り立っていること。
このような「大洗の海そのものの価値や物語」をそっと添えることで、一時的なレジャーとしてのサーフィンではなく、「自然の大きな営みに触れる、かけがえのない体験」としてイエローサンズ様での時間を位置付けています。これこそが、大手の予約ポータルサイトや安価な体験サイトにはない、同店独自の「本質的な価値」の具現化です。
「ペライチ」から「JS×GAS」へ。機会損失を防ぎ、現場に寄り添う完全内製予約システム
今回のリメイクにおいて、デザインと並び技術的なアプローチを要したのが「予約システムの自社（内製）構築」です。
リメイク前、イエローサンズ様は外部の簡易ホームページ作成サービス「ペライチ」の予約機能を利用されていました。手軽である一方、ブランドデザインから切り離された外部ページに遷移するため、ユーザーの離脱を招きやすく、また予約システムのカスタマイズ性にも限界がありました。さらに、使い続ける限り月額のサービス利用料金が発生し続けるというコスト的な課題もありました。
そこで私たちは、外部の有料予約システムを一切使わず、フロントエンド（JavaScript）とバックエンド（Google Apps Script：GAS）を非同期で直接連携させる、「ランニングコストゼロ」かつ「ユーザー体験（UX）を損なわない高機能カレンダーシステム」を自社サイト内部にスクラッチで構築しました。
現場の運用要件とユーザーの利便性を両立させるための、具体的な設計仕様は以下の通りです。
① 季節限定スクールならではの「開催期間・時間枠の自動制御」
サーフィンスクールは季節限定のアクティビティです。開催期間外はシステム側で自動的に新規受付を制限し、シーズン中のみカレンダーを開放する仕組みを実装。さらに、1日の予約スロットを「午前1枠・午後1枠」と極めてシンプルに整理し、ユーザーが迷わず直感的に選べる対話型のカレンダー＆フォームUIをサイト内部に完全にシームレスに埋め込みました。
② 定員状況に応じた「△（残りわずか）」の自動判定ロジック
インストラクター（コーチ）1人が安全に指導できる人数には上限があります（イエローサンズ様では最大3名までの指導体制）。 一般的なパッケージ型のシステムであれば、すでに2名の予約が入っている状態で次のユーザーがアクセスすると、システム的に「×（満員）」と表示されてしまうことがよくあります。 これに対し、私たちは「定員の状況をリアルタイムに自動算出し、1名でも空きがあれば『×』にせず『△（残りわずか）』を表示する」判定ロジックをプログラムに組み込みました。これにより、挑戦したいユーザーのモチベーションを後押しすると同時に、店舗の機会損失を防ぐ仕組みをコード1本で実現しています。
③ 「電話予約」と「Web予約」を繋ぐ、店主専用スプレッドシート連携
ローカルビジネスの現場において、常連客や急ぎの顧客からの「電話予約」を無視することはできません。 しかし、Web予約と電話予約の管理がバラバラだと、ダブルブッキングのリスクが急増します。店主に複雑な管理システムの操作を強いることも現実的ではありません。
そこで私たちは、バックエンドのデータベースとして、誰もが使い慣れている「Googleスプレッドシート」を採用。 電話で予約を受けた際、店主がスプレッドシートに直接「電話予約枠」を入力するだけで、GASが自動的にWeb側のカレンダー空き枠をリアルタイムで減算・同期する連携システムを構築しました。これにより、現場の運用負荷を増やすことなく、二重予約の発生を防ぐ体制を整えています。
④ 運用の引き渡しを考慮したGASデプロイ
この非同期連携を実現するためのGASデプロイやシステム連携は、すべて一石屋が裏側で責任を持って設定し、クライアントへはシンプルに整理された「Googleスプレッドシート」のみを引き渡しました。高度なシステムを、クライアントが最も扱いやすいインターフェースで安全に運用できるようにする。これが、私たちの考える「現場に寄り添うWeb制作」のあり方です。
相手への敬意を促す「丁寧な予約へのアプローチ」
さらに、予約カレンダーのすぐそばに、私たちはあえて次のようなアナウンスを丁寧に記載しました。
「皆様を万全の状態で海へご案内するため、ご予約は【前日の13時まで】を目安にいただけますと大変助かります」
一見、当日予約を制限するような防衛的な表現ですが、これこそが「ユーザーの安全を100%確保し、万全の機材を整えて海へ案内する」というプロフェッショナルな姿勢（誠実さ）の表明です。
何でも「手軽に、今すぐ」できるインスタントな体験を売るのではなく、海に入るための「準備」を共に大切にする。この一言があることで、本当に価値を感じてくれる優良な顧客が集まり、現場のオペレーション負担も大幅に軽減されるという好循環を生み出しています。
LLMO対応：AIクローラーへの意味的な情報提供
私たちが手がける他のリメイク事例と同様に、イエローサンズ様のWebサイトにおいても、私たちは「人間向けの美しいUI（ジェネレーター）」と「AIクローラー向けのクリーンな構造（LLMO）」を両立させています。
たとえば、初心者のための用語集や大洗の海に関するストーリー、スクールの料金や時間、予約カレンダーの空き仕様などのデータは、AI（ChatGPT、SearchGPT、Gemini、Perplexityなど）が迷わず内容をデータベース化できるよう、意味的に正しいHTMLタグ（セマンティック・マークアップ）で記述しています。
これにより、ユーザーがAIに対して、
- 「大洗で初心者向けに丁寧に教えてくれる、シャワーや駐車場があるサーフショップは？」
- 「大洗の海の地質的な特徴やサーフポイントの魅力を教えて」
と質問した際、AIアシスタントが自信を持ってイエローサンズ様のサイト内のテキストを引用し、おすすめのベースキャンプとして紹介するルートを事前に設計しています。
まとめ：その場所の「空気感」を正しくデジタルに移植する
ローカルビジネスのリメイクにおいて最も重要なのは、都会的な洗練さを無理やり当てはめることでも、トレンドのシステムを無理に詰め込むことでもありません。
お店のドアを開けたときのオーナー夫妻の温かい笑顔、ボードを抱えて海に向かう瞬間の高揚感、大洗の海が持つ圧倒的な包容力——それらの「現地にある空気感（体験）」をそのままデジタルへと移植し、届くべき人に届くルートを整えることです。
海を愛するすべての人に開かれた、イエローサンズ様の佇まいをぜひ実際のサイトで体感してください。
👉 大洗で一番海に近い、快適なベースキャンプの仕上がりはこちらから。 Yellow Sands 公式サイト
