今更ながらAdobe XDの書籍での学習を一通り終えたよー

今までワイヤーフレームやデザイン起こす際は、主にフォトショップを用いて対応していたのだが、PCのメモリが不足している関係で、かなりもっさりした動きの中で対応していたので、どうにかならないかと考えていた。

また、社内でXDを使える人がいないこともあり、せっかくの機会にできるようにしておいたほうがいいと思ったのがきっかけだ。自分が覚えれば他の人にも教えられ、使える人が増えていくので、会社全体にもメリットが少なからずあるはずだ。

実際に学習してみると、動作も軽く、これまでイラレやフォトショを使ってきた人にとっては、操作が似ている部分が多いので、とっかかりやすいのではと感じた。

個人的に便利だなーと思ったのが、マスターコンポーネントやリピートグリッドの機能である。

まだ上手く説明できるようなレベルではないが、とにかくいかに手間を省いて効率よくできるかが考えられて設計されているように感じた。

例えば、マスターコンポーネントでは、同じデザインのボタンをたくさん使う場合などに役に立つ。クライアントにデザインを提出したあとに、ボタンの色を変えて欲しいと修正が入ったとする。この時に、フォトショであれば、全てのボタンの色を一つずつ変えていかなくてはならないが、XDでは一つのボタンの色を変更するだけで、他の全てのボタンが変更できてしまうのだ。

このマスターコンポーネントの機能は、ほんの一例に過ぎないが、とにかく何度も同じことをしないように工夫されているのだ。

リピートグリッドの例もついでにあげておく。「画像の枠＋画像の下側にテキスト」のようなデザインが繰り返し縦に並んで続くような時、対象部分を全て選択した上で、リピートグリッドを使うと、ハンドルの下の部分をドラッグするだけで、同じデザインが繰り返されるように調整することができるのだ。また、余白の調整も簡単に行えるのですごく便利な機能だと感じた。

さらにすごいのが、そこに画像やテキストを流し込みたい場合である。例えば、先程のリピートグリッドで５つの縦に並んだ要素を準備したとする。フォルダにあらかじめ5つの画像を準備しておき、フォルダ内の5つの画像を全て選択した状態で、XDの画像部分にドラッグ&ドロップすると、自動的に5つの画像が入ってくれるのだ。正直これを初めて見た時は、衝撃だった。

上記は画像の例で紹介したが、もちろんテキストでも可能である。やり方は画像とは少し異なるが、とにかくこのような便利な機能がたくさんあるので、これから学んでみたい方には十分おすすめできると感じた。

他にも、リンクを作成・共有できたり、プロトタイプでページ遷移の設定ができたりと、本当に幅広い機能がある。ここに書くと長くなりそうなので記載はしないが、とにかく興味深い機能が山ほどあるのだ。

とりあえず、今後はUdemyのXD講座も購入しているので、そちらを学習しつつ、書籍で理解できなかった部分や、忘れている部分も振り返りながら、基礎を覚えていけるようにしようと思う。