プレースホルダー画像の作り方
概要
モックアップやレイアウト確認で使う画像を、サイズと文言から素早く作るためのガイドです。
要点: 先にサイズと比率を決め、文字は短くまとめると、レイアウト確認に向いたプレースホルダー画像になります。背景と文字のコントラストも意識しましょう。
1. まずサイズを決める
OGP、正方形、横長、縦長など、用途に合う比率を先に決めておくと作業が早くなります。SNS 用なら OGP、デザイン確認なら画面比率に近いサイズを選ぶとイメージしやすくなります。
OGP 1200 × 6302. 文言は短く保つ
プレースホルダー画像は、情報を伝えるというよりレイアウトの当たりを確認する役割が強いので、文言は短めが向いています。長いコピーを入れると文字が潰れやすくなるため、必要最小限の語数に絞ると扱いやすくなります。
- 見出しは短くする
- 行数が増えすぎないようにする
- 余白と文字サイズのバランスを見る
3. 出力形式を使い分ける
共有や実装確認には PNG が手軽ですが、拡大縮小や編集をしやすくしたいときは SVG が便利です。用途に合わせて保存形式を変えると、モックの受け渡しがスムーズになります。
ガイド一覧を見る
ガイド一覧ページで、記事を比較したり別のトピックへ移動できます。