【UI/UX】Adobe XDをUI設計・デザインで実際に使った上での機能とか使い心地の話

この記事は約 8 分で読めます。

 

Adobeの出してるUI/UXプロトタイピングツール、XDについてです。

 

 

どうでもいいですけど、XDって、><くはー! って感じに見えてかわいいですよね。

Sponsored Link


 

><くはー!

 


 

UI設計・デザインとかに使ってみた

 

 

はいというわけで、XDです。
機会があったので使ってみました。

 

最初はこんな感じに設定できるんですね。
iPhoneとAndroidがあります。
他にもWEBとか、カスタムサイズで始めることが出来ます。

 

右下には「UIキット」とあっていろいろなXD形式のUIエレメント(要素)をダウンロードできます。(というかAppleとかのDeveloper向けページへのリンクとかです。)

 

どうでもいいですけど、なんでiOSって画面サイズが奇数なのか知らん。
割り切れる数字のほうがよくないですか?UIデザイン初心者なのであれなんですけど。
AndroidのアートボードをiOSのアートボードに変換すると小数点発生しまくって死にそうになるんですけど。

 

「せっかくAppleもGoogleも良いデザインガイドライン作ってるんだから規格も統一してくれよ。」0(:3 )~ =͟͟͞͞(’、3)_ヽ)_ ←筆者

 

 

 

というわけで、画面はこんな感じになります。
できることは多いですが、XD自体のUIはすっきりしてますね。

これは、要素を編集できる状態、つまり対象を選択した状態に対応して、ツールが右とかその辺に表示されるようになっているためです。
すばらしー。

 

ちなみに。掲載のUIデザインもろもろについては初心者製作のものなので、生ぬるい目で見てください。

 

ツールとか

 

 

よく使う右側のいろいろ。

上の整列ボタンは、イラレ使っている人なら見ただけでどういうのか分かるはず。

 

その下のリピートグリッドは―――下にGIF載っけましたが、グループ化―――しなくてもいいけど、そういう要素を同じように繰り返して作成できるやつです。

 

XDは、こいつをやけに推していますが、まああったら便利かなあくらいです。
いや、””失って初めて分かる大切さ””なツールかもしれません。
それなりに便利です。メニューとか情報を羅列する必要のあるページを作るのに重宝しますね。

 

