解像度を落とさずに指定のpxサイズで書き出す方法（バナー制作）

Minsu26266252totpさん、こんにちは。

いろんな方からすでにコメントがついていますが、それをふまえて、気になった部分をあげますね。

●ピクセル数と解像度の関係

解像度は、最終出力が印刷物の時に関係する値です。

解像度の単位、DPIは「1インチ（2.54cm）の空間にいくつピクセル（データを構成する粒）を配置するか」という単位で、72dpiの場合は、1インチに72個の粒が並びます。解像度の数字が増えれば、1インチに印刷される粒の数が増えますので、きめの細かい仕上がりになります。

今回の場合は、ウェブ掲載用のバナーなので最終出力が「パソコンやスマホなどの画面」です。これらのデバイスの画面は、ピクセルという単位で表されます。

くわしく説明すると更に続くのですが･･･長くなるし本題からずれるので割愛します。「最終出力が画面なら、データの単位はピクセルで考える」としておいてください。

今回は、「120×240px」とピクセル数は決まっているのですから、そのサイズは動かせません。解像度を上げると、1インチあたりのピクセル数が増えますので、もちろん総ピクセル数が増えてしまいます。

Illustratorの表示モード「ピクセルプレビュー」は、「ブラウザなどの画面で表示した時をシミュレーションする表示モード」と考えてください。

ピクセルプレビュー表示でない時のIllustratorは、ピクセルの状況を正確に表示しておらず、往々にしてピクセル表示よりも綺麗に表示してしまいます。

●「120×240px」に、どうしたら小さい文字を綺麗に出せるか？

まずは、他の方のコメントにもあるように「画面に表示する文字の最小サイズ」を知っておく必要があります。

基準にする一例をあげると、Appleの「iOS Human Interface Guideline」では、小さくても「11pt」以上、読みやすい文字のサイズは「13pt」以上になっているようです。

また、バナーばかりをまとめた紹介サイトがあるのですが、200×200pxの小さめサイズでみてみても、12pt以下の文字が使われているケースは少ないです。

・検索結果 | バナー広場 | バナーデザインのまとめサイト
https://banner-hiroba.com/?s=&cat_tag%5B%5D=200x200

※12pt以下の文字については、潰れてしまってますね。。

これらのことを踏まえると、バナー画像内の文字は、極小でも12pt以上は必要だと思います。

また、文字サイズ以外にも工夫する点はあります。

• 使用するフォントを「小さくても見やすいフォント」にする
• 背景色と前景色（この場合は文字色）の濃淡差をつける（コントラストを高くするということ）

作例に、文字パターンがサンプルを1つ作って見ました(120×240pxの画像です)。
フォント・文字色・背景色の異なる3パターンで、10ptと12ptの文字を並べてあります。

1つめが、Minsu26266252totpさんが使っている組み合わせ。

2つめが、1つめより「文字色（より濃く）・背景色（より薄く）」とし、「源ノ角ゴシック JP Regular」という、游ゴシックよりは太めのフォントを使った組み合わせ。

3つめが、2つめより「文字色（最も濃い、黒）・背景色（最も薄い、白）」とし、「FOT-ロダン」という、さらに太いフォントを使った組み合わせ。

これらを見比べるとわかるのですが、フォント・文字色・背景色の組み合わせの違いで、読みやすさはずいぶん変わります。

・背景色と前景色（この場合は文字色）の濃淡差をつける（コントラストを高くする）
・太く、文字内の隙間が空いているフォント
（ふところの広いフォントなどと言われます。UDフォントなど）

を使うと、可読性は上がると思います。

以上、ご参考になりましたら幸いです。
.

多分、そのピクセル数で書き出すと、解像度に対して文字が小さすぎて読めなくなるのだとは思いますが、

ファイルメニュー→「書き出し」→「Web用に保存（従来）」を選んでみてください。

そこで そこで総ピクセル数が指定できるので、希望のピクセル数で書き出してみてください。

それで「解像度が落ちてテキストが読めない」のであれば、ピクセル数に対して文字が小さすぎるのです。

読ませたいのであれば、読めるくらいまでも字を大きくするしかありません。

恐れ入りますが、そのフォントサイズと、可能であれば、フォント名を教えてください。