勉強ノート》「世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 」著:北村 崇
Adobe XD でワイヤーフレームを書けるようになるべく、1日集中で、教科書片手に使い方を習得する作戦。
モチベーション
ここ1,2年、デザインをAdobe XD形式で提供される比率が高まった。案件比でも XD > Photoshop は同じかややXDが勝る感じ。Zeplin連携例も増えた。
他方、自分が書く側のツールとしてAdobe XDは β版以来注目していた。 スピーディーで整合性の高いワイヤーフレーム作成や、プロトタイプによるコミュニケーション効率面での高いポテンシャルが魅力的だ。
にもかかわらず、"触ったことがある"レベルで放置しており、業務で "○日までにワイヤーフレームを書く必要がある"場面で、操作に習熟していないがために毎度 PowerPointやKeynoteに逃げてしまっていた。
目標:Adobe XD を覚えて効率的にワイヤーフレームを書けるようになる。
学習note
本書はハンズオン形式で、基本機能の習得から始まり、最後はプロトタイプを作りあげるところまで通せる構成。XD自身がシンプルなツールなこともあって、これ1冊通すと一通り使えるようになる。
前半の XDでオブジェクトを作る、曲線やアイコンを書いたりテキスト、画像を扱うパートは、PhotoshopやPowerPointの操作との共通点が多く、さらっと流せた。ワイヤーフレーム書く時は、複雑なデザイン操作は必要ないしね。
- 。。。といいつつ、小学校の時に図工「2」を貰った私なので、かわいいおさかな が書けてぷち嬉しかったww
- 。。。といいつつ、小学校の時に図工「2」を貰った私なので、かわいいおさかな が書けてぷち嬉しかったww
リピートグリッドに、複数画像やテキストファイルからデータ流し込む機能がステキだ。ワイヤーフレームでよくあるグローバルナビや、ニュース一覧などのパーツ作成が、あっという間に、かつ(ダミーテキストじゃなく)それらしい内容で作れる。
- アセット機能による文字スタイル、コンポーネント(モジュール化したパーツ)の管理。これもワイヤー書く時に活躍する機能だな。
- プロトタイプの共有機能: コメント機能で関係者とのコミュニケーション、フィードバック対応が行える。簡単なタスク管理(がっつりは無理ぽ)。
- アートボード上の該当箇所に、コメントをピン止め。
- コメントに "解決済み" ステータスをつけられる。
インタラクションの設定: "ここをクリックするとこうなる" の共有。アニメーション効果により画面遷移の途中過程のイメージを表現できる。
ショートカットは覚えると非常に効率があがる。XDは機能が多くないので、覚えるのも楽。
- 「COLUMN」枠の内容が、実践的なものばかりで嬉しい。p180の 「全グリッドをまとめて書き換える」 とか、知らないと仕事の時間が10分無駄になる良Tips。
- XDは開発スピードが速いために、現行バージョンと本(2018年発刊)の説明とで多少の相違はあるが、いずれも細かい点であり、障害にはならなかった。良くできた教科書。