一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. XDでホバー・クリック時のデザインを作成してみよう!(後編)
2022/12/15XDデザインWebデザインソフトウェア

XDでホバー・クリック時のデザインを作成してみよう!(後編)

前編ではボタンのホバーデザインビューの3つの作り方をご紹介しました。

今回はホバー+クリック時のデザインビューを作成してみます。

こちらの04と05番です。

少し複雑そうですが、どのように作成するのでしょうか?

01 ON OFF切り替えボタン

 

  1. 01のデザインができたら、すべてを選択してコンポーネントにします。
  2. 新しくホバーステート1つと更に新規ステートを2つの合計3つステートを追加します。
  3. ホバーステートは上図のように「02 ホバーステート」に
    新規ステート1つ目は「03」に
    新規ステート2つ目は「04 03のホバーステート」に名前を変更しておきます。
  4. 今までデザイン画面になっていましたが、プロトタイプの画面に切り替えて、

    「02 ホバーステート」が選択されている状態でインタラクションの+ボタンを押します。

    上図のように設定します。
  5. 次に「03」が選択されている状態でインタラクションの+ボタンを押します。

    上図のように設定します。
  6. 最後に「04 03のホバーステート」が選択されている状態でインタラクションの+ボタンを押します。

    上図のように設定します。
  7. 初期設定のステートに戻して終了!

05 スライダー

  1. 【準備】スライダー画像と同じサイズのマスク用のオブジェクトを作成し、
    マスク用のオブジェクトが1番上になるように01と02を重ねます。
    ※この時スライダーごとにグループ化しておくと後から編集しやすいです。
     後からクリックしたときの設定を行うために矢印のボタンデザインもグループ化しておきましょう。
  2. 【準備】全てのオブジェクトを選択した状態で、
    右クリック「シェイプでマスク」を選択しマスクをかけます。
  3. すべてを選択してコンポーネントにします。
  4. 新規ステートを2つ追加します。
    「ステート2」「ステート3」とします。
  5. 「ステート2」「ステート3」のデザインを下の図のようにそれぞれ変更します。(移動させます)
  6. プロトタイプ設定に画面を切り替えて、

    「初期設定のステート」が選択されている状態で
    ボタンデザイン部分を選択してインタラクションの+ボタンを押します。

    上図のように設定します。
  7. 「ステート2」「ステート3」も同様にインタラクションを設定します。

  8. 初期設定のステートに戻して終了!

前編後編に分けて5つのホバー・クリック時のデザインビューの
作成方法をご紹介しました。

 

コーディング着手前にXDで動きを再現できるのはうれしいですね!
今後もどんどんXDを活用していきたいと思います!

 

この記事を書いた人:kojima

デザイナーのkojimaです! 休日は毎日ジム通い。今はホットヨガにはまり中・・・

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-211-9898 / FAX.052-211-9899

お問い合わせ