用意するもの・作業する場所
使いたい写真をパソコンに保存します。最初はメイン写真1枚と紹介写真2〜3枚を用意し、文字の編集を終えた下書きで進めます。
写真を差し替える
ヒーローや画像ブロックを選び、画像の入力欄から保存写真または自分の画像を選びます。実際の店舗や商品を紹介する場合は、その場所・商品の写真を使います。
- 中央のヒーローまたは画像部品を押し、右側の画像入力欄を開きます。ヒーローでは「メイン画像」と表示されます。
- 保存写真から選ぶか、画像入力欄のアップロード操作で手元の写真を選択します。中央の写真が切り替わるまで待ちます。
- 具体例
- 家具の紹介なら実物の家具の写真を選びます。お店の写真として別の店舗の写真を使わないようにします。
- ここまでできればOK
- 中央に選んだ写真が表示されれば完了です。表示されない場合は画像形式とファイル容量を確認します。
切り抜きと説明を整える
画像・ギャラリーの「写真の形」「切り抜きの中心」で主役が見切れない位置にします。「写真の説明」には写っているものを具体的に書きます。キャプションは読者に見せる補足です。
- 画像やギャラリー部品を選び、「写真の形（切り抜き）」で縦横の比率を選びます。ヒーローなど、部品によって項目は異なります。
- 「切り抜きの中心」がある部品では主役に合わせて位置を変えます。続けて「写真の説明」に写っている内容を書きます。
- 具体例
- 写真の説明：窓際に置いたオーク材の丸テーブル。画面に見せる補足はキャプション欄に入力します。
- ここまでできればOK
- スマートフォン幅でも顔や商品が切れていないことを確認します。
ギャラリーを組む
グリッドは比較、縦積みは1枚ずつの紹介、フィルムは横に眺める見せ方に向きます。12種類から選び、写真の順序・間隔・ふちを整えます。
- 左の部品一覧からギャラリーを中央へ配置し、右側で写真を追加します。
- レイアウトを選び、写真の順序と間隔を調整します。最初はグリッドで3枚を並べると比較しやすくなります。
- 具体例
- 全体写真 → 素材のアップ → 使用している場面、の順にすると商品の特徴が伝わります。
- ここまでできればOK
- 同じ写真が重複せず、写真ごとの説明と並び順が合っているか確認します。
サイト全体の見た目をそろえる
「ページ全体の設定」で配色・書体・角・余白・版面幅・ボタン・文字サイズ・字送り・太さ・罫線・写真の色味を調整します。全ページに共通する設定なので、他のページの読みやすさも見ます。
- 「ページ全体の設定」を開き、配色と書体を選びます。一度にすべて変えず、ひとつ変えるごとに中央で確認します。
- 余白・文字サイズ・版面幅を調整し、別のページタブとスマートフォン幅でも表示を見ます。
- 具体例
- 背景は明るい色、本文は濃い色にして読みやすさを確保。写真の色味は同じ設定にそろえます。
- ここまでできればOK
- 全ページで文字が読めて、写真やボタンの雰囲気がそろっていれば保存します。
最後に、ここを確認。
✓ スマートフォンでも主役の写真と文字が見やすい。
うまくいかないときは
写真が引き伸ばされる場合は元画像の大きさを確認します。読み込みや保存に失敗する場合は、小さくした画像で再試行してください。変更前の下書きはJSONにも保存しておきます。
このデモでの扱い・補足写真を増やしすぎて保存できない場合は、画像の容量を小さくし、JSONにも書き出しておきます。