acokikoy's notes

最近気になる=[NoCode, Shopify], I am..=[Python, ウクレレ, マニュアル車, CMS] LoveなWebディレクター

勉強ノート》「世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 」著:北村 崇

Adobe XD でワイヤーフレームを書けるようになるべく、1日集中で、教科書片手に使い方を習得する作戦。

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

モチベーション

ここ1,2年、デザインをAdobe XD形式で提供される比率が高まった。案件比でも XD > Photoshop は同じかややXDが勝る感じ。Zeplin連携例も増えた。

他方、自分が書く側のツールとしてAdobe XDは β版以来注目していた。 スピーディーで整合性の高いワイヤーフレーム作成や、プロトタイプによるコミュニケーション効率面での高いポテンシャルが魅力的だ。

にもかかわらず、"触ったことがある"レベルで放置しており、業務で "○日までにワイヤーフレームを書く必要がある"場面で、操作に習熟していないがために毎度 PowerPointKeynoteに逃げてしまっていた。

目標:Adobe XD を覚えて効率的にワイヤーフレームを書けるようになる。

学習note

本書はハンズオン形式で、基本機能の習得から始まり、最後はプロトタイプを作りあげるところまで通せる構成。XD自身がシンプルなツールなこともあって、これ1冊通すと一通り使えるようになる。

  • 前半の XDでオブジェクトを作る、曲線やアイコンを書いたりテキスト、画像を扱うパートは、PhotoshopPowerPointの操作との共通点が多く、さらっと流せた。ワイヤーフレーム書く時は、複雑なデザイン操作は必要ないしね。

    • 。。。といいつつ、小学校の時に図工「2」を貰った私なので、かわいいおさかな が書けてぷち嬉しかったww
      f:id:acokikoy:20200209113119p:plain
      かわいいおさかなできあがり♡
  • リピートグリッドに、複数画像やテキストファイルからデータ流し込む機能がステキだ。ワイヤーフレームでよくあるグローバルナビや、ニュース一覧などのパーツ作成が、あっという間に、かつ(ダミーテキストじゃなく)それらしい内容で作れる。

  • アセット機能による文字スタイル、コンポーネント(モジュール化したパーツ)の管理。これもワイヤー書く時に活躍する機能だな。
  • プロトタイプの共有機能: コメント機能で関係者とのコミュニケーション、フィードバック対応が行える。簡単なタスク管理(がっつりは無理ぽ)。
    • アートボード上の該当箇所に、コメントをピン止め。
    • コメントに "解決済み" ステータスをつけられる。
  • インタラクションの設定: "ここをクリックするとこうなる" の共有。アニメーション効果により画面遷移の途中過程のイメージを表現できる。

  • ショートカットは覚えると非常に効率があがる。XDは機能が多くないので、覚えるのも楽。

  • 「COLUMN」枠の内容が、実践的なものばかりで嬉しい。p180の 「全グリッドをまとめて書き換える」 とか、知らないと仕事の時間が10分無駄になる良Tips。
  • XDは開発スピードが速いために、現行バージョンと本(2018年発刊)の説明とで多少の相違はあるが、いずれも細かい点であり、障害にはならなかった。良くできた教科書。