こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。
趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
Adobe XD で何ができるのか？イラレやフォトショとは何が違うのか？
突き詰めていきたいと思います。
ホームページ作のためのワイヤーフレームやデザインの制作を作る際に役立ちます。
さらに動きのあるサイトイメージはクライアントやコーダーさんへ伝えるのが
難しかったと思いますが、XDのモーション機能で見せて伝えることが可能となります。
地味に分かりづらいプロトタイプ導線の操作方法をご紹介していきます。
プロトタイプで導線を引くとこんな感じで普通のサイトやアプリのような動きが再現できてしまいます。
あまりにもサイトぽすぎるのでこのままサイト公開してくださいと言われるそうな
この後にコーディング作業が待っております！
プロトタイプとは
XDは「デザイン」「プロトタイプ」「共有」と切り替えることによりそれぞれの機能の設定を行うことが可能になります。
プロトタイプはデザインやアートボードに動きをつけるための機能設定になります。
プロトタイプでできること
サイト導線を作る
ボタンをタップで着地点のアートボードに飛ぶことが可能
デザインからプロトタイプモードに切り替えると
アートボードやデザイン要素を選択するだけで導線が引けるようになります。
見せたいアートボードだけ選べる
フロー（共有した時に最初に出てくる画面）を決めることで不要なデータを見せずに共有可能になります。
アートボードを選択するとホームアイコンが左上に現れます
トップに持っていきたいアートボードのホームアイコンをクリック「青色」に変化したらトップになっている目印です。
▶︎
全てのアートボードを結ぶとこんな感じ
あくまでサイトのイメージをつけやすくするためなのでこの程度の表現イメージでOKだと思います。
ぜひ実践で取り入れてみてください〜
コメント