まず決めるのは横幅ひとつ
商品ページの画像で実際に決めるべき値は横幅ひとつです。縦は内容が決め、容量はその結果として付いてきます。ところが多くの人が順番を逆にして、縦の長さから悩みはじめ、作り終えてから幅が合わずに全部描き直します。
幅を決める基準はひとつです。載せる先が画像を何ピクセルで見せるか。それより大きく作ればブラウザが縮めて見せるので容量の無駄になり、小さく作れば引き伸ばされてぼやけます。
860px が既定値である理由
makeinfo の既定のキャンバス幅は 860px です。縦に長い商品ページの画像で広く使われる値なので、出発点にしやすい数字です。
この数字はデスクトップ画面の大きさから来たものではありません。商品ページはたいていスマホで読まれ、販売先のアプリは画像を画面幅に合わせて広げて見せます。860px は、そうして広げてもぼやけない範囲で容量が大きくなりすぎない折り合いの点です。
ただしこれはあくまで出発点です。載せる先が定めた幅があるなら、その値が優先します — 販売先ごとに違いますし、同じ販売先でも方針は変わります。
もっと鮮明にしたいなら、作業する幅を大きくするのではなく書き出し倍率を上げてください。編集は 860px を基準に進めて、結果のファイルだけ2倍（1720px）で出す方法です。作業幅を 1720px にすると文字の大きさと余白の感覚を全部つかみ直すことになりますが、倍率だけ上げれば画面で見ていたものがそのまま2倍の解像度で出ます。
ウェブで dpi は何の意味もありません
「商品ページは 72dpi で作るのか、300dpi で作るのか」はよく出る質問ですが、ウェブに載せる画像で dpi は何も変えません。
dpi はこの画像を紙に印刷するとき1インチに点をいくつ打つかを書き留めたメモです。ファイルの中に数字として書いてあるだけで、画素を増やしも減らしもしません。ブラウザや販売先のアプリはこの値を読まず、画素数だけを見ます。1000×1000 の画像は 72dpi で保存しても 300dpi で保存しても画面上では完全に同じです。
ですからウェブ用の画像では dpi を気にする必要はありません。代わりに横の画素数を見ます。逆に印刷物は dpi が実際の出力サイズを決めるので、そのときは必ず押さえます — それは別の話です。
縦の長さと分ける基準
縦は内容が決めます。ただし際限なく長くすると三つのことに引っかかります。
- 販売先の1枚あたりの制限 — 画像1枚の最大の高さや容量を決めているところが多くあります。超えるとアップロード自体が止まります。
- 読み込み — 長い画像1枚は全部届かないと最初の画面が出ません。複数に分ければ上から順に見えはじめるので、体感がずっと速くなります。
- ブラウザの画像サイズの限界 — 縦が数万ピクセルに達すると、環境によってはまったく表示されません。
分けるときに大事なのは切る位置です。段落の途中や商品写真の真ん中で切れると、断片の間のわずかな隙間がそのまま傷のように見えます。makeinfo の分割 PNG はブロックとブロックの間の空きをまず探して、そこで分けます。自動で決まった位置が気に入らなければ、切り取り線を自分で動かせます。位置の選び方は長いページを分けるで詳しく扱います。
ファイル容量を落とす
容量の制限に引っかかったとき、幅から削るのは最後の手段です。その前に見るものがあります。
| 先に見るもの | 説明 |
|---|---|
| 分ける | 制限が1枚あたりなら、分けるだけで解決します。画質はまったく失いません。 |
| 書き出し倍率 | 2倍で出しているなら1倍に落としてみます。容量はおよそ4分の1になります。 |
| ファイル形式 | 写真が多いなら JPG のほうが PNG よりずっと小さくなります。逆に単色の背景に文字が多い画像は PNG のほうが小さく、文字もくっきりします。 |
| 入れた写真の大きさ | 4000px の原本を 300px の枠に入れると、その分が結果に残ります。makeinfo は入れる時点で自動的に縮めますが、他のツールで作った素材は確認が必要です。 |
幅を削るのは、これを全部やってもなお足りないときです。幅は鮮明さに直接効くからです。
販売先ごとによく使われる値
以下はよく通用する値です。ただし各販売先が方針を変えるので、実際にアップロードする前にはその販売先の告知や登録画面の案内を必ず確認してください。この表は作業を始めるときの出発点としてお使いください。
| 区分 | よく使う値 |
|---|---|
| 商品ページ本文 | 横 860px。販売先が別に定めた幅があればその値を使います。 |
| メイン（サムネイル）画像 | 正方形。1000×1000px 前後をよく使います。一覧ではとても小さく見えるので、文字を入れるなら大きく入れます。 |
| クラウドファンディングの本文 | 本文の幅が商品ページより広いことがあります。登録画面で実際に見える幅を先に確認します。 |
| SNS 正方形 | 1080×1080px |
| SNS 縦型 | 1080×1350px（4:5）。タイムラインで縦の場所をいちばん多く取ります。 |
| SNS 横型 | 1200×675px（16:9） |
確認の仕方 — 商品登録画面の画像添付欄に、たいてい推奨サイズと容量制限が小さな字で書かれています。お知らせよりこちらのほうが新しいことが多いです。
SNS 用の画像は別に作ります
商品ページをそのまま SNS に上げると、たいてい切れます。タイムラインは縦に長い画像を畳んで見せますし、人は畳まれたものを広げません。
宣伝用は1枚で勝負が付かなければなりません。商品写真、名前、価格、販売期間くらいを残して、あとは削ります。商品ページで使った色と書体をそのまま持ってくれば、2つの画像がひと組に見えるので、リンクをたどって入ってきた人が同じ商品だとすぐ気づきます。
makeinfo ではキャンバス幅を 1080px に変えて必要なブロックだけ残せば済みます。商品ページのプロジェクトを複製して削っていくほうが、ゼロから作り直すより色と書体がずれません。
アップロード前の確認
- スマホで開いてみます。デスクトップで大きく見えていた文字が、手の中では読めないことがよくあります。特に仕様表記のように小さく入れた文字を見ます。
- 販売先が定めた幅と合っているか見ます。登録画面の案内に書かれた値と、書き出したファイルの実際の横の画素数を突き合わせます。
- 分けた断片の順番を確認します。ファイル名の順に上げないと内容がつながりません。
- 作業ファイルを残します。上げた画像は成果物なので戻せません。あとで価格や日程だけ直すことは必ず起きるので、全体 PNG（写真が多いときに出る zip）を別に保管してください。