MotionBoardにはボタンアイテムというものがあります。あらかじめ登録された動作(ボタンアクション)が実行されるアイテムです。ボタンのカラーを変更したり、画像を使ったりと汎用性の高いボタンアイテムですが、マウスオーバー時やクリック時のデザインを変えることもできます。視認性が上がるだけではなく、ボード自体のクオリティを向上させたい場合に有効な設定です。

なお、以前の下記の記事ではボタンのデザインをかっこよくする方法や画像を使って手軽にボタンのデザインを変える方法をお伝えしました。

ボタンのデザインを変える~ボタンのデザインをかっこよくする方法を紹介!~

🕒️2020/8/3

MotionBoardにはボタンアイテムというものがあります。あらかじめ登録された動作(ボタンアクション)が実行されるアイテムです。ボタンのデザインはデフォルトだとシンプルなのでボードのテーマに合ったデザインにしたい時ってありませんか?今回は手軽にボタンをかっこよくする方法のひとつをご紹介します!ボタンのデザインの変更方法①まずはボタンの画像を用意します。   インターネットで入手できるボタン素材を使うか、PowerPointなどを使ってボタンの画像を作成します。②イメージアイテムを利用して、用意した画像をボタンを配置し...

WingArc TECH BLOG

それでは早速作ってみましょう。

ボタンの画像イメージを作成する

まずはボタンの画像を用意します。 PowerPointなどを使って、通常時用、マウスオーバー時用、クリック時用の3種類を作成しましょう。1つ作成してコピーし、カラーを変えればOKです。 PowerPointの図形アイテムを使えば簡単にボタン画像を作成することができます。

MotionBoardでボタンアイテムを作成する

任意の場所にボタンアイテムを作成します。

[詳細]をクリックします。

スタイル設定を以下の通り変更してください。

• 光沢効果の有効のチェックを外す(光沢効果の有効のチェックを外すことで、フラットな感じに変わります。)
• 不透明度のスライダーを一番左にする(不透明度を0にすることで透明になります。)
• 枠線の表示のチェックを外す(ボタンの枠線が消えます。)

次に、「通常時」、「マウスオーバー時」、「マウスダウン時(クリック時)」それぞれのボタン画像を設定します。

これで完成です!

ボタンを動的に変化させることで、ボードの完成度が一気にあがります。簡単にできるので是非試してみてください!