書き出しについて

Illustratorは画像ソフトではないのでドキュメント自体に解像度は存在しないです。またピクセルは物理的な長さをもたない単位で，例えば 1px は 1メートルでもよいのですが，Illustratorでは 1px ＝ 1pt（＝1/72インチ）としています。

「サイズが100px × 100px で解像度は300ppi アートボード」は，「サイズが100pt × 100pt のアートボード」と考えるのがよいかと思います。
（「解像度は300ppi 」と書かれていますが，それはラスタライズ効果の解像度ですね）

ぴったりとサイズが合うのは，どちらのPNG画像も物理的な寸法が 100pt × 100pt だからです（画像はPhotoshopの画像解像度の画面）。

恵三39297934 さん、こんにちは

ご質問にあった状態を再現してみました。下の図を見比べてみると、右画像（書き出し解像度 300ppi）の方がジャギーがでずに綺麗に表示されています（※Illustratorの表示は「プレビュー」「ピクセルプレビューはオフ」で確認）。

解像度 300ppiで書き出したビットマップ画像のほうが、密度が高い状態で配置されています。

解像度 300ppiとは、1インチ（2.54cm）に300個のピクセルが配置されている状態を指し、解像度 72ppiになると72個のピクセルしか配置されていません。つまり、1インチにしめるピクセル数が多い方が、画像の密度が高くなって、きめ細かに表示されています。

Illustratorの表示が「プレビュー」の場合は、紙に印刷された状態がシミュレーションされているため、画像解像度を語る場合は、Illustratorで表示される単位をピクセルではなく、センチ・ミリ・インチなどの実寸サイズで考えるのが自然です。

Illustratorの画面にあるオブジェクトのサイズが「100×100px」の時、Illustratorの表示単位をインチに直すと「1.3889×1.3889 in」となります。

ここからわかるのは「100pxを並べたときに、約1.4インチと計算される。つまり、1インチあたりのピクセル密度は約72px(100px÷約1.4インチ＝71.4285･･･)」ということで、Illustratorのプレビュー画面の表示解像度は、約72pxだということが推察されます（もしかしたら、使っているモニター解像度で変わるかも･･･そこまで実験できてません💦）。

つまり、画像の解像度の違いを見比べる場合は、Illustratorのドキュメントの単位を実サイズにしておいた方が悩みは少ないと思います。

今回の場合、ドキュメントの単位がピクセル（px）になっていたため、画像解像度で使われるピクセル／インチ(ppi)と混乱が生じてしまったのかもしれません。

さて。今回のご質問ですが、計算的には、「画像出力時の解像度72ppiの時に、画像の幅が100px。解像度が300ppiに変化したら、幅が何ピクセルになるのか？」がわかればよいということになりますが、答えは約417pxです。

比率の方程式を利用して求める計算式は次のようになります。

･･･と書きつつも、数学は苦手なので、間違っている所があったらすみません💦
ご参考になりましたら幸いです。
.

> サイズが100px × 100px で解像度は300ppi アートボードを作成し

この「解像度」は効果機能のラスタライズ解像度であって、アートボードの解像度ではありません。

アートボードの解像度は常に72ppiです。

（追記：Web用に72ppiを前提にしているという意味です）

> 300ppiで書き出すと417px × 417pxの画像ができ上がります。

> 書き出したデータを100px × 100pxのアートボード配置すると、ぴったりとサイズが合います。

画像の417px × 417pxは、ピクセルの個数です。寸法ではありません。

アートボードの100px × 100pxは、寸法であり、100pt × 100pt と同一です。