あとテキストとか。
AndroidとiOSをやろうとする人は、AndroidのRoboto君とAppleのサンフランシスコちゃんをぜひダウンロードしましょう。(※フォントの話

サンフランシスコ(SF UIとかSF Proとか)は、公式配布が思いっきりMac向けでwindowsユーザーには優しくないですが、7Zipを使えば分解できるので頑張ってOTFをPkgファイルから発掘してください。すごい奥の方にあります。大変です。OTFでもTTFでもなんでもいいので優しい感じで配布してくださいお願いしますAppleさん。

Sponsored Link


 

アピアランス。

ここはイケてるUIを作ろうとすると、結構触るのではないでしょうか。
ドロップシャドウを使いまくるのはどうかと思いますが、マテリアルガイドラインに従いつつ適度にシャドウを落としていくと、階層的デザインをそれなりに実現できるのではないかとおもいます。
これをイラレでやるのはちょっと大変ですし、ありがたいですね。

 

ちなみに「背景のぼかし」はなんかよく分かりませんでした。
「背景のぼかし」を使っても、背↑景↓が→ぼけません。ひろしです…ひろしです…ひろしです…

 

※追記:あとで使ってみたらちゃんとぼけました。ひろしです。

 

 

左側です。

アセットです。ようはパーツ群ですね。

カラーとかテキストとかシンボルとかがあります。
これらに登録しておいたものは、微調整したいときに、適応されている対象すべてに編集の効果が反映されるので作業が楽になります。
たとえば、サブカラーとかアクセントカラーをやっぱこっちにしよー!と思った時、アセットのカラーから調整すれば一括で変更できます。

 

シンボルは便利です。
こいつもカラーと大体同じです。

ただシンボルは、一括変更させたいものをただコピー・ペーストするだけではダメですよ。
アートボードに配置する前にシンボルとして配置する必要があります。
シンボルを複数配置する際は、シンボルをコピー・ペーストしても大丈夫です。
何言ってるか全くわからねぇと思いますが、実際使えば分かります。

 

 

一番左!パスツールいろいろ。

パスの編集能力は、イラレには劣りますが、それなりに使えはします。
パス編集においては、イラレが上忍なら、XDは中忍くらいです。
イラレが火遁・豪龍火の術なら、XDは火遁・鳳仙火の術くらいです。

 

↑の画像のような、図形を組み合わせて作るオブジェクトぐらいならXDで作っていいと思います。
右側上のパスファインダー的なツールを使って「合体」とか「前面オブジェクトで型抜き」とかを使えば作れます。

角丸もアピアランスから簡単にオブジェクトに設定できます。

 

 

ただし、XDのパスファインダーは完全にパスを分離するものではなくて、こういう感じに↑”パスファインダーをしました”風になるだけなので、イラレを使ってきた人はなんか気持ち悪いかもしれません。※ごめんなさい、パス変換ありました。↓

ようは、型抜きしたように見える処理がされてるだけです!
これをパスにできる処理があるかもしれませんが、分かりません!まあUIはこういう風に見えればオッケー!的なので細かいことはキニシナイ。

 

※あった。↓

 

 

 

XDの良いところ

 

オブジェクトを移動したり、オブジェクト選択中にAltを押すとこんなガイドが出るぞ。

 

なんといってもAdobeが出しているUIデザイン専用ツールという点ではないでしょうか。

私のような、

  • 基本的にAdobe製ツールにこだわる、なにかしらの過程でデザインを学んだ経験のあるアドビマンな人たち
  • それとSketchとかいうMacユーザー限定デザインツールを使えない、芋くてまぶい、きっとMacユーザーには「ゲームオタクきも」と思われているwindowsユーザー

にとっての方舟な点です。
いいんだ。iMacとか全然うらやましくないし。
俺たち・私達にはPCゲームプラットフォームの王者、Steamが付いてるからね!!!!!!
はー!!PCでやるニーア楽しー!!

 

(Windowsって最高だな。)

 

学習効率とか考えるとね。いろいろ大変ですし。
inVISIONとかProttとかなんか、WEBツールのいろいろあるけど、よく分かりませんし。(思考停止

はい、そういう感じだと思います。

 

 

 

XDのダメなところ

 

割りとよく死ぬ

 

汚れたデスクトップも驚きの白さに。そう、Adobe XDならね。

 

XDって軽くてすごい:Dっていう意見も多く見かけますが、割りと死にます今のところ。

感覚的にいうと、Adobe側が想定してないような感じの操作をすると死にます。

 

死んだ瞬間の図

 

上の図では、電卓のボタンをやってたんですけど、記号をベクターにするのがめんどかったので日本語入力で「みぎ」って打って変換して「⇨」とかを入力していたんですね。
しかーし、アドベ先生は日本語が不慣れなのか二回やって二回フリーズ!!!!

しんどいですね。

 

それから、なんか負荷のかかるような動作――タスクトレイのアイコンぽちぽちしてウィンドウ表示したり隠したりとか(なにやってんだ俺)、パスがカオスなSVGを入れたりすると死にます。

 

うわああああああああああああああ

 

パスパスだらけのSVGは今のところ劇薬です。
普通に、解像度高めにしたPNGをドラッグ&ペーストしてお茶を濁しましょう。

ちなみにXDは、自動保存がありますなどと謳っていた気がしますが、死んだ場合それなりに作業差分が消失しますので「Ctrl+S」でこまめに保存するのはマストな作業です。
つらい。

 

とはいえ、XDは繊細でデリケートでガラスのハートなやつと思えば、かわいいものです。
道具としてうまく使っていきましょう。

 

 

おわりに

 

 

XD、いいぞ。

 

 

 

Sponsored Link

bitFlyer ビットコインを始めるなら安心・安全な取引所で

リム(Rhime)

リム(Rhime)

ブログの閲覧ありがとうございます。 記事がなにかのお役に立てたなら幸いです。 もし何か分からないことがありましたら、お気軽にコメント下さい。(DISQUSにログインするか各種SNSの連携で書き込みください。匿名投稿も可能です。) |【プロフィール】: リム(Rhime)。RhizomeBrain(リゾームブレイン)管理人。Twitter:https://twitter.com/CryptoRhizome 2017年3月から仮想通貨への投資を開始。株式投資は2年ほど。 読書が好き。 大学ではデザインを学ぶ。フラットデザイン・マテリアルデザイン勉強中。