完成したピクセルアートをWebへ載せる 原稿を直す前に表示を比べる

完成したピクセルアートをWebで大きく表示したとき、角がぼやけても、すぐに元画像を描き直す必要はありません。まず同じPNGで、掲載時の大きさと拡大の方法を比べます。四角い画素の境界を見せたい作品なら、その形を残す表示を選んでから、掲載原稿を整えられます。

ここでは、ピクセル作品『灯りの窓』を使い、同じ64×64画素のPNGを二つの大きさ、二つの表示指定で比べます。作品を紹介するWebページへ渡す際に、元画像と一緒に伝えておきたい条件を確かめる表示の例です。

元画像の画素数と、Webで見せる大きさを分ける

『灯りの窓』は、四角い色のまとまりで、夕暮れの街と明るい窓を描いた作品です。窓の角、屋根の段差、月の縁には、小さな正方形が並んでいます。この境界を残して見せることが、例の表示を選ぶ基準です。

元のPNGは縦横64画素、合わせて4096画素です。そのファイルをWeb上で128pxの正方形に表示するなら縦横2倍、256pxなら4倍に見せます。どちらも元画像の画素を増やして保存し直す操作ではありません。

ここでのpxは、Web上で指定する表示寸法（CSS px）です。画面の物理的な画素数とは別に扱います。制作担当へは、元画像の「64×64画素」と、希望する表示の「256×256px」などを分けて伝えると、同じ条件で比較できます。

同じPNGを、同じ大きさで見比べる

下のAとBは、同じ元PNGを使っています。Aは拡大の方法をブラウザーに任せる通常指定、Bは四角い画素の境界を残す指定です。最初は256px、次に128pxへ切り替え、明るい窓と暗い壁の境目を見比べてください。

確認したブラウザーの128pxと256pxでは、Aの窓や屋根、月の縁が滑らかに見え、Bでは色の四角い境界と段差が残りました。『灯りの窓』の意図に合わせるなら、Bを掲載候補にする、という判断になります。見たい箇所と掲載寸法をそろえて選ぶための比較です。

「auto」「pixelated」は、Webで画像の拡大方法を指定するCSSの値です。通常指定の具体的な処理はブラウザーによります。また、pixelatedでも、整数倍を超えて端数のある倍率へ拡大すると、最後に滑らかに調整される場合があります。この例の2倍・4倍で見えた形を、あらゆる表示寸法や閲覧環境へ広げることはできません。

残したい形を、元画像と一緒に渡す

制作担当へ「くっきり見せたい」とだけ伝えると、どの境界を残すかが曖昧になります。この例なら「明るい窓の四隅」「屋根の階段状の線」「月の縁の四角い段差」を挙げられます。元PNGを添え、同じ箇所を確認できるようにします。

希望する表示寸法と指定に加えて、作品紹介ページのどこに置くかも伝えます。スマートフォンの本文中、作品一覧、拡大して見る画面では、使える幅が違います。候補を実際の掲載場所へ置き、画面幅が変わったときの寸法も確認してから決めます。

確認画面を渡す場合は、その画面の表示寸法、ブラウザーや端末、気になった箇所を添えます。スクリーンショットの縦横の画素数を、そのまま元PNGの画素数やWebの表示寸法として扱わないようにします。今回の比較は、一つのブラウザー環境で二つの整数倍率を確認した範囲です。

掲載先と、変更する担当を決めておく

元PNGを保管する場所、Webに置く画像、採用する表示寸法と指定を、掲載原稿にまとめます。元画像とWeb用に加工した画像がある場合は、どちらを掲載するかも明記してください。後から画像やページの幅を変えるときは、選んだ境界が残るかを再確認します。

サイトの仕組みによっては、画像が別の寸法や形式へ自動変換されることがあります。原PNGをそのまま使えるか、表示指定を入れられるか、誰が更新するかは、掲載先の担当へ確かめます。元画像を渡したことだけで、希望の表示や継続管理まで決まったことにはなりません。

完成した画像から、作品紹介のWeb原稿を相談する

相談には、元PNG、画素数、残したい輪郭の説明、掲載する場所、希望する表示寸法をそろえます。すでに比較した画面があれば、その条件とともに添えてください。作品名や説明、公開できる情報、更新を担当する方も分かると、画像と文章を組む範囲を具体的に相談できます。

複写では、お持ちの画像と原稿から、作品集・カタログ・Web制作を相談できます。作品紹介で見せたい形と掲載サイズを確認しながら、原稿の構成を検討します。原PNGの保持や特定のCSS指定が可能か、Webの公開・納品後の更新をどこまで依頼するかは、案件ごとに範囲を確認してください。

ピクセル作品のWeb掲載について相談する

表示指定の技術資料：MDN：image-rendering、CSS Images 3：画像拡大の指定。CSS pxと画面の画素については、MDN：devicePixelRatioを参照。