コーダーさんの「困った」へのご回答

上記、うららさんの投稿ですが、中身を確認したところ、デザイナーの問題がいろいろあり、コメント欄に収まらなかったので、こちらにnoteとしてまとめました。

とりあえず、まず、一言。
なんか、このデザイン作った方に代わって「ごめんね」って言いたい気分ですが、まぁ今後こう言ったケースが減ることを願って諸々の課題感を書いておきました。

以下が20年弱この業界でデザインをしてきたわたしの回答になります。

　―　

ここで記載された問題が起こるまでには、いくつか前段で考えるべきことがありそうです。

まず、背景とロゴをセットで書き出してもらうつもりだったケースです。今回のように背景を切り抜く目的（ロゴの場合これもそもそもほぼ無いはずですが、乗算など特別な加工の意図があるケースでは無い）の場合、そもそもシンプルに手抜きな可能性があります。

ただし、そもそもちゃんとしたロゴデータをデザイナーがクライアントから貰えている場合、ベクターデータであるはずなので、そもそもこう言った加工自体が必要がなく、デザイナーとしても苦肉の策だった可能性があります。

今回はラスターデータで加工せざるをえなかったわけですが、その場合、ブレンド条件で加工すると言うこと自体は、フロント開発の事を考えなければ確かに一つの選択肢かもしれません。

ただ、デザイナーとしてデザイナーさんに言わなければならないのは、ブレンド条件での加工がアンチエイリアス部分の処理が汚く、いわゆるジャギった状態になるため、ロゴのような大事なものでそう言った加工をすること自体が良くないと言うことです。

ではパス抜きをするかと言うと、これもロゴの持ち主であるクラアントさん（ロゴ制作者と著作権譲渡契約や日本では譲渡できない著作者人格権関する契約がちゃんとしている前提※この辺りは正確には要確認です。）の同意を得ていれば可能だと思いますが、元の形を正確に再現できるものではないため、原型から形を歪めてしまう可能性があるため、本当はおすすめ出来ないものです。

となると、そもそも、今回のような意匠の選択は提供された素材の観点から、設計として成り立たないものであると言えるかもしれません。

背景を透過させた方がロゴが全体に馴染み一体感がますので、表現として使いたい気持ちはわかりますが、ブレンド条件で消さない状態で成り立つ方法を探る方が良かったかもしれません。

では、ここまでの諸々が避けられないものだった場合ですが、ロゴ単体ではなく、背景画像とセットで書き出して欲しいと言うケースがないわけではないかもしれません。（ロゴが前述した条件でできている以上これもあまりない気もしますが）どうしてもグラフィックのバランスでそう言う作りにしたい場合です。ただし、その場合は、ロゴ自体にh1などのタグを割り振る必要がある事を考えると、ロゴと背景を一定の範囲で一緒に切り出した時に、レスポンシブなどでメインコピーとの関係性でロゴの位置が変わったらそれがずれておかしくなる作りになっていない事が前提となります。当然、コーディング手法との連携がとても重要になってきますね。そん状態で一言の説明もない状態だったとするなら、
やはりシンプルにデザイナーの知識が足りなすぎたと言わざるをえません。
当然、ミニマムヘッダーでの展開で切り替え前にちょっとロゴのサイズを変えたいなどのアニメーションもつけられないですし。

それと、そもそも、大きい画像かもしれないですが、解像度が大きくなっている各デバイスに対してロゴがラスターというのはどこかで画像がボヤケていそうで不安です。

ただ、これらのことをフロント開発の段階でデザイナーに言うのは、デザイナーの知識が足りない部分も含めて、時間的コストから相当厳しいものだろうと思います。

その為ご提案できる解決方法としては、

ロゴはマークアップの構造上、単体で切り出す必要があり、その作業をしたいが、ブレンド条件の加工になっている為、それが出来ない為困っている。と理由を添えて、データ修正してもらうか、背景透過の画像を別途提供して欲しいと伝えて見るのがいいかと思います。

ただし、これはロゴ自体の問題が解決している訳ではないですし、デザイナーの知識不足で画像を使っていて、クライアントはベクターデータで所有している可能性もあるので、確認できそうであればその辺りも聞いてもいいかもしれません。

最後に、今回の状態だと無駄足な可能性もありますが、ちゃんとしたロゴはそれがすっきりとその独自性を保つために（ちょっと表現が適切ではないかも）アイソレーションと言うロゴの周りの余白まで決まっているものです。その為、背景と重ねるとそのコントロールが難しくなるなどの理由からそう言った表現自体レギュレーションでNGとなることも少なくありません。もちろんクライアントとの握り次第ですが、それらの手順確認をした上で出来ているものと、それを知らずに見様見真似で手順を飛ばしてその表現をしてしまったもの全く異なる存在です。ちょっとここに関しても各デザイナーさんに勉強して欲しいですね。