材料と分量の間を点線で結ぶという、レシピなどでよく見かけるデザインを作成するのは意外と大変です。長さと、それぞれの単語との余白を手動で調整するのは、手間も時間もかかりますよね。

AdobeXDを使って、なんとか全自動で調節したいと思いデータを考えました。→できました！

ボタンを作る要領で、2種類のボタンを作成します。ボックスの塗りは白、線は黒にしておきます。単語とボックスをグループ化してパディングの設定を行いますが、
1つの単語は右揃えにし、もう1つは左揃えにします。そして、余白の設定を右広めと左広めにしてください。
右が広い方は、左揃え。左が広い方は右揃えにしておきます。　

右が広い方を左側に、左が広い方を右側に配置して、その間に点線を配置します。
この時、点線の長さは、配置の余白よりもすこし眺めにしておいてください。

点線を2つのボタンの中央に配置したら、それぞれのボックスの線をなしにします。
塗りはそのまま残しておきます。最後に全てをグループ化しておきます。

完成です。点線の長さと余白を自動調整してくれるデータができました！

#AdobeXD パディング機能のダブル使いで左右に配置した2つの単語の間のラインを、自動調整！ pic.twitter.com/E4Ark6CJnE

— Taniweb (@taniweb) September 17, 2021

投稿レシピなどでよくある2つの単語の間の線と余白の自動調整　＃AdobeXDはTaniweb制作の最初に登場しました。

AdobeXDで文字数に合わせて下線も伸縮させる方法。マーカー風は色がついたボックスを背景に置いてグールプ化し、パディングを設定するだけですが、点線と下線はレイヤーの順番にちょっとコツがありました。

文字を囲むボックスを作っておき、そのボックスと点線をグループ化したものを、テキストより下に配置してパディングの設定をすることで、マーカー風と同じように伸縮してくれるようになりました。

基本

応用

マーカーではなく下線で、伸縮する見出しを作る方法。

AdobeXDでタイトルを作る際に、マーカー風の背景を付け、さらにそれを文字数に合わせて伸縮させるのは、パディング機能をオンにすれば簡単に実装できます。しかし、下線となると、余白の設定画面で「0（ゼロ）」以外の数字が選択できず、どうしたらいいのかわからないという方も多いと思います。ちょっと難しい応用編として、文字を乗せるボックスを作り、線とグループ化しておき、それを背景に持ってくることで、マーカーのように背景が文字数と一緒に伸縮する下線付きタイトルを作成することができます。

AdobeXDで文字数に合わせて下線も伸縮させる方法。マーカー風は色がついたボックスを背景に置いてグールプ化し、パディングを設定するだけですが、点線と下線はレイヤーの順番にちょっとコツがありました。 pic.twitter.com/Mch5GFpnRh

— Taniweb (@taniweb) September 15, 2021

投稿AdobeXDで文字数に合わせて下線も伸縮させる方法。はTaniweb制作の最初に登場しました。

私は日頃から、簡単な資料を作成するのにもAdobeXDが便利なので、バンバン使っています。横書きで凝ったものじゃない場合は、PDFもこれでいけます。

ただ、時々、ボックスに長い文章を流し込んだ時に、余白を自動で調整する時としない時があります・・・

ちょっとならいいのですが・・・大量にあるとブチ切れそうになる時あります（泣）

スタックの下にあるパディング設定の「何か」が悪いのだと思っていたのですが、Twitterで調べてもわからなかったのですが、今日、気づいてスッキリしました〜最初のボックスを作る時に「塗り」のチェックを外してしまうと、パディングが効かないんです。そんなことだったのね。

実は、一番最初に、ボックスを作成する際に、ボックスの中を透明にしてしまった状態で、グループ化し、パディングを作成すると・・・

余白を自動で取得してくれないというのがわかりました。

最初に、中を白地の状態で作成、その後透過させた場合は、キチンと余白を自動で取得してくれました。

盲点なので、注意が必要です。

illust / 昔の少女マンガ風イラスト　https://www.actzero.jp/developer/report-5426.html

投稿AdobeXDでボックスに長い文章を流し込んだ時にパディングが効いていない時の注意点はTaniweb制作の最初に登場しました。

また、AdobeXDからPSDへ変換すると、言語オプションが「東アジア」から初期設定に変わってしまい、文字の段落設定から禁則処理が抜け落ちてしまいます。AdobeXDには、禁則処理という項目が無いからです。

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

ですから、テキスト編集のことを考えると、禁則処理が使えるようにしておく必要があります。その為には、ファイルの言語オプションを「東アジア言語の機能」にしなければなりません。これらを踏まえ、AdobeXDからPSDへ変換したファイルを、禁則処理が使えるように作り変える手順を考えました。

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の中身が、まるごとコピーされました、これで、新規でテキストを記載すれば、禁則処理が使えるようになります。（コピーしたテキストには適応されません）　完了です！

投稿AdobeXDからPSDへ変換し、カラーマネージメント対応にするのと、禁則処理が使えるようにする手順はTaniweb制作の最初に登場しました。