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

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

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

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

ブログBLOG

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

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

今までWebデザイン制作時はもっぱらPhotoshopを使用していましたが、

去年の末辺りからXDを使用するようになりました。

切り替え時は苦戦することが多かったのですが、

今では「XDってめちゃくちゃ良いじゃん!」と思えるようになりました。

私が思うXDの魅力をざっと上げてみます。

  • サクサク動く!
    アートボードをたくさん並べても他のソフトウェア程重くならない。
  • アートボード外にオブジェクトを配置できる。
  • ある程度のベクター画像が作れる。
  • adobeイラストレーター上にあるベクターデータをXDにコピペし、
    グループ化解除すると各パーツごとに編集、移動させることができる。
  • そのベクターデータの色や形を変更することができる。
  • ホバー・クリック時のデザインビューを作れる。

といった感じです。

今回はこの中の1つ、「ホバー・クリック時のデザインビューを作れる」ことに焦点を当てて、

5つのホバー・クリック時のデザインの方法を前編後編でご紹介したいと思います。

前編は01~03番のボタンのホバーデザインビューの作り方です。

01 シンプルに色を変更

  1. ボタンデザインができたら、すべてを選択して
    右クリック「コンポーネントにする」でコンポーネントにします。
  2. 新しくホバーステートを追加します。
  3. 新しく作ったホバーステートが選択されている状態でホバー後の色に変更します。
  4. 初期設定のステートに戻して終了!

02 中央から色が切り替わる

少し難易度が上がります。

 

  1. 【準備】図のようにオブジェクトを4つ準備して、上から01.02~と順番になるように全て重ねます。
  2. 【準備】全てのオブジェクトを選択した状態で、
    右クリック「シェイプでマスク」を選択しマスクをかけます。
  3. すべてを選択してコンポーネントにします。
  4. 新しくホバーステートを追加します。
  5. 新しく作ったホバーステートが選択されている状態で
    03番の左のオブジェクトは左に移動させ、マスクの外へ。
    03番の右のオブジェクトは右に移動させ、マスクの外へ。

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

03 サイドから色が切り替わる

02ができればこちらも簡単です!

 

  1. 【準備】図のようにオブジェクトを4つ準備して、上から01.02~と順番になるように全て重ねます。
  2. 【準備】全てのオブジェクトを選択した状態で、
    右クリックから「シェイプでマスク」を選択しマスクをかけます。
  3. すべてを選択してコンポーネントにします。
  4. 新しくホバーステートを追加します。
  5. 新しく作ったホバーステートが選択されている状態で
    03番のオブジェクトを右に移動させ、マスクの外へ。
  6. 初期設定のステートに戻して終了!

 

今回は3つホバーデザインの作成方法をご紹介しました。

次回は04と05のクリック時のデザインを作成してみます!

 

この記事を書いた人:kojima

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

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

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

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

花のやについて

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

お問い合わせ