デザイン
韓国の詳細ページはなぜ長いのか
韓国の詳細ページが長いのは好みではなく場所の割り当ての結果です。チャネルが商品名・価格・レビューを描き、出品者に残るのは本文画像の一かたまりだけ。長さと枚数、入る順序、画像に文字を載せる問題、モバイルの幅、作り直すものをまとめました。

韓国の商品詳細ページが長いのは、好みの問題ではなく場所の割り当ての結果です。出店するチャネルが商品名・価格・オプション・レビューの領域をあらかじめ描いてくれるため、出品者が自分で埋める場所は本文画像の一かたまりだけです。ブランドが伝えたいことがすべてそこに集まり、ページが長くなりました。自国の詳細ページをそのまま移すと、短く見えるだけでは済みません。そのページになかった項目がまるごと抜け落ちます。
どのくらい長いのですか — 長さと画像の枚数
本文は縦につなげた画像の一かたまりです。スマートフォンで10~30回スワイプする分量が一般的で、ファイルとしては10~30枚に切って上げます。1枚を縦1,000~1,500px前後で切る理由は二つあります — 1枚が長いほどファイルが重くなり表示が遅れること、後から一行だけ直すときもその1枚をまるごと作り直すことになるからです。
縦を合計すると6,000~15,000pxの範囲がよく見られます。ただし長さ自体が目的ではありません。確認する項目が多い品目は長くなり、見てすぐ判断できる品目は短く終わります。
| 位置 | 入る内容 | 画像の枚数 |
|---|---|---|
| 最初の画面 | 商品カット1点と一行の要約 | 1~2枚 |
| 要約 | 選ぶ理由 3~5点 | 2~4枚 |
| 使用場面 | 使う様子と大きさの感覚 | 3~6枚 |
| 詳細 | 素材・成分・機能の説明 | 3~8枚 |
| 実測 | 寸法・容量・色の表 | 1~3枚 |
| 表示項目 | 品目ごとの義務表示 | 1~2枚 |
| 案内 | 配送・交換・返品 | 1~2枚 |
何がどの順序で入りますか
順序を決める基準は一つです — 別の画面を開かずに、このページの中で判断が終わる必要があります。そのため配送・交換・返品・認証のように、他の国では別ページに置く項目が本文の中に入ります。前半に選ぶ理由を、中盤に確認する事実を、後半に注文前に引っかかることを置きます。
最初の3枚の中で、この商品が何で誰に合うのかが伝わり切る必要があります。後半はすでに気持ちが傾いた人が確認しに下りてくる区間なので、判断を変えうる情報を後ろに置くと読まれないまま残ります。
品目ごとに必ず表示する情報項目が政府の告示で定められています — 商品情報提供告示と呼ばれるものです。一覧を探し回る必要はありません。チャネルの商品登録画面にその項目が空欄としてそのまま並ぶので、その欄を埋めれば足ります。品目分類の選び方で欄が変わるため、登録の前に分類から決めます。
なぜ文字を画像の中に入れるのですか
チャネルは本文で使える書体と組版を狭く制限します。改行の位置・文字の太さ・色を思いどおりに合わせるには、画像にするほうが速いのです。画面幅が狭く表を文字で置きにくい事情も重なり、文章を画像の上に載せる方法が定着しました。画面は思いどおりの形になりますが、代償がついてきます。
ハングルは一文字が四角い枡を一つ埋めます。幅が狭いところでは行がどこで変わるかが読む速さを大きく左右しますが、文字として入れるとその位置が端末や書体によって動きます。画像にすればどの端末でも同じ位置で行が変わります — この確実さのために画像を選びます。
画像に載せた文字はどこで引っかかりますか
| 引っかかる所 | いつ表れるか | 今しておくこと |
|---|---|---|
| 翻訳 | 言語を一つ増やすとき | 文章を別の文書に保管 |
| 検索 | テキスト欄だけが読まれるとき | 商品名・要約・オプション名に主要語 |
| 読み上げ | 拡大したり音声で聞くとき | alt文とテキストの要約を併記 |
| 修正 | 価格・構成を一行変えるとき | レイヤーが生きた原本を保管 |
翻訳が最も大きく引っかかります。文章が絵の中にあると自動翻訳が通らないため、言語を一つ増やすたびに20枚なら20枚を組み直します。検索のロボットも画像の中の文字を本文として読みません — 商品名・要約・オプション名のようにテキストで入れた欄が、検索に拾われるほぼすべてです。画面を音声で聞く利用者にとって、画像の部分はまるごと空白です。
モバイルで見える幅はどのくらいですか
スマートフォンの横幅はおおむね360~430pxの間です — ブラウザが画面を数える単位です。本文画像の原本は横860~1,000pxで作ることが多く、この原本が画面幅に合わせてまるごと縮みます。1,000pxの原本は390pxの画面で約39%になります。原本で40pxに取った文字が、スマートフォンでは16px程度に見えるということです。
パソコンの画面を基準に作った詳細ページをそのまま移すと、まず文字から崩れる理由がここにあります。本文の文字は原本で36~40px以上、小さな注釈も28px以上に取ります。幅の値はチャネルごとに違うので、上げる前にそのチャネルの案内を一度確認します。
そのまま移せるものと作り直すものは何ですか
| 項目 | そのまま移す | 作り直す |
|---|---|---|
| 商品写真の原本 | そのまま使います | — |
| 色・ロゴの規定 | そのまま使います | — |
| 画像の上の文章 | — | 組版からやり直し |
| 書体 | 数字・欧文は維持 | ハングル書体を別に |
| 構成の順序 | — | 1ページ基準で |
| 寸法の表記 | 数値はそのまま | cmの実測表を追加 |
| 義務表示 | — | 品目の欄に合わせて |
欧文書体にはハングルの文字が入っていません。ハングル版では太さの段階が近いハングル書体を一つ決め、数字と欧文だけ元の書体を使えば全体の印象は大きくずれません。写真は撮り直さなくてよい場合が多いのですが、手に持ったときの大きさが分かるカットがなければ、そのカットだけ追加で用意します。
今日やること
いま販売している詳細ページをスマートフォンで開き、画像の中に文字が入っている枚数を数えてください。続けて、その画像の原本ファイルがレイヤーの生きた状態で残っているかを確認してください。30分あれば終わります。この二つの数字が、韓国語版で組み直す分量そのものです。


