タグ: AdobeXD

AdobeXDでワイヤーフレームなどを作ると、PhotoshopやIllustratorよりもサクサク動くし、リピートグリッド機能が便利ですし、快適ですよね。（その代わり高いグラフィックプロセッサーを求められるので、古いマシンにはインストールできない可能性があります）
最近は、XDでプロトタイプを作り、そのまま書き出してHTMLに仕上げるというケースも増えていると思います。

ただし、いくつか注意点があります。

など、他にもあるかもしれませんが、最も困るのが、AdobeXDは、カラーマネージメントが出来ないという点です。

ブラウザで見た時の表示の色と、XDでの作業中のが異なってしまいます。カラマネ非対応なので、これはどうすることもできません。WEBブラウザは、ファイルにカラープロファイルが埋まっていればそれを採用しますが、プロファイルが無い場合は全部、sRGBになるからです。なので、現状では、厳密なカラマネが必要な場合は、Photoshopでブラッシュアップして最終データを仕上げるのが得策ですね。AdobeXDからPSD へ変換する際の簡単な方法をメモしておきます。

AdobeXDからPSD へ変換する

カラー設定のプロファイルを埋め込むために、AdobeXDファイルをPSDに変換しましょう、変換するにはどうしたらいいでしょうか？

一番手軽な方法として、外部サイトを活用します。
XDファイルを以下のサイトに読み込ませて、ファイル > PSDとして保存を選択してください。

　
AdobeXDからPSD へ変換できました！　保存したPSDのカラー設定は、自動的にRGBになっています。カラープロファイルについては、これで解決できました。

しかし！変換後のPSDの言語設定に問題が！

という問題が発生します。なぜなら、AdobeXDにもphotopeaにも禁則処理の設定項目がないからです。
また、日本語のPhotoshopの場合、言語設定は「東アジア」になってると思いますが、それが初期設定になってしまうという問題もあります。

変換したPSDの言語設定

変換したPSDのテキスト部分の文字設定を開くと、段落の項目から禁則処理が抜けてしまっています。

禁則処理が使えるようにPSDファイルを作り変えます

疑問に思うところだと思いますが、WEBデザインのカンプファイルで使うテキスト流し込みに禁則処理は必要でしょうか！？

InternetExplorer以外のWEBブラウザは自動的に禁則処理がされるようになっています。ですから、htmlでテキストコーディングする場合は、必要ないと考えてよいと思います。しかし、ほとんど更新が必要ないLP制作の場合、テキストも含めて画像ファイルにしてしまうことも多いですから、禁則処理が使えないのは制作に差し障りがありますね。

キャッチコピーなど、画像で書き出しする場合もあることを想定すると、禁則処理が使えるようにしておく必要があります。その為には、ファイルの言語オプションを「東アジア言語の機能」にしなければなりません。

禁則処理が使えるようにPSDファイルを作り変えましょう〜

STEP01

Photoshopで、新規ファイルを作成します。カンバスサイズは、変換したPSDと同じサイズにしてください。（必ず同じサイズで！）、言語オプションが「東アジア言語の機能」になっているのを確認してください。　言語の設定が東アジアになっていないと、文字設定の段落のところに禁則処理の項目はでてきません。

STEP02

AdobeXDから変換したPSDを開き、レイヤを全選択した上で、それらをコピーしてください。（編集>コピー）

STEP03

さきほど作った新規ファイル側に、ペーストします。この時、普通のペーストではなく、特殊ペーストで同じ位置にペーストを選択してください。　新規ファイル側にも、コピー元のレイヤーが全部、同じ位置で再現できたと思います。

STEP04

新規ファイルに、AdobeXDから変換したPSDの中身が、まるごとコピーされました、これで、新規でテキストを記載すれば、禁則処理が使えるようになります。（コピーしたテキストには適応されません）　完了です！