14
返信
結論から申しますと、10pt（Illustrator上では10pxも同サイズ）の和文フォントでは、可読性を担保にした表示をウェブのラスタイメージ（ピクセル画像）で表現し閲覧者に読んでもらうことは無理があります。
つまり、ご自身のその目の前の事象が、現実的な結果なのです。
例えバナーであっても、読める和文フォントのサイズは精々12px（12pt）が下限でしょう。
できれば、14pxは確保したいところです。
そこで、よくバナーなどで見かけるのが、アンチエイリアスをなしにして、なんとか小さな文字でも読み取ってもらおうという付け焼き刃的な方法です。
とはいえ、劇的な変化を望むものではありませんし、アンチエイリアスがない表現の美的問題も残ります（それに合致するコンセプトの広告であれば構わないかもしれませんが）。
実は、Photoshopでラスタライズ（ピクセル化）して作成した方が、テキストの鮮明さも高く、美しいと思います。
ついては、私はどうしても画像内に小さめの文字を表示しなくてはならない際は、Illustratorで作業をしていても、そのデータをPhotoshopに移行して書き出しを行います。
とはいえ、10px相当のフォントサイズでは、焼け石に水程度の差しかありません。
結論として、
- もっとフォントサイズを大きくする
というのが、解決へのアドバイスとなります。
参考に、実際にIllustratorからPNGファイルを書き出して、Safariのレスポンシブデザインモードで表示した現象のスクリーンショットを、アンチエイリアスのあり・なし共に、こちらに掲載しておきます。
> illustratorからPhotoshopへ移行させて書き出すというのは、どのような手順を踏まれていますか...？超初歩的ですみません。
> イラレで.psdへ書き出し→フォトショでラスタライズでしょうか
はい。
［ファイル］メニューから［書き出し］の［書き出し形式…］を選び、
保存形式を［Photoshop (PSD)］にして、
［Photoshop 書き出しオプション］を添付するこのイメージの通りにします。
そのファイルをPhotoshopで開く際にこのようなダイアログが出現しますが、そこで「更新」を選んで最適化します。
最終調整が終わったら、書き出して作業完了です。
ところで、
> ピクセルビューにしない状態の綺麗なままで保存できたらいいのにというシンプルな願望
をお持ちなのであれば、シンプルに、Illustratorの編集画面のスクリーンショットを取得して、必要とするラスタイメージを作成するという方法もあります。
こんな感じになりますよ。
追記です。
Yamonovさんがおっしゃっているように、ピクセルプレビューでみてご覧になるとわかると思いますが、１つの文字を表現するのに使われているピクセルの総数によって、どこまで細かく表現できるかが変わってきます。
現在は、1文字を表現するのに使えるピクセル数が足りないので、表現できずに読めなくなっているのです。
細かいところまで表現させるためには、ピクセルがたくさん必要→文字を大きくするか、解像度を上げるか
どちらにしても、1文字あたりのピクセル数は大きくなります。
解像度を上げれば総ピクセル数が大きくなりますし、総ピクセル数を変更したくないのであれば文字を大きくするしかない、ということになります。
ピクセルプレビューしたときのキャプチャーを貼っておきますね。
文字を大きくしようとのことで、この20pxサイズのテキストを打ち込んでみたのですが、ピクセルプレビューで見るとやはり荒くなってしまいます。・・・何か根本的に間違えているような気がします...
ピクセルビューにしない状態の綺麗なままで保存できたらいいのにというシンプルな願望が現代技術をもっても叶えられないことが不思議に感じるのですが、そういうものなのでしょうか。
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フォントなど）
を使うと、可読性は上がると思います。
以上、ご参考になりましたら幸いです。
.
AdChoices