このフォルダは GitHub Pages で rustyworks.jp として公開されている本体 です。
Rusty1m/rustyworks のクリーンなクローンで、常にリモートと一致した状態を保ちます。
| フォルダ | 役割 | git |
|---|---|---|
~/rustyworks-site/（ここ） | 公開用。 ここから push すると本番に反映される | 管理下 |
~/git_HomePage用/ | 一時置き場。 作りかけ・大量の画像素材・書き出し前のもの | 管理外 |
公開したいものができたら、一時置き場からこのフォルダへコピーして push します。 一時置き場は git 管理外なので、うっかり全部コミットして本番のファイルを消す事故が起きません。
~/git_HomePage用/ のファイルは、基本的に消しません。
片付けのつもりでも、不要に見えても、勝手に消さないでください。
理由は2つあります。
- 公開できないものが置いてあります。 サイトに載せない素材、書き出し前のもの、 手元だけで持っておくもの。「サイトで使われていない＝不要」ではありません
- git 管理外なので、消したら戻せません。 公開用フォルダなら履歴から復元できますが、 こちらにはその後ろ盾がありません
見た目が作業ファイルでも、実体がそこにあるものがあります。たとえば —
| 場所 | 中身 |
|---|---|
contact-worker/ | 稼働中の問い合わせ受け口の実体。ここが唯一の原本 |
og/ | OGP 画像を描くための元。作り直すときに要る |
消す必要があると思ったときは、消さずに相談してください。
CNAME— 独自ドメインrustyworks.jpの設定。消すとドメインで開けなくなります。~/git_HomePage用/の中身 — 上記のとおり。削除は相談してから。
- このフォルダで編集（または一時置き場からコピー）
git statusで変更内容を確認（意図しない削除がないか必ず見る）- 必要なファイルだけ
git add - コミットして
git push origin main - 数十秒で
rustyworks.jpに反映される
HTTPS + キーチェーン。Personal Access Token（fine-grained・Contents: Read and write）を使用。
有効期限: 2026-10-24 — 切れたら GitHub で作り直してください。
| 製品 | ページ |
|---|---|
| Recoup | recoup.html / recoup_manual.html / recoup_privacy.html |
| ShelfNavigator | shelfnavigator.html / _manual / _privacy |
| Kuro | kuro.html / kuro_manual.html / kuro_privacy.html |
| 不満ノート（FumanNote） | fumannote.html / fumannote_manual.html / fumannote_privacy.html |
| Plain Video Saver | pvs.html / pvs_privacy.html |
| UADB | UADB_manual.html / uadb_privacy.html |
| オートダビング構文（Web アプリ） | autodub/index.html / autodub/notes.html（解説記事） |
| トップ | index.html |
| サイト共通 | works.html（作品一覧） / contact.html（お問い合わせ・noindex） / site_privacy.html |
既存のページはすべて下の形になっています。忘れても表示は壊れないが、 後から直しても取り返しがつきにくいものを先に並べます。
SNS やチャットに貼られたときに出るカードの中身です。後から足しても、 各サービスが一度取得したキャッシュは当分そのままなので、公開前に入れます。
| 入れるページ | 製品ページ、Web アプリ、トップ、WORKS、お問い合わせ |
| 入れないページ | 取説・各アプリのプライバシーポリシー（人に貼られる前提がないため） |
index.html の7〜20行目がそのまま雛形です。
<metaname="description" content="…"><metaproperty="og:type" content="website"><metaproperty="og:site_name" content="RustyWorks"><metaproperty="og:locale" content="ja_JP"><metaproperty="og:url" content="https://rustyworks.jp/xxx.html"><metaproperty="og:title" content="…"><metaproperty="og:description" content="…"><metaproperty="og:image" content="https://rustyworks.jp/assets/og/xxx-og.jpg"><metaproperty="og:image:width" content="1200"><metaproperty="og:image:height" content="630"><metaname="twitter:card" content="summary_large_image"><metaname="twitter:title" content="…"><metaname="twitter:description" content="…"><metaname="twitter:image" content="https://rustyworks.jp/assets/og/xxx-og.jpg">og:urlとog:imageは絶対 URL で書く。 相対パスだと拾われません- 製品ごとの絵が無いページ（トップ・WORKS・お問い合わせ）は、共通の
rustyworks-og.jpgを指します。専用の絵を描いたら差し替える - 検索に出したくないページには
<meta name="robots" content="noindex">を足す （contact.htmlがそうしています）。OGP は noindex でも効きます
トップと WORKS の枠は aspect-ratio:1200/630 の帯で、絵は object-fit:contain
で中に収めています。だから実寸がバラついても一覧の高さは揃うし、絵が切り取られる
こともありません。 そのかわり、比率が 1200:630 からずれた分だけ帯の余白が出ます。
| 置き場 | 使う場所 | 目安 | 形式 |
|---|---|---|---|
assets/og/<名前>-og.jpg | 共有時のカード | 1200×630 ちょうど（SNS 側が決める） | jpg |
assets/cards/<名前>.webp | トップの作品カード・WORKS 一覧 | 720×378（＝1200:630） | webp |
assets/icons/<名前>.png | 専用の絵が無いものの代用・ファビコン | 160×160 | png |
- 揃えるのは画素数ではなく比率です。 720×378 はちょうど 1200:630 なので余白が出ません
- 比率がずれる絵を使うときは、帯の色を絵の地に合わせます。 そうすれば余白は見えません。
実際
fumannote.webpは 800×382（比率 2.09）ですが、この指定で成立しています
<!-- index.html — トップの作品カード。比率がずれるので帯の色を指定している --><aclass="work" href="fumannote.html"><divclass="work-art" style="--art-bg:#f6f3f0;"><imgsrc="assets/cards/fumannote.webp" alt="" loading="lazy" width="800" height="382"></div><divclass="work-foot"><spanclass="work-name">不満ノート</span><spanclass="dot released" title="リリース済み" aria-label="リリース済み"></span></div></a><!-- works.html — 専用の絵がまだ無いものは placeholder にしてアイコンを中央に置く --><divclass="item-art placeholder"><imgsrc="assets/icons/xxx.png" alt="" loading="lazy" width="160" height="160"></div>width と height は実寸をそのまま書きます（枠が比率を持っているので、
書かなくても行はずれません）。alt が空なのは、すぐ隣に同じ名前が
テキストで出ているからです。
ページを作っただけでは、どこからも辿れません。両方に足します。
index.htmlの作品カード（横送り）works.htmlの一覧（説明文・状態バッジ・取説やプライバシーへのリンク）
新しい製品を出したら、お問い合わせフォームの「対象」に足します。 サイト側とクラウドフレア側の両方を直さないと、黙って取りこぼします。
| 直す場所 | 何を |
|---|---|
contact.html の <select id="product"> | <option value="DocPane">DocPane</option> を1行 |
~/git_HomePage用/contact-worker/worker.js の PRODUCTS | 同じ文字列を配列に追加 |
片方だけだと、送信は成功して 200 が返るのに、届いたメールでは 「指定なし」になります。 Worker は知らない値を弾かずに寄せる作りだからです。 送った人にも受け取った側にも、失敗したことが分かりません。
worker.jsはこのリポジトリにはありません。一時置き場の~/git_HomePage用/contact-worker/にあります。受け口の設計と デプロイ手順は、そこの README が正典です。
worker.js は直しただけでは効きません。上げるまで反映されません。
cd~/git_HomePage用/contact-worker && npx wrangler deployoption の value と PRODUCTS の文字列は完全一致させます。表示名と
値を変えている項目があるので注意（UADB / UADB Lite は value="UADB"、
このサイト は value="サイト"）。
トップの更新履歴です。新しいものが一番上で、日付は降順に並べます。
<aclass="update" href="docpane/"><timedatetime="2026-08-14">2026.08.14</time><spanclass="badge news">NEWS</span><spanclass="update-title" data-ja="…" data-en="…">…</span><svgviewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polylinepoints="9 5 16 12 9 19"/></svg></a>| バッジ | 使いどころ |
|---|---|
news | 新しく出したもの・公開したもの |
update | 既にあるものの更新 |
lab | 実験的なもの、解説記事 |
<time> は datetime 属性と表示の両方を書きます（2026-08-14 と 2026.08.14）。
href は、その話題の行き先へ。日本語だけでなく data-en も書きます。
<meta name="viewport" …> | 無いとスマホで極小表示になります |
| 配色 | ライトテーマの値に合わせる。--bg--panel--line--text--muted--accent |
| 日英切替 | 切り替えたい要素に data-ja / data-en、placeholder は data-ph-ja / data-ph-en |
| 解析タグ | </body> の直前に Cloudflare Web Analytics のタグ（トークンは全ページ共通） |
| フッター | トップへ戻る導線と site_privacy.html へのリンク |
curl -s -o /dev/null -w '%{http_code}\n' https://rustyworks.jp/xxx.html
curl -s -o /dev/null -w '%{http_code}\n' https://rustyworks.jp/assets/og/xxx-og.jpgどちらも 200 であること。og:image が 404 だと、カードは画像なしで出ます。
一覧からリンクが繋がっているかも合わせて確認します。
LP の見た目は、担当ごとに自由に作って構いません。 構成・レイアウト・見出しの言い回し・スクリーンショットの見せ方・アニメーション — そのページの中で完結するものは、揃える必要がありません。
**ただし、次の3つだけは揃えます。**サイトを横断して動くもの、 あるいは他のページから来た人の期待を裏切るものだからです。
| 揃えるもの | 揃えないと何が起きるか |
|---|---|
| 日英の切り替え | EN で見ている人が、そのページだけ日本語になる |
| トップへ戻る導線（上と下） | 直接入ってきた人が、サイトの他を見に行けない |
| ライトテーマの地 | 白いページから来て、そこだけ暗転する |
| 製品まわりのフッター | 取説だけ読みに来た人が、製品ページやストアへ行けない |
トップと同じ仕組みを載せます。ヘッダーに JA / EN のボタンを置き、
切り替えたい要素に data-ja / data-en を書きます。
<divclass="lang" role="group" aria-label="Language"><buttontype="button" data-lang="ja" aria-pressed="true">JA</button><spanclass="sep">/</span><buttontype="button" data-lang="en" aria-pressed="false">EN</button></div>varKEY='rw-lang';varbuttons=document.querySelectorAll('.lang button');varnodes=document.querySelectorAll('[data-ja][data-en]');functionapply(lang){document.documentElement.lang=lang;nodes.forEach(function(el){vartext=el.getAttribute('data-'+lang);if(text!==null)el.textContent=text;});buttons.forEach(function(b){b.setAttribute('aria-pressed',String(b.dataset.lang===lang));});try{localStorage.setItem(KEY,lang);}catch(e){}}buttons.forEach(function(b){b.addEventListener('click',function(){apply(b.dataset.lang);});});varsaved=null;try{saved=localStorage.getItem(KEY);}catch(e){}if(!saved)saved=(navigator.language||'').toLowerCase().indexOf('ja')===0 ? 'ja' : 'en';if(saved==='en')apply('en');- 保存先の
rw-langはサイト全体で共有です。 だからトップで EN にした人は、 LP も EN で開きます。LP に仕組みが無いと、そのページだけ日本語に戻ります - 入れ替えるのは
textContentです。placeholderを訳すときはdata-ph-ja/data-ph-enを使い、el.placeholderに入れます（contact.htmlが例） data-jaとdata-enは両方書きます。片方だけの要素は切り替わりません
一番上（ヘッダー）と一番下（フッター）の2か所です。
LP は検索やリンクの共有から直接入ってくるページです。上にしか無いと 読み終えた人が戻れず、下にしか無いと読む前に離れた人が戻れません。
href は index.html。サブフォルダに置く Web アプリからは ../index.html です。
地は白、文字は濃いグレー。値は他のページと同じものを使います。
| 用途 | 値 |
|---|---|
| 地 | #ffffff |
| パネル | #f7f7f8 / 一段沈める場合 #f0f0f2 |
| 罫線 | #e4e4e7 |
| 本文・見出し | #111214 |
| 補助文字 | #5f6368 / さらに薄く #8a8d93 |
| リンク・ボタンの青 | #1a4fd8 / hover #143fb0 |
- 製品ごとの accent は個性として残して構いません（不満ノート＝橙、 ShelfNavigator＝琥珀など）。地を白にすることが揃っていれば十分です
- 暗い地の前提で選んだ明るい色を、そのまま白地に置かないこと。
#ff8f6bのような色は白地でコントラストが足りません。濃い側へ振り直します - 色地のバッジに黒文字を載せていた箇所は、accent を濃くしたぶん白抜きにします
1つの製品には製品ページ・取説・プライバシーの3ページがあります。 その3ページすべてに、同じフッターの塊を置きます。
| 並び | 行き先 |
|---|---|
| RustyWorks | index.html（トップ） |
| 製品ページ | <製品>.html |
| 取説 | <製品>_manual.html |
| ストア | App Store / itch.io など、外部の配布先 |
| プライバシー | <製品>_privacy.html |
| サイトのポリシー | site_privacy.html |
どのページから入っても、その製品に関わる全部へ1クリックで行けます。 検索や共有リンクは3ページのどこにでも着地するので、取説だけ読みに来た人が そこから製品ページへ戻れない、ということが起きなくなります。
無い項目は出しません。 5つ揃っている製品ばかりではありません（ストアが まだ無い、取説をこれから書く、など）。出ている以上、必ず行き先がある 状態を保ちます。空リンクやグレーアウトは置きません。
専用のプライバシーページが無いのは、欠落とは限りません。 ストアで配布しておらず、手元で何も起きない製品は、
site_privacy.htmlだけで 説明が尽きます（DocPane がその例）。その場合はプライバシーの行を出さず、 サイトのポリシーだけを置きます。作り忘れと決めつけて追加しないこと。
- 同じ塊を3ページに貼ります。 現在地の項目もそのまま残して構いません。 各ページで削るより、崩れにくさを優先します
- ラベルには
data-ja/data-enを書きます - サブフォルダに置く製品は
../を付けます（docpane/autodub/など） - ストアは外部なので
target="_blank" rel="noopener"を付けます
<footer><divclass="container footer-inner"><spanclass="copy">© RustyWorks</span><divclass="footer-links"><ahref="index.html">RustyWorks</a><ahref="kuro.html" data-ja="製品ページ" data-en="Product">製品ページ</a><ahref="kuro_manual.html" data-ja="取扱説明書" data-en="Manual">取扱説明書</a><ahref="https://apps.apple.com/app/id0000000000" target="_blank" rel="noopener" data-ja="ストア" data-en="Store">ストア</a><ahref="kuro_privacy.html" data-ja="プライバシー" data-en="Privacy">プライバシー</a><ahref="site_privacy.html" data-ja="サイトのポリシー" data-en="Site Policy">サイトのポリシー</a></div></div></footer>担当のページで、これだけ見てください。
- ヘッダーに JA / EN のボタンがあり、押すと切り替わる
- 訳したい要素すべてに
data-jaとdata-enが両方ある - トップで EN にしてからこのページを開くと、EN で表示される
- 一番上にトップへ戻るリンクがある
- 一番下にトップへ戻るリンクがある
- 地が白系で、他のページから来て暗転しない
- フッターの1組が、製品ページ・取説・プライバシーの3ページすべてにある
- フッターのリンクを全部押して、404 が出ない
3つ目は仕組みが効いているかの確認です。localStorage の rw-lang を
読めていないと、ボタンは動くのに他ページからの引き継ぎだけ失敗します。
Web アプリは1つにつき1フォルダにして、index.html を置きます。
URL が rustyworks.jp/autodub/ の形になり、拡張子が出ません。
共有される前提のものなので、URL の見た目と、後からデータや画像を
足せる余地を優先しています。
| 実体 | autodub/index.html（1ファイル完結・外部依存なし・ビルド不要） |
| OGP画像 | assets/og/autodub-og.jpg（1200×630） |
| アイコン | autodub/icon.png（ファビコン用・相対参照）と assets/icons/autodub.png（トップのカード用）の2か所 |
| 旧URL | autodub.html は転送用に残置。消さないこと |
| 版の表記 | フッター右下の .ver。ビルドが無いので手で上げる。 GitHub Pages は HTML に10分のキャッシュを付けるため、手元だけ古いまま見えることがある。そのときここを見れば判別できる |
開発は ~/オートダビング構文/ で行い、そこからコピーして公開します。
コピー時に足すのは <title> 周りの OGP メタだけで、本体には手を入れません。
autodub.html（ルート直下）は、フォルダ化する前に公開していた URL への 転送ページです。既に共有されたリンクを死なせないために置いてあります。