Yoshipan Blog - webdesign -

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

公開日: 最終更新日:2019-04-19

adventar2017 Adobe XD

※この記事は「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」の要望が上がっていたので私もこれに投票しておきました。Adobe XDのUservoice

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

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

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

Adobe XDからのメール

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

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

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

Adobe XDのテキスト下線

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

あれ…?! なんか思ってたのと違う…??

Adobe XDのテキスト下線が途切れる

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

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

とのこと。

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

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

改行すると線が途切れなくなる?!

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

Adobe XDのテキスト下線が途切れる

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

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

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

Web制作 > 本・ツール・アプリ紹介 タグ: , ,

“Adobe XDでテキストに下線をつけられるように、でも途切れる。” への2件のフィードバック

  1. 初めまして。
    初めてコメントさせて頂きます。

    私自身もXDの下線には困っていたのですが、
    ①文章の最後に空白を入れる
    ②追加した空白のポイント数を2程度大きくする
    という方法で全体的に下線がきれいに表示されました。

    そのままだと空白にも下線が入ってしまうのですが、
    空白のフォントカラーを背景色に合わせれば、一応それっぽく見えると思います。

    面倒な事に変わりはないのですが、ご参考までに…

    • 酢こんぶさん

      コメントありがとうございます!!
      そして、有益な情報&めっちゃわかりやすい説明、ありがとうございます!!
      空白のフォントサイズを少し大きくすることで、ベースラインを少し下げるテクニックですね!思いつかなかった!!
      カンプのテキストにキレイな下線が必要な時に使わせていただきます、ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Back to top