イラレの画像をコーディングする際のフォントについて

イラレで作ったトップ画像の文字が薄く見にくいので、
色を濃くして視認性を上げたいです。

イラレで画像を配置し、その上から文字を打ち込んでトップ画をつくり、
それをjpgやsvgに返還して「img」としてコーディングしたいです。

ただ、添付のようにイラレデータで文字を打ち込むと、
HTML/CSSの文字よりも薄くなってしまいます。
（クリッピングツールで切り抜いたので少々画像が荒いです色の濃さを確認いただければ…）

添付画像（上から）
・HTML/CSS（font-weight:600）
・イラレの画像（外枠の線も加え、アウトライン化して文字自体も太らせています）
・イラレの画像（上記+採光あり）

HTMLとCSSで文字やボックスなどを配置して作れば良いのですが、
一度それを作った結果レスポンシブが上手くいかなかった経緯があるので、
一旦文字やボックスなど全て画像で作成したいです。

ちなみに以下のようなサイトを作りたくて比較していたのですが、
こちらもトップ（文字あり）を画像にしているのものの、
文字が濃くハッキリ見えているので近づけたいと思っております。

https://sre-group.co.jp/od/satei/lp/1904/

ご確認宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

まず、SVGで書き出します。
SVGファイルを、テキストエディタで開きます。
必ず、カラーコードで、色を設定している箇所があるので、そこのカラーコードを設定したい色のものに変え、保存します。
以上でいかがでしょうか？

投稿2019/12/25 04:33

miyabi_pudding

総合スコア9555

nakama123

2019/12/25 06:22

ご回答ありがとうございます。上記のとおり、SVGファイルをエディタで開いたところ、「.st0{stroke:#000000;stroke-miterlimit:10;}」という箇所がありました。「#」以降を変えたら文字色が変わったのでこの箇所だと判断し、「#000000」を「black」や「#000」などに変えてみましたが、残念ながら色は変わらなかったです・・・。

miyabi_pudding

2019/12/25 06:45

アウトラインをとってSVG化とかはやってみましたか？

nakama123

2019/12/25 06:53

ありがとうございます。先ほどフォントをアウトライン化してSVGとして保存してみましたが、やはり文字に少しグレーがかかる（薄くなる）ような状態です。フォントなども一応変えてみましたが変わらなかったです。。

miyabi_pudding

2019/12/26 01:38

アウトラインをとって、SVGにして、ファイルを開いて、#000000にしてもダメだったんですか？

nakama123

2019/12/26 05:12

はい、ダメでした・・。アウトライン化したり、jgg、pngにしてみたり、知人のエンジニアにも聞いてみて、色々いじってもらったりしたのですがなぜかグレーがかった色になります。一旦、CSSの「background-image」で貼り付ける方法だと黒になるので、それを解決策としようかなと思っております。。。

miyabi_pudding

2019/12/26 05:34

なんと・・・。なんだろう、アンチエイリアスの関係だとは思うんですけどね・・・・。個人的に原因と解決方法気になるので、解決方法見つかれば、自己解決投稿お願いしたいです。私も、もう少しいろいろと検証してみますね。

dit.

2019/12/26 05:41

横から失礼します。黒以外の場合は薄くなったように感じますか？また、本来描画したい部分ではなくそのimgを表示させるだけのHTMLを作成した場合、色は薄くなるのでしょうか？

nakama123

2019/12/26 06:07

miyabi_takatsukさま承知しました。ありがとうございますm(__)m

nakama123

2019/12/26 06:12

dit.さまありがとうございます。黒以外の場合は薄くなったように感じますか？ →はい、ほかの色でも試したのですが薄くなります。また、本来描画したい部分ではなくそのimgを表示させるだけのHTMLを作成した場合、色は薄くなるのでしょうか？ →こちら、たとえばイラレで無地を用意して、それをHTML上で「img」で表記した場合でしょうか？その場合、imgの上にHTML上のテキストを打っているのですが、特にそのテキストの色は変わらないという状況です。

miyabi_pudding

2019/12/26 07:23

nakama123さん>　もしや・・・、imgに対して、CSSでopacityとかきいてません？デベロッパーツールなどで確認してください。

dit.

2019/12/26 07:59 編集

他に何も書いてない新規のhtmlに、今薄くなってしまっている画像をimgで表示させた場合を確認してほしいです。画像自体が悪いのかがわかります。また、本来表示させたい所じゃない場所(<body>のすぐ後とか)に記述して、色がどうなるか確認してください。スタイル等が悪いのかがある程度わかります。 miyabi_takatsukさんが言及してますが、透明度(opacity)を疑っています。デベロッパーツールでどのようなスタイルが効いているかも確認してください。

nakama123

2019/12/26 08:12

miyabi_takatsukさま dit.さま大変申し訳ありません。仰る通りopacityが効いておりました…。初歩的なミスです。当初、画像は背景のみでopacityをかけており、テキストはHTMLで打っていたので、 opasityをかけたこと自体すっかり忘れておりました…。そして、イラレのデータに問題があると思い、検証ツールで確かめなかったことが原因です。大変お騒がせしましたm(__)m

miyabi_pudding

2019/12/26 08:30

nakama123さん > 解決されて何よりです。 dit.さん > 大変にありがとうございました。質問者さん同様、私もその点盲点でした。 dit.さんのコメントが無ければ気づけなかったです　汗

dit.

2019/12/26 08:48

解決したようで良かったです

行動規範の内容に同意します