webseite-modernisieren

ウェブサイトをモダンにする：古い建物を改修する

イメージ

古い建物は取り壊すのではなく、改修します。まず、誰かがメモ帳とカメラを持って各部屋を回ります。何があり、何が使えて、何が傷んでいて、そしてタイル張りのストーブのように家族にとって大切なものは何かを確認します。この現状図を作ってから、改修に取りかかります。家族が「いいよ」と言わないかぎり、壁を取り払うことはありません。

このイメージの使い方： 最初の返答で、今何をしているかとあわせて、このイメージについて一文伝えます。

話し方

• すぐに取りかかります。 相手が住所や「…をモダンにして」と送ってきたら、何をしたいのか聞き返しません。古いサイトの各ページをこれから確認することと、だいたいどれくらいかかるかを一文で伝え、作業を始めます。
• 次の手順を相手に考えさせることはありません。次に何をするかを提案し、短く「はい」と確認をもらったら実行します。
• 「あなた」を使い、日常的な言葉で話します。「サイトマップ」ではなく「すべてのページの一覧」、「フォームのバックエンド」ではなく「問い合わせの送信先」と言います。
• 相手にしかわからないことだけを尋ねます。サイトに書かれていることは、すべて自分で確認します。
• パスワードは決して尋ねません。古いサイトのログイン情報も同様です。ログインが必要なページは「閲覧できず」と記録します。

手順

1. 質問せずに現状を確認する

作業フォルダーは、現在のフォルダー内に新しく作成し、サイト名を付けます（例：curling-grindelwald）。現状確認にアカウントやサーバーは必要ありません。まず konto_status を呼び出します。アカウントが表示されたら、何よりも先に open https://albatros.build/cockpit/insel でブラウザーから島を開きます（ほかの言語の接頭辞と Linux、Windows 用のコマンドは、スキル webseite-bauen の「島」の節を参照）。返答がない場合やアカウントがない場合は、島を開かずに続けます。

1. すべてのページを読む。 スクリプト bestand.mjs はこのスキルのフォルダー内にあります（Claude Code では、パスは上部の「Base directory for this skill」に表示されています）。Node だけで実行できます。

   node <ordner-dieses-skills>/bestand.mjs https://www.beispiel.ch docs/bestand
   

   sitemap.xml を読み、同じアドレスのリンクをたどり、次のファイルを作成します。docs/bestand/bestand.json（ページ、フィールド付きフォーム、埋め込みコンテンツ、メール、電話、料金、時間、ドキュメント、外部サービス）、各ページのテキスト（docs/bestand/seiten/ 内）、画像とドキュメント（docs/bestand/dateien/ 内）です。Node がない場合は、curl -sL https://www.beispiel.ch/sitemap.xml でページ一覧を取得し、各ページを個別に確認します。
2. 古いサイトのスクリーンショットを撮る。 ナビゲーションにある各ページを、モバイル幅とデスクトップ幅で撮影します。初回は Playwright がブラウザーをダウンロードします（約 150 MB）。

   npx -y playwright install chromium
   npx -y playwright screenshot --viewport-size=390,844 --full-page https://www.beispiel.ch/ docs/bestand/fotos/start-390.png
   npx -y playwright screenshot --viewport-size=1440,900 https://www.beispiel.ch/ docs/bestand/fotos/start-1440.png
   

   各スクリーンショットを自分で確認します。テキストからはわからない、配置や画像、モバイルでの使いやすさがわかります。
3. すべての機能を見つける。 テキストとスクリーンショットを次の一覧と照らし合わせ、各項目の場所と現在の実装方法を記録します。
   • フォーム：問い合わせ、登録、予約、注文、プレイヤーまたはパートナー募集、ゲストブック。入力項目は何か、問い合わせの送信先はどこか。
   • 日程：カレンダー、トーナメント、コース、練習時間、営業時間、シーズン。
   • ドキュメント：PDF（募集要項、ランキング表、規約、メニュー）、数、古さ。
   • 料金、会費、料金表。
   • 画像：ギャラリー（アルバム数、画像数）、ロゴ、リンク付きスポンサー。
   • 埋め込みコンテンツと外部システム：地図、動画、予約システム、ショップ、ニュースレター、ソーシャルメディア、天気、ウェブカメラ（bestand.json の einbettungen と fremdeDienste）。
   • ログインが必要なエリア、言語、会社概要とプライバシーポリシー、ほかのサイトへのリンク。

2. 現状図 docs/bestand.md

# Bestand: <Name der Seite>

**Adresse:** … · **erfasst:** <Datum> · **gebaut mit:** <z. B. Jimdo> · **Seiten:** <Anzahl> · **Sprachen:** …

## Seiten
| Seite | Adresse | Was drauf ist, in einem Satz | Zustand | Foto |
|---|---|---|---|---|

## Funktionen
| Funktion | Wo | Wie heute | Muss bleiben? | Entscheid |
|---|---|---|---|---|
| Kontaktformular (Name, E-Mail, Nachricht) | /kontakt | Formular von Jimdo | ja | offen |

## Inhalte
Texte, Bilder (Anzahl, eigene oder fremde), Dokumente, Logos, Sponsoren.

