東京都渋谷のパッケージ・グラフィックデザイン 株式会社T3デザイン

意外と知らない?Adobe XDでの、便利機能

2021.03.24
知識 / ノウハウ
意外と知らない?Adobe XDでの、便利機能

こんにちは!ほぼ独学でWeb知識を身につけたWebデザイナーの”ナホ”です!現在はWebデザインを担当していますが、学生時代はグラフィックを専攻していたこともあり、T3デザインに入社するまでWeb知識は全然ありませんでした。入社が決まってからは、社内研修や独学でWeb知識を身につけ、今ではWebデザインをやる上では必須なツールであるAdobeXDを使いこなせるようになりました!今回このブログでは、私が作業をする上で見つけたAdobeXDでできることや魅力、便利機能など、沢山のポイントをご紹介したいと思います!

AdobeXDってなに?と思った方は、先にこちらのブログ記事「Adobe XDとは?どんなことができるのかまとめてみました。」をお読みください。


1. 実質3秒でハートが作れる!?-おまけに星

まずは、AdobeXDでハートを作る方法をお伝えします!デザイン経験のある方はIllustratorやPhotoshopでハートを作る時、線幅を太くしたり複数の図形を合成するなどしていたと思いますが、AdobeXDではもっと簡単にハートが作れちゃいます。

賢いAdobeXDには”イースターエッグ(隠しコマンド)”があるのをご存知でしょうか?まずは、こちらをご覧ください。

ハートを作成

図形の三角形を使い、ハートを作成していきます。

プロパティインスペクターを<3に

作成方法は超カンタン!プロパティインスペクター(画面右のパネル)の図形部分に「<3」と指定すれば完成です。あとは好きなカラーやサイズをお好みに合わせるだけです!

おまけに、星の作り方も載せておきます。こちらはイースターエッグではないですが、基本操作で簡単に作成することが可能です。

星を作成

2. XD外からもカラーが取れる

IllustratorやPhotoshopでスポイト機能を使う際、基本的にはIllustratorのスポイトはIllustrator画面内、PhotoshopはPhotoshopの画面内という風にツール内のみで使用することが多いと思います。あるいは、挿入した画像から色をとってくるなど...。しかしAdobeXDでは、PCの画面上のどこからでも色をとってくることが可能なんです!便利!ショートカット” i ” でもスポイトツールへの切り替えが可能です。

カラーを取る

3. パディングを使用したボタンデザイン

次はテキストの長さに応じて、可変するボタンの作り方を紹介します。従来のAdobeXDでは、テキストに変更が入るとボタンの長さも変えていました。これが意外と面倒でした。

ボタンを手動で作成

ですがAdobeXDを使い始めて、パディングという便利機能を見つけました。AdobeXDでのパディングとは、テキスト量に応じて要素が可変(伸び縮み)させる方法です。操作はとても簡単です。

ボタンを作成

テキストと要素をグループ化し、プロパティインスペクター(画面右パネル)のパディングを設定するだけです。まずは、パディング効果を適用させたいテキストとボタンデザインを作成します。その後、2つの要素を選択しグループ化。ショートカット「コマンド+G」でもいけます。

グループ化後、プロパティインスペクター(画面右パネル)レイアウトの中にパディングという機能が現れます。(※グループ化をしていないと、現れません。)

パディングを確認

パディングにチェックを入れると、初めに作成したボタンのパディングが反映されます。そしたら順に、上右下左の値をいれていきます。この時、実際のボタンでは指定した部分がピンク色に染まるのが確認できるので初めての方でもわかりやすいポイントだと思います。

文字数でかわる

これで、完成です。後はテキストを変更すればボタンデザインも自然に可変してくれます。ちなみに、改行で2段にすることも可能です!是非やってみてくださいね。

4. デザイン上でホバー実装

続いて、デザイン上でのホバー実装を紹介します。とても便利な機能なので是非使ってみてください。ホバーとは、カーソルが乗っている要素にスタイルを適用するためのものです。もっと簡潔に言えば、ボタンや画像などにカーソルを乗せたときに起こる演出です。 Webデザインでは、外観だけのデザインも大切ですが、カーソルを合わせた時の演出やクリックした後の演出、また認識のしやすさやユーザーの使いやすさなどその先も考えてデザインすることが重要になってきます。今では、UI/UX(ユーザーインターフェイス/ユーザーエクスペリエンス)という言葉も多く耳にするようになってきているのではないでしょうか。UI/UXのように、ユーザーの視覚に触れる情報や体験を考えてデザインすることが大切です。

今回のタイトルでもあるホバー実装は、UIに関わってきます。例としてよくあげられるのは、ボタンの認識のしやすさです。XDでは、デザイン上でもホバー実装を再現することができるのでコーダーさんとのデザイン確認の際でとても便利です。それではやっていきましょう。

まずは、ホバー前のボタンデザインとホバー後のボタンデザインを用意します。(ホバー後が簡易なものであればなくても大丈夫です)ホバー前をグループ化(ショートカット「コマンド+G」)し、プロパティインスペクター(画面右パネル)のコンポーネントを+で開きます。

ホバー用ボタンを作成
分かりやすいよう上部にホバー前後のデザインを配置していますが、実際には使わず、コンポーネントで行います。

初期設定のステートを「+」で開き、新規ステートとホバーステートのホバーステートを選択。これで、ホバー実装の下準備は整いました。コンポーネント内の「ホバーステート」が選択された状態でホバー時のデザイン(カラー)を設定します。

注意:必ずプロパティインスペクター(画面右パネル)がホバーステートの設定になっているか確認をしてください。この部分が初期設定のステートになっていたら実装ができません。

ホバー時の設定ができたら、プロパティインスペクター(画面右パネル)のホバーステートから初期設定のステートに戻して完成です。実装確認は、ボードを選択(ボード上でダブルクリック)して、「コマンド+Enter」。カーソルを当てれば実装完了です。(右上の再生ボタンでもプレビューを起動できます)

ホバーを実装

この設定を行うことで、プロトタイプの精度もグンとアップするので、是非試してみてください!Adobe XDで作るプロトタイプの記事はこちらをご覧ください。

5. 更なる便利機能に期待!

Adobe XDの便利機能をいくつかご紹介しましたが、意外と知らない情報もあったのではないでしょうか?AdobeXDにまだ触れていない方でも楽しく学べる記事を共有していきますので、その他も是非チェックしてみてください。

日に日にバージョンアップするAdobeXDは、これからも目が離せない最強ツールです。是非この機会に始めてみてはいかがでしょうか?最後までご覧いただきありがとうございました。

では、また!