🎯
「構成・編集ができる」ようになる
🚩 やる順番（5つ）
1
📖 会社HPを読ませる
そのまま言う「https://eltechno.jp/ を見て。この会社の色・雰囲気・トーンを掴んで」
↓
2
🧱 その雰囲気で「枠」を作る
そのまま言う「さっきの会社の雰囲気に合わせて、BtoB向けの商品事例ページをHTMLで作って。素材→加工→完成品→特徴 の流れ、価格やカートは無し、お問い合わせ導線つき。まず枠だけ」
↓
3
📷 枠に商品を入れる
商品を入れる「この商品を◯◯カテゴリの枠に入れて。素材→加工→完成品の流れで書いて」
写真を入れる（画像をドラッグ＆ドロップしてから）「この写真を この商品の写真枠に入れて」
↓
4
✏️ 見て直す（くり返し）
企業向けに直す（大事）「この説明文を お客さん向けから 企業向け（OEM相談したくなる言い方）に直して」
↓
5
📤 出来たHTMLをエンジニアに渡す
💡 最初はやって見せる → 次は同じ事を打ってもらう
✨ 良いページにするコツ
😌 センス・作った経験ゼロでOK
下の型に「あてはめるだけ」で良いページになる
迷ったらこれ：1商品＝「素材 → 加工 → 完成品」の3枚
これだけで“何をした会社か”が伝わる
これだけで“何をした会社か”が伝わる
① 構成（並べる順番）
🏷️
1 何ができる会社か
一番上で一言
💪
2 強み3つ
技術・特徴
📷
3 商品事例
素材→加工→完成品
🤝
4 対応できる事
こんな相談OK
📞
5 問い合わせ
最後に必ず
② 編集（書き方）
🎯
相手目線
企業が知りたい事を書く
✂️
短く
1文1メッセージ
🔄
言葉を変える
売り言葉→実績の言葉
良いページ＝👀ぱっと見て何屋か分かる ／ 🧩探しやすい ／ 📞最後に問い合わせ
🎬 組み込める動きの演出
静止画のページでも
少し動きを入れるだけで「ちゃんと作ってある感」が出る
↔️
横スライド
写真が横から流れて切り替わる
↕️
縦スライド
上下に流れて切り替わる
🌫️
フェード
ふわっと自然に切り替わる
🔍
ズーム
近づきながら写真が変わる
🃏
カードめくり
カードが少し立体的に動く
🪟
シャッター
左右に開いて写真を見せる
🌀
回転イン
少し回りながら入ってくる
▦
モザイク
小さい四角から画像が出る
🎨
背景色連動
写真に合わせて背景色も変える
言い方：「この写真部分に 横スライドを入れて」「商品画像をふわっと切り替えて」「背景色も写真に合わせて変えて」みたいに頼めばOK
🔧 直すとき言う言葉（お守り）
文字
ここを『◯◯』に変えて
消す
ここを消して
色
ここを◯色にして
写真
画像をドロップ→これに替えて
順番
これを上にして
戻す
さっきのに戻して
💡 間違えても 「さっきのに戻して」で戻る
✕ やらないこと
✕本体サイト(eltechno.jp)は触らない 作るのは単体ページだけ
✕フォーム・決済・ログインは自作しない
✕頼まれていない提案はしない 聞かれた事だけやる