MENU

Adobe Xdのインタラクションがすごい

2020 6/18
Adobe Xdのインタラクションがすごい

Adobe Xd、めっちゃすごい。

ウェブサイトでもアプリでもそうなんですが、絶対に動きってあるんですね。

ウェブサイトの場合ならば、マウスオーバーだとか、スライダーとか、アコーディオンとかはもちろんなんですが、決められた範囲内のスクロールとかっていうのももちろんあります。

アプリならば例えば、文字入力時のキーボードの表示や非表示なんかもそうです。

いわゆるユーザーインターフェイスっていう部分なんですが、どうしてもPhotoshopやIllustratorで表現するのは不可能なんですが、Xdならばそれらの大半が表現できるという印象です。

しかも結構かんたんに実装できる。

ぐぬぬ、ウェブサイトもこれくらい簡単に実装できればもっと楽なのに……。

いやいや、正直なところめちゃめちゃ食わず嫌いだったと思います。

今回はアプリのプロトタイプを作っていて、その中でのスクロールと、テキスト入力部分の表示非表示の切り替えなどを行いました。

最初は慣れていない操作なので、かなりの時間がかかってしまいましたが、一度コツを掴んでしまえば簡単になるんじゃないかなと思います。

基本的には動かしたい部分のパーツに対して、その部分を別のレイヤーでオーバーレイさせて実装している感じですね。

内部スクロールなどは、縦長のアートボードの表示部分だけを、オーバーレイさせているような感じです。

また、スマホアプリで、キーボードが下からにゅっと出てくる操作もオーバーレイ部分をスライドさせて実現させています。

なるほど、うまいこと考えたなと。

デザインする上でUIやUXまで必要ということは理解してましたが、Xdのような使いやすいツールが出てくることで、表現にも幅が出てくるんじゃないかと感じました。

ただ、こういう部分までデザインするということは非常にデザイナーの負担なんかも増えてきますし、もちろんかかってくるコストも上がってくるわけですから、どうやってペイするかも考えていかなければなりませんね。

Xdで表現するだけでも時間がかかるので、その分の時間でコーディングしてしまったほうが楽じゃねーの?という疑問も浮かんできましたが、それは一人でウェブサイトを作ったりしているだけの意見だということなんですね。

チームでやるときにはやはり見解の相違などもないようにXdのようなツールで共有することが必要である。

そうエンジニアが言っていましたが、なるほど納得です。

ちなみにこんな感じでスライダーやら色々と動かしたりできます。

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

松下 絵梨
2,750円(07/02 10:25時点)
発売日: 2020/05/29
Amazonの情報を掲載しています

この記事を書いた人

古田 健のアバター 古田 健 代表取締役

ウェブサイトつくったり、アプリ作ったりしています。
動画撮影・編集・グラフィックデザインとかもトータルでやってます。

最近Flutterによるアプリ開発をはじめました。
フロントエンド開発のレベルの底上げやってます。

目次
閉じる