コラム・豆知識
ダミー画像の役割と利用シーン
ダミー画像はWeb制作の初期段階でデザインのレイアウト確認や動作検証に使われます。
実際の画像が準備できない場合に仮の画像を挿入することで、レイアウト崩れや表示速度のチェックを効率的に行えます。
適切に活用することで開発スピードが向上します。
ダミー画像のサイズ指定とレスポンシブ対応
ダミー画像はサイズを指定して使用することで、要素の占有スペースを確保できます。
<img>タグのwidthやheight属性を適切に設定し、レイアウトの安定化を図ることが重要です。
レスポンシブ対応も考慮し、srcsetやCSSメディアクエリと組み合わせる方法もあります。
アクセシビリティとalt属性の設定
ダミー画像でもアクセシビリティの観点からalt属性の設定は必須です。
これにより品質の高いコードとなります。
パフォーマンス面での配慮
ダミー画像は基本的に軽量であることが望ましく、ページの読み込み速度に悪影響を与えないよう配慮が必要です。
遅延読み込みのためにloading="lazy"属性を活用することでパフォーマンス改善が期待できます。
開発段階だけでなく、本番環境でも適切に管理しましょう。
ツールの仕組み解説
ページが読み込まれたタイミングで画像を生成するように設定しています。
document.addEventListener('DOMContentLoaded', () => {
function generateImage() {
// 入力値に基づく画像生成処理
}
});
generateImage関数では、画像のサイズや色、形式などをフォームから取得しています。
const width = document.getElementById('width').value;
const height = document.getElementById('height').value;
const bgcolor = document.getElementById('bgcolor').value;
const textcolor = document.getElementById('textcolor').value;
const format = document.querySelector('input[name="format"]:checked').value;
SVG形式の場合は、文字列でSVGを組み立ててBlobに変換し、プレビュー表示とダウンロードリンクを作成します。これは拡大しても劣化しない画像が必要な場合に有効です。
const svgContent = ` <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"> <rect width="100%" height="100%" fill="${bgcolor}"/> <text x="${width / 2}" y="${height / 2}" fill="${textcolor}" font-family="Arial" font-size="16" text-anchor="middle" dominant-baseline="middle"> ${width} × ${height} </text> </svg> `;
const blob = new Blob([svgContent], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
document.getElementById('download').href = url;
SVG以外（PNGやJPGなど）の場合はCanvasを使って画像を描画し、中央にサイズ情報のテキストを表示します。
ctx.fillStyle = bgcolor;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = textcolor;
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(`${width} × ${height}`, width / 2, height / 2);
WebP形式については、ブラウザによってサポート状況が異なるため、サポートされていない場合は自動的にPNG形式にフォールバックします。
const testCanvas = document.createElement('canvas');
const testDataURL = testCanvas.toDataURL('image/webp');
if (!testDataURL.startsWith('data:image/webp')) {
dataURL = canvas.toDataURL('image/png');
fileExtension = 'png';
} else {
dataURL = canvas.toDataURL('image/webp');
}
最終的に、ユーザーがすぐに画像を保存できるよう、ダウンロードリンクを更新しています。
document.getElementById('download').href = dataURL;
document.getElementById('download').download = `${width}x${height}.${fileExtension}`;
画像はリアルタイムで更新されるため、入力値に応じて即座に見た目を確認できます。以下のように、各入力項目にイベントリスナーをつけて、変化があれば再生成するようにしています。