## Was veraltet ist
Jeder Punkt mit Beleg, zum Beispiel «News von 2019 auf der Startseite», «Bilder unscharf am Handy», «Gästebuch voller Werbung».

## Was bleiben muss
Was die Besucher brauchen und was gut ist.

## Offene Fragen

判断列は、相手が決定するまで「未決定」のままにします。「残す」「…として新しく作る」または「削除する（決定日：<日付>）」のいずれかを記入します。ここにそのような決定が記されていない機能は、新しいサイトから削除しません。

docs/bestand/dateien/ は権利が他者にあるファイルを含み、容量も大きいため、ログブックには入れません。.gitignore に追加してください。新しいサイトに必要なものは、後で必要なものだけをコピーします。

3. 調査結果を伝え、質問は3つだけ

見つけた内容を、簡単な言葉で短く、数字を交えて伝えます。ページ数、機能、古くなっているもの、良い点を説明します。その後、本人にしか答えられない質問だけを、1つのメッセージに番号付きで尋ねます。

1. 今後、誰がサイトを管理しますか？ また、どのくらいの頻度で変更がありますか？
2. 絶対に変えてはいけないものは何ですか？ （ロゴ、色、文章、ページ、機能など）
3. 誰にもっと来てほしいですか？ ゲスト、新しい会員、スポンサー、トーナメントに参加するチームなど。

それ以外はすべてこちらから提案し、本人が修正できるよう、前提を明記します（[前提：…]）。

4. 現状から計画へ

スキル webseite-planen に従います。ほとんどの答えはすでに現状の資料にあります。それらを引き継ぎ、本人には確認だけしてもらいます。現状の資料にある各機能を、提案とともに計画に含めます。

• テキストとファイルだけで済むもの（予定、トーナメント、PDF、料金、スポンサー、ギャラリー）は、複数の言語に対応する通常の静的ページにします（Lightで十分です）。
• フォームは、メールへのリンクだけで十分なことがよくあります。登録リストを保存する必要がある場合は、構成要素を使います（スキル bausteine、パイロットあり）。
• 広告だらけのゲストブックや、古い技術でしか必要なかったログインは削除してもかまいません。ただし、本人の判断が必要です。
• 他のサイトからリンクされている古いアドレス（告知、ランキング、Googleの検索結果）は、同じままにするか、リダイレクトを設定します。

決定事項を docs/bestand.md（「決定」列）と docs/plan.md に記入します。

5. 8つのステップで構築

ここからは、スキル webseite-bauen に従い、定められた順序で進めます。モックアップ、デザイン、フレームワーク、PRD、ローカル、ハーバー、組み立てライン、ページまたはサーバーの順です。さらに、次の点にも注意します。

• PRDには docs/bestand.md にあるすべての機能を、それぞれの決定事項とともに記載します。どの機能も、説明なしに削除してはいけません。
• デザインを考える際は、古いサイトの写真も確認します。絶対に変えてはいけないもの（ロゴ、色）は何か、何が古く見えるかを確かめます。
• ローカルでの構築後、新旧を並べて表示し、トップページと最も重要な下層ページを、スマートフォンとデスクトップで確認できるようにします。何が良くなり、何が変わらずに残ったかを3つの文で説明します。
• 新しいサイトが稼働してから、古いアドレスを新しいサイトに向けます（スキル domain）。

権利

古いサイトの文章、写真、ロゴには所有者がいます。通常は協会や事業者ですが、写真家の場合もあります。自分が所有していないサイトを刷新する場合、そこにあるものを公開する前に、運営者の許可が必要です。ダウンロードしたファイルは、確認のための作業用コピーです。人物が識別できる写真を使うには、本人の同意が必要です。そのため、公開前にこう尋ねます。「文章や画像はご自身のものですか？ それとも、たとえば理事会などから使用許可を得ていますか？」

注意点

• 機能が説明なしに失われることがあります。フォームが何にも置き換わらなかったり、ランキングが見つからなくなったりします。最後に、現状資料の各項目を確認します。
• 古いアドレスが使えなくなることがあります。告知やランキングは、他のサイトからリンクされていることがよくあります。
• 何千枚もの写真があるギャラリーを、そのまま一括で移行することは避けます。代わりに、優れた写真を選んで縮小し、残りはアーカイブに残します。
• AIらしい見た目にならないようにします。最初のページを作る前に、スキル gestaltung にある典型的な特徴の一覧を確認します。
• 古いサイトのCookieバナーを引き継がないでください。トラッキングや外部埋め込みのない静的ページではCookieを使用しないため、バナーは不要です。プライバシーポリシーがあれば十分です。Googleマップの埋め込みなど、同意が必要なものがある場合に限り、バナーを設置します。マップの代わりに、住所を含む「ルートを検索」リンクを用意すれば、多くの場合はバナーなしで済みます。

最後のメッセージ

このステップで送る最後のメッセージは、「古い建物を改修する」というイメージについて、その要点をもう一度伝える一文から始めます。その後、見つかったもの、または作成したもの、それらの場所（docs/bestand.md、写真）、本人がまだ決める必要のあること、次に行うことを伝えます。