webデザインを作成する際についつい忘れがちになってしまうのがユーザーインタラクション時のデザイン（マウスホバーやボタンのクリックなど）です。

弊社ではPhotoshopでデザインをする際には別途レイヤーを作成したりPSDを分けて用意したりと仕様に応じて様々な工夫をしていますが、AdobeXD（以下XD）のコンポーネントに追加されたステート機能を利用すればとてもスマートに管理できるようになりました。

今回はコンポーネントとステート機能について簡単にご紹介いたします。

コンポーネントとは

コンポーネントの作り方

コンポーネントの作り方は非常に簡単で、コンポーネント化したいオブジェクト（複数も可）を選択し、「右クリック > コンポーネントにする」、もしくは選択状態で「Ctrl + k」で作成可能です。

新規に作成されたコンポーネントはマスターコンポーネントとなり、このコンポーネントをベースとして複数のコンポーネントを複製して管理していきます。

コンポーネント化されたオブジェクトは選択時に全体が緑色の線で囲まれます。また、マスターコンポーネントは左上のひし形のハンドルが塗りつぶされた状態になり、他のコンポーネントと区別できます。

コンポーネントとステート

2019年の11月に行われたアップデートにより、コンポーネントにステート機能が追加されました。

これにより、コンポーネントが状態を持つようになり、その状態に応じてデザインを切り替えられるようになりました。

このアップデート以前はインタラクションを実現するために複数のアートボードを用意して対応してきましたが、ステート機能が追加されたことによって非常に簡単にインタラクティブなデザインが作れるようになりました。

adobe.comより

ボタンコンポーネントにマウスホバーをかけてみる

先ほど作成したボタンコンポーネントにマウスホバーした際のインタラクションを追加してみます。

さいごに

いかがでしたでしょうか。コンポーネントとステート機能について簡単ですが紹介させていただきました。

今回はマウスホバーというとてもシンプルな例を取り上げましたが、工夫次第ではスライダーやアコーディオンメニューなどのインタラクションを実現することも可能です。

細かい動作の指定はまだ難しいですが、クライアントやコーダーに意図を伝えることはできますので、ぜひご活用ください。

この記事を書いた人

なかもとソリューション事業部 マークアップエンジニア

企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。

この執筆者の最新記事

この執筆者の記事一覧

• 2024年9月20日WEB:not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう
• 2024年7月31日WEB:nth-child()擬似クラスで指定した順番・範囲の要素を取得する
• 2024年5月23日WEB脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法
• 2024年3月21日WEBCSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法