flow-yamagen.com を、
壊さず整えるとこうなる。
既存のWebサイトを壊さず整える「金継ぎ」のデモ修理です。写真、映像、手描きの絵、文言、リンク先、並び順はそのまま。
変えたのは「薄すぎて読めない文字の濃さ」「重なり順の場当たりな数字」「スマホで黒い四角になっていた映像」の3つだけです。
追加CSS1ファイルだけで直しています（公開中のサイト本体には手を加えていません）。
デザインとしては、かなりよく出来ています。手書きの「flow」のロゴ、6つの手描きの線画、家族で稲を扱く映像。
素材が全部このお家のもので、借り物の飾りが一つもありません。機械の点数も、修理前の時点で乱れ度4〜6（合格の目安は30未満）・AIによくある型は6つのアイコンの丸切り1件だけ。
散らかりで損をしているサイトではありません。足を引いていたのは3つだけでした。
スマホとタブレットではメニュー9本ぜんぶが薄いグレー（コントラスト比2.85）で読みにくいこと、フッターの5本がさらに薄いこと（比2.1）、そしてスマホのファーストビューが「黒い四角に再生ボタン」になっていたことです。
惜しいのは、見た目ではなく「トップページに言葉が一文もない」ことです。
初めて来た人は、ここが滋賀県米原市の築120年の古民家で、車椅子でも化学物質に敏感な方でも泊まれる一日一組の宿だと、トップページからは分かりません。
パソコンでは6つの絵に文字の名前すら付いていないので、かごや斧の絵が何のお店なのか読み取れません。
1泊27,000円の宿・整体・アートクラス・ギターレッスンという確かな中身があるのに、トップページには価格も、無料の入口も、予約への一歩も置かれていない状態です。
「私たちについて」に書かれている方丈記の一節と6つのいとなみの文章は本当に良いので、その最初の一文をトップに引き上げるだけで、このページは変わります。
マーケティング診断 by イケハヤAI
イケハヤAIが、マーケティング目線での診断を行いました。これらの指摘は今回の修理には含まれていません。
改善の候補として参考にしてみてください。
1トップページに、何屋かを言う言葉が一文もない
トップページに置かれているのは、ロゴと、6つの手描きの絵と、映像と、フッターのリンクだけです。文章が一文もありません。
パソコンでは6つの絵に名前すら付いておらず、かご・斧・ギター・鉛筆の線画から「宿」「量り売りのお店」「整体」を読み取れる人はいません。
ブラウザのタブとGoogleの検索結果に出る題名も「front page - flow」のまま（WordPressの初期値）で、ここが何の場所なのかを名乗る機会をすべて逃しています。
【問い8】このページで誰に何をしてほしいのか、一文で言えない状態です。
処方 映像の上か下に一文だけ置く。例:「滋賀・中山道沿いの築120年の古民家で、泊まる・食べる・つくる。車椅子の方も化学物質に敏感な方も泊まれる、一日一組の宿です」。あわせて、パソコンの6つの絵の下に日本語の名前を添える。
2泊まれることも、いくらかも、トップからは分からない
中身は充実しています。1泊27,000円（3〜6才13,500円／障害者手帳をお持ちの方15,000円）、車椅子可、段差のない部屋、無香料のアメニティ、アレルギー対応。
ところがトップページには、価格も、空室検索への一歩も、「泊まる」という言葉すら出てきません。
今日は決めない人のための無料の入口（メールマガジンのページは存在します）も、トップからは辿れません。来た人の大半が、何も持たずに帰る形になっています。
処方 映像のすぐ下に「泊まる（1泊27,000円〜／一日一組）」のボタンを1つだけ置き、その下に小さくメールマガジンの入口を添える。
3スマホでは、主役の絵も映像も出ていなかった
このサイトにしかない物は、手描きの6つの絵と、家族で稲を扱く映像です。
ところがスマホ・タブレットでは、6つの絵は一枚も表示されず、14pxの薄いグレーの文字リストに置き換わっていました。
さらに映像も、パソコン用とは別のモジュールが表示される作りで、そちらは自動再生・消音の設定が入っていないため、ファーストビューが「黒い四角に再生ボタン」になっていました。
スマホで来た人は、このサイトの良いところを一つも見ないまま帰ることになります。
処方 スマホでもパソコンと同じ映像モジュールを出す（今回の修理で対応済み）。6つの絵も、2列×3段でスマホに出す。
4書体だけが、端末まかせになっている
ロゴは手書き、アイコンは手描きの線、写真は自分たちの暮らし。そこまで手で選んでいるのに、文字だけはブラウザの初期設定のままです（-apple-system / system-ui）。
Macでは游ゴシック系、Windowsでは別の書体、Androidではまた別の書体で表示され、同じページが端末ごとに違う顔になります。
「書体を選んでいない」ことは、意外と見る人に伝わります。
処方 和文を1書体だけ選んで読み込む（例: Zen Kaku Gothic New / Noto Serif JP）。手描きの線に合うのは、細めの明朝かやわらかいゴシック1本。
継ぎ目を動かすと、修理前後が入れ替わります
金のピンが変えた場所です。番号は下の凡例をご覧ください。
ページ全体
フッターの薄いリンクを読める濃さへ・言語切替の重なり順を100へ（見た目は変わりません）
- 1フッターの薄いグレー #B2B2BE（白背景とのコントラスト比2.1／基準4.5）→ 同じ色みのまま濃さだけ下げた #72727E（比4.75）へ×5
- 2言語切替（JA/EN）の重なり順 z-index:99999 → 100（見た目は不変。今後モーダルや固定ヘッダーを足したときに前に出すぎない）
フッター
linktr.ee／magazine／sitemap／privacypolicy／GeneratePress の5本（コントラスト比2.1）を、色みはそのままに読める濃さへ
- 1フッターの薄いグレー #B2B2BE（白背景とのコントラスト比2.1／基準4.5）→ 同じ色みのまま濃さだけ下げた #72727E（比4.75）へ×5
詳細レポート
スマホ・タブレットの実測、数字の一覧、AIの既製品の型と直し方は、詳細レポートにまとめました。
あなたのAIへの指示
この記録の直しは、お手元のAIにそのまま任せられます。下の指示文をコピーして渡してください。
あなたは「flow（flow-yamagen.com）」の改修を任されたAIです。金継ぎの診断の結果に沿って、次の手順で直してください。本番公開の前に、必ず依頼主の承認を取ってください。
手順1. 次の追補スタイルを、対象ページの </head> 直前にそのまま貼る。文言・リンク先・HTMLの構造は変えない。
<style id="kintsugi-repair">
/* ══ 金継ぎ 追補スタイル — flow-yamagen.com（2026-08-25）══
使い方: このファイルの中身を、テーマの「追加CSS」（外観 → カスタマイズ → 追加CSS）に貼るだけ。
既存のCSSは1行も書き換えません。あとから上書きするだけなので、消せば元に戻ります。
直したのは3件（＋その副作用）。文言・リンク先・並び順・写真・動画は一切変えていません。 */
/* ── 1. 読みにくい薄いグレーの文字を、読める濃さへ ─────────────────
リンクの色は --contrast-3（#B2B2BE）1本で決まっていました。白地とのコントラスト比 2.1 で、
WCAGの基準 4.5 に届いていません（メニュー「私たちについて／お知らせ／お問い合わせ」、
フッターの privacypolicy など）。色みは変えず、同じ色相のまま濃さだけ下げます（比 4.75）。 */
:root { --contrast-3: #72727E; }
/* スマホ用のメニューは、上の変数を通さず #999 が直接書かれています（比 2.85）。同じ濃さへ揃える。
※ 幅768pxちょうどでもスマホ用メニューが出るため、@media で囲わずに当てます
（max-width:767px で囲うと768pxだけ薄いままになる境界事故） */
.flow-nav-mobile .flow-nav-left a,
.flow-nav-mobile .flow-nav-right a { color: #72727E; }
/* ── 2. 言語切替（JA/EN）の重なり順を、常識の範囲へ ───────────────
z-index: 99999 が指定されていました。層は 1（内容）／10（浮く部品）／100（固定・最前面）の3段で足ります。
見た目は変わりません。将来モーダルや固定ヘッダーを足したときに、その上に張り付かなくなります。 */
.trp-floating-switcher { z-index: 100; }
/* ── 3. スマホで真っ黒だった動画を、パソコンと同じ「自動再生の映像」へ ──
トップページには動画モジュールが2つ置かれています。
・パソコン用（.fl-node-fy1zdhlgb5s7）＝ muted / autoplay / loop → ちゃんと流れる
・スマホ用（.fl-node-zhx05gsldr68）＝ autoplay なし・muted なし・ポスター画像なし
→ スマホでは「黒い四角に再生ボタン」だけが出ている状態（＝ファーストビューが黒い箱）
同じ動画ファイルなので、スマホでもパソコン側のモジュールを出すようにします。 */
@media (max-width: 768px) {
.fl-node-djfc6092mel5.fl-visible-desktop,
.fl-node-fy1zdhlgb5s7.fl-visible-desktop { display: block !important; }
.fl-node-ha90mbw5flci.fl-visible-mobile { display: none !important; }
.fl-node-djfc6092mel5 .fl-row-content { max-width: 100%; }
}
</style>
手順2. 幅1280・768・390pxの3つで表示を確かめる。読めない文字・画面右端からのはみ出し・要素の重なりが出ていたら、その場で直す。
手順3. 余力があれば、AIの定番パターンを上から順に外す。依頼主が意図して選んだ表現なら残す:
- 主役の絵を丸く切る: キャラクターや人物を丸枠で顔だけ切り取ると、衣装もポーズも捨ててアイコンの型に入ります。切らずに大きく置き、縁・光・グラデの飾りを主役の周りから外します。
手順4. 次はマーケ診断の処方。文面や構成が変わるので、実施の前に依頼主に確認する:
- トップページに、何屋かを言う言葉が一文もない: 映像の上か下に一文だけ置く。例:「滋賀・中山道沿いの築120年の古民家で、泊まる・食べる・つくる。車椅子の方も化学物質に敏感な方も泊まれる、一日一組の宿です」。あわせて、パソコンの6つの絵の下に日本語の名前を添える。
- 泊まれることも、いくらかも、トップからは分からない: 映像のすぐ下に「泊まる（1泊27,000円〜／一日一組）」のボタンを1つだけ置き、その下に小さくメールマガジンの入口を添える。
- スマホでは、主役の絵も映像も出ていなかった: スマホでもパソコンと同じ映像モジュールを出す（今回の修理で対応済み）。6つの絵も、2列×3段でスマホに出す。
- 書体だけが、端末まかせになっている: 和文を1書体だけ選んで読み込む（例: Zen Kaku Gothic New / Noto Serif JP）。手描きの線に合うのは、細めの明朝かやわらかいゴシック1本。
手順5. 仕上げの確認。低コントラスト0件・12px未満の文字0件・角丸3種以内・横はみ出し0件を保てていれば完了。