Yoshipan Blog - webdesign -

Adobe XDでテキストに下線をつけられるように、でも途切れる。

公開日：2017-12-18 最終更新日：2019-04-19

※この記事は「Adobe XD Advent Calendar 2017」の16日目のエントリーです。

私はWebデザイナーと名乗っていますが、ここ1〜2年はデザインカンプを作らないことが増えてきました。案件の50%はワイヤーフレームからいきなりコーディングしています。

残りの50%の「デザインカンプを作る場合」は、2017年はAdobe XD 一択でした！！

※このあたりのWeb制作のワークフローについては「WordBench京都11月」でお話したので、詳細は下記をご覧ください。

WordBench京都11月に登壇しました。

今年作ったデザインカンプはすべてXD製だった。

元々Fireworks LOVERだったのが開発終了で泣きながらPhotoshopやIllustratorに移行した身としては、WebのUI/UX制作に特化したツールは非常に使いやすいです。Adobe課金（Creative Cloudサブスクリプション）している方なら使わなきゃ損です！！

とてもシンプルなのでPhotoshopやIllustratorなどのAdobeユーザーなら2時間触れば大体マスターできます！

良くも悪くも超シンプル。足りない機能もある。

シンプルなのがメリットでもありますが、「あと一歩…！」なところもあります。

テキストに下線が付けられなかった！

私が一番「おいッ！！」って思っていたのは「テキストに下線（underline）がつけられない」ことでした。WebサイトのUI作るなら絶対いりますよね、これ！！

本文中のテキストリンクに下線つけること多いですよね！都度ラインツールで文字の下に線を書かなければいけないし、うっかりテキストだけ移動してしまうと線だけ置いていかれます。グループ化しておけば良いのだけど、地味に面倒くさいよ！！

機能要望はリクエストできる。

公式サイトのUserVoiceで「バグ報告」や「機能要望」を出すことができます。検索すると、既に「Underline text」の要望が上がっていたので私もこれに投票しておきました。

1070人もの同士がいたのですね！！

12月のアップデートで実装完了の連絡が来た！！

随分前だったのでVoteしたことをすっかり忘れていましたが、つい先日、なんと実装完了のメールが届きました！

こうやって丁寧にユーザーとやり取りしてくださる姿勢は素晴らしいですね！やっぱAdobeだな！！

満を持して「下線」がひける！！…ハズだったけど…

早速アップデートしてみると…出ました！待望の「U」ボタン！！

ショートカット（⌘U）も使えます！これ、これだよ！！ありがとうAdobeさん！！

あれ…？！ なんか思ってたのと違う…？？

漢字や句読点の下で線が途切れるんです…。最初はバグかと思ったけど、公式ページ「Adobe XD 12月アップデートリリース！テキストの下線、CCライブラリパネルの強化など #AdobeXD」を確認すると仕様のようです…。

他のツールでは単にテキストに下線を引くだけですが、XDのテキスト下線付け機能はディセンダ部分にはかからないように引かれるため、 筆記体でも活字体でも見た目を美しく仕上げられます。

とのこと。

いや、他のツールと同じく単にテキストに下線を引くだけでよいのだけど！！

きっとリクエストしていた皆が欲しがってた「テキストの下線」って、CSSの「text-decoration: underline;」のことですよね。「筆記体でも活字体でも見た目を美しく仕上げられる装飾的な下線」じゃないですよね？？

改行すると線が途切れなくなる？！

アレコレ触ってみたのですが、私が見つけた回避方法は、「下線を引いたテキストを途中で改行すると、何故か線がまっすぐになる」でした。一度改行した後delete（WindowsはBackSpace）で改行を取り消しても下線はまっすぐのままです。（日本語のみ。英字はダメだったので、むしろこっちの方がバグかもしれない。）

でも文章の一部だけに下線を付ける場合はダメでした。

2019.4.19追記：いつのまにかこのやり方でもダメになってしまいました。（つまり途切れる方が仕様で、この回避方法の方がバグだったのでしょう…）いよいよ手立てがなくなりましたね…。

どなたか良いやり方をご存知の方、ご教示くださいませ！！

Web制作 > 本・ツール・アプリ紹介 タグ: Adventar, Webデザイン, XD