Lesson

タップで見た目が変わるボタンをデザイン - 全3回

タップで見た目が変わるハンバーガーボタンをデザイン

このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。

Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。

ボタンコンポーネントの作成とステートの追加

線ツールで予め作成した3本の線が用意されています。まずは、これらすべてを選択してから、コンテキストメニューを開いて「コンポーネントにする」を選択します。これで3本の線がコンポーネント化されます。

続けて、コンポーネントに新しいステートを追加します。プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックして「新規ステート」をクリックすると新しいステートを追加できます。追加したステートには「Close」と名前をつけます。

Closeステートに、タップされた状態のボタンの見た目を指定します。Closeステートが選択された状態で、コンポーネントをダブルクリック等で編集モードにして、中央の線の横幅サイズを3に、一番上の線の角度を-45°に、一番下の線の角度を45°にします。全ての線を選択して、垂直方向と水平方向それぞれ中央揃えにします。これが閉じるボタンの見た目になります。

ステートにインタラクションを設定

インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。

初期設定のステートが選択された状態であることを確認したら、ハンバーガーボタンを選択し、右に表示される青い矢印をクリックします。これでインタラクションが追加されます。

追加したインタラクションの属性を設定します。プロパティインスペクターを使い、トリガーは「タップ」、アクションの種類は「自動アニメーション」、移動先は「Close」を選択します。さらに、イージングは「スナップ」に、デュレーションは「0.4秒」に設定します。

続いてCloseのステートを選択し、同様にインタラクションを追加します。移動先に「初期設定のステート」を選択する以外は、先ほどの設定をそのまま利用します。

ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンをクリックするとボタンの形状が変わることを確認しましょう。

アニメーションの調整

もう少し動きをつけたい場合は、線の角度の変化を大きくします。デザインモードに戻り、Closeステートを編集します。右側の線の角度を135°に、左側の線の角度を225°に設定します。

再度プレビューウィンドウで確認すると、線が回転しながらCloseボタンに変わることを確認できます。