MARUKU Blog

【Adobe XDでカンタン実装!】ステート機能でボタンをインタラクティブに(基本編)

WEBサイトをデザインするにあたって欠かせないのがボタンデザイン。
XDでデザインすると、ボタンに動きをつけることができます。
ボタンにカーソルを置いた時にどんな動きをするのか、デザインの段階でクライアントへイメージを伝えられるといいですよね。
今回はマウスオーバーで動きが変化する基本的なクリックボタンの作り方をご紹介します。

 ボタンの色を変える

長方形ツールで四角形を作成し、ボタンにテキストを配置します。

作成した四角形とテキストをどちらも選択します。

ボタンを選択したら右クリックし、「コンポーネントにする」を選択します。

右上のコンポーネントの「初期設定のステート」の右側にある「+」をクリックし、「ホバーステート」を選択します。

「ホバーステート」が選択された状態のまま、ボタンの長方形とテキストのカラーを変更します。

変更したら右上のコンポーネントで「初期設定のステート」を選択します。

これで完成です。
確認するには画面右上のデスクトッププレビューボタンをクリックします。

ボタンの大きさを変える


楕円形ツールで円を作成し、ボタンにテキストを配置します。

作成した円とテキストをどちらも選択します。

ボタンを選択したら右クリックし、「コンポーネントにする」を選択します。

右上のコンポーネントの「初期設定のステート」の右側にある「+」をクリックし、「ホバーステート」を選択します。

「ホバーステート」が選択された状態のまま円をダブルクリックし、サイズを大きくします。

変更したら右上のコンポーネントの「初期設定のステート」を選択します。

これで完成です。
確認するには画面右上のデスクトッププレビューボタンをクリックします。

ボタンのテキストの色を変える


長方形ツールで四角形を作成し、ボタンにテキストを配置します。

テキストを1つ選択します。

ボタンを選択したら右クリックし、「コンポーネントにする」を選択します。

右上のコンポーネントの「初期設定のステート」の右側にある「+」をクリックし、「ホバーステート」を選択します。

「ホバーステート」が選択された状態のまま、テキストのカラーを変更します。

変更したら右上のコンポーネントで「初期設定のステート」を選択します。

全てのボタンを同じように設定したら完成です。
確認するには画面右上のデスクトッププレビューボタンをクリックします。

ボタンに下線をつける


ボタンとなるテキストを配置します。

テキストを選択して右クリックし、「コンポーネントにする」を選択します。

右上のコンポーネントの「初期設定のステート」の右側にある「+」をクリックし、「ホバーステート」を選択します。

「ホバーステート」が選択された状態のまま、テキストをダブルクリックします。

ダブルクリックしたらテキストの下に線を追加します。今回は長方形ツールで高さ3pxの線を作成しました。

線を追加したら、右上のコンポーネントで「初期設定のステート」を選択します。

これで完成です。
確認するには画面右上のデスクトッププレビューボタンをクリックします。

ボタンの矢印のみ動かす


テキストと矢印でボタンをデザインします。
今回は矢印の動きがわかりやすいように線も追加しました。

作成したボタンの要素を全て選択します。

ボタンを選択したら右クリックし、「コンポーネントにする」を選択します。

右上のコンポーネントの「初期設定のステート」の右側にある「+」をクリックし、「ホバーステート」を選びます。

「ホバーステート」が選択された状態のまま、矢印のみを右側に動かします。

変更したら右上のコンポーネントで「初期設定のステート」を選択します。

これで完成です。
確認するには画面右上のデスクトッププレビューボタンをクリックします。

作成したボタンの動く速さを調整したい場合の設定


作成したボタンをプレビューで確認した際に、ボタンの切り替わる速度が気になる場合はプロトタイプモードで設定を変更します。
今回は、①で作成したボタンデザインをもとに、マウスオーバー時にゆっくり色が切り替わる設定をご紹介します。

XDの画面左上にある「プロトタイプ」をクリックします。

作成したボタンを選択して、プロトタイプの画面右側に表示されているアクションの種類でトランジションを選び、アニメーションをディゾルブに設定したら、デュレーションの秒数を選択します。
デュレーションの秒数は今回は0.3秒にしました。

これでマウスオーバーでゆっくり色が切り変わるボタンの完成です。

まとめ

今回は基本編としてボタンアクションのみの紹介でしたが、ステート機能を使うことによりスライダーやドロワーメニュー(ハンバーガーメニュー)、チェックボックス等へのリッチなインタラクション作成も可能です。
クライアントへのイメージの共有やフロントエンジニアへの説明も楽になるステート機能、ぜひ活用してみてください。

Webサイトの効果、
感じてますか?

ホームページやECサイト、キャンペーンLPなど
企画制作~リード獲得や集客 / 売上向上を目的とした
デジタルマーケティング領域の伴奏型運用まで、
効果的なWebサイトについてのご相談はMARUKUにお任せください。

関連する記事

【2022年度版】デザイナーが選ぶイラストが印象的なLP 5選

今回は、企業や商品のブランディングや販促など、サイトで伝えたい狙いに対し、イラストを効果的に用いた印象的なサイト5選をお届けします。 永谷園 めざまし茶づけ イラストを効果的に用いることで、お子さんと一緒に親子で楽しめる…

【2022年度版】デザイナーが選ぶ和の魅力を感じるサイト5選

今回はデザイナー目線で選んだイラストや写真を効果的に用いて和風に仕上げた、デザイン性の高いサイトを中心にご紹介します。 いつか私も・・・そんな気分にさせてくれる、花嫁日和 花嫁日和®︎|京都 大阪 奈良 神戸 姫路 岡山…

【2022年度版】デザイナーが選ぶ魅力的な採用サイト5選

今回はデザイナー目線で参考にしたいUI/UX設計、ワクワクする施策が散りばめられているデザイン性の高いサイトを中心にご紹介します。 色んな仕掛けが満載!見て、触って、楽しいユーザー体験ができるスタジオアリス「…

人気の記事