こんにちは、フリーランスWebデザイナーのyukiです。
最近デザインツールはFigmaでの納品を希望するクライアント様も多くなってきましたが、いまだにPhotoshopデータでの納品を希望されるクライアント様も多くいらっしゃいます。
今日は納品の際に忘れがちな「テキストのアウトライン化（Photoshopではラスタライズ）」についてご紹介したいと思います
※以下ラスタライズのことをアウトライン化と表現させていただきます。
【アウトライン化】
Illustratorでテキストをパス化することをアウトライン化と言います。
ポスターやチラシを印刷会社に出すデータは必ずテキストをアウトライン化するので、「アウトライン化」という言葉がデザイン業界で俗語としてよく使われています。
なぜテキストをアウトライン化する必要があるのか
そもそもなぜ文字のアウトライン化が必要なのか。
通常デザイン作成時にフォントを使用する際には、自分のパソコンに入っているフォント（ローカルフォント）か
Adobe FontsやモリサワフォントのようにログインしてWeb上で有効化しているフォントを使用します。
2024年6月現在、Adobeは追加料金なしでどのプランでもAdobe Fontsを利用できます。
モリサワフォントは別途契約が必要です。（2024年6月現在ではスタンダードプランが年払い64,240円(税込)です。去年より1万円以上上がっていて高い・・・）
これにより使用するパソコンの環境によってフォントがあったりなかったり・・・
例えば女性向けLPで人気の「A1明朝」はモリサワフォントが提供しており有料フォントになります。
このA1明朝を使用したpsdをクライアント様にお渡しし、クライアント様が使用するパソコンにフォントが入っていないと、psdを開いたときにこのようなダイアログが発動します。
フォントを置換というボタンを押してA1明朝に似たフォントを選択することができますが、フォントが元々持っている文字の大きさや文字間の余白が若干異なり、デザイン全体の雰囲気もガラリと変わってしまうことがあります。
そこでPhotoshop では「フォントを画像」として処理することで、フォントの置換をする必要がなく、データを受け取ったクライアント様は大きさや位置くらいは編集を行うことができます。
ただし、テキストの修正はできないので、テキストの内容を変更したりすることはできなくなります。
アウトライン化する前に！必ずpsdをコピーしよう
コピーを忘れてしまうとテキストをアウトライン化してしまった後、もしテキストの修正指示が出てきたときに編集できない！ということが起きてしまいます！！
必ず「テキストデータを残したpsd」と「テキストをアウトライン化したpsd」2つのデータを作成しましょう！
納品psdの具体例
まずクライアント様からデザインOKが出たら「テキストデータを残したpsd」を保存したあと、それをコピーして名前の最後に「_ol」を入れて保存します。
例えば、テキストデータを残したpsdの名前を「design_tips.psd」とすると、
この「design_tips.psd」をコピーして「design_tips_ol.psd」という名前にしてからアウトライン化し、psdを保存します。
これを忘れてしまうともう一回テキストをもう一度入力し直す・・・ということが発生してしまうので必ず2つのデータを残しておきましょう！
アウトライン化（ラスタライズ）の方法
では実際にアウトライン化（ラスタライズ）してみましょう！
納品したいpsdを開きます。
今回はLINEのリッチメニューを作った際に「AB -kirigirisu」というAdobeの人気フォントを使用しました。
通常Adobeツールを持っていないことも多いエンドクライアント様にお渡ししてもフォントが表示されないと思うので、アウトライン化していきます。
下のピンクの枠のようにテキストレイヤーの部分が「T」のマークになっているとテキストの情報を持っている状態であり、編集が可能ということになります。
テキストのレイヤーひとつひとつ選択しても良いのですが、めんどくさいのでアートボードを選択して一括で編集していきましょう！
「レイヤー → ラスタライズ → テキスト」の順に・・・
で選択できるはずなんですが・・あれ、今回できないですね
できる時もあるのですが
ではではグループ化しているので3つのグループを選択し、再度「レイヤー→ラスタライズ」といくと・・・
「テキスト」が選択できました
すると、レイヤーのマークが「T」から「筆マーク」に変わりラスタライズ（画像化）されました！
これでもうテキストを編集することができなくなりました。
最後に全てのレイヤーを開いて、全て筆マークになっていることを確認して完了になります。
次のお仕事に繋ぐ！納品時にはpsdの説明を必ず添えよう
忘れてはいけないのは納品時のデータの説明です。
データを添付するメールやチャット、別途書類を作成し同じフォルダに入れておくのも良いですね。
例えば納品フォルダーに
◼︎design_tips.psd
◼︎design_tips_ol.psd
◼︎design_tips.jpg
の3つを入れているとします。添え状に以下のような文章を入れていきます。
【design_tips.psd】
こちらはテキストが編集できるデータとなります。
ただし、使用しているフォントがお客様のパソコンにない場合はフォントが変わってしまう可能性があります。
【design_tips_ol.psd】
こちらはテキストが画像化されているデータとなります。
開いたときにフォントが変わってしまうことはありませんが、テキストの編集はできません。
もしテキストの内容を変更したいというご希望がありましたらお気軽にご連絡くださいませ。
こんな感じで説明を入れて納品しています。
実際に自分もローカル環境やクラウドに納品したデータを保管していますのでご要望があれば対応できますし、さらにそこから次のお仕事にも繋げれたら尚良いですよね
まとめ
Photoshopで作成したフォントはそれぞれのパソコンのフォント環境によって表示されないフォントがあるためテキストの画像化を行う。
納品データは「テキストデータが残ったpsd」と「アウトライン化したpsd」を用意する。
※確認のために全てのレイヤーを目視で確認は必須
納品時にはそれぞれのpsdの説明を行い、次のお仕事に繋げれられるように
いかがでしたでしょうか？
案件のたびにデータを納品することは癖付けできたら良いですね
ではではまた次回更新していきます
