メルカリで商品が売れ、意気揚々と「専用ページ」を作った直後。スマホで確認したら文字がバッサリ切れていたり、画像が無理やり引き伸ばされてボケボケになっていたり……。私はあの瞬間が、合理的でなく、非常にストレスでした。
私は普段iOSアプリを開発していますが、Appleの厳格なデザインガイドラインに触れていると、Web上のツールやフリマアプリの画像仕様の「微妙な不親切さ」がどうしても気になってしまいます。「深夜、暗い部屋で作業しているときに、白い画面の計算機を叩きたくない。もっとiPhoneアプリのように直感的に、かつ安全に画像を整えたい。」
その不満を解消するために、私は 167個のツール を自作し、このサイトを構築しました。今回は、エンジニアの視点からメルカリ画像を「絶対に失敗させない」ための数値計算と整形術を共有します。
1. なぜメルカリ画像は「正方形」という制約があるのか
メルカリのUIは、タイムラインから検索結果まで徹底して「1:1（正方形）」のタイル状で設計されています。 スマホで撮影した写真は通常「3:4」や「9:16」ですが、これをそのまま1枚目のアイキャッチに使うと、システムが中央を基準に強制的にクロップ（切り抜き）を行います。
「専用ページ」で文字が消える論理的理由
特に「〇〇様専用」と文字を入れる際、画像の端ギリギリに配置してしまうと、正方形への自動変換時にその文字が計算外の領域（デッドスペース）として切り捨てられます。これを防ぐには、作成段階で「最終的に1:1になること」を前提とした数値設計が必要です。
2. 失敗をゼロにするアスペクト比計算の基本
「手元の高画質な写真を、歪ませずに正方形に収めたい。」 そう考えたとき、適当に切り抜くのは非効率です。元の画像の長辺に合わせて短辺を補完するか、あるいは逆に短辺に合わせて長辺を削るか、どちらかの数値を正確に算出する必要があります。
比率を維持する合理的なメリット
無理に引き延ばした画像はピクセルが歪み、商品の質感が正しく伝わりません。それは購入者の「思っていたのと違う」というクレームリスクを上げることに直結します。
私は、こうした単純な計算に脳のリソースを使いたくありません。そのため、 アスペクト比計算ツール を自作して使っています。幅の数値を入力するだけで、比率を維持した高さを一瞬で出力します。計算ミスで画像を何度も作り直す時間は、人生の無駄ですから。
3. 専用ページ作成における画像リサイズの最適解
編集した「専用ページ画像」が重すぎるとアップロードに時間がかかり、逆に小さすぎるとメルカリの拡大表示に耐えられずボロボロの画質になります。
推奨されるピクセルサイズ
メルカリでは一辺が720px〜1080px程度の正方形が理想的です。私は、編集後の画像形式やサイズを整える際、 画像リサイズ・形式変換ツール を活用しています。
このツールを使ってみる →
ブラウザ上で完結し、入力と同時に瞬時に形式を変換。これが私の求めたスピード感です。
ここで、私の 心配性なエンジニア としてのこだわりを言わせてください。 このツールは 「クライアントサイド（JavaScript）」 で動作します。つまり、あなたの出品前の未公開画像は サーバーに1バイトも送信されません。 ネット上の「無料リサイズサイト」の中には、裏で画像をサーバーに溜め込んでいるものがあるかもしれませんが、私はそんなリスクを冒したくありません。
4. 複数画像を1枚にまとめる「整列」の技術
「まとめ買い」の専用ページで、4枚の写真を1枚に合成する場合、適当に並べると視認性が最悪になります。
マージン（余白）の計算
全体を1080pxの正方形にするなら、各画像を530pxにし、間に20pxの隙間を作る。こうしたグリッドの考え方は、Webデザインの CSS Grid ジェネレーター などを触っていると感覚として身につきます。数値に基づいた配置は、見る人に「丁寧な出品者だ」という安心感を与えます。
5. テキスト配置の「安全地帯（セーフエリア）」
「〇〇様専用」の文字は、どこに置くのが最も合理的か。 結論から言えば、 「中央から上下30%以内」 の位置です。メルカリのUIは下部に価格が表示されるため、下端ギリギリは絶対に避けるべきです。
また、情報を詰め込みすぎると文字が小さくなり、スマホの小さな画面では読めなくなります。画像内の文字は最小限に留め、詳細な条件は 文字数カウント を使って、規約に触れない範囲で概要欄に論理的に記述するのが賢明です。
6. セキュリティへの偏執的なこだわり：なぜブラウザ完結か
私は、自分のスマホに入っている写真をWebサービスにアップロードすることに強い抵抗があります。だからこそ、このサイトのツールは「外部との通信を一切行わない」設計にこだわりました。
- 通信の遮断: 画像処理はすべてあなたのスマホ・PCのメモリ上で行われます。
- ダークモード: 深夜の出品作業で、眩しい白背景にイライラする必要はありません。
全角・半角変換 ひとつにしても、サーバーを通さず一瞬で処理する。この「清潔さ」こそが、私が考える現代のツールサイトの標準です。
7. 結論：道具選びがメルカリの「評価」を決定する
メルカリは個人間の取引だからこそ、画像の美しさや説明文の正確さが「誠実さの証明」になります。
- 写真は1:1の正方形を絶対基準にする
- 重要な要素は中央の安全地帯に配置する
- リサイズ時はサーバー送信なしのツールでプライバシーを守る
- 面倒な数値計算は、自作の道具に任せて自動化する
道具に悩む時間は、もう終わりにしましょう。余った時間は、次の出品物の選定に使ってください。
出品作業をスマートにする専用ツール群
- 画像を整える： アスペクト比計算 / 画像リサイズ / CSS Grid ジェネレーター
- 文字・説明文を整える： 文字数カウント / 全角・半角変換 / 重複行削除
- ショップ運営の効率化： SNS改行プレビュー / 改行削除 / 句読点・記号統一