つくり方｜ユキサポ

1設定データを用意する

ヒアリングツールの最後で「設定データをファイルで保存する」を押すと、教室名.json がダウンロードされます。

これを 03_ホームページを作る/ の中に入れます。

手で書きたいときは 新規案件用（空）.json をコピーして使ってください。
書き方に迷ったら 見本-スミレ.json（教室1つ）か 見本-トゥインクル.json（教室2つ）を見てください。

もらった写真を photos/ にそのまま入れます。名前は変えなくて大丈夫です。

設定データの photos 欄に、使う場所とファイル名の対応を書きます。

"photos": { "hero": "IMG_1234.jpg", "teacher": "IMG_5678.jpg", "concept1": "IMG_9012.jpg" }

書き方	効果
`"trim_black": true`	上下の黒帯を自動で検出して切る
`"cut_bottom": 0.05`	下から5%を切る（撮影アプリの透かし消し）

"concept4": { "src": "IMG_3456.jpg", "trim_black": true }

スマホ写真の回転は自動で直ります。サイズ変更と圧縮も自動です（長辺1400px）。

ヒアリングツールで主役の色を1つ選べば、13色が自動で決まります。完成イメージもその場で出ます。

お客様のチラシ・Canva・Instagramから主役の色を1つ拾うのが早いです。

cd ~/Desktop/ユキサポAI*/03_* python3 build.py 教室名.json

確認するとき

cd ~/Desktop/ユキサポAI*/03_*/output python3 -m http.server 8080

お客さまの声は、実際にいただいたお声が無いうちは必ず false にしてください。
作り話の体験談を載せると景品表示法に触れます。「後から足せます」と説明して、納品後の追加作業にした方が安全です。

空欄にした項目は、ページからその欄ごと消えます。

症状	原因
写真が出ない	`photos/` にファイルが無い／設定データのファイル名が違う
写真が横倒し	自動で直ります。直らなければ元の写真を確認
セクションが消えた	その項目を空欄にしたため（仕様です）
地図が出ない	GoogleマップのURLか教室名を入れ直す
文字化けした	設定データを UTF-8 で保存し直す
縦長の写真で顔が切れる	コースと声の写真は正方形に切られます。あらかじめトリミングを