サイトをデザインしていく時に適度な画像のサイズがわからず調べているうちに時間が掛かりすぎてしまうことがよくありませんか？私は毎回調べたり変換したりと手間取ってしまうことが多いです。ブログサイトで利用する画像の適切な大きさはある程度共通なのでよく使う画像サイズがわかると便利だと思い一覧にまとめておくことにしました。
画像サイズは利用する画像編集ソフトによって単位が異なっています。
Canva(キャンバ)などのソフトはピクセル単位で画像サイズを指定します。
PowerPoint （パワーポイント）などのソフトはcm単位・mm単位で画像サイズを指定します。
ピクセル単位とcm単位とmm単位はお互いに計算式で変換できますが毎回計算するのは面倒なので両方表記しておくことにしました。
なお、サイトデザインのテーマは【SWELL】を利用しています。
目次
【pxとcmとmm】画像サイズの変換式
px と cm と mm の単位関係はこのようになっています。
100px=約2.64cm＝約26.4mm
1px=約0.0264cm＝約0.264mm
ということで変換に使う式にまとめることこのようになります。
● px × 0.0264 = ■ cm ( ■ cm ×10 = ▲ mm )
● px × 0.264 ＝ ▲ mm
■ cm ÷ 0.0264 = ● px
▲ mm ÷ 0.264 = ● px
SWELLでよく使う画像サイズ一覧【pxとcmとmm】
毎回調べたり計算するのは大変なのでよく出てくる画像サイズを一覧にまとめておきます。サイトデザイン作成の時短になれば幸いです。
アイキャッチ画像
- ピクセルサイズ: 1200px × 630px
- mmサイズ: 約423mm × 222mm
吹き出しアイコン
| pxサイズ | 200px×200px |
| cmサイズ(ｍｍサイズ) | 約5.30cm×約5.30cm (約53mm) |
自己紹介アイコン
- 推奨サイズ: 300px × 300px
- mm換算: 約106mm × 106mm
サイトアイコン（ファビコン）
- ピクセルサイズ: 512px × 512px
- mmサイズ: 約181mm × 181mm
解説などの画像サイズ
- 横幅に合わせる画像（記事本文に収まるサイズ）
- ピクセルサイズ: 800px～1200px（横幅）
- mmサイズ: 約282mm～423mm（72dpi基準）
- フルサイズの画像（画面全幅で表示）
- ピクセルサイズ: 1920px × 任意（高さ）
- mmサイズ: 約678mm × 任意（72dpi基準）
- サムネイルや小型解説画像
- ピクセルサイズ: 400px × 400px ～ 600px × 600px（正方形推奨）
- mmサイズ: 約141mm～212mm（72dpi基準）
- ワンポイント：吹き出しや解説図用の小型画像は、正方形または長方形で軽量化しつつ、解像度を確保します。
よく使っている画像比率
- 16:9: 解説動画やフル幅画像に最適。
- 4:3: 図解やグラフなど汎用的な比率。
- 1:1: 吹き出しアイコンや正方形サムネイルに適しています。
注意事項
- mm単位での画像作成には、解像度（dpi）が重要です。標準的な72dpiを基準にしていますが、印刷用の高解像度画像が必要な場合は300dpiに換算する必要があります。
- アイキャッチ画像などは、デザインに合わせて縦横比を守りつつ調整しています